mofron-comp-appheader - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

index.js

@@ -11,3 +11,7 @@ /**
 const Click  = require('mofron-event-click');
+const Synhei = require('mofron-effect-synchei');
+const Hrzpos = require('mofron-effect-hrzpos');
+const Horiz  = require('mofron-layout-horizon');
 
+
 mf.comp.AppHeader = class extends Header {
@@ -18,3 +22,3 @@ constructor (po, ttl, nav) {
             this.name('AppHeader');
-            this.prmMap('logo', 'title', 'navigate');
+            this.prmMap(['logo', 'title', 'navi']);
             this.prmOpt(po, ttl, nav);
@@ -27,11 +31,19 @@ } catch (e) {
     
+    /**
+     * init dom contents
+     * 
+     * @note private method
+     */
     initDomConts() {
         try {
             super.initDomConts();
-            /* set area */
-            for (let idx = 0; idx < 3 ; idx++) {
-                this.target().addChild(this.getApphdrTgt(idx));
-            }
-            /* update target to contents area */
-            this.target(this.getApphdrTgt(1));
+            this.addChild(this.logo(), 0);
+            
+            let conts = new mf.Component({
+                layout : new Horiz()
+            });
+            this.addChild(conts);
+            this.addChild(this.naviWrap());
+            
+            this.target(conts.target());
         } catch (e) {
@@ -43,38 +55,26 @@ console.error(e.stack);
     
-    getApphdrTgt (idx) {
+    /**
+     * setter/getter logo image
+     * insert logo image to left side of title
+     *
+     * @param p1 (string) path to image
+     * @param p1 (mf.comp.Image) image object
+     * @param p1 (undefined) call as getter
+     * @return (mf.comp.Image) logo image
+     */
+    logo (prm) {
         try {
-            if ('number' !== typeof idx) {
-                throw new Error('invalid parameter');
+            if ('string' === typeof prm) {
+                this.logo().execOption({
+                    path : prm
+                });
+                return;
+            } else if (true === mf.func.isInclude(prm, 'Image')) {
+                prm.execOption({
+                    event  : this.getUrlJump(),
+                    effect : new Synhei(this),
+                    style  : [{ 'margin-left' : '0.2rem' }, true]
+                });
             }
-            if ((0 > idx) || (2 < idx)) {
-                throw new Error('invalid parameter');
-            }
-            if (undefined === this.m_apphdrtgt) {
-                this.m_apphdrtgt = [
-                    /* title area */
-                    new mf.Dom({
-                        tag       : 'div',
-                        component : this,
-                        style     : { 'display' : 'flex' }
-                    }),
-                    /* center area */
-                    new mf.Dom({
-                        tag       : 'div',
-                        component : this,
-                        style     : { 'display' : 'flex' }
-                    }),
-                    /* navigate area */
-                    new mf.Dom({
-                        tag       : 'div',
-                        component : this,
-                        style     : { 
-                            'display'      : 'flex',
-                            'margin-right' : '0px' ,
-                            'margin-left'  : 'auto'
-                        }
-                    })
-                ];
-            }
-            
-            return this.m_apphdrtgt[idx];
+            return this.innerComp('logo', prm, Image);
         } catch (e) {
@@ -86,34 +86,20 @@ console.error(e.stack);
     
-    logo (img, lof) {
+    /**
+     * get click function
+     *
+     * @note private method
+     */
+    getUrlJump () {
         try {
-            if (undefined === img) {
-                /* getter */
-                return (undefined === this.m_logo) ? null : this.m_logo;
-            }
-            /* setter */
-            if ('string' === typeof img) {
-                img = new Image(img);
-            } else if (true !== mf.func.isInclude(img, 'Image')) {
-                throw new Error('invalid parameter');
-            }
-            
-            this.switchTgt(
-                this.getApphdrTgt(0),
-                (swh_prm) => {
-                    try {
-                        if (null === swh_prm[1]) {
-                            swh_prm[0].addChild(img, 0);
-                        } else {
-                            swh_prm[0].updChild(swh_prm[1], img);
-                        }
-                    } catch (e) {
-                        console.error(e.stack);
-                        throw e;
+            let func = (p1, p2) => {
+                try {
+                    if (null !== p2.url()) {
+                        location.href = p2.url();
                     }
-                },
-                [this,this.logo()]
-             );
-             this.execAutoResize(img);
-             this.setUrlJump(img);
-             this.m_logo = img;
+                } catch (e) {
+                    console.error(e.stack);
+                    throw e;
+                }
+            };
+            return new Click([func, this]);
         } catch (e) {
@@ -125,11 +111,24 @@ console.error(e.stack);
     
-    title (prm) {
+    /**
+     * setter/getter header title
+     *
+     * @param p1 (string) header title
+     * @param p1 (mf.comp.Text) text object for mofron
+     * @param p1 (undefined) call as getter
+     * @return (string) header title
+     */
+    title (txt) {
         try {
-            let ret = this.text(prm);
-            if ((undefined === ret) && (null !== this.url())) {
-                /* setter */
-                let txt = this.text();
-                this.setUrlJump(txt[txt.length-1]);
+            let set_txt = null;
+            if ('string' === typeof txt) {
+                set_txt = this.title();
+            } else if (true === mf.func.isInclude(txt, 'Text')) {
+                set_txt = txt;
             }
-            return ret;
+            if (null !== set_txt) {
+                set_txt.execOption({
+                    event : this.getUrlJump()
+                });
+            }
+            return this.text(txt);
         } catch (e) {
@@ -141,22 +140,13 @@ console.error(e.stack);
     
+    /**
+     * setter/getter url jump target
+     * it jump to this url when user clicks logo or title
+     * set null if you don't want jump
+     * 
+     * @param p1 (string) url
+     * @param p1 (undefined) call as getter
+     * @return (string) url
+     */
     url (prm) {
-        try {
-            if (undefined === prm) {
-                /* getter */
-                return (undefined === this.m_url) ? './' : this.m_url;
-            }
-            /* setter */
-            if (null === prm) {
-                this.m_url = prm;
-                return;
-            }
-            if ('string' !== typeof prm) {
-                throw new Error('invalid parameter');
-            }
-            this.m_url = prm;
-            let ttl    = this.title();
-            for (let tidx in ttl) {
-                this.setUrlJump(ttl[tidx]);
-            }
-        } catch (e) {
+        try { return this.member('url', 'string', prm, './'); } catch (e) {
             console.error(e.stack);
@@ -167,62 +157,17 @@ throw e;
     
-    setUrlJump (prm) {
+    /**
+     * setter/getter navigate area
+     *
+     * @param p1 (Component Object) navigate component
+     * @param p1 (undefined) call as getter
+     * @return ([Component Object]) navigate component
+     */
+    navi (prm) {
         try {
-            if (true !== mf.func.isInclude(prm, 'Component')) {
-                throw new Error('invalid parameter');
-            }
-            let url = this.url();
-            if (null === url) {
-                throw new Error('could not find url');
-            }
-            prm.execOption({
-                event : [
-                    new Click(
-                        () => {
-                            try {
-                                location.href = url;
-                            } catch (e) {
-                                console.error(e.stack);
-                                throw e;
-                            }
-                        }
-                    )
-                ]
-            });
-        } catch (e) {
-            console.error(e.stack);
-            throw e;
-        }
-    }
-    
-    navigate (prm, rof) {
-        try {
             if (undefined === prm) {
                 /* getter */
-                return (undefined === this.m_navi) ? null : this.m_navi;
+                return this.naviWrap().child();
             }
             /* setter */
-            if (true !== mf.func.isInclude(prm, 'Component')) {
-                throw new Error('invalid parameter');
-            }
-            prm.execOption({
-                style : { 'margin-right' : (undefined === rof) ? '0.2rem' : rof }
-            });
-            
-            this.switchTgt(
-                this.getApphdrTgt(2),
-                (swh_prm) => {
-                    try {
-                        if (null === swh_prm.navigate()) {
-                            swh_prm.addChild(prm);
-                        } else {
-                            swh_prm.updChild(swh_prm.navigate(), prm);
-                        }
-                    } catch (e) {
-                        console.error(e.stack);
-                        throw e;
-                    }
-                },
-                this
-            );
-            this.m_navi = prm;
+            this.naviWrap().execOption({ child : prm });
         } catch (e) {
@@ -234,8 +179,16 @@ console.error(e.stack);
     
-    execAutoResize (prm) {
+    /**
+     * setter/getter navigate wrap
+     *
+     * @note private method
+     */
+    naviWrap (prm) {
         try {
-            super.execAutoResize(prm);
-            if ((undefined === prm) && (null !== this.logo())) {
-                super.execAutoResize(this.logo());
+            if (true === mf.func.isInclude(prm, 'Component')) {
+                prm.execOption({
+                    layout : new Horiz(),
+                    effect : new Hrzpos('right', '0.2rem')
+                });
             }
+            return this.innerComp('naviWrap', prm, mf.Component);
         } catch (e) {
@@ -242,0 +195,0 @@ console.error(e.stack);

package.json

 {
   "name": "mofron-comp-appheader",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "app header component for mofron",
@@ -11,3 +11,6 @@ "main": "index.js",
     "mofron-comp-txtheader" : "",
-    "mofron-event-click" : ""
+    "mofron-event-click" : "",
+    "mofron-effect-synchei" : "",
+    "mofron-effect-hrzpos" : "",
+    "mofron-layout-horizon" : ""
   },
@@ -14,0 +17,0 @@ "repository": {

New 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 3 instances in 1 package

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

Worsened metrics

Total package byte prevSize

7041

decreased by-21.53%

Dependency count

5

increased by150%

Lines of code

181

decreased by-20.26%

Number of medium quality alerts

6

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmofron-effect-hrzpos@

• + Addedmofron-effect-synchei@

• + Addedmofron-layout-horizon@

• + Addedmofron-effect-hrzpos@0.4.2(transitive)

• + Addedmofron-util-transform@0.0.5(transitive)