initial commit

lenses · Sep 23, 2015 · 49d1a72 · 49d1a72
commit 49d1a72
Show file tree

Hide file tree

Showing 14 changed files with 344 additions and 0 deletions.
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "../"
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+* text=auto
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.sass-cache
+.tmp
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,28 @@
+{
+  "node": true,
+  "browser": true,
+  "esnext": true,
+  "bitwise": true,
+  "camelcase": true,
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "indent": 2,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "quotmark": "single",
+  "regexp": true,
+  "undef": true,
+  "unused": true,
+  "strict": true,
+  "trailing": true,
+  "smarttabs": true,
+  "jquery": true,
+  "globals": {
+    "wrap": true,
+    "unwrap": true,
+    "Polymer": true,
+    "Platform": true
+  }
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# lens-ui-dialog
+
+Implementation of [iron overlay behavior](https://elements.polymer-project.org/elements/iron-overlay-behavior?active=Polymer.IronOverlayBehavior) for use in Lenses.
+
+See the [component page](http://therewasaguy.github.io/lens-ui-dialog) for more information.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,13 @@
+{
+  "name": "lens-ui-dialog",
+  "version": "0.0.1",
+  "keywords": "lenses, polymer, web-components",
+  "main": "lens-ui-dialog.html",
+  "dependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page",
+    "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior"
+  },
+  "devDependencies": {
+    "web-component-tester": "Polymer/web-component-tester"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>lens-ui-dialog Demo</title>
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../lens-ui-dialog.html">
+
+    <style>
+    </style>
+  </head>
+
+  <body onclick="clickHandler(event);" unresolved>
+
+    <button data-dialog="plain">plain</button>
+
+    <lens-ui-dialog id="plain">
+      This is a plain dialog
+    </lens-ui-dialog>
+
+    <button data-dialog="delete">with backdrop</button>
+
+    <lens-ui-dialog id="delete" with-backdrop>
+      <p>Hello world!</p>
+      <button data-cancel="delete">cancel</button>
+      <button data-cancel="delete" autofocus>autofocus</button>
+    </lens-ui-dialog>
+
+    <button data-dialog="noescape">no cancel</button>
+    <lens-ui-dialog id="noescape" no-cancel-on-esc-key no-cancel-on-outside-click>
+      <div id="test-parent">
+        <button data-dialog-close="noescape">accept</button>
+        <button data-dialog-cancel="noescape">cancel</button>
+      </div>
+    </lens-ui-dialog>
+
+    <script>
+
+      function clickHandler(e) {
+        checkForDialog(e);
+        checkForClose(e);
+        checkForCancel(e);
+      }
+
+      function checkForDialog(e) {
+        if (!e.target.hasAttribute('data-dialog')) {
+          return;
+        }
+
+        var id = e.target.getAttribute('data-dialog');
+        var dialog = document.getElementById(id);
+        if (dialog) {
+          dialog.open();
+        }
+      }
+
+      function checkForClose(e) {
+        if (!e.target.hasAttribute('data-dialog-close')) {
+          return;
+        } else {
+          var id = e.target.getAttribute('data-dialog-close');
+          var dialog = document.getElementById(id);
+          if (dialog) {
+            dialog.close();
+          }
+        }
+      }
+
+      function checkForCancel(e) {
+        if (!e.target.hasAttribute('data-dialog-cancel')) {
+          return;
+        } else {
+          var id = e.target.getAttribute('data-dialog-cancel');
+          var dialog = document.getElementById(id);
+          if (dialog) {
+            dialog.cancel();
+          }
+        }
+      }
+
+      window.onload = function() {
+
+        document.addEventListener('iron-overlay-closed', function(e) {
+          var target = e.target;
+          var canceled = e.detail.canceled;
+          console.log('canceled: ' + canceled);
+        });
+      }
+
+      </script>
+
+  </body>
+</html>
+
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <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>
+  <iron-component-page></iron-component-page>
+</body>
+</html>
diff --git a/lens-ui-dialog.css b/lens-ui-dialog.css
@@ -0,0 +1,6 @@
+:host {
+  display: inline-block;
+  color: black;
+  width: 300px;
+  height: 300px;
+}
diff --git a/lens-ui-dialog.html b/lens-ui-dialog.html
@@ -0,0 +1,45 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
+
+<!--
+Dialog that extends the Polymer Iron Overlay Behavior
+
+##### Example
+  <lens-ui-dialog></lens-ui-dialog>
+@element lens-ui-dialog
+@status alpha
+@homepage http://therewasguy.github.io/lens-ui-dialog
+-->
+
+<dom-module id="lens-ui-dialog">
+
+  <style>
+    :host {
+      background: white;
+      color:black;
+      padding: 24px;
+      box-shadow: rgba(0, 0, 0, 0.24) -2.3408942051048403px 5.524510324047423px 12.090680100755666px 0px, rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
+    }
+  </style>
+
+  <template>
+    <content></content>
+  </template>
+</dom-module>
+
+<script>
+
+  (function() {
+
+    Polymer({
+      is: 'lens-ui-dialog',
+
+      behaviors: [
+        Polymer.IronOverlayBehavior
+      ]
+
+    });
+
+  })();
+
+</script>
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Thelma Test Runner</title>
+    <script src="../../webcomponentsjs/webcomponents.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      WCT.loadSuites(['lens-ui-dialog-basic.html']);
+    </script>
+  </body>
+</html>
diff --git a/test/lens-ui-dialog-basic.html b/test/lens-ui-dialog-basic.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>lens-ui-dialog</title>
+
+  <script src="../../webcomponentsjs/webcomponents.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+
+  <!-- Step 1: import the element to test -->
+  <link rel="import" href="../lens-ui-dialog.html">
+
+</head>
+<body>
+
+  <lens-ui-dialog id="fixture"></lens-ui-dialog>
+
+  <script>
+    var should = chai.should();
+    var myEl = document.getElementById("fixture");
+
+    // the event listener callback will be added / removed in every async test
+    var callback = function() {};
+
+    // some input data
+    var input = new Object([{"label":"Marshawn Lynch, RB"},{"label":"Dez Bryant, WR"},{"label":"Jamaal Charles, RB"}]);
+
+    suite("<lens-ui-dialog>", function() {
+
+      test("component can be created as an object", function(done) {
+        should.exist(myEl);
+        done();
+      });
+
+      test("accepts input", function(done) {
+
+        // set the event listener callback
+        myEl.removeEventListener("th-output-ready", callback);
+        callback = function(e) {
+          myEl.input.should.equal(input);
+        };
+        myEl.addEventListener("th-output-ready", callback);
+
+        // change input
+        myEl.input = input;
+
+        // fire th-output-ready event
+        asyncPlatformFlush(function() {
+          done();
+        });
+      });
+
+      // repeat as needed
+      test("change an argument, fire outputReady, output new result", function(done) {
+
+        // myEl.removeEventListener("th-output-ready", callback);
+        // callback = function(e) {
+        //   // // check that the argument has been changed
+        //   // myEl.splitCol.should.equal(splitCol);
+
+        //   // // check that the output has been changed
+        //   // var player = myEl.output[0].split1;
+        //   // var pos = myEl.output[0].split2;
+        //   // player.should.equal("Marshawn Lynch");
+        //   // pos.should.equal("RB");
+        // };
+        // myEl.addEventListener("th-output-ready", callback);
+
+        // // change an argument
+        // myEl.splitCol = splitCol;
+
+        // fire th-output-ready event
+        asyncPlatformFlush(function() {
+          done();
+        });
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/wct.conf.js b/wct.conf.js
@@ -0,0 +1,11 @@
+// Custom Web Component Test configuration options
+
+module.exports = {
+  verbose: true,
+  plugins: {
+    // specify which browser to test (optional, defaults to all browsers)
+    // local: {
+    //   browsers: ['firefox', 'canary']
+    // }
+  },
+};