v15.1.0.40 samples and source added

aurelia-ui-toolkits · May 9, 2017 · e68cf2b · e68cf2b
1 parent 3918434
commit e68cf2b
Show file tree

Hide file tree

Showing 618 changed files with 1,943 additions and 788 deletions.
diff --git a/sample/index.html b/sample/index.html
@@ -26,6 +26,7 @@
       if (ieVer != null && ieVer < 11)
         location.replace("error.html");
     </script>
+    <script> Function.prototype.call = function(t) { return this.apply(t, Array.prototype.slice.apply(arguments, [1])); } </script>
     <script src="jspm_packages/system.js"></script>
     <script src="config.js"></script>
     <script>

diff --git a/sample/package.json b/sample/package.json
@@ -19,7 +19,9 @@
       "font-awesome": "npm:font-awesome@^4.5.0",
       "google/code-prettify": "github:google/code-prettify@master",
       "jquery": "github:components/[email protected]",
+      "jquery-easing": "npm:jquery.easing@^1.3.2",
       "jquery-validation": "npm:[email protected]",
+      "jquery-validation-unobtrusive": "npm:[email protected]",
       "json": "github:systemjs/plugin-json@^0.1.0",
       "jsrender": "npm:jsrender@^0.9.75",
       "prettify": "npm:prettify@^0.1.7",

diff --git a/sample/src/about/about.html b/sample/src/about/about.html
@@ -51,7 +51,9 @@ <h4>Example</h4>
                             <ej-grid id="about_grid" e-data-source.bind="EmployeesList" e-page-settings.bind="page" e-allow-paging=t rue>
                                 <ej-column e-field="EmployeeImage" e-header-text="Employee Image" e-text-align="center" e-width="110">
                                     <ej-template>
+                                        <div if.bind="EmployeeID">
                                         <div><img style="width: 45px; height: 45px" src.bind="'images/grid/Employees/' + EmployeeID + '.png'" /> </div>
+                                        </div>
                                     </ej-template>
                                 </ej-column>
                                 <ej-column e-field="EmployeeID" e-header-text="Employee ID" e-text-align="right" e-width="90"></ej-column>

diff --git a/sample/src/dashboard/index.html b/sample/src/dashboard/index.html
@@ -5,7 +5,7 @@
             <li repeat.for="details of sampleDetails" class="listsampleimage">
                 <div class="lisampleimage">
                     <a href="#/dashboard/samples/${details.URL}" target="_blank">
-                        <img class="imgstyle img1" src="${details.imageURL}" />
+                        <img class="imgstyle img1" src.bind="details.imageURL" />
                     </a>
                 </div>
                 <div class="litext">
@@ -19,7 +19,7 @@
                         <div><span class="view">VIEW SAMPLE</span></div>
                     </a>
                 </div>
-                <span class="qrcode"><img class="qrimage" src="${details.qrURL}" /></span>
+                <span class="qrcode"><img class="qrimage" src.bind="details.qrURL" /></span>
             </li>
         </ul>
     </div>

