feat(layer-selector): add option to use Bricks in LayerItem

Right now only bounding box in Settings panel is a Brick. The idea is to switch all controls to appropriate bricks and bubble events up to future LayerCollection.
RAMP-PCAR · Apr 27, 2015 · 499bb65 · 499bb65
1 parent c99f984
commit 499bb65
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 22 deletions.
diff --git a/src/js/RAMP/Modules/filterManager.js b/src/js/RAMP/Modules/filterManager.js
@@ -186,7 +186,7 @@ define([
                     */
                     function createGroups() {
                         boxCheckboxGroup = new CheckboxGroup(
-                            mainList.find(".checkbox-custom .box + input"),
+                            mainList.find(".checkbox-brick-container.bbox input:first"),
                             {
                                 nodeIdAttr: layerIdField,
 
@@ -197,7 +197,7 @@ define([
 
                                 onChange: function () {
                                     Theme.tooltipster(this.labelNode.parent(), null, "update");
-                                },
+                                }/*,
 
                                 master: {
                                     node: globalToggleSection.find(".checkbox-custom .box + input"),
@@ -208,7 +208,7 @@ define([
                                         check: i18n.t('filterManager.hideAllBounds'),
                                         uncheck: i18n.t('filterManager.showAllBounds')
                                     }
-                                }
+                                }*/
                             });
 
                         boxCheckboxGroup.on(CheckboxGroup.event.MEMBER_TOGGLE, function (evt) {
@@ -220,9 +220,9 @@ define([
                             });
                         });
 
-                        boxCheckboxGroup.on(CheckboxGroup.event.MASTER_TOGGLE, function (evt) {
+                        /*boxCheckboxGroup.on(CheckboxGroup.event.MASTER_TOGGLE, function (evt) {
                             console.log("Filter Manager -> Master Checkbox", evt.checkbox.id, "set by", evt.agency, "to", evt.checkbox.state);
-                        });
+                        });*/
 
                         eyeCheckboxGroup = new CheckboxGroup(
                             mainList.find(".checkbox-custom .eye + input"),
@@ -286,7 +286,7 @@ define([
                         update: function () {
                             Theme.tooltipster(mainList);
 
-                            boxCheckboxGroup.addCheckbox(mainList.find(".checkbox-custom .box + input"));
+                            boxCheckboxGroup.addCheckbox(mainList.find(".checkbox-brick-container.bbox input:first"));
                             eyeCheckboxGroup.addCheckbox(mainList.find(".checkbox-custom .eye + input"));
                         },
 

diff --git a/src/js/RAMP/Modules/layerItem.js b/src/js/RAMP/Modules/layerItem.js
@@ -45,12 +45,12 @@ define([
     "dojo/text!./templates/layer_selector_template.json",
 
     /* Util */
-    "utils/util", "utils/tmplHelper", "utils/tmplUtil", "utils/array", "utils/dictionary"
+    "utils/util", "utils/tmplHelper", "utils/tmplUtil", "utils/array", "utils/dictionary", 'utils/bricks'
 ],
     function (
         Evented, declare, lang,
         layer_selector_template,
-        Util, TmplHelper, TmplUtil, UtilArray, UtilDict
+        Util, TmplHelper, TmplUtil, UtilArray, UtilDict, Bricks
     ) {
         "use strict";
 
@@ -283,7 +283,10 @@ define([
 
                     stateKey,
                     partKeys = [],
-                    part;
+                    part,
+
+                    brickTemplate,
+                    brickPart;
 
                 Object
                     .getOwnPropertyNames(LayerItem.state)
@@ -295,8 +298,20 @@ define([
                 partKeys = UtilArray.unique(partKeys);
 
                 partKeys.forEach(function (pKey) {
-                    part = that._generatePart(templateKey, pKey);
+                    if (LayerItem.brickTemplates[pKey]) {
+                        brickTemplate = LayerItem.brickTemplates[pKey];
+
+                        brickPart = brickTemplate.type.new(pKey, brickTemplate.config);
+                        // TODO: fix
+                        // hack to get the data-layer-id attribute onto checkboxBrick input node
+                        // used in conjunction with ChekcboxGroup in FilterManager; will be removed when layerItem is switched full to Bricks and 
+                        // LayerCollection controller is added in between filterManager and LayerGroup.
+                        brickPart.inputNode.attr('data-layer-id', that._config.id);
+                        part = brickPart.node;
 
+                    } else {
+                        part = that._generatePart(templateKey, pKey);
+                    }
                     partStore[pKey] = (part);
                 });
             },
@@ -375,7 +390,7 @@ define([
 
                     // store reference to a focused node inside this layer item if any
                     focusedNode = this.node.find(":focus");
-                    
+
                     this._setParts("controls", this._controlStore, this._controlsNode);
                     this._setParts("toggles", this._toggleStore, this._togglesNode);
                     this._setParts("notices", this._noticeStore, this._noticesNode);
@@ -448,7 +463,7 @@ define([
                 // http://api.jquery.com/detach/
                 target
                     .children()
-                    .detach() 
+                    .detach()
                     .end()
                     .append(controls)
                 ;
@@ -645,7 +660,7 @@ define([
                 */
                 settings: {
                     OPACITY: 'opacity',
-                    BOUNDING_BOX: 'bounding_box',
+                    BOUNDING_BOX: 'bounding_box_brick',
                     SNAPSHOT: 'snapshot'
                 },
 
@@ -756,7 +771,31 @@ define([
                 *        ]
                 * 
                 */
-                transitionMatrix: {}
+                transitionMatrix: {},
+
+                /**
+                 * A temporary store for brick templates.
+                 * TODO: re-think how to best use brick/templates inside the layer item
+                 * 
+                 * @property LayerItem.brickTemplates
+                 * @static
+                 * @type Object
+                 */
+                brickTemplates: {
+                    bounding_box_brick: {
+                        type: Bricks.CheckboxBrick,
+                        config: {
+                            //header: 'Dynamic Loading',
+                            label: 'Bounding Box',
+                            customContainerClass: 'bbox',
+                            //value: "on",
+                            //onLabel: 'on1',
+                            //offLabel: 'off',
+                            checked: false//,
+                            //instructions: i18n.t("addDataset.help.dataSource")
+                        }
+                    }
+                }
             }
         );
 
@@ -770,7 +809,8 @@ define([
             toggles: [],
             notices: [],
             settings: [
-                LayerItem.settings.OPACITY
+                LayerItem.settings.OPACITY,
+                LayerItem.settings.BOUNDING_BOX
             ]
         };
 
@@ -789,9 +829,7 @@ define([
             controls: [],
             toggles: [],
             notices: [],
-            settings: [
-                LayerItem.settings.OPACITY
-            ]
+            settings: []
         };
 
         LayerItem.stateMatrix[LayerItem.state.UPDATING] = {

diff --git a/src/js/RAMP/Modules/templates/layer_selector_template.json b/src/js/RAMP/Modules/templates/layer_selector_template.json
@@ -341,6 +341,13 @@
 
     // Level 2
     // Filter row overall layout for a given layer
+    "layer_settings":"
+        <div class='filter-row-settings bg-medium'>            
+            <h4 class='mrgn-tp-0 mrgn-bttm-0 smaller'>{%= i18n.t('filterManager.settingsLayerSettings') %}</h4>
+            <div class='layer-settings'></div>
+        </div>
+    ",
+
     "layer_setting_opacity": "
         <div class='transparency-setting'>
             <span class='pull-left'>{%= i18n.t('filterManager.settingsOpacity') %}</span>                
@@ -358,10 +365,9 @@
         </div>
     ",
 
-    "layer_settings":"
-        <div class='filter-row-settings bg-medium'>            
-            <h4 class='mrgn-tp-0 mrgn-bttm-0 smaller'>{%= i18n.t('filterManager.settingsLayerSettings') %}</h4>
-            <div class='layer-settings'></div>
+    "layer_setting_bounding_box": "
+        <div class='bounding-box-setting'>
+
         </div>
     "
 }