Added 'with-backdrop' and updated demo after fixes on paper-dialog-be…

…havior#1.0.5 and iron-overlay-behavior#1.0.8
motss · Sep 26, 2015 · e01f560 · e01f560
1 parent fce2502
commit e01f560
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,8 @@ Example:
 
     <jv-datepicker><jv-datepicker>
     <jv-datepicker-dialog modal></jv-datepicker-dialog>
+    <jv-datepicker-dialog with-backdrop></jv-datepicker-dialog>
+    <jv-datepicker-dialog></jv-datepicker-dialog>
 
 `jv-datepicker` provides a regular datepicker element.
 While `jv-datepicker-dialog` has a `jv-datepicker` being wrapped inside a dialog.

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jv-datepicker",
-  "version": "1.5.4",
+  "version": "1.6.0",
   "authors": [
     "motss <[email protected]>"
   ],

diff --git a/demo/index.html b/demo/index.html
@@ -79,7 +79,7 @@
       border: 1px solid #cfd8dc;
       color: #607d8b;
       display: block;
-      height: 32px;
+      height: 36px;
       -webkit-flex-shrink: 0;
       flex-shrink: 0;
       padding: 10px 4px;
@@ -134,8 +134,10 @@
     <div>
       <h4>Simple Styled</h4>
       <section class="horizontal-section">
-        <paper-button tab-index="0" id="regular" data-dialog="regularDialog" on-click="_openDatepicker">light theme</paper-button>
-        <paper-button tab-index="0" id="color" data-dialog="colorDialog" on-click="_openDatepicker">dark theme</paper-button>
+        <paper-button tab-index="0" id="regular" data-dialog="regularDialog" on-tap="_openDatepicker">light theme</paper-button>
+        <paper-button tab-index="0" id="color" data-dialog="colorDialog" on-tap="_openDatepicker">dark theme</paper-button>
+        <paper-button tab-index="0" id="backdrop" data-dialog="backdropDialog" on-tap="_openDatepicker">with-backdrop</paper-button>
+        <paper-button tab-index="0" id="simple" data-dialog="simpleDialog" on-tap="_openDatepicker">Simple</paper-button>
       </section>
     </div>
 
@@ -229,6 +231,16 @@ <h4>Element's Boilerplate</h4>
           <paper-toggle-button data-toggle="dialog" checked="{{takeDialog}}"></paper-toggle-button>
           <span>{{takeElement}}<span class="note">&emsp;//Note: Toggle between non-dialog and dialog element.</span></span>
         </div>
+        <div>
+          <paper-checkbox data-toggle="modal" checked="{{takeModal}}" disabled="{{takeBackdrop}}">
+            <span>modal</span>
+          </paper-checkbox>
+        </div>
+        <div>
+          <paper-checkbox data-toggle="backdrop" checked="{{takeBackdrop}}" disabled="{{takeModal}}">
+            <span>withBackdrop</span>
+          </paper-checkbox>
+        </div>
         <div>
           <paper-checkbox data-toggle="start" checked="{{takeStartDay}}">
             <span>startDay</span>
@@ -259,6 +271,10 @@ <h4>Element's Boilerplate</h4>
     </div>
 
     <section>
+      <jv-datepicker-dialog id="simpleDialog" entry-animation="scale-up-animation"  exit-animation="fade-out-animation"
+      start-day="0" disable-days="[0,6]"></jv-datepicker-dialog>
+      <jv-datepicker-dialog id="backdropDialog" entry-animation="scale-up-animation" with-backdrop  exit-animation="fade-out-animation"
+      start-day="0" disable-days="[0,6]"></jv-datepicker-dialog>
       <jv-datepicker-dialog id="colorDialog" entry-animation="scale-up-animation" modal  exit-animation="fade-out-animation"
       start-day="0" disable-days="[0,6]"></jv-datepicker-dialog>
       <jv-datepicker-dialog id="regularDialog" entry-animation="scale-up-animation" modal  exit-animation="fade-out-animation"
@@ -293,6 +309,8 @@ <h4>Element's Boilerplate</h4>
   app.takeFormat = false;
   app.takeBindDate = false;
   app.takeFormatDate = false;
+  app.takeModal = true;
+  app.takeBackdrop = false;
   app.takeElement = 'jv-datepicker-dialog';
 
   app.genCode = function(ev){
@@ -312,6 +330,12 @@ <h4>Element's Boilerplate</h4>
     switch (toggleId) {
       case 'dialog':
         app.takeElement = toggleCheck? 'jv-datepicker-dialog': 'jv-datepicker';
+        if (!toggleCheck) {
+          app.takeModal = app.takeBackdrop = !toggleCheck;
+          newCodeStr = modifyCode(toggleCheck, newCodeStr, ' with-backdrop');
+        }else {
+          app.takeBackdrop = false;
+        }
         newCodeStr = modifyCode(toggleCheck, newCodeStr, '', true);
         newCodeStr = modifyCode(toggleCheck, newCodeStr, ' modal');
         break;
@@ -330,6 +354,12 @@ <h4>Element's Boilerplate</h4>
       case 'fire':
         newCodeStr = modifyCode(toggleCheck, newCodeStr, ' on-format-date=""');
         break;
+      case 'modal':
+        newCodeStr = modifyCode(toggleCheck, newCodeStr, ' modal');
+        break;
+      case 'backdrop':
+        newCodeStr = modifyCode(toggleCheck, newCodeStr, ' with-backdrop');
+        break;
       default:
     }
     if(newCodeStr) {

diff --git a/jv-datepicker.html b/jv-datepicker.html
@@ -13,6 +13,8 @@
 
     <jv-datepicker><jv-datepicker>
     <jv-datepicker-dialog modal></jv-datepicker-dialog>
+    <jv-datepicker-dialog with-backdrop></jv-datepicker-dialog>
+    <jv-datepicker-dialog></jv-datepicker-dialog>
 
 `jv-datepicker` provides a regular datepicker element.
 While `jv-datepicker-dialog` has a `jv-datepicker` being wrapped inside a dialog.