Address TODO - LanguageBehavior is now offered by the generic Propert…

…iesFromAncestorBehavior so use it + bonus: thanks to PropertiesFromAncestorBehavior supporting value changes, we can now allow user to see all translations in a single demo, so let's do that
AqoviaElements · Jun 1, 2017 · 3df8f5a · 3df8f5a
1 parent e1d5ef7
commit 3df8f5a
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 91 deletions.
diff --git a/.version b/.version
@@ -1 +1 @@
-v1.0.x
+v1.1.x
diff --git a/README.md b/README.md
@@ -11,11 +11,14 @@ Expandable/collapsible summary and details with animation
   <template>
     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="import" href="papyrus-details.html">
+	<link rel="import" href="./demo/container-with-lang-choice.html">
     <style>
       papyrus-details { font-family: Roboto; background-color: #ddd; padding: 1em; border-radius: 4px; } 
       summary { font-size: 120%; font-weight: bold; }
     </style>
-    <next-code-block></next-code-block>
+	<container-with-lang-choice lang="en" available-languages-expr="Object.getOwnPropertyNames(PapyrusDetails.resources)">
+      <next-code-block></next-code-block>
+	</container-with-lang-choice>
   </template>
 </custom-element-demo>
 ```

diff --git a/bower.json b/bower.json
@@ -3,7 +3,8 @@
   "description": "Expand and collapse information with summary text displayed at all times",
   "main": "papyrus-details.html",
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.4.0"
+    "polymer": "Polymer/polymer#^1.4.0",
+    "properties-from-ancestor-behavior": "^1.0"
   },
   "license": "http://polymer.github.io/LICENSE.txt",
   "devDependencies": {

diff --git a/demo/container-with-lang-choice.html b/demo/container-with-lang-choice.html
@@ -0,0 +1,43 @@
+<link rel="import" href="../../polymer/polymer.html" />
+<dom-module id="container-with-lang-choice">
+    <template>
+        <label>
+            Interface Language:
+            <select id="languageSelect" value="{{lang::input}}"></select>
+        </label>
+        <content select="*"></content>
+    </template>
+</dom-module>
+<script>
+    Polymer({
+        is: "container-with-lang-choice",
+        properties: {
+            lang: {
+                notify: true,
+                reflectToAttribute: true,
+            },
+            availableLanguagesExpr: {
+                type: String,
+                observer: '_availableLanguagesExprChanged',
+            },
+            availableLanguages: {
+                type: Array,
+                observer: '_availableLanguagesChanged',
+            },
+        },
+        _availableLanguagesExprChanged: function (availableLanguagesExpr) {
+            this.availableLanguages = eval(availableLanguagesExpr);
+        },
+        _availableLanguagesChanged: function (availableLanguages) {
+            // adding options here instead in <template> to suport IE11 - https://github.com/Polymer/polymer/issues/1735
+
+            this.$.languageSelect.innerHTML = '';
+
+            for (var i = 0; i < availableLanguages.length; ++i) {
+                var option = document.createElement('option');
+                option.innerText = availableLanguages[i];
+                this.$.languageSelect.appendChild(option);
+            }
+        },
+    });
+</script>
diff --git a/demo/index.html b/demo/index.html
@@ -1,5 +1,5 @@
-<!doctype html>
-<html lang="en">
+<!doctype html>
+<html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
@@ -10,6 +10,7 @@
 
     <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="./container-with-lang-choice.html">
     <link rel="import" href="../papyrus-details.html">
 
     <style is="custom-style" include="demo-pages-shared-styles">
@@ -18,15 +19,17 @@
   <body>
     <div class="vertical-section-container centered">
       <h3>Basic papyrus-details demo</h3>
-      <demo-snippet>
-        <template>
-          <papyrus-details>
-                <summary>Expand this block of text...</summary>
-                <p>Lorem ipsum dolor sit amet, ad eum brute mundi maiestatis. Augue veniam ne duo. Ex quo intellegam appellantur. Sumo ullum eu vis, vim id everti mandamus. Has ullum movet disputationi cu, mea ei meis nusquam, ne sed virtute albucius repudiandae.</p>
-                <p>Dicta minim ei has, falli insolens efficiendi ad ius. Tollit reprimique delicatissimi ei nec, duis nobis nam in. Id intellegam ullamcorper mel, malorum veritus ea duo, habemus minimum mandamus est ut. Prima delectus at sea, mollis impedit accumsan mei ad, dico alia commune ex vix. Laoreet reformidans no mel. Ut fastidii omnesque indoctum ius. </p>
-          </papyrus-details>
-        </template>
-      </demo-snippet>
+        <container-with-lang-choice lang="en" available-languages-expr="Object.getOwnPropertyNames(PapyrusDetails.resources)">
+            <demo-snippet>
+                <template>
+                    <papyrus-details>
+                        <summary>Expand this block of text...</summary>
+                        <p>Lorem ipsum dolor sit amet, ad eum brute mundi maiestatis. Augue veniam ne duo. Ex quo intellegam appellantur. Sumo ullum eu vis, vim id everti mandamus. Has ullum movet disputationi cu, mea ei meis nusquam, ne sed virtute albucius repudiandae.</p>
+                        <p>Dicta minim ei has, falli insolens efficiendi ad ius. Tollit reprimique delicatissimi ei nec, duis nobis nam in. Id intellegam ullamcorper mel, malorum veritus ea duo, habemus minimum mandamus est ut. Prima delectus at sea, mollis impedit accumsan mei ad, dico alia commune ex vix. Laoreet reformidans no mel. Ut fastidii omnesque indoctum ius. </p>
+                    </papyrus-details>
+                </template>
+            </demo-snippet>
+        </container-with-lang-choice>
     </div>
   </body>
 </html>
diff --git a/language-behavior.html b/language-behavior.html
diff --git a/papyrus-details.html b/papyrus-details.html
@@ -1,5 +1,5 @@
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="language-behavior.html">
+<link rel="import" href="../properties-from-ancestor-behavior/properties-from-ancestor-behavior.html">
 
 <dom-module id="papyrus-details">
   <template>
@@ -15,28 +15,38 @@
     <div id="summary-container">
       <content select="summary"/>
     </div>
-    <a id="toggle" on-tap="toggle" href="javascript:void(0)">[[_getLinkText(expanded,language)]]</a>
+    <a id="toggle" on-tap="toggle" href="javascript:void(0)">[[_getLinkText(expanded,lang)]]</a>
     <div id="expander" class$="[[_getHiddenClass(expanded)]]">
         <content/>
     </div>
   </template>
 
   <script>
-    (function(){
-        var languages = {
-            en: { open: "Open", close: "Close" },
-            fr: { open: "Ouvrir", close: "Fermer" },
-            de: { open: "Öffnen", close: "Schließen" },
-            es: { open: "Abrir", close: "Cerrar" }
-        };
+      PapyrusDetails = {};
+      PapyrusDetails.resources = {
+          en: { open: "Open", close: "Close" },
+          fr: { open: "Ouvrir", close: "Fermer" },
+          de: { open: "Öffnen", close: "Schließen" },
+          es: { open: "Abrir", close: "Cerrar" }
+      };
 
+        /**
+@demo demo/index.html
+        */
         Polymer({
           is: 'papyrus-details',
-          behaviors: [ LanguageBehavior ],
-          properties: { expanded: { type: Boolean, value: false }},
+          behaviors: [
+              PropertiesFromAncestorBehavior({
+                    lang: { defaultValue: 'en' },
+                }),
+          ],
+          properties: {
+              expanded: { type: Boolean, value: false },
+              lang: String,
+          },
           _getHiddenClass: function() { return this.expanded ? "" : "hidden"; },
           _getLinkText: function () {
-            var language = languages[this.language] || languages.en;
+            var language = PapyrusDetails.resources[this.lang];
             return this.expanded ? language.close : language.open;
           },
           attached: function(){ 
@@ -47,6 +57,5 @@
           },
           toggle: function() { this.set('expanded', !this.expanded); }
         });
-      })();
   </script>
 </dom-module>
diff --git a/test/language-behavior_test.html b/test/language-behavior_test.html
diff --git a/test/papyrus-details_test.html b/test/papyrus-details_test.html
@@ -62,7 +62,7 @@
 
         test('localises link text', () => { 
           let el = fixture('basic');
-          el.set('language', 'fr');
+          el.lang = 'fr';
           assert.equal("Ouvrir", el.getElementsByTagName('a')[0].innerText);
         });
       });