JRS 201 - User can resize viewport API

by obobruyko

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="dataView"></div>

<script src="http://localhost:8080/JRS-pro/scripts/require-jquery.js"></script>
<script>
        
var __jrsConfigs__ = {
   urlContext : "http://localhost:8080/JRS-pro"
};
    
require.config({
    baseUrl: "http://localhost:8080/JRS-pro/scripts",
    enforceDefine:true,
    paths: {
        "lodash": "common/lib/lodash-1.1.1",
        "underscore" : "config/lodashTemplateSettings",
        "text" : "common/plugin/text",
        "common/request": "common/corsRequest",
        "easyxdm": "common/lib/xdm-1.0.1",
        "jquery.mousewheel": "common/lib/jquery.mousewheel-3.1.9",
        "perfect-scrollbar": "common/lib/perfect-scrollbar-0.4.6"
    },
    
    shim: {
        "jrs.configs": {
            exports: "__jrsConfigs__"
        }
    }
});    
</script>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div id="container" style="margin-top:20px;height:500px" class="MyTable"></div>
<button id="resize">Resize</button>

<div class="context-menu"></div>

CSS

#container {
    background-color: #E6E6FA;
    overflow: hidden; 
}

#container > div {  
    border: 1px solid #aaa;
}

/*td{  
    box-sizing: border-box;
}*/
.jrs-data-grid-container > * {
    -webkit-transform: translateZ(0px);
}

.context-menu {
    border: 1px solid black;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    width:100px;
    display:none;
    border-radius: 4px;
    -moz-border-radius:4px; 
    -webkit-border-radius: 4px;     
    z-index:91;
}

.cell-green {
  background-color: green;  
}

.cell-red {
  background-color: red;  
}

/*    TABLE      */ 
.MyTable {
	margin:0px;
    padding:0px;
}

.MyTable table {
    border-collapse: separate;
    border-spacing: 0;
	margin:0px;
    padding:0px;
    width: 100%;
    height: 100%;
}

/*.MyTable tr:nth-child(odd){ background-color:#e5e5e5; }
.MyTable tr:nth-child(even)    { background-color:#ffffff; }*/

.MyTable td {
    background-color: #fff;
	vertical-align: middle;
	text-align: left;
	padding:0px;
    margin:0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
	font-weight:normal;
	color:#000000;
    overflow: hidden;
    border: 1px solid black;
    color: #666;
}

/*.MyTable td:first-of-type {
    border-left: none;
}

.MyTable td:last-of-type {
    border-right: none;
}*/

.jrs-header-grid-container td{
    border-top: none;
}

/*.jrs-data-grid-container tr:first-of-type td{
    border-top: none;
}*/

/*.jrs-header-grid-container {
    margin-top: -1px;
}*/

/*! perfect-scrollbar - v0.4.6
* http://noraesae.github.com/perfect-scrollbar/
* Copyright (c) 2013 HyeonJe Jun; Licensed MIT */

.ps-container .ps-scrollbar-x-rail{position:absolute;bottom:3px;height:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0.7;filter:alpha(opacity=70);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color.2s linear,opacity .2s linear;-moz-transition:background-color .2s...

JavaScript

//<%-- ****************************************************** --%>
//<%-- US 201 - User can resize viewport API                  --%>
//<%-- ****************************************************** --%>
    

    require([
        "jquery",
        "components/table/BaseGrid",
        "components/table/FixedHeaderGrid",
        "components/table/DynamicGridStrategy",
        "components/table/StaticGridDataProvider",         
    ], function($, BaseGrid, FixedHeaderGrid, DynamicGridStrategy, StaticGridDataProvider) {

                var headerGridData = [[{label: "Header.", colspan: 10},null,null,null,null, null,null,null,null,null,{label: "34"},{label: "35"},{label: "21"},{label: "asdf"},{label: "23"}]];
        
        //Grid data
        var gridData = [            
            [{label: "21", rowspan: 10},{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "df"},{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "32"},{label: "33"},{label: "34"},{label: "35"},{label: "21"},{label: "asdf"},{label: "23"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "42"},{label: "43"},{label: "44"},{label: "45"},{label: "21"},{label: "22"},{label: "asdf"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "52"},{label: "53"},{label: "54"},{label: "55"},{label: "21"},{label: "22"},{label: "23"},{label: "asdf"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "asdf"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "32"},{label: "33"},{label: "34"},{label: "35"},{label: "21"},{label:...