minor refactor to be independent from any content on the underlay

renamed and added an event for the end of the pull duration integrated spinkit-element in demo
GeoloeG · Apr 12, 2016 · 2eab8b2 · 2eab8b2
1 parent 5fb33e4
commit 2eab8b2
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 39 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-pullable-container",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "authors": [
     "Pascal Gula aka MeTaNoV <pascal.gula@gmail.com>"
   ],
@@ -37,8 +37,7 @@
   ],
   "dependencies": {
     "polymer": "Polymer/polymer#^1.1.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "spinkit": "spinkit#^1.2.0"
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0"
   },
   "devDependencies": {
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
@@ -47,6 +46,7 @@
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
     "iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "spinkit-element": "spinkit-element#^1.0.0"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -14,6 +14,7 @@
   <link rel="import" href="../../paper-styles/default-theme.html">
   <link rel="import" href="../../paper-styles/demo-pages.html">
   <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../spinkit-element/spinkit-element.html">
 
   <style is="custom-style">
     /* If you want your things to transition nicely, you might want to disable
@@ -39,6 +40,14 @@
         background-color: var(--paper-grey-100);
         max-width: 360px;
       };
+      --iron-pullable-container-underlay: {
+        @apply(--layout-horizontal);
+        @apply(--layout-center-justified);
+      };
+    }
+
+    spinkit-element {
+      margin-top: 5px;
     }
 
   </style>
@@ -47,16 +56,19 @@
 <body unresolved>
   <template is="dom-bind">
     <iron-ajax
-       auto
-       url="https://api.github.com/repos/Polymer/Polymer/issues?state=open"
-       handle-as="json"
-       last-response="{{lastResponse}}">
+      id="idAjax"
+      url="https://api.github.com/repos/Polymer/Polymer/issues?state=open"
+      handle-as="json"
+      last-response="{{lastResponse}}"
+      on-response="_handleResponse">
     </iron-ajax>
 
     <div class="horizontal-section-container">
       <div class="horizontal-section">
         <h1>Standard pull</h1>
-        <iron-pullable-container on-iron-pull="_handlePull1">
+        <iron-pullable-container 
+          on-iron-pull-start="_handlePullStart1"
+          auto-close>
           <div class="container">
             <div class="big">Pull me down!</div>
             <div class="extend">(I was pulled [[_nbPull1]] time(s))</div>
@@ -66,7 +78,12 @@ <h1>Standard pull</h1>
 
       <div class="horizontal-section">
         <h1>Pull with Spinners</h1>
-        <iron-pullable-container on-iron-pull="_handlePull2">
+        <iron-pullable-container 
+          on-iron-pull-start="_handlePullStart2"
+          on-iron-pull-end="_handlePullEnd2"
+          auto-close 
+          active-duration="3000">
+          <spinkit-element id="spinner2" class="underlay"></spinkit-element>
           <div class="container">
             <div class="big">Pull me down!</div>
             <div class="extend">(I was pulled [[_nbPull2]] time(s))</div>
@@ -76,7 +93,10 @@ <h1>Pull with Spinners</h1>
 
       <div class="horizontal-section">
         <h1>Pull with custom settings</h1>
-        <iron-pullable-container>
+        <iron-pullable-container 
+          id="ipcAjax"
+          on-iron-pull-start="_handlePullAjax">
+          <spinkit-element id="spinnerAjax" class="underlay"></spinkit-element>
           <div class="container">
             <h2>Polymer Issues:</h2>
             <template is="dom-repeat" items="[[lastResponse]]" as="ghIssue">
@@ -93,12 +113,27 @@ <h3>Issue [[ghIssue.number]]</h3>
     scope._nbPull1 = 0;
     scope._nbPull2 = 0;
 
-    scope._handlePull1 = function() {
+    scope._handlePullStart1 = function() {
       scope._nbPull1++;
     };
 
-    scope._handlePull2 = function() {
+    scope._handlePullStart2 = function() {
       scope._nbPull2++;
+      scope.$.spinner2.toggleAttribute("active", true);
+    };
+
+    scope._handlePullEnd2 = function() {
+      scope.$.spinner2.toggleAttribute("active", false);
+    };
+
+    scope._handlePullAjax = function() {
+      scope.$.spinnerAjax.toggleAttribute("active", true);
+      this.$.idAjax.generateRequest();
+    };
+
+    scope._handleResponse = function() {
+      scope.$.ipcAjax.close();
+      scope.$.spinnerAjax.toggleAttribute("active", false);
     };
   </script>
 </body>

diff --git a/iron-pullable-container.html b/iron-pullable-container.html
@@ -1,11 +1,9 @@
 <link rel="import" href="../polymer/polymer.html">
 
-<link rel="import" href="./iron-pullable-container-styles.html">
-
 <!--
 `<iron-pullable-container>` is a container that can be pulled to provide a possible action.
 It supports a vertical transition, and the transition duration and properties
-can be customized. You can also add a configurable spinner when the action is ongoing.
+can be customized.
 
 Example:
 
@@ -38,7 +36,7 @@ <h1>Pull Me!</h1>
 -->
 <dom-module id="iron-pullable-container">
   <template>
-    <style include="iron-pullable-container-styles">
+    <style>
       :host {
         display: block;
         position: relative;
@@ -53,11 +51,6 @@ <h1>Pull Me!</h1>
         width: 100%;
         @apply(--iron-pullable-container-underlay);
       }
-      #spinner {
-        margin-top: 5px;
-        opacity: 0;
-        @apply(--iron-pullable-container-spinner);
-      }
       #content {
         background-color: var(--primary-background-color);
         will-change: top, transform;
@@ -67,10 +60,7 @@ <h1>Pull Me!</h1>
     </style>
     <div id="container">
       <div id="underlay">
-        <template is="dom-if" if="[[spinner]]">
-          <div id="spinner" class="[[spinner]]"></div>          
-        </template>
-        <content select=".underlay">
+        <content select=".underlay">          
       </div>
       <div id="content">
         <content select=":not(.underlay)"></content>
@@ -87,7 +77,13 @@ <h1>Pull Me!</h1>
     /**
      * Fired when the threshold has been reached.
      *
-     * @event iron-pull
+     * @event iron-pull-start
+     */
+
+    /**
+     * Fire when auto-closing after the specified duration.
+     *
+     * @event iron-pull-end
      */
 
     properties: {
@@ -123,10 +119,6 @@ <h1>Pull Me!</h1>
         value: 'cubic-bezier(0.4, 0.0, 0.2, 1)'
       },
 
-      spinner: {
-        type: String
-      },
-
       /**
        * If true, then the container will not allow swiping.
        */
@@ -135,8 +127,15 @@ <h1>Pull Me!</h1>
         value: false
       },
 
