From 3df8f5a5f9962d5ee15f907fc3ac2601175cb94b Mon Sep 17 00:00:00 2001
From: Slawomir Brzezinski <slawomirb@interxion.com>
Date: Wed, 24 May 2017 18:41:38 +0100
Subject: [PATCH] Address TODO - LanguageBehavior is now offered by the generic
 PropertiesFromAncestorBehavior 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

---
 .version                             |  2 +-
 README.md                            |  5 ++-
 bower.json                           |  3 +-
 demo/container-with-lang-choice.html | 43 +++++++++++++++++++++++
 demo/index.html                      | 25 +++++++------
 language-behavior.html               | 11 ------
 papyrus-details.html                 | 35 ++++++++++++-------
 test/language-behavior_test.html     | 52 ----------------------------
 test/papyrus-details_test.html       |  2 +-
 9 files changed, 87 insertions(+), 91 deletions(-)
 create mode 100644 demo/container-with-lang-choice.html
 delete mode 100644 language-behavior.html
 delete mode 100644 test/language-behavior_test.html

diff --git a/.version b/.version
index 65fb5ae..dd8a2af 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-v1.0.x
\ No newline at end of file
+v1.1.x
\ No newline at end of file
diff --git a/README.md b/README.md
index 480afa7..2fe5207 100644
--- 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
index 6c4ef9c..c7a73c2 100644
--- 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
new file mode 100644
index 0000000..c3f6455
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index ee477de..404bae6 100644
--- 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
deleted file mode 100644
index 02dedff..0000000
--- a/language-behavior.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-    // to be extracted to own repo
-    // @polymerBehavior
-    LanguageBehavior = {
-        properties: { language: String },
-        attached: function() { 
-            function findLangAttribute(e) { return e ? e.lang || findLangAttribute(e.domHost || e.parentElement) : 'en'; }
-            this.set('language', findLangAttribute(this));
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/papyrus-details.html b/papyrus-details.html
index 4e94679..cfd3c07 100644
--- 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
deleted file mode 100644
index 39e733f..0000000
--- a/test/language-behavior_test.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <script src="../../web-component-tester/browser.js"></script>
-
-    <link rel="import" href="../../polymer/polymer.html">
-    <link rel="import" href="../language-behavior.html">
-  </head>
-  <body>
-    <dom-module id="test-container">
-        <template></template>
-        <script>
-            HTMLImports.whenReady(() => 
-                Polymer({ is: 'test-container', behaviors: [ LanguageBehavior ] }));
-        </script>
-    </dom-module>
-
-    <test-fixture id="test-1">
-      <template>
-          <test-container lang="cy"></test-container>
-      </template>
-    </test-fixture>    
-
-    <div lang="zh">
-        <test-fixture id="test-2">
-        <template>
-            <test-container></test-container>
-        </template>
-        </test-fixture>
-    </div>   
-
-    <test-fixture id="test-3">
-        <template>
-            <test-container></test-container>
-        </template>
-    </test-fixture>
-
-     <script>
-        suite('LanguageBehavior', () => {
-            test('fetches lang attribute defined on itself', () =>
-                assert.equal(fixture('test-1').language, "cy"));
-
-            test('fetches lang attribute defined on container', () =>
-                assert.equal(fixture('test-2').language, "zh"));
-
-            test('defaults to en', () =>
-                assert.equal(fixture('test-3').language, "en"));
-        });
-     </script>
-    </body>
-</html>
\ No newline at end of file
diff --git a/test/papyrus-details_test.html b/test/papyrus-details_test.html
index 4786c2c..ed3aa57 100644
--- 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);
         });
       });