Add load storage and set focus mode.

src/contentscripts.js

@@ -71,7 +71,7 @@ function focuseMode() {
     }
 
     // add focus mode
-    focus.Render( fixFocus( $focus ));
+    focus.Render( fixFocus( $focus ), site.html.exclude, storage.focus.bgcolor );
 }
 
 /**

src/focus/focus.js

@@ -21,10 +21,14 @@ var fcontrol = require( "controlbar" ),
 
     function Focus() { this.$target = null; }
 
-    /*
-        Add focus mode
-    */
-    Focus.prototype.Render = function( $target ) {
+    /**
+     * Add focus mode
+     * 
+     * @param {jquery} jquery object
+     * @param {array}  exclude html array
+     * @param {string} background color style
+     */
+    Focus.prototype.Render = function( $target, exclude, bgcolor ) {
         console.log( "=== simpread focus add ===" );
         this.$target = $target;
         // add focus
@@ -39,9 +43,15 @@ var fcontrol = require( "controlbar" ),
             tag     = $parent[0].tagName;
         }
 
-        // add background mask
+        // add background
         $( "body" ).append( bgtmpl );
 
+        // add background color
+        $( bgclsjq ).css({ "background-color" : bgcolor });
+
+        // delete exclude html
+        excludeStyle( $target, exclude, "delete" );
+
         // add control bar
         fcontrol.Render( bgclsjq );
 
@@ -52,6 +62,9 @@ var fcontrol = require( "controlbar" ),
             // remove focus style
             focusStyle( $target, focusstyle, focuscls, "delete" );
 
+            // add exclude html
+            excludeStyle( $target, exclude, "add" );
+
             // remove control bar
             fcontrol.Remove();
 
@@ -84,10 +97,6 @@ var fcontrol = require( "controlbar" ),
         }
     }
 
-    Focus.prototype.Get = function() {
-        
-    }
-
     /*
         Set focus style
         @param $target: jquery object
@@ -107,8 +116,48 @@ var fcontrol = require( "controlbar" ),
         }
     }
 
+    /**
+     * Hidden style
+     * 
+     * @param {jquery} jquery object
+     * @param {array}  hidden html
+     * @param {string} include: 'add' 'delete'
+     */
+    function excludeStyle( $target, exclude, type ) {
+        var i = 0, len = exclude.length,  sel = "";
+        for ( i; i < len; i++ ) {
+            tag  = htmltag2String( exclude[i] );
+            if ( tag ) {
+                if ( type == "delete" )   $target.find( tag ).hide();
+                else if ( type == "add" ) $target.find( tag ).show();
+            }
+        }
+    }
+
     return new Focus();
 
 })();
 
+/**
+ * Conver html to jquery object
+ * 
+ * @param  {string} input include html tag, e.g.:
+    <div class="article fmt article__content">
+ *
+ * @return {array} formatting e.g.:
+    { "tag" : "class", "name" : "article" }
+ * 
+ */
+function htmltag2String( html ) {
+    const item = html.match( / (class|id)=("|')[\w-_]+/ig );
+    if ( item && item.length > 0 ) {
+        let [tag, name] = item[0].trim().replace( /'|"/ig, "" ).split( "=" );
+        if      ( tag == "class" ) name = `.${name}`;
+        else if ( tag === "id"   ) name = `#${name}`;
+        return name;
+    } else {
+        return null;
+    }
+}
+
 module.exports = focus;