updated big refactor example

abc91199 · Dec 2, 2015 · 59680b5 · 59680b5
1 parent dde84df
commit 59680b5
Show file tree

Hide file tree

Showing 14 changed files with 36,045 additions and 1,156 deletions.
diff --git a/examples/bclys/index.js b/examples/bclys/index.js
diff --git a/examples/bclys/index.min.js b/examples/bclys/index.min.js
diff --git a/examples/polymerwrapper/index.html b/examples/polymerwrapper/index.html
diff --git a/examples/polymerwrapper/index.js b/examples/polymerwrapper/index.js
diff --git a/examples/polymerwrapper/index.min.js b/examples/polymerwrapper/index.min.js
diff --git a/examples/polymerwrapper/indexbcly.html b/examples/polymerwrapper/indexbcly.html
@@ -0,0 +1,80 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>fin-hypergrid Demo</title>
+  <!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+
+<script src="js/accounting.min.js"></script>
+<!--<script src="js/sampledata.js"></script>-->
+<script src="js/widedata.js"></script>
+<script src="js/myThemes.js"></script>
+<link rel="import" href="polymerwrapper.html" />
+
+</head>
+<body>
+
+<div class="container" style="border-style: solid; border-color: red">
+    <div class="row" style="border-style: solid; border-color: blue">
+        <div class="col-md-12 col-lg-12" style="border-style: solid; border-color: grey">
+<!--            <button onclick="toggleColumnPicker()">toggle column picker</button>
+            <button onclick="toggleAggregates()">toggle aggregates</button>
+            <button onclick="toggleAutosortGrouping()">toggle autosort groups</button>
+            <button onclick="toggleEmptyData()">toggle empty data</button>
+            <button onclick="toggleEmptyHeaders()">toggle empty headers</button>
+            <button onclick="toggleGlobalFilter()">toggle global filter</button>-->
+            <button onclick="setData1()">set data 1 (5000 rows)</button>
+<!--            <button onclick="setData2()">set data 2 (10000 rows)</button>
+            <button onclick="reset()">reset</button>-->
+        </div>
+    </div>
+    <div class="row" style="overflow: hidden">
+        <div class="col-md-12 col-lg-12" style="overflow:hidden;border-style: solid; border-color: green;height:400px">
+            <!--<div class="abs" id="json-example"></div>-->
+            <polymer-grid id="mypolymer-Grid" showfilterrow=true rowselectionmode=true rowindicatorstyle="number" showfiltericon=false></polymer-grid>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12 col-lg-12" style="border-style: solid; border-color: grey">
+            blah
+        </div>
+    </div>
+</div>
+
+<script>
+
+(function(){
+    //used by the cellProvider, return null for a column if you want no editor to pop up
+    var editorTypes = ['choice','textfield','spinner','date','choice','choice','choice','textfield','textfield','textfield'];
+
+    window.onload = function() {
+
+        var grid = document.querySelector('#mypolymer-Grid');
+        grid.render();
+        var jsonGrid = grid.getGridControl();
+
+        window.setData1 = function () {
+
+            grid.initializeGrid(null, people1);
+
+            setTimeout(function(){
+                jsonGrid.setColumnProperties(2, {
+                    width: 200
+                });
+            }, 100);
+
+        }
+
+        jsonGrid.addProperties({
+            columnAutosizing: true
+        });
+
+    };
+})();
+
+</script>
+
+</body>
+</html>
diff --git a/examples/polymerwrapper/js/accounting.min.js b/examples/polymerwrapper/js/accounting.min.js
diff --git a/examples/polymerwrapper/js/myThemes.js b/examples/polymerwrapper/js/myThemes.js
@@ -0,0 +1,131 @@
+var myThemes = {
+    one: {
+        font: '8px Tahoma, Geneva, sans-serif',
+        color: 'rgb(25, 25, 25)',
+        backgroundColor: 'rgb(241, 241, 241)',
+        foregroundSelectionColor: 'rgb(255, 0, 0)',
+        backgroundSelectionColor: 'rgb(0, 0, 255)',
+
+        columnHeaderFont: '12px Tahoma, Geneva, sans-serif',
+        columnHeaderColor: 'darkblue',
+        columnHeaderBackgroundColor: 'pink',
+        columnHeaderForegroundSelectionColor: 'rgb(0, 0, 255)',
+        columnHeaderBackgroundSelectionColor: 'rgb(255, 0, 0)',
+
+        rowHeaderFont: '8px Tahoma, Geneva, sans-serif',
+        rowHeaderColor: 'rgb(25, 25, 25)',
+        rowHeaderBackgroundColor: 'rgb(223, 227, 232)',
+        rowHeaderForegroundSelectionColor: 'rgb(25, 25, 25)',
+        rowHeaderBackgroundSelectionColor: 'rgb(255, 220, 97)',
+
+        backgroundColor2: 'rgb(201, 201, 201)',
+        lineColor: 'rgb(199, 199, 199)',
+        voffset: 0,
+        scrollbarHoverOver: 'visible',
+        scrollbarHoverOff: 'hidden',
+        scrollingEnabled: true,
+
+        fixedRowAlign: 'center',
+        fixedColAlign: 'center',
+        cellPadding: 5,
+        gridLinesH: true,
+        gridLinesV: true,
+
+        defaultRowHeight: 20,
+        defaultFixedRowHeight: 15,
+        defaultColumnWidth: 100,
+        defaultFixedColumnWidth: 100,
+
+        //for immediate painting, set these values to 0, true respectively
+
+        editorActivationKeys: ['alt', 'esc'],
+        columnAutosizing: false,
+        readOnly: false
+    },
+    two: {
+        font: '10px Tahoma, Geneva, sans-serif',
+        color: 'rgb(25, 25, 25)',
+        backgroundColor: 'rgb(241, 241, 241)',
+        foregroundSelectionColor: 'rgb(25, 25, 25)',
+        backgroundSelectionColor: 'rgb(183, 219, 255)',
+
+        columnHeaderFont: '10px Tahoma, Geneva, sans-serif',
+        columnHeaderColor: 'rgb(25, 25, 25)',
+        columnHeaderBackgroundColor: 'rgb(223, 227, 232)',
+        columnHeaderForegroundSelectionColor: 'rgb(25, 25, 25)',
+        columnHeaderBackgroundSelectionColor: 'rgb(255, 220, 97)',
+
+        rowHeaderFont: '10px Tahoma, Geneva, sans-serif',
+        rowHeaderColor: 'rgb(25, 25, 25)',
+        rowHeaderBackgroundColor: 'rgb(223, 227, 232)',
+        rowHeaderForegroundSelectionColor: 'rgb(25, 25, 25)',
+        rowHeaderBackgroundSelectionColor: 'rgb(255, 220, 97)',
+
+        backgroundColor2: 'rgb(201, 201, 201)',
+        lineColor: 'rgb(199, 199, 199)',
+        voffset: 0,
+        scrollbarHoverOver: 'visible',
+        scrollbarHoverOff: 'hidden',
+        scrollingEnabled: true,
+
+        fixedRowAlign: 'center',
+        fixedColAlign: 'center',
+        cellPadding: 5,
+        gridLinesH: true,
+        gridLinesV: true,
+
+        defaultRowHeight: 15,
+        defaultFixedRowHeight: 15,
+        defaultColumnWidth: 100,
+        defaultFixedColumnWidth: 100,
+
+        //for immediate painting, set these values to 0, true respectively
+
+        editorActivationKeys: ['alt', 'esc'],
+        columnAutosizing: false,
+        readOnly: false
+    },
+    three: {
+        font: '15px Tahoma, Geneva, sans-serif',
+        color: 'rgb(25, 25, 25)',
+        backgroundColor: 'rgb(241, 241, 241)',
+        foregroundSelectionColor: 'rgb(25, 25, 25)',
+        backgroundSelectionColor: 'rgb(183, 219, 255)',
+
+        columnHeaderFont: '15px Tahoma, Geneva, sans-serif',
+        columnHeaderColor: 'rgb(25, 25, 25)',
+        columnHeaderBackgroundColor: 'rgb(223, 227, 232)',
+        columnHeaderForegroundSelectionColor: 'rgb(25, 25, 25)',
+        columnHeaderBackgroundSelectionColor: 'rgb(255, 220, 97)',
+
+        rowHeaderFont: '15px Tahoma, Geneva, sans-serif',
+        rowHeaderColor: 'rgb(25, 25, 25)',
+        rowHeaderBackgroundColor: 'rgb(223, 227, 232)',
+        rowHeaderForegroundSelectionColor: 'rgb(25, 25, 25)',
+        rowHeaderBackgroundSelectionColor: 'rgb(255, 220, 97)',
+
+        backgroundColor2: 'rgb(201, 201, 201)',
+        lineColor: 'rgb(199, 199, 199)',
+        voffset: 0,
+        scrollbarHoverOver: 'visible',
+        scrollbarHoverOff: 'hidden',
+        scrollingEnabled: true,
+
+        fixedRowAlign: 'center',
+        fixedColAlign: 'center',
+        cellPadding: 5,
+        gridLinesH: true,
+        gridLinesV: true,
+
+        defaultRowHeight: 15,
+        defaultFixedRowHeight: 15,
+        defaultColumnWidth: 100,
+        defaultFixedColumnWidth: 100,
+
+        //for immediate painting, set these values to 0, true respectively
+
+        editorActivationKeys: ['alt', 'esc'],
+        columnAutosizing: false,
+        readOnly: false
+    }
+};
diff --git a/examples/polymerwrapper/js/widedata.js b/examples/polymerwrapper/js/widedata.js
@@ -0,0 +1,134 @@
+'use strict';
+
+(function() {
+    var numRows = 10000;
+
+    var firstNames = ['', 'Olivia', 'Sophia', 'Ava', 'Isabella', 'Boy', 'Liam', 'Noah', 'Ethan', 'Mason', 'Logan', 'Moe', 'Larry', 'Curly', 'Shemp', 'Groucho', 'Harpo', 'Chico', 'Zeppo', 'Stanley', 'Hardy'];
+    var lastNames = ['', 'Wirts', 'Oneil', 'Smith', 'Barbarosa', 'Soprano', 'Gotti', 'Columbo', 'Luciano', 'Doerre', 'DePena'];
+    var months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+    var days = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'];
+    var states = ['', 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
+
+    var randomFunc = Math.random;
+    //var randomFunc = rnd;
+
+    var randomPerson = function() {
+        var firstName = Math.round((firstNames.length - 1) * randomFunc());
+        //var lastName = 'a' + randomFunc() + 'b';
+        var lastName = Math.round((lastNames.length - 1) * randomFunc());
+        var pets = Math.round(10 * randomFunc());
+        var birthyear = 1900 + Math.round(randomFunc() * 114);
+        var birthmonth = Math.round(randomFunc() * 11);
+        var birthday = Math.round(randomFunc() * 29);
+        var birthstate = Math.round(randomFunc() * (states.length - 1));
+        var residencestate = Math.round(randomFunc() * (states.length - 1));
+        var travel = randomFunc() * 1000;
+        var income = randomFunc() * 100000;
+        var employed = Math.round(randomFunc());
+        var person = {
+            last_name: lastNames[lastName], //jshint ignore:line
+            first_name: firstNames[firstName], //jshint ignore:line
+            pets: pets,
+            birthDate: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
+            birthState: states[birthstate],
+            residenceState: states[residencestate],
+            employed: employed === 1,
+            income: income,
+            travel: travel,
+            squareOfIncome: 0,
+            onelast_name: lastNames[lastName], //jshint ignore:line
+            onefirst_name: firstNames[firstName], //jshint ignore:line
+            onepets: pets,
+            onebirthDate: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
+            onebirthState: states[birthstate],
+            oneresidenceState: states[residencestate],
+            oneemployed: employed === 1,
+            oneincome: income,
+            onetravel: travel,
+            onesquareOfIncome: 0,
+            twolast_name: lastNames[lastName], //jshint ignore:line
+            twofirst_name: firstNames[firstName], //jshint ignore:line
+            twopets: pets,
+            twobirthDate: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
+            twobirthState: states[birthstate],
+            tworesidenceState: states[residencestate],
+            twoemployed: employed === 1,
+            twoincome: income,
+            twotravel: travel,
+            twosquareOfIncome: 0,
+            threelast_name: lastNames[lastName], //jshint ignore:line
+            threefirst_name: firstNames[firstName], //jshint ignore:line
+            threepets: pets,
+            threebirthDate: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
+            threebirthState: states[birthstate],
+            threeresidenceState: states[residencestate],
+            threeemployed: employed === 1,
+            threeincome: income,
+            threetravel: travel,
+            threesquareOfIncome: 0,
+            fourlast_name: lastNames[lastName], //jshint ignore:line
+            fourfirst_name: firstNames[firstName], //jshint ignore:line
+            fourpets: pets,
+            fourbirthDate: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
+            fourbirthState: states[birthstate],
+            fourresidenceState: states[residencestate],
+            fouremployed: employed === 1,
+            fourincome: income,
+            fourtravel: travel,
+            foursquareOfIncome: 0,
+            fivelast_name: lastNames[lastName], //jshint ignore:line
+            fivefirst_name: firstNames[firstName], //jshint ignore:line
+            fivepets: pets,
+            fivebirthDate: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
+            fivebirthState: states[birthstate],
+            fiveresidenceState: states[residencestate],
+            fiveemployed: employed === 1,
+            fiveincome: income,
+            fivetravel: travel,
+            fivesquareOfIncome: 0,
+            sixlast_name: lastNames[lastName], //jshint ignore:line
+            sixfirst_name: firstNames[firstName], //jshint ignore:line
+            sixpets: pets,
+            sixbirthDate: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
+            sixbirthState: states[birthstate],
+            sixresidenceState: states[residencestate],
+            sixemployed: employed === 1,
+            sixincome: income,
+            sixtravel: travel,
+            sixsquareOfIncome: 0,
+            sevenlast_name: lastNames[lastName], //jshint ignore:line
+            sevenfirst_name: firstNames[firstName], //jshint ignore:line
+            sevenpets: pets,
+            sevenbirthDate: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
+            sevenbirthState: states[birthstate],
+            sevenresidenceState: states[residencestate],
+            sevenemployed: employed === 1,
+            sevenincome: income,
+            seventravel: travel,
+            sevensquareOfIncome: 0,
+            eightlast_name: lastNames[lastName], //jshint ignore:line
+            eightfirst_name: firstNames[firstName], //jshint ignore:line
+            eightpets: pets,
+            eightbirthDate: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
+            eightbirthState: states[birthstate],
+            eightresidenceState: states[residencestate],
+            eightemployed: employed === 1,
+            eightincome: income,
+            eighttravel: travel,
+            eightsquareOfIncome: 0,
+        };
+        person.squareOfIncome = function() {
+            return Math.sqrt(person.income);
+        }
+        return person;
+    };
+
+    var data = [];
+    for (var i = 0; i < numRows; i++) {
+        data.push(randomPerson());
+    }
+    window.people1 = window.people2 = data;
+    window.states = states;
+    window.firstNames = firstNames;
+    window.lastNames = lastNames;
+})();