Merge branch 'develop'

plusTTeam · Dec 6, 2017 · 2064fdb · 2064fdb
2 parents a2e0625 + 491e70c
commit 2064fdb
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 14 deletions.
diff --git a/bower.json b/bower.json
@@ -7,7 +7,10 @@
     "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"
+    "iron-pages": "PolymerElements/iron-pages#^2.0.1",
+    "pt-tags-input": "plusTTeam/pt-tags-input#^1.0.0",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^2.0.0",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^2.0.0"
   },
   "devDependencies": {
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",

diff --git a/demo/index.html b/demo/index.html
@@ -19,13 +19,38 @@
   </head>
   <body>
     <div class="vertical-section-container centered">
-      <h3>Basic pt-multilang-input demo</h3>
+      <h3>Textarea 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>
+
+      <h3>Input pt-multilang-input demo</h3>
+      <demo-snippet>
+        <template>
+          <pt-multilang-input type="input" label="Multiple Languages Input" languages='[{"name": "es", "label": "🇻🇪", "description": "Spanish"}, {"name": "en","label": "🇺🇸","description": "English"}]'>
+          </pt-multilang-input>
+        </template>
+      </demo-snippet>
+
+      <h3>Tags pt-multilang-input demo</h3>
+      <demo-snippet>
+        <template>
+          <pt-multilang-input type="tags" label="Multiple Languages Input" languages='[{"name": "es", "label": "🇻🇪", "description": "Spanish"}, {"name": "en","label": "🇺🇸","description": "English"}]'>
+          </pt-multilang-input>
+        </template>
+      </demo-snippet>
+
+
+      <h3>WYSIWYG pt-multilang-input demo</h3>
+      <demo-snippet>
+        <template>
+          <pt-multilang-input type="wysiwyg" 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/pt-multilang-input.html b/pt-multilang-input.html
@@ -5,6 +5,7 @@
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../paper-input/paper-textarea.html">
 <link rel="import" href="../wysiwyg-e/wysiwyg-e.html">
+<link rel="import" href="../pt-tags-input/pt-tags-input.html">
 <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>
@@ -23,6 +24,8 @@
 <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>
+<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
 
 <dom-module id="pt-multilang-input">
   <template>
@@ -36,28 +39,33 @@
 			}
 
 			paper-tabs{
-				--paper-tabs-selection-bar-color: white;
-				background:  var(--paper-indigo-500);
-				color: white;
+				--paper-tabs-selection-bar-color: var(--tabs-color, white);
+				background: var(--tabs-background, var(--paper-indigo-500));
+				color: var(--tabs-color, white);
+        --paper-tabs:{
+          height: 40px;
+        }
 			}
 
 			wysiwyg-e{
 				width: 100%;
 				min-width: 40vw;
 				min-height: 30vh;
-				--wysiwyg-toolbar-background: var(--paper-indigo-500);
+				--wysiwyg-toolbar-background: var(--tabs-background, var(--paper-indigo-500));
 			}
 		</style>
 
-		<paper-tabs selected="{{selected}}" fit-container >
+		<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>
+    </paper-tabs>
+
 		<iron-pages id="ironPages" selected="[[selected]]">
-		</iron-pages>
+    </iron-pages>
+
   </template>
 
   <script>
@@ -69,7 +77,7 @@
      * @polymer
      * @demo demo/index.html
      */
-    class PtMultilangInput extends Polymer.Element {
+    class PtMultilangInput extends Polymer.mixinBehaviors([Polymer.IronValidatableBehavior,Polymer.IronFormElementBehavior],Polymer.Element) {
       static get is() { return 'pt-multilang-input'; }
       static get properties(){
         return {
@@ -78,6 +86,10 @@
         label: String,
         selected: String,
         disabled: Boolean,
+        required: {
+          type:Boolean,
+          reflect:true
+        },
   //		   Types allowed: input, textarea, wysiwyg, tags
           type:String
         }
@@ -129,7 +141,7 @@
           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;
@@ -163,10 +175,16 @@
           input.disabled = value;
         });
       }
-
-      _hideTabs(){
-        return languages && languages.length > 1 ? false : true;
+
+      validate() {
+        let inputs = this.shadowRoot.querySelectorAll('#ironPages > *');
+        for(let i=0; i < inputs.length; i++){
+          if(!inputs[i].validate())
+            return false;
+        }
+        return true;
       }
+
     }
 
     window.customElements.define(PtMultilangInput.is, PtMultilangInput);