Initial Version

plusTTeam · Dec 5, 2017 · bb5846a · bb5846a
1 parent 6ab3e87
commit bb5846a
Show file tree

Hide file tree

Showing 8 changed files with 339 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# \<pt-multilang-input\>
+
+Simple Multiple Languages Input
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
+
+## Viewing Your Element
+
+```
+$ polymer serve
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,20 @@
+{
+  "name": "pt-multilang-input",
+  "description": "Simple Multiple Languages Input",
+  "main": "pt-multilang-input.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0",
+    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
+    "paper-input": "PolymerElements/paper-input#^2.0.4",
+    "wysiwyg-e": "miztroh/wysiwyg-e#^2.1.0",
+    "iron-pages": "PolymerElements/iron-pages#^2.0.1"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>pt-multilang-input demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../pt-multilang-input.html">
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>
+  </head>
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>Basic pt-multilang-input demo</h3>
+      <demo-snippet>
+        <template>
+          <pt-multilang-input type="textarea" label="Multiple Languages Input" languages='[{"name": "es", "label": "🇻🇪", "description": "Spanish"}, {"name": "en","label": "🇺🇸","description": "English"}]'>
+          </pt-multilang-input>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0;url=demo/" />
+    <title>pt-multilang-input</title>
+  </head>
+  <body>
+    <!--
+        ELEMENT API DOCUMENTATION SUPPORT COMING SOON
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
+  </body>
+</html>
diff --git a/polymer.json b/polymer.json
@@ -0,0 +1,7 @@
+{
+  "lint": {
+    "rules": [
+      "polymer-2"
+    ]
+  }
+}
diff --git a/pt-multilang-input.html b/pt-multilang-input.html
@@ -0,0 +1,174 @@
+<link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../paper-tabs/paper-tab.html">
+<link rel="import" href="../paper-tabs/paper-tabs.html">
+<link rel="import" href="../iron-pages/iron-pages.html">
+<link rel="import" href="../paper-input/paper-input.html" async>
+<link rel="import" href="../paper-input/paper-textarea.html" async>
+<link rel="import" href="../wysiwyg-e/wysiwyg-e.html" async>
+<link rel="import" href="../wysiwyg-e/tools/bold.html" async>
+<link rel="import" href="../wysiwyg-e/tools/italic.html" async>
+<link rel="import" href="../wysiwyg-e/tools/underline.html" async>
+<link rel="import" href="../wysiwyg-e/tools/strike.html" async>
+<link rel="import" href="../wysiwyg-e/tools/color.html" async>
+<link rel="import" href="../wysiwyg-e/tools/clear.html" async>
+<link rel="import" href="../wysiwyg-e/tools/code.html" async>
+<link rel="import" href="../wysiwyg-e/tools/link.html" async>
+<link rel="import" href="../wysiwyg-e/tools/image.html" async>
+<link rel="import" href="../wysiwyg-e/tools/audio.html" async>
+<link rel="import" href="../wysiwyg-e/tools/video.html" async>
+<link rel="import" href="../wysiwyg-e/tools/ordered.html" async>
+<link rel="import" href="../wysiwyg-e/tools/unordered.html" async>
+<link rel="import" href="../wysiwyg-e/tools/indent.html" async>
+<link rel="import" href="../wysiwyg-e/tools/outdent.html" async>
+<link rel="import" href="../wysiwyg-e/tools/justify.html" async>
+<link rel="import" href="../wysiwyg-e/tools/heading.html" async>
+<link rel="import" href="../wysiwyg-e/tools/blockquote.html" async>
+
+<dom-module id="pt-multilang-input">
+  <template>
+    <style>
+			:host {
+				display: block;
+
+			}
+			paper-input,paper-textarea{
+				max-width: 50vw;
+			}
+
+			paper-tabs{
+				--paper-tabs-selection-bar-color: white;
+				background:  var(--paper-indigo-500);
+				color: white;
+			}
+
+			wysiwyg-e{
+				width: 100%;
+				min-width: 40vw;
+				min-height: 30vh;
+				--wysiwyg-toolbar-background: var(--paper-indigo-500);
+			}
+		</style>
+
+		<paper-tabs selected="{{selected}}" fit-container >
+			<template is="dom-repeat" items="[[languages]]" as="lang">
+				<paper-tab>
+					[[lang.label]] &nbsp; [[lang.description]]
+				</paper-tab>
+			</template>
+		</paper-tabs>
+		<iron-pages id="ironPages" selected="[[selected]]">
+		</iron-pages>
+  </template>
+
+  <script>
+    /**
+     * `pt-multilang-input`
+     * Simple Multiple Languages Input
+     *
+     * @customElement
+     * @polymer
+     * @demo demo/index.html
+     */
+    class PtMultilangInput extends Polymer.Element {
+      static get is() { return 'pt-multilang-input'; }
+      static get properties(){
+        return {
+        languages: Array,
+        name: String,
+        label: String,
+        selected: String,
+        disabled: Boolean,
+  //		   Types allowed: input, textarea, wysiwyg, tags
+          type:String
+        }
+      }
+
+      connectedCallback(){
+        super.connectedCallback();
+        this.type = this.type || 'input';
+        this.selected = '0';
+        this.required = this.required || false;
+        Polymer.RenderStatus.afterNextRender(this, () =>{
+          if(this.languages && this.languages.length > 0){
+            let typeElement;
+            switch (this.type.toLowerCase()){
+              case 'textarea':
+            typeElement = "paper-textarea";
+                break;
+          case 'wysiwyg':
+            typeElement = "wysiwyg-e";
+            break;
+          case 'tags':
+            typeElement = "pt-tags-input";
+            break;
+              default:
+            typeElement = "paper-input";
+                break;
+            }
+            this.languages.forEach((lang)=>{
+              let element = document.createElement(typeElement);
+              element.classList.add("inputs");
+              if(this.type.toLowerCase() === 'wysiwyg'){
+            element.appendChild(document.createElement('wysiwyg-tool-bold'));
+            element.appendChild(document.createElement('wysiwyg-tool-italic'));
+            element.appendChild(document.createElement('wysiwyg-tool-underline'));
+            element.appendChild(document.createElement('wysiwyg-tool-strike'));
+            element.appendChild(document.createElement('wysiwyg-tool-color'));
+            element.appendChild(document.createElement('wysiwyg-tool-clear'));
+            element.appendChild(document.createElement('wysiwyg-tool-code'));
+            element.appendChild(document.createElement('wysiwyg-tool-link'));
+            element.appendChild(document.createElement('wysiwyg-tool-image'));
+            element.appendChild(document.createElement('wysiwyg-tool-ordered'));
+            element.appendChild(document.createElement('wysiwyg-tool-unordered'));
+            element.appendChild(document.createElement('wysiwyg-tool-indent'));
+            element.appendChild(document.createElement('wysiwyg-tool-outdent'));
+            element.appendChild(document.createElement('wysiwyg-tool-justify'));
+            element.appendChild(document.createElement('wysiwyg-tool-heading'));
+            element.appendChild(document.createElement('wysiwyg-tool-blockquote'));
+              }
+          element.dataLang = lang.name;
+          element.label = `${this.label} (${lang.description})`;
+          element.required = this.required;
+
+          if(this.type.toLowerCase() === "textarea"){
+            element.value = '\b';
+            element.rows = 3;
+          }
+          this.$.ironPages.appendChild(element);
+            });
+          }
+        });
+      }
+
+      get value(){
+        let inputs = this.shadowRoot.querySelectorAll('.inputs');
+        let value = {};
+        inputs.forEach((input) =>{
+          value[input.dataLang] = input.value ? input.value : "";
+        });
+        return value;
+      }
+
+      set value(value){
+        let inputs = this.shadowRoot.querySelectorAll('#ironPages > *');
+        inputs.forEach((input) =>{
+        input.value = value[input.dataLang] ? value[input.dataLang] : "";
+        });
+      }
+
+      set disabled(value){
+        let inputs = this.shadowRoot.querySelectorAll('#ironPages > *');
+        inputs.forEach((input) =>{
+          input.setAttribute('disabled', value);
+          input.disabled = value;
+        });
+      }
+
+      _hideTabs(){
+        return languages && languages.length > 1 ? false : true;
+      }
+    }
+
+    window.customElements.define(PtMultilangInput.is, PtMultilangInput);
+  </script>
+</dom-module>
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        'pt-multilang-input_test.html'
+      ]);
+    </script>
+
+</body></html>
diff --git a/test/pt-multilang-input_test.html b/test/pt-multilang-input_test.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>pt-multilang-input test</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../pt-multilang-input.html">
+  </head>
+  <body>
+
+    <test-fixture id="BasicTestFixture">
+      <template>
+        <pt-multilang-input></pt-multilang-input>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ChangedPropertyTestFixture">
+      <template>
+        <pt-multilang-input prop1="new-prop1"></pt-multilang-input>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('pt-multilang-input', () => {
+
+        test('instantiating the element with default properties works', () => {
+          const element = fixture('BasicTestFixture');
+          assert.equal(element.prop1, 'pt-multilang-input');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello pt-multilang-input!');
+        });
+
+        test('setting a property on the element works', () => {
+          // Create a test fixture
+          const element = fixture('ChangedPropertyTestFixture');
+          assert.equal(element.prop1, 'new-prop1');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+        });
+
+      });
+    </script>
+
+  </body>
+</html>