diff --git a/sample/src/dashboard/samples/expenseanalysis/expenseanalysis.js b/sample/src/dashboard/samples/expenseanalysis/expenseanalysis.js
@@ -43,7 +43,8 @@ export class Expense {
       let dataManger = ej.DataManager({// eslint-disable-line new-cap
         url: 'http://js.syncfusion.com/ejServices/api/expense/get?month=' + month,
         offline: true,
-        requiresFormat: false
+        requiresFormat: false,
+        crossDomain: true
       });
       dataManger.ready.done((e) => {
         this.gridData = e.result[1];

diff --git a/sample/src/dashboard/samples/healthtracker/healthtracker.html b/sample/src/dashboard/samples/healthtracker/healthtracker.html
@@ -206,7 +206,7 @@
       </div>
     </div>
     <div repeat.for="template of annotationsTemplate" id="${template.id}" class="templateAnnotations">
-      <img class="template_image" src="${template.image}" />
+      <img class="template_image" src.bind="template.image" />
     </div>
   </div>
   </div>

diff --git a/sample/src/dashboard/samples/healthtracker/healthtracker.js b/sample/src/dashboard/samples/healthtracker/healthtracker.js
@@ -1,7 +1,8 @@
 export class Health {
     constructor() {
       this.dataManger = ej.DataManager({// eslint-disable-line new-cap
-        url: 'http://js.syncfusion.com/ejServices/api/HealthTracker/Load'
+        url: 'http://js.syncfusion.com/ejServices/api/HealthTracker/Load',
+        crossDomain: true
       });
       this.showPopup = true;
       this.sumColl = {};

diff --git a/sample/src/dashboard/samples/stockanalysis/stockanalysis.js b/sample/src/dashboard/samples/stockanalysis/stockanalysis.js
@@ -102,7 +102,8 @@ export class Stock {
     }
     getWebAPIData(filename, sender) {
       let dataManger = ej.DataManager({ // eslint-disable-line new-cap
-        url: 'http://mvc.syncfusion.com/Services/api/Stock/' + filename + ''
+        url: 'http://mvc.syncfusion.com/Services/api/Stock/' + filename + '',
+        crossDomain: true
       });
       dataManger.executeQuery(ej.Query()).done((e) => { // eslint-disable-line new-cap
         this.hiloChart.widget.element.ejChart({ 'datasource': this.sethilodatasource(e.result), 'primaryXAxis': this.setHiloRangeXAxis(), 'primaryYAxis': this.setHiloRangeAxis(filename) });

diff --git a/sample/src/samples/autocomplete/auto-fill.html b/sample/src/samples/autocomplete/auto-fill.html
@@ -5,7 +5,7 @@
             <div class="cols-sample-area">
                 <div class="frame">
                     <div class="atccontrol">
-                          <span class="txt">Flowers:</span>
+                          <span class="txt">Select a flower</span>
                         <input type="text" id="selectFlower" ej-autocomplete="e-width.bind:width; e-watermark-text:Select a flower; e-data-source.bind: flowers;e-enable-auto-fill:true;" />
                     </div>
                 </div>

diff --git a/sample/src/samples/autocomplete/basic-use.html b/sample/src/samples/autocomplete/basic-use.html
@@ -5,7 +5,7 @@
             <div class="cols-sample-area">
                 <div class="frame">
                     <div class="atccontrol">
-                          <span class="txt">Car:</span>
+                          <span class="txt">Select a car</span>
                         <input type="text" id="selectCar" ej-autocomplete="e-width.bind:width; e-watermark-text:Select a car; e-data-source.bind: carList;" />
                     </div>
                 </div>

diff --git a/sample/src/samples/autocomplete/data-binding-local-data.html b/sample/src/samples/autocomplete/data-binding-local-data.html
@@ -5,7 +5,7 @@
             <div class="cols-sample-area">
                 <div class="frame">
                     <div class="atccontrol">
-                         <span class="txt">States:</span>
+                         <span class="txt">Select a state</span>
                         <input type="text" id="selectFlower" ej-autocomplete="e-width.bind:width; e-watermark-text:Select a state; e-data-source.bind: states;e-fields.bind:fields;" />
                     </div>
                 </div>

diff --git a/sample/src/samples/autocomplete/data-binding-remote-data.html b/sample/src/samples/autocomplete/data-binding-remote-data.html
@@ -5,7 +5,7 @@
             <div class="cols-sample-area">
                 <div class="frame">
                     <div class="atccontrol">
-                        <span class="txt">Find a customer:</span>
+                        <span class="txt">Select a customer:</span>
                         <input type="text" id="searchCustomer" ej-autocomplete="e-width.bind:width; e-watermark-text:Search a customer; e-data-source.bind: dataManger;e-query.bind:query;e-fields.bind:fields;" />
                     </div>
                 </div>

diff --git a/sample/src/samples/autocomplete/data-binding-remote-data.js b/sample/src/samples/autocomplete/data-binding-remote-data.js
@@ -3,7 +3,7 @@ export class BasicUse {
     this.width = '100%';
     this.fields = { text: 'ContactName', key: 'SupplierID' };
     this.filterType = ej.filterType.StartsWith;
-    this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/' }); // eslint-disable-line new-cap
+    this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); // eslint-disable-line new-cap
     this.query = ej.Query().from('Suppliers').select('SupplierID', 'ContactName'); // eslint-disable-line new-cap
   }
 }
diff --git a/sample/src/samples/autocomplete/grouping.html b/sample/src/samples/autocomplete/grouping.html
@@ -5,7 +5,7 @@
             <div class="cols-sample-area">
                 <div class="frame">
                     <div class="atccontrol">
-                        <span class="txt">Find a Country:</span>
+                        <span class="txt">Select a Country:</span>
                         <input type="text" id="groupingCountry" ej-autocomplete=" e-watermark-text: Select a country;e-width.bind:width;e-items-count:7;e-data-source.bind:countries;e-filter-type.bind:filterType;e-fields.bind:fields;e-highlight-search:true;" />
                     </div>
                 </div>

diff --git a/sample/src/samples/autocomplete/multiple-values.html b/sample/src/samples/autocomplete/multiple-values.html
@@ -6,11 +6,11 @@
                 <div class="frame">
                     <div class="atccontrol multipleValue">
                         <span class="txt">Using Delimiter</span>
-                        <input type="text" id="delimit" ej-autocomplete="e-width.bind:width;e-show-popup-button:true;e-multi-select-mode:Delimiter; e-watermark-text:Select a car; e-data-source.bind: languages;" />
+                        <input type="text" id="delimit" ej-autocomplete="e-width.bind:width;e-show-popup-button:true;e-multi-select-mode:Delimiter; e-watermark-text:Select skills; e-data-source.bind: languages;" />
                     </div>
                     <div class="control">
                        <span class="txt">Using VisualMode</span>
-                        <input type="text" id="visualmode" ej-autocomplete="e-width.bind:width;e-show-popup-button:true;e-multi-select-mode:VisualMode; e-watermark-text:Select a car; e-data-source.bind: languages;"/>
+                        <input type="text" id="visualmode" ej-autocomplete="e-width.bind:width;e-show-popup-button:true;e-multi-select-mode:VisualMode; e-watermark-text:Select skills; e-data-source.bind: languages;"/>
                     </div>
                 </div>
             </div>

diff --git a/sample/src/samples/button/registry.json b/sample/src/samples/button/registry.json
@@ -1,48 +1,48 @@
 {
     "title": "Button",
     "documentation": "http://help.syncfusion.com/js/api/ejbutton",
-    "samples": {
-        "Default-Functionalities": {
-            "default": true,
-            "files": [ "html", "js" ],
-            "gist":"205deb7266bdf25a56875cf7d25945c0"
-        },
-        "Toggle-Buttons": {
-            "files": [ "html", "js"],
-            "gist":"39f6ddc76684227613ab48659464ea6e"
-        },
-        "Split-Buttons": {
-            "files": [ "html", "js"],
-            "gist":"d3d0a17e1f23a9a948645ab98c3debc2"
-        },
-        "Group-Button": {
-            "files": [ "html" ],
-            "gist":"54d1bdb9d3bf8487d811c60f510fdcae"
-        },
-        "Repeat-Button": {
-            "files": [ "html", "js" ],
-            "gist":"daef91bed7e174beee9f557d72d56c30"
-        },
-        "CheckBox": {
-            "files": [ "html", "js"],
-            "gist":"9ecfff89acbc159fe8538a897937bf5e"
-        },
-        "Radio-Buttons": {
-            "files": [ "html", "js"],
-            "gist":"cc1294f8306691d450c83f61310305ee"
-        },
-        "API": {
-            "title" : "API's",
-            "files": [ "html", "js" ],
-            "gist":"2feb10051e7d1ede5552a382954d3332"
-        },
-        "Events": {
-            "files": [ "html", "js"],
-            "gist":"cb0273fc45ebad8e48b1389c6f9c3dda"
-        },
-        "RTL": {
-            "files": [ "html", "js"],
-            "gist":"b3220e78e46c2127d753d6e5048d563b"
-        }
+  "samples": {
+    "Default-Functionalities": {
+      "default": true,
+      "files": [ "html", "js" ],
+      "gist": "205deb7266bdf25a56875cf7d25945c0"
+    },
+    "Toggle-Buttons": {
+      "files": [ "html", "js" ],
+      "gist": "39f6ddc76684227613ab48659464ea6e"
+    },
+    "Split-Buttons": {
+      "files": [ "html", "js" ],
+      "gist": "d3d0a17e1f23a9a948645ab98c3debc2"
+    },
+    "Group-Button": {
+      "files": [ "html" ],
+      "gist": "54d1bdb9d3bf8487d811c60f510fdcae"
+    },
+    "Repeat-Button": {
+      "files": [ "html", "js" ],
+      "gist": "daef91bed7e174beee9f557d72d56c30"
+    },
+    "CheckBox": {
+      "files": [ "html", "js" ],
+      "gist": "9ecfff89acbc159fe8538a897937bf5e"
+    },
+    "Radio-Buttons": {
+      "files": [ "html", "js" ],
+      "gist": "cc1294f8306691d450c83f61310305ee"
+    },
+    "API": {
+      "title": "API's",
+      "files": [ "html", "js" ],
+      "gist": "2feb10051e7d1ede5552a382954d3332"
+    },
+    "Events": {
+      "files": [ "html", "js" ],
+      "gist": "cb0273fc45ebad8e48b1389c6f9c3dda"
+    },
+    "RTL": {
+      "files": [ "html", "js" ],
+      "gist": "b3220e78e46c2127d753d6e5048d563b"
     }
+  }
 }
diff --git a/sample/src/samples/daterangepicker/API.html b/sample/src/samples/daterangepicker/API.html
@@ -0,0 +1,25 @@
+<template>
+<require from="./Common.css"></require>
+  <div class="row">
+      <div class="frame"><div>    
+          <label>Select DateRange</label> 
+          <input id="daterangepick" ej-date-range-picker="e-value.two-way:daterangeValue;e-enabled.bind:dtStatus;e-width.bind:'100%'" e-on-open.trigger="onOpen()" e-on-close.trigger="onClose()"></input>
+      </div>
+    </div>
+  </div>  
+ <div id="property-window" class="box wide">
+    <div class="row">
+       <div class="col-sm-2">         
+            <input type="checkbox" id="status" ej-toggle-button="e-size.bind:'medium';e-show-rounded-corner.bind:true;e-active-text.bind:'Enable';e-default-text.bind:'Disable'" e-on-change.trigger="onEnable($event)"></input>
+            <label for="status">Toggle</label> 
+       </div>
+       <div class="col-sm-2">        
+          <button id="getval" ej-button="e-text.bind:'Get Value';e-size.bind:'medium';" e-on-click.trigger="getSelectedValue()"></button>
+       </div>
+       <div class="col-sm-2">         
+            <input type="checkbox" id="show" ej-toggle-button="e-size.bind:'medium';e-show-rounded-corner.bind:true;e-active-text.bind:'Hide';e-default-text.bind:'Show';e-enabled.bind:btnStatus" e-on-create.trigger="ontglbtnCreate()"  e-on-change.trigger="onShow($event)"></input>
+            <label for="show">Toggle</label> 
+       </div>
+     </div>
+ </div>
+</template>
diff --git a/sample/src/samples/daterangepicker/API.js b/sample/src/samples/daterangepicker/API.js
@@ -0,0 +1,41 @@
+export class API {
+    constructor() {
+      this.datetimeValue = '5/18/2016 - 5/21/2016';
+      this.btnStatus = true;
+      this.dtStatus = true;
+    }
+    ontglbtnCreate() {
+      $('.e-togglebutton').mousedown(function(e) {
+        e.stopPropagation();
+      });
+    }
+    onClose() {
+      let tgleBtn = $('#show').ejToggleButton('instance');
+      tgleBtn.option('toggleState', false);
+    }
+    onOpen() {
+      let tgleBtn = $('#show').ejToggleButton('instance');
+      tgleBtn.option('toggleState', true);
+    }
+    onEnable(args) {
+      if (args.detail.isChecked) {
+        this.dtStatus = false;
+        this.btnStatus = false;
+      } else {
+        this.dtStatus = true;
+        this.btnStatus = true;
+      }
+    }
+    getSelectedValue() {
+      let dateRangeObj = $('#daterangepick').ejDateRangePicker('instance');
+      /*eslint-disable */
+        alert('Selected Date&Time is : ' + dateRangeObj.getSelectedRange().StartDate);
+        alert('Selected Date&Time is : ' + dateRangeObj.getSelectedRange().EndDate);
+      /*eslint-enable */
+    }
+    onShow(args) {
+      let dateRangeObj = $('#daterangepick').ejDateRangePicker('instance');
+      if (args.detail.isChecked) dateRangeObj.popupShow();
+      else dateRangeObj.popupHide();
+    }
+}
diff --git a/sample/src/samples/daterangepicker/Common.css b/sample/src/samples/daterangepicker/Common.css
@@ -0,0 +1,15 @@
+.row [class*="cols-"]:first-child > div:first-child {
+    margin: 0 auto;
+}
+
+.frame {
+    padding: 30px 20px;   
+    color: #5C5C5C;
+    width:300px;
+    margin: 0 auto;
+}
+@media (max-width: 440px){
+.frame{
+    width: auto !important;    
+   }
+}
diff --git a/sample/src/samples/daterangepicker/DateTimeRange.html b/sample/src/samples/daterangepicker/DateTimeRange.html
@@ -0,0 +1,10 @@
+<template>
+  <require from="./Common.css"></require>
+  <div class="row">
+      <div class="frame"><div>
+      <label>Select DateRange</label> 
+      <input id="daterangepick" ej-date-range-picker="e-value.bind:daterangeValue;e-enable-time-picker.bind:enableTimePicker;e-width.bind:'100%'"></input>
+     </div>
+    </div>
+  </div>        
+</template>
diff --git a/sample/src/samples/daterangepicker/DateTimeRange.js b/sample/src/samples/daterangepicker/DateTimeRange.js
@@ -0,0 +1,6 @@
+export class Meridian {
+    constructor() {
+      this.daterangeValue = '5/18/2016-5/29/2016';
+      this.enableTimePicker = true;
+    }
+}
diff --git a/sample/src/samples/daterangepicker/Default-functionalities.html b/sample/src/samples/daterangepicker/Default-functionalities.html
@@ -0,0 +1,11 @@
+<template>
+    <require from="./Common.css"></require>
+    <div class="row">
+        <div class="frame">
+            <div>
+                <label>Select RangeTime</label>
+                <input id="daterangepick" ej-date-range-picker="e-value.bind:daterangeValue;e-width.bind:'100%'"></input>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/sample/src/samples/daterangepicker/Default-functionalities.js b/sample/src/samples/daterangepicker/Default-functionalities.js
@@ -0,0 +1,5 @@
+export class Default {
+  constructor() {
+    this.daterangeValue = '3/14/2017 - 4/17/2017';
+  }
+}
diff --git a/sample/src/samples/daterangepicker/Events.html b/sample/src/samples/daterangepicker/Events.html
@@ -0,0 +1,17 @@
+<template>
+<require from="./Common.css"></require>
+  <div class="row">
+      <div class="frame"><div>
+        <label>Select DateRange</label> 
+        <input id="daterangepick" ej-date-range-picker="e-value.bind:daterangeValue;e-width.bind:'100%'" e-on-create.trigger="logger.log('DateRangePicker has been created')" e-on-open.trigger="logger.log('DateRangePicker popup has been opened.')" e-on-close.trigger="logger.log('DateRangePicker popup has been closed.')" e-on-change.trigger="onChange($event)" ></input>
+      </div>
+    </div>
+  </div>  
+   <div id="Logger" class="box">
+      <h4>Event Trace</h4>
+       <logger view-model.ref="logger"></logger>
+       <div>
+           <button class="logger-button" ej-button="e-text:Clear" e-on-click.trigger = "logger.clear()" ></button>
+       </div>
+   </div>
+</template>
diff --git a/sample/src/samples/daterangepicker/Events.js b/sample/src/samples/daterangepicker/Events.js
@@ -0,0 +1,8 @@
+export class Events {
+   constructor() {
+     this.daterangeValue = '5/18/2016-5/28/2016';
+   }
+   onChange(args) {
+     this.logger.log(args.detail.value + ' value was selected');
+   }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -206,7 +206,7 @@ @@
           </div>
         </div>
         <div repeat.for="template of annotationsTemplate" id="${template.id}" class="templateAnnotations">
-          <img class="template_image" src="${template.image}" />
+          <img class="template_image" src.bind="template.image" />
         </div>
       </div>
       </div>
@@ Expand Down @@