mofron-comp-accordion - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

index.js

@@ -7,20 +7,22 @@ /**
 const mf     = require('mofron');
-const Text   = require('mofron-comp-text');
-const Switch = require('mofron-comp-switch');
-const Horiz  = require('mofron-layout-horizon');
+const Text   = require('mofron-comp-clktext');
+const Switch = require('mofron-comp-clksw');
 const Click  = require('mofron-event-click');
-const VisClk = require('mofron-event-visiclick');
+const efSize = require('mofron-effect-size');
 
-/**
- * @class comp.Accordion
- * @brief accordion component for mofron
- */
 mf.comp.Accordion = class extends mf.Component {
-    
-    constructor (po, p2) {
+    /**
+     * initialize component
+     * 
+     * @param (mixed) title parameter
+     *                object: component option
+     * @pmap title
+     * @type private
+     */
+    constructor (po) {
         try {
             super();
             this.name('Accordion');
-            this.prmMap(['headComp', 'child']);
-            this.prmOpt(po, p2);
+            this.prmMap('title');
+            this.prmOpt(po);
         } catch (e) {
@@ -33,5 +35,5 @@ console.error(e.stack);
     /**
-     * initialize DOM contents
+     * initialize dom contents
      * 
-     * @note private method
+     * @type private
      */
@@ -41,33 +43,9 @@ initDomConts () {
             super.initDomConts();
+            this.title("");
+
+            this.child([this.title(), this.contents()]);
+            this.target(this.contents().target());
+            this.styleTgt(this.target());
             
-            /* init status component */
-            let sts = new Switch([
-                new Text('-'),
-                new Text('+')
-            ]);
-            this.stsComp(sts);
-            
-            /* init index component */
-            let conts   = new mf.Component();
-            let clk_swh = (clk1_cmp, clk2, clk3_prm) => {
-                try {
-                    /* change open status */
-                    clk3_prm.isOpen(!clk3_prm.isOpen());
-                    sts.swComp();
-                } catch (e) {
-                    console.error(e.stack);
-                    throw e;
-                }
-            }
-            let idx = new mf.Component({
-                layout : [ new Horiz() ],
-                event  : [
-                    new Click([clk_swh, this]),
-                    new VisClk('switch', conts)
-                ],
-                child  : [ this.stsComp(), this.headComp() ]
-            });
-            this.child([idx, conts]);
-            
-            this.target(conts.target());
+	    this.height("2rem");
         } catch (e) {
@@ -80,10 +58,31 @@ console.error(e.stack);
     /**
-     * status component setter/getter
-     *
-     * @param p1 (Component) set status component
-     * @param p1 (undefined) call as getter
-     * @return (Component) status component
+     * accordion title
+     * 
+     * @param (component) title component
+     * @return (component) title component
+     * @type parameter
      */
-    stsComp (prm) {
-        try { return this.innerComp('stsComp', prm, mf.Component); } catch (e) {
+    title (prm) {
+        try {
+	    if (undefined === prm) {
+                /* getter */
+		return this.innerComp("title");
+	    }
+	    /* setter */
+	    if ("string" === typeof prm) {
+                prm = new Text(prm);
+	    }
+            /* set click event */
+            let clk = (c1,c2,c3) => {
+                try { c3.folding(!c3.folding()); } catch (e) {
+		    console.error(e.stack);
+                    throw e;
+	        }
+	    }
+            prm.event(new Click([clk,this]));
+            this.innerComp("title", prm);
+            if (null !== this.height()) {
+                this.height(this.height());
+	    }
+	} catch (e) {
             console.error(e.stack);
@@ -95,16 +94,21 @@ throw e;
     /**
-     * head component setter/getter
+     * contents component
      *
-     * @param p1 (Component) set head component
-     * @param p1 (undefined) call as getter
-     * @return (Component) head component
+     * @param (component) contents component
+     * @return (component) contents component
+     * @type private
      */
-    headComp (prm) {
+    contents (prm) {
         try {
-            let ret = this.innerComp('headComp', prm, mf.Component);
-            if (undefined !== prm) {
-                prm.sizeValue('margin-left', '0.1rem');
-            }
-            return ret;
-        } catch (e) {
+	    if (undefined !== prm) {
+                prm.option({
+                    style: { "overflow": "hidden" },
+                    effect: [
+                        new efSize({ height: "0rem", tag: "Accordion-Size", eid: 2 }),
+                        new efSize({ tag: "Accordion-Size", eid: 3 })
+                    ]
+                });
+	    }
+            return this.innerComp("contents", prm, mf.Component);
+	} catch (e) {
             console.error(e.stack);
@@ -116,21 +120,64 @@ throw e;
     /**
-     * change event function setter/getter
-     *
-     * @param p1 (function) change event function
-     * @param p1 (undefined) call as getter
-     * @param p2 (mixed) function parameter
-     * @return (array) [function, parameter]
+     * height config
+     * 
+     * @param (string (size)) accordion height
+     * @return (string (size)) accordion height
+     * @type parameter
      */
-    changeEvent (fnc, prm) {
+    height (prm, opt) {
         try {
-            if ( (undefined !== fnc) && ('function' === typeof fnc) ) {
-                throw new Error('invalid parameter');
-            }
-            return this.arrayMember(
-                'changeEvent',
-                'array',
-                (undefined === prm) ? undefined : [fnc, prm]
-            );
-        } catch (e) {
+	    if (undefined === prm) {
+                return super.height();
+	    }
+	    let ttl = this.title();
+	    let hei = null;
+            try {
+	        hei = mf.func.sizeDiff(prm, ttl.height());
+	    } catch (e) {
+                hei = prm;
+	    }
+	    hei = mf.func.getSize(hei);
+	    if (0 > hei.value()) {
+                hei.value(0);
+	    }
+            super.height(hei.toString(), opt);
+	    this.contents().effect({ tag:"Accordion-Size", eid:3 }).height(hei.toString());
+	} catch (e) {
             console.error(e.stack);
+	    throw e;
+	}
+    }
+    
+    /**
+     * folding accordion and folding status getter
+     * 
+     * @param (boolean) true: folding accordion component
+     *                  false: unfolding accordion component
+     * @return (boolean) folding status
+     * @type function
+     */
+    folding (prm) {
+        try {
+            if (undefined === prm) {
+                /* getter */
+		return this.member("folding", "boolean", prm, false);
+	    }
+	    /* setter */
+	    let chg_sts = false;
+            if ( (true === prm) && (false === this.folding()) ) {
+                this.contents().execEffect(2);
+		chg_sts = true;
+	    } else if ( (false === prm) && (true === this.folding()) ) {
+		this.contents().execEffect(3);
+		chg_sts = true
+	    }
+            this.member("folding", "boolean", prm);
+	    if (true === chg_sts) {
+                let evt = this.changeEvent();
+		for (let eidx in evt) {
+                    evt[eidx][0](this, this.folding(), evt[eidx][1]);
+		}
+	    }
+	} catch (e) {
+            console.error(e.stack);
             throw e;
@@ -141,18 +188,43 @@ }
     /**
-     * open status setter/getter
+     * folding speed
+     * 
+     * @param (number) folding speed
+     * @return (number) folding speed
+     * @type parameter
+     */
+    speed (prm) {
+        try {
+            let ef_siz = this.contents().effect({ tag: "Accordion-Size" });
+            if (undefined === prm) {
+                /* getter */
+		return ef_siz[0].speed();
+	    }
+	    /* setter */
+            for (let idx in ef_siz) {
+                ef_siz[idx].speed(prm);
+	    }
+	} catch (e) {
+            console.error(e.stack);
+            throw e;
+        }
+    }
+
+    /**
+     * change event function setter/getter
      *
-     * @param p1 (boolean) set open status
-     * @param p1 (undefined) call as getter
-     * @return (boolean) open status
+     * @param (function) change event function
+     * @param (mixed) function parameter
+     * @return (array) [[function, parameter],..]
+     * @type parameter
      */
-    isOpen (prm) {
+    changeEvent (fnc, prm) {
         try {
-            let ret = this.member('isOpen', 'boolean', prm, true);
-            if (undefined !== prm) {
-                /* execute change event */
-                let evt = this.changeEvent();
-                for (let eidx in evt) {
-                    evt[eidx][0](this, prm, evt[eidx][1]);
-                }
+            if ( (undefined !== fnc) && ('function' !== typeof fnc) ) {
+                throw new Error('invalid parameter');
             }
+            return this.arrayMember(
+                'changeEvent',
+                'array',
+                (undefined === fnc) ? undefined : [fnc, prm]
+            );
         } catch (e) {
@@ -159,0 +231,0 @@ console.error(e.stack);

package.json

 {
   "name": "mofron-comp-accordion",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "accordion component for mofron",
@@ -11,22 +11,17 @@ "main": "index.js",
     "type": "git",
-    "url": "git+https://github.com/simpart/mofron-comp-accordion.git"
+    "url": "git+https://github.com/mofron/mofron-comp-accordion.git"
   },
   "dependencies": {
-    "mofron-comp-text" : "",
-    "mofron-comp-switch" : "",
-    "mofron-layout-horizon" : "",
-    "mofron-event-click" : "",
-    "mofron-event-visiclick" : ""
   },
   "keywords": [
-    "mofron"
+    "front-end"
   ],
   "author": "simparts",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/simpart/mofron-comp-accordion/issues"
+    "url": "https://github.com/mofron/mofron-comp-accordion/issues"
   },
-  "homepage": "https://github.com/simpart/mofron-comp-accordion#readme",
+  "homepage": "https://github.com/mofron/mofron-comp-accordion#readme",
   "devDependencies": {
   }
 }

README.md

@@ -1,43 +0,32 @@
-# mofron-comp-accordion
-Accordion WebUI Component for mofron
+#   mofron-comp-accordion
+[mofron](https://mofron.github.io/mofron/) is module based frontend framework.
 
+ accordion component for mofron
+
+
 # Install
-
-```bash
-npm install --save-dev mofron
 ```
+npm install mofron   mofron-comp-accordion
+```
 
-# Quick Start
-require webpack
-
+# Sample
 ```html
-<html>
-    <head></head>
-    <body style="margin:0px;padding:0px;"></body>
-    <script src='./path/to/webpack/output.js'></script>
-</html>
-```
+<require>
+    <tag module="mofron-comp-accordion">Accordion</tag>
+    <tag module="mofron-comp-text">Text</tag>
+</require>
 
-example
-```javascript
-require("mofron");
-require("mofron-comp-accordion");
-
-var acd = new mofron.comp.Accordion();
-
-acd.add('Header 1', new mofron.comp.Text('Test Contents 1'));
-acd.add('Header 2', new mofron.comp.Text('Test Contents 2'));
-acd.add('Header 3', new mofron.comp.Text('Test Contents 3'));
-
-acd.visible(true);
+<Accordion speed=500 title="accordion">
+    <Text>test accordion</Text>
+</Accordion>
 ```
+# Parameter
 
-#class specification
+|Simple<br>Param | Parameter Name | Type | Description |
+|:--------------:|:---------------|:-----|:------------|
+| ◯  | title | component | title component |
+| | height | string (size) | accordion height |
+| | speed | number | folding speed |
+| | changeEvent | function | change event function |
+| | | mixed | function parameter |
 
-| Method            | Parameter                                                                    |    Description                  |
-|:------------------|:-----------------------------------------------------------------|:-------------------------------|
-| add                   | string : header title<br>object : Component           | add contents  |
-| remove             | number : contents index                                           | disabled target contents  |
-| changeEvent   | function : function for change event  |set change event function |
-| state                 | number : contents index                                               | state of target contents <br>  true : target contents is open<br>  false : target contents is closed|
-

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 5 instances in 1 package

Misc. License Issues

License

(Experimental) A package's licensing information has fine-grained problems.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8594

increased by12.52%

Dependency count

0

decreased by-100%

Number of package files

5

increased by25%

Number of medium license alerts

0

decreased by-100%

Lines of code

220

increased by48.65%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

2

decreased by-33.33%

Number of medium quality alerts

1

decreased by-83.33%

Worsened metrics

Number of lines in readme file

33

decreased by-25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedmofron-comp-switch@

• - Removedmofron-comp-text@

• - Removedmofron-event-click@

• - Removedmofron-event-visiclick@

• - Removedmofron-layout-horizon@

• - Removedmofron-comp-switch@0.0.9(transitive)

• - Removedmofron-comp-text@0.15.2(transitive)

• - Removedmofron-event-click@0.7.1(transitive)

• - Removedmofron-event-common@0.4.1(transitive)

• - Removedmofron-event-visiclick@0.0.7(transitive)

• - Removedmofron-layout-horizon@0.3.0(transitive)