1.0 port

divshot · Jun 17, 2015 · edca31e · edca31e
1 parent 95085a5
commit edca31e
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 41 deletions.
diff --git a/.bowerrc b/.bowerrc
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules
 dist
 .sass-cache
 .tmp
+bower_components
diff --git a/bower.json b/bower.json
@@ -9,10 +9,11 @@
   ],
   "main": "sortable-list.html",
   "dependencies": {
-    "polymer": "Polymer/polymer#^0.5.1",
+    "polymer": "Polymer/polymer#~1.0.0",
     "Sortable": "~1.0"
   },
   "devDependencies": {
-    "web-component-tester": "Polymer/web-component-tester#^2.0.0"
+    "iron-component-page": "PolymerElements/iron-component-page#~1.0.0",
+    "web-component-tester": "*"
   }
 }
diff --git a/demo.html → demo/index.html b/demo.html → demo/index.html
@@ -4,8 +4,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>sortable-list Demo</title>
 
-  <script src="../webcomponentsjs/webcomponents.js"></script>
-  <link rel="import" href="sortable-list.html">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../sortable-list.html">
 
   <style>
     body {

diff --git a/index.html b/index.html
@@ -1,15 +1,26 @@
 <!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
 <html>
 <head>
-  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <script src="../webcomponentsjs/webcomponents.js"></script>
-  <link rel="import" href="../polymer/polymer.html">
-  <link rel="import" href="../core-component-page/core-component-page.html">
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
 
 </head>
-<body unresolved>
+<body>
 
-  <core-component-page></core-component-page>
+  <iron-component-page></iron-component-page>
 
 </body>
 </html>
diff --git a/sortable-import.html b/sortable-import.html
@@ -0,0 +1 @@
+<script src="../Sortable/Sortable.js"></script>
diff --git a/sortable-list.html b/sortable-list.html
@@ -1,6 +1,5 @@
 <link rel="import" href="../polymer/polymer.html">
-
-<script src="../Sortable/Sortable.js"></script>
+<link rel="import" href="sortable-import.html">
 
 <!--
 Simple, flexible drag-and-drop sortable lists utilizing the excellent
@@ -19,8 +18,7 @@
 @status alpha
 @homepage http://elements.divshot.io/sortable-list
 -->
-<polymer-element name="sortable-list">
-
+<dom-module id="sortable-list">
   <template>
     <style>
       :host {
@@ -29,95 +27,130 @@
     </style>
     <content></content>
   </template>
-
   <script>
-
     Polymer({
-      publish: {
+      is: 'sortable-list',
+      properties: {
         /**
          * A named group to allow drag and drop between multiple elements.
          * @attribute group
          * @default null
          * @type String
          */
-        group: null,
-        sort: true,
+        group: {
+          type: String,
+          value: null
+        },
+        sort: {
+          type: Boolean,
+          value: true
+        },
         /**
          * When present, disables sorting.
          * @attribute disabled
          * @default false
          * @type Boolean
          */
-        disabled: false,
-        store: undefined,
+        disabled: {
+          type: Boolean,
+          value: false
+        },
+        store: {
+          type: Object,
+          value: null
+        },
         /**
          * Length of sorting animation (`0` for no animation).
          * @attribute animation
          * @default 0
          * @type Integer
          */
-        animation: 0,
+        animation: {
+          type: Number,
+          value: 0
+        },
         /**
          * CSS selector for a handle inside the sortable item (if any).
          * @attribute handle
          * @default null
          * @type String
          */
-        handle: null,
+        handle: {
+          type: String,
+          value: null
+        },
         /**
          * CSS selector for elements to ignore for sorting purposes.
          * @attribute filter
          * @default null
          * @type String
          */
-        filter: null,
+        filter: {
+          type: String,
+          value: null
+        },
         /**
          * CSS selector for which child elements should be sortable.
          * @attribute sortable
          * @default >*
          * @type String
          */
-        sortable: '>*',
+        sortable: {
+          type: String,
+          value: '>*'
+        },
         /**
          * Name of the class to apply to the ghost during drag.
          * @attribute ghostClass
          * @default sortable-ghost
          * @type String
          */
-        ghostClass: 'sortable-ghost',
+        ghostClass: {
+          type: String,
+          value: 'sortable-ghost'
+        },
         /**
          * Whether or not to scroll when dragging to edges.
          * @attribute scroll
          * @default true
          * @type Boolean
          */
-        scroll: true,
+        scroll: {
+          type: Boolean,
+          value: true
+        },
         /**
          * Sensitivity of scroll boundary detection.
          * @attribute scrollSensitivity
          * @default 30
          * @type Integer
          */
-        scrollSensitivity: 30,
+        scrollSensitivity: {
+          type: Number,
+          value: 30
+        },
         /**
          * Scrolling speed.
          * @attribute scrollSpeed
          * @default 10
          * @type Integer
          */
-        scrollSpeed: 10
-      },
-      observe: {
-        'group sort disabled store animation handle filter sortable ghostClass scroll scrollSensitivity scrollSpeed': 'reactivate'
+        scrollSpeed: {
+          type: Number,
+          value: 10
+        }
       },
+      observers: [
+        '_reactivate(group, sort, disabled, store, animation, handle, filter, sortable, ghostClass, scroll, scrollSensitivity, scrollSpeed)'
+      ],
       attached: function() {
-        this.reactivate();
+        this._reactivate();
       },
       /**
        * Manually destroy and recreate scrollable.
-       * @method reactivate
+       * @method _reactivate
        */
-      reactivate: function() {
+      _reactivate: function() {
         if (this._sortable) { this._sortable.destroy(); }
         this._sortable = Sortable.create(this, this.generateOptions());
       },
@@ -189,7 +222,5 @@
         }
       }
     });
-
   </script>
-
-</polymer-element>
+</dom-module>