Merge pull request #99 from SIU-CS/dev

Sprint 3 -> dev to master

Author: james-wasson

.DS_Store

@@ -1,2 +1,3 @@
 .vs/
-**/.vs
+**/.vs
+**/.DS_Store

.gitignore

@@ -14,25 +14,28 @@ The purpose is to develop a backwards compatible JavaScript multiselect tool wit
 
 **Scrum Master:** Swathi Kaluvakuri  
 Student Email: [email protected]       
-Personal Email: [email protected]  <br/>
- 
-**Members:**<br/>
+Personal Email: [email protected]  
+  
+**Members:**  
 
 * Username: james-wasson   
 Email: [email protected]   
-Student Email: [email protected] <br/>
-
+Student Email: [email protected]  
+  
 * Username: N3rdizm   
 Email: [email protected]   
-Student Email: [email protected]  <br/>
-
+Student Email: [email protected]  
+  
 * Username: IndranilRoy80133   
 Email: [email protected]   
-Student Email:indranil.[email protected]  <br/>
-
+Student Email:indranil.[email protected]  
+  
 * Username: adlevsky   
 Email: [email protected]   
-Student Email: [email protected]  
+Student Email: [email protected] 
+  
+**JS Fiddle:**  
+A JSFiddle for the project can be found [here](https://jsfiddle.net/james_wasson/jgmh1ozy/)  
 
 **This is a Quagga**<br/>
 ![A QUAGGA](https://github.com/SIU-CS/QuaggaQuagga-Production/blob/master/git-wiki/Quagga.jpg)

.vscode/temp.sql

@@ -40,13 +40,12 @@ define(['require', 'jquery'],function (require) {
                 <span class="JSM-title navbar-brand"></span>
                 <span class="JSM-search">
                     <input class="JSM-searchbar form-control" type="text" placeholder="Search">
-                    <span class="fa fa-times JSM-closePopList" aria-hidden="true"></span>
                 </span>
             </div>
             <!-- MULTISELECT BODY -->
+            <div class="JSM-popoverDisplay">
+            </div>
             <div class="JSM-body">
-                <div class="JSM-popoverDisplay collapse in">
-                </div>
             <!-- List structure and base style Via, Marcos from stackoverflow at "https://jsfiddle.net/ann7tctp/" -->
                 <div class="JSM-list list-group-root collapse">
                     
@@ -76,7 +75,7 @@ define(['require', 'jquery'],function (require) {
     }
 
     function MULTISELECTOR_ROOT_NAME() {
-        return "JS_Multiselect";
+        return "JSMultiselect";
     }
     function MULTISELECTOR_STYLE_TYPES() {
         return ['singleColumn', 'multiColumn', 'popoverSelect'];

README.md

@@ -0,0 +1,29 @@
+define(['require', 'jquery', 'data_store/new', "consts", 'data_input/load'],
+    function (require, $, newData, CONSTS, loadData) {
+    'use strict';
+
+    var rootObject = CONSTS.GET_ROOT_OBJECT_REF();
+
+    rootObject['AddData'] = {};
+    var loadTypes = loadData.loadTypes();
+    $.each(loadTypes, function(i, Type) {
+        rootObject['AddData'][Type] = (function() {
+            var type = Type;
+            return function(multiname, unprocessed) {
+                var data;
+                if ($.isFunction(unprocessed)) {
+                    data = loadData.load(unprocessed, type);
+                } else {
+                    data = loadData.load(function() {
+                        return unprocessed;
+                    }, type);
+                }
+                if (data == null) {
+                    console.warn("Error loading new data.");
+                } else {
+                    newData.addNewData(multiname, data);
+                }
+            };
+        }());
+    });
+});

app.build.js

@@ -6,6 +6,8 @@ define(['require', 'jquery', 'data_input/liveHTML', 'data_input/array', 'data_in
     $ = jquery = require('jquery');
 
     function getLoadFunction(functionPath) {
+        if (jquery.isFunction(functionPath)) return functionPath;
+        if (typeof functionPath != "string") return null;
         var functionArray = functionPath.split(".");
         var fun =  window[functionArray[0]];
         for (var i = 1; i < functionArray.length; i += 1) {
@@ -39,6 +41,7 @@ define(['require', 'jquery', 'data_input/liveHTML', 'data_input/array', 'data_in
         // JSON is default data type
         if (dataType == null) dataType = 'JSON';
         var loadFunction = getLoadFunction(functionPath);
+
         // determines if we can get the data from the elements passed in
         if (typeFunctions[dataType] == null ||
             !jquery.isFunction(typeFunctions[dataType]) ||
@@ -50,5 +53,10 @@ define(['require', 'jquery', 'data_input/liveHTML', 'data_input/array', 'data_in
         return typeFunctions[dataType](devData);
     }
 
-    return load;
+    return {
+        load: load,
+        loadTypes: function() {
+            return Object.keys(typeFunctions);
+        }
+    };
 });

js/consts.config.js app/js/consts.config.js

@@ -0,0 +1,25 @@
+define(['require',
+        'data_store/get',
+        'jquery', 
+        'data_output/interface', 
+        'data_output/selectionOutput', 
+    ], 
+function(require, getData, $, outInterface, selectionOut) {
+    'use strict';
+    var jquery = $;
+
+    /**
+     * Handles the style part of the multiselect, selecting the apprpriate styles
+     * For each based upon optons/multiselect type
+     * @param {jquery element} $multiselect the targeted multiselect
+     */
+    function handler($multiselect, name) {
+        var outputSettings = getData.getSettingByName("output", name);
+
+        if (outputSettings != null) {
+            selectionOut($multiselect, outputSettings.onSelect, outputSettings.onDeselect);
+        }
+    }
+
+    return handler;
+});

js/data_input/CSV.js app/js/data_input/CSV.js

@@ -10,7 +10,7 @@ define(['require', 'jquery', 'data_store/get'], function(require, $, getData) {
             if (data[i]['@isHeader']) {
                 rv = rv.concat(recursData(data[i]['@children']));
             } else if(data[i]['@selected']) {
-                rv.push({ 'name': i, 'value': data[i]['@value'] });
+                rv.push({ 'name': data[i]['@name'], 'value': data[i]['@value'] });
             }
         }
         return rv;

js/data_input/HTML.js app/js/data_input/HTML.js

@@ -0,0 +1,37 @@
+define(['require', 'jquery', 'data_store/get'], function (require) {
+    'use strict';
+    
+    var $, jquery;
+    jquery = $ = require('jquery');
+    var get = require('data_store/get');
+
+
+    function handler($multiselect, onSelect, onDeselect) 
+    {
+        if(onSelect != null || onDeselect != null)
+        {
+            $multiselect.on("change", ".JSM-list .JSM-checkbox", function() 
+            {
+                var $this = $(this);
+                var name = $this.data("name");
+                var value = $this.attr("value");
+                if (name != null && value != null) {
+                    var rv = { name: name, value: value }
+                    if (this.checked) 
+                    {
+                        onSelect(rv);
+                    } else 
+                    {
+                        onDeselect(rv);
+                    }
+                }
+            });
+        }
+        else
+        {
+            console.warn("The notification function which you defined is null.");
+        }
+    }
+    return handler;
+
+});

js/data_input/JSON.js app/js/data_input/JSON.js

@@ -100,6 +100,28 @@ function (require) {
         return ["@value", "@element", "@searchable", "@selected", "@isHeader", "@icon", "@image"];
     }
 
+    /**
+     * Find s all items (including headers) and returns them in func
+     * @param {String} name The name of the given multiselect
+     * @param {Function} func a function that accepts a multiselect item
+     */
+    function forEachItemInMutiselect(name, func) {
+        var data = getDataByName(name);
+        if (data != null) {
+            var forEach = function(children) {
+                for(var i in children) {
+                    if (children[i] != null) {
+                        var rv = func(children[i]);
+                        if (rv !== false && children[i]['@isHeader']) {
+                            forEach(children[i]['@children']);
+                        }
+                    }
+                }
+            };
+            forEach(data);
+        }
+    }
+
 
     return {
         nameList: nameList,
@@ -108,6 +130,7 @@ function (require) {
         getSettingsByMultiselectName: getSettingsByMultiselectName,
         getSettingByName: getSettingByName,
         getMultiselectItemKeys: getMultiselectItemKeys,
-        getTitleByName: getTitleByName
+        getTitleByName: getTitleByName,
+        forEachItemInMutiselect: forEachItemInMutiselect
     };
 });

js/data_input/xml.js app/js/data_input/XML.js

@@ -2,13 +2,18 @@
 define(['require',
     'data_store/cache',
     'data_store/set',
+    'data_store/get',
     'consts',
-    'jquery'],
-function (require, cache, cacheSet, CONSTS) {
+    'jquery',
+    'display/list',
+    'style/body/colorIndent',
+    'style/body/spaceIndent',
+    'sort/sort.config'],
+function (require, cache, cacheSet, cacheGet, CONSTS, $, displayList, colorIndent, spaceIndent, sortConfig) {
     'use strict';
 
-    var jquery, $;
-    jquery = $ = require('jquery');
+    var jquery;
+    jquery = $;
 
     /**
      * Sets a new multiselect in the cache with these fields
@@ -53,7 +58,8 @@ function (require, cache, cacheSet, CONSTS) {
             "@selected": (selected == null ? false : selected),
             "@isHeader": false,
             "@image": imagePath,
-            "@icon": iconClass
+            "@icon": iconClass,
+            "@parent": null
         };
     }
 
@@ -73,22 +79,90 @@ function (require, cache, cacheSet, CONSTS) {
         }
         if (element != null && element.length <= 0 ) return null;
         if (!$.isArray(children) || children.length <= 0) return null;
-        
-        return {
+
+        var header = {
             "@name": name,
             "@element": element,
             "@searchable": (searchable == null ? "": searchable),
             "@selected": (selected == null ? false : selected),
             "@isHeader": true,
             "@image": (imagePath == null ? "": imagePath),
             "@icon": (iconClass == null ? "": iconClass),
-            "@children": children
+            "@children": children,
+            "@parent": null
+        };
+
+        for(var i in children) {
+            if (children[i] != null)
+                children[i]['@parent'] = header;
+        }
+        
+        return header;
+    }
+
+    /**
+     * Merges the data existing in the multiselect with the new data
+     * @param {String} name Multiselector name 
+     * @param {JSON} newData JSON data to add to the multiselect
+     */
+    function addNewData(name, newData) {
+        var removeElement = function(item) {
+            if (item['@isHeader']) {
+                $(item['@element'].data("target")).remove();
+            }
+            if (item['@element'] != null)
+                item['@element'].remove();
+        }
+        if (name == null) return;
+        // defers to dataA
+        var recurseCompareData = function(dataA, dataB) {
+            if (dataA == null) dataA = [];
+            if (dataB == null) dataB = [];
+            var bIndex = 0;
+            var returnData = [];
+            var issueNames = [];
+            var aNames = dataA.map(x => x['@name']);
+            var bNames = dataB.map(x => x['@name']);
+            var foundBIndexes = [];
+            for (var aIndex = 0; aIndex < aNames.length; aIndex += 1) {
+                bIndex = bNames.indexOf(aNames[aIndex]);
+                if (bIndex >= 0) {
+                    foundBIndexes.push(bIndex);
+                    // merg the data recusivly
+                    var issueA = dataA[aIndex];
+                    var issueB = dataB[bIndex];
+                    if (issueA['@isHeader'] || issueB['@isHeader']) {
+                        issueA['@children'] = recurseCompareData(issueA['@children'], issueB['@children']);                          
+                        issueA['@isHeader'] = true;
+                    }
+                    if (issueB['@element'] != null)
+                        removeElement(issueB);
+                    if (issueB['@selected'] == true) issueA['@selected'] = true;
+                    returnData.push(issueA);
+                } else { // we can now safly add aIndex
+                    returnData.push(dataA[aIndex]);
+                }
+            }
+
+            for (bIndex = 0; bIndex < dataB.length; bIndex += 1) {
+                if (foundBIndexes.indexOf(bIndex) < 0) // selects unmerged indexes
+                    returnData.push(dataB[bIndex]);
+            }
+                
+            return returnData;
         };
+        var data = cacheGet.getDataByName(name);
+        cacheSet.replaceDataByName(name, recurseCompareData(newData, data));
+        sortConfig(name);
+        displayList.displayMissing(name);
+        spaceIndent.refresh(cacheGet.getElementByName(name));
+        colorIndent(cacheGet.getElementByName(name));
     }
 
     return {
         newMultiselect: newMultiselect,
         newMultiselectHeader: newMultiselectHeader,
-        newMultiselectItem: newMultiselectItem
+        newMultiselectItem: newMultiselectItem,
+        addNewData: addNewData
     };
 });