+      /**
+       * If true, automatically close the underlay after the active duration.
+       */
+      autoClose: {
+        type: Boolean,
+        value: false
+      }
+
       // TODO: Add a tooltip option
-      // TODO: Add 2 text label
     },
 
     listeners: {
@@ -150,9 +149,6 @@ <h1>Pull Me!</h1>
     },
 
     attached: function() {
-      if (this.spinner) {
-        this.$$(spinner).style.height = this.pullHeight;        
-      }
       this.listen(this.$.content, 'webkitTransitionEnd', '_onTransitionEnd');
       this.listen(this.$.content, 'transitionend', '_onTransitionEnd');
     },
@@ -162,6 +158,13 @@ <h1>Pull Me!</h1>
       this.unlisten(this.$.content, 'transitionend', '_onTransitionEnd');
     },
 
+    /**
+     * Close the underlay.
+     */
+    close: function() {
+      this._animate(0);
+    },
+
     _onTrack: function(event) {
       if (this.disabled)
         return;
@@ -216,8 +219,10 @@ <h1>Pull Me!</h1>
       this._computeTransition(this.$.content);
 
       if (this._pullComplete) {
+        this.fire('iron-pull-start');
         this._animate(this.pullHeight);
       } else {
+        this.fire('iron-pull-end');
         this._animate(0);
       }
     },
@@ -232,10 +237,12 @@ <h1>Pull Me!</h1>
 
     _onTransitionEnd: function(event) {
       if (this._pullComplete) {
-        this.fire('iron-pull');
-        this.async(function() {
-          this._animate(0);
-        }, this.activeDuration);
+        if (this.autoClose) {
+          this.async(function() {
+            this.fire('iron-pull-end');
+            this._animate(0);
+          }, this.activeDuration);
+        }
         this._pullComplete = false;
         this._pullStarted = false;
       }