Merge remote-tracking branch 'upstream/master'

* upstream/master: Add source example. (mdn#885) Add object and param examples. (mdn#876) Add <li> example (mdn#896) small js change (mdn#894) Add <ul> example (mdn#895) Add <wbr> example (mdn#874) Add html input password (mdn#867) Replace <br> with <div> in input examples (mdn#877) chore(deps): update dependency npm-run-all to v4.1.3 (mdn#893) Add <hr> example (mdn#883) Add <p> example (mdn#884)
wbamberg · May 7, 2018 · 97be10e · 97be10e
2 parents 7a9e303 + 4c688e9
commit 97be10e
Show file tree

Hide file tree

Showing 33 changed files with 532 additions and 98 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,11 +2,11 @@ module.exports = {
     env: {
         browser: true,
         es6: true,
-        jest: true,
+        jest: true
     },
     extends: 'eslint:recommended',
     parserOptions: {
-        "ecmaVersion": 8
+        ecmaVersion: 8
     },
     rules: {
         'no-global-assign': 2,
@@ -41,6 +41,7 @@ module.exports = {
         page: true,
         Prism: true,
         require: true,
+        ShadyCSS: true,
         test: true
     }
 };
diff --git a/js/editor.js b/js/editor.js
@@ -12,8 +12,14 @@
     var timer;
 
     /**
-     * Called by the tabbed editor to combine code from all tabs.
-     * @returns Concatenated code from all tabs
+     * Called by the tabbed editor to combine code from all tabs in an Object
+     * @returns Object with code from each tab panel
+     * Example
+     * --------
+     * {
+     *     cssContent: 'h1 { background-color: #333; }',
+     *     htmlContent: '<h1>Title</h1>'
+     * }
      */
     function getOutput() {
         var htmlContent = tabby.editors.html.editor.getValue();

diff --git a/js/lib/webcomponents-hi-sd-ce.js b/js/lib/webcomponents-hi-sd-ce.js
diff --git a/live-examples/html-examples/embedded-content/css/object.css b/live-examples/html-examples/embedded-content/css/object.css
@@ -0,0 +1,11 @@
+footer {
+    font-size: .8rem;
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+}
+
+.output {
+    background: #eee;
+    position: relative;
+}
diff --git a/live-examples/html-examples/embedded-content/css/source.css b/live-examples/html-examples/embedded-content/css/source.css
@@ -0,0 +1,11 @@
+footer {
+    font-size: .8rem;
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+}
+
+.output {
+    background: #eee;
+    position: relative;
+}
diff --git a/live-examples/html-examples/embedded-content/meta.json b/live-examples/html-examples/embedded-content/meta.json
@@ -16,13 +16,29 @@
             "title": "HTML Demo: <iframe>",
             "type": "tabbed"
         },
+        "object": {
+            "baseTmpl": "tmpl/live-tabbed-tmpl.html",
+            "exampleCode": "live-examples/html-examples/embedded-content/object.html",
+            "cssExampleSrc": "live-examples/html-examples/embedded-content/css/object.css",
+            "fileName": "object.html",
+            "title": "HTML Demo: <object>",
+            "type": "tabbed"
+        },
         "picture": {
             "baseTmpl": "tmpl/live-tabbed-tmpl.html",
             "exampleCode": "live-examples/html-examples/embedded-content/picture.html",
             "cssExampleSrc": "live-examples/html-examples/embedded-content/css/picture.css",
             "fileName": "picture.html",
             "title": "HTML Demo: <picture>",
             "type": "tabbed"
+        },
+        "source": {
+            "baseTmpl": "tmpl/live-tabbed-tmpl.html",
+            "exampleCode": "live-examples/html-examples/embedded-content/source.html",
+            "cssExampleSrc": "live-examples/html-examples/embedded-content/css/source.css",
+            "fileName": "source.html",
+            "title": "HTML Demo: <source>",
+            "type": "tabbed"
         }
     }
 }
diff --git a/live-examples/html-examples/embedded-content/object.html b/live-examples/html-examples/embedded-content/object.html
@@ -0,0 +1,7 @@
+<object type="application/pdf"
+    data="/media/examples/pdf_open_parameters.pdf"
+    width="300"
+    height="200">
+</object>
+
+<footer><a href="https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf">PDF</a> by Adobe</footer>
diff --git a/live-examples/html-examples/embedded-content/source.html b/live-examples/html-examples/embedded-content/source.html
@@ -0,0 +1,12 @@
+<video controls
+    width="300"
+    height="200"
+    muted="true">
+    <source src="/media/examples/stream_of_water.webm"
+            type="video/webm">
+    <source src="/media/examples/stream_of_water.mp4"
+            type="video/mp4">
+    This browser does not support the HTML5 video element.
+</video>
+
+<footer><a href=https://www.youtube.com/watch?v=Z_4TlZCvYL4>Video</a> by Leonard Lee</footer>
diff --git a/live-examples/html-examples/inline-text-semantics/css/wbr.css b/live-examples/html-examples/inline-text-semantics/css/wbr.css
@@ -0,0 +1,10 @@
+.output {
+    background-color: gray;
+}
+
+#example-paragraphs {
+    background-color: white;
+    overflow: hidden;
+    resize: horizontal;
+    width: 7rem;
+}
diff --git a/live-examples/html-examples/inline-text-semantics/meta.json b/live-examples/html-examples/inline-text-semantics/meta.json
@@ -193,6 +193,14 @@
             "fileName": "var.html",
             "title": "HTML Demo: <var>",
             "type": "tabbed"
+        },
+        "wbr": {
+            "baseTmpl": "tmpl/live-tabbed-tmpl.html",
+            "exampleCode": "live-examples/html-examples/inline-text-semantics/wbr.html",
+            "cssExampleSrc": "live-examples/html-examples/inline-text-semantics/css/wbr.css",
+            "fileName": "wbr.html",
+            "title": "HTML Demo: <wbr>",
+            "type": "tabbed"
         }
     }
 }
diff --git a/live-examples/html-examples/inline-text-semantics/wbr.html b/live-examples/html-examples/inline-text-semantics/wbr.html
@@ -0,0 +1,5 @@
+<div id="example-paragraphs">
+    <p>Fernstraßenbauprivatfinanzierungsgesetz</p>
+    <p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p>
+    <p>Fernstraßen&shy;bau&shy;privat&shy;finanzierungs&shy;gesetz</p>
+</div>
diff --git a/live-examples/html-examples/input/checkbox.html b/live-examples/html-examples/input/checkbox.html
@@ -1,16 +1,22 @@
 <fieldset>
     <legend>Choose some monster features</legend>
 
-    <input type="checkbox"
-           id="scales" name="feature" value="scales" checked />
-    <label for="scales">Scales</label><br/>
+    <div>
+        <input type="checkbox" id="scales" name="feature"
+               value="scales" checked />
+        <label for="scales">Scales</label>
+    </div>
 
-    <input type="checkbox"
-           id="horns" name="feature" value="horns" />
-    <label for="horns">Horns</label><br/>
+    <div>
+        <input type="checkbox" id="horns" name="feature"
+               value="horns" />
+        <label for="horns">Horns</label>
+    </div>
 
-    <input type="checkbox"
-           id="claws"  name="feature" value="claws" />
-    <label for="claws">Claws</label>
+    <div>
+        <input type="checkbox" id="claws" name="feature"
+               value="claws" />
+        <label for="claws">Claws</label>
+    </div>
 
 </fieldset>
diff --git a/live-examples/html-examples/input/color.html b/live-examples/html-examples/input/color.html
@@ -1,16 +1,22 @@
 <fieldset>
     <legend>Choose some monster colors</legend>
 
-    <input type="color"
-           id="head" name="color" value="#e66465" />
-    <label for="head">Head</label><br/>
+    <div>
+        <input type="color" id="head" name="color"
+               value="#e66465" />
+        <label for="head">Head</label>
+    </div>
 
-    <input type="color"
-           id="body" name="color" value="#f6b73c" />
-    <label for="body">Body</label><br/>
+    <div>
+        <input type="color" id="body" name="color"
+               value="#f6b73c" />
+        <label for="body">Body</label>
+    </div>
 
-    <input type="color"
-           id="feet" name="color" value="#3f87a6" />
-    <label for="feet">Feet</label>
+    <div>
+        <input type="color" id="feet" name="color"
+               value="#3f87a6" />
+        <label for="feet">Feet</label>
+    </div>
 
 </fieldset>
diff --git a/live-examples/html-examples/input/css/password.css b/live-examples/html-examples/input/css/password.css
@@ -0,0 +1,30 @@
+@font-face {
+    font-family: 'Fira Sans';
+    src: local('FiraSans-Regular'),
+    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
+}
+
+legend {
+    background-color: #000;
+    color: #fff;
+    padding: 3px 6px;
+}
+
+.output {
+    font: 1rem 'Fira Sans', sans-serif;
+}
+
+label {
+    display: inline-block;
+    font-size: .9rem;
+    width: 35%;
+}
+
+input[type="text"],
+input[type="password"] {
+    width: 60%;
+}
+
+input {
+    margin: .4rem 0;
+}
diff --git a/live-examples/html-examples/input/date.html b/live-examples/html-examples/input/date.html
@@ -1,14 +1,18 @@
 <fieldset>
     <legend>Choose trip dates</legend>
 
-    <label for="start">Start</label>
-    <input type="date"
-           id="start" name="trip" value="2018-07-22"
-           min="2018-01-01" max="2018-12-31" /><br/>
+    <div>
+        <label for="start">Start</label>
+        <input type="date" id="start" name="trip"
+               value="2018-07-22"
+               min="2018-01-01" max="2018-12-31" />
+    </div>
 
-    <label for="end">End</label>
-    <input type="date"
-           id="end" name="trip" value="2018-07-29"
-           min="2018-01-01" max="2018-12-31"/ >
+    <div>
+        <label for="end">End</label>
+        <input type="date" id="end" name="trip"
+               value="2018-07-29"
+               min="2018-01-01" max="2018-12-31"/ >
+    </div>
 
 </fieldset>
diff --git a/live-examples/html-examples/input/datetime-local.html b/live-examples/html-examples/input/datetime-local.html
@@ -1,10 +1,12 @@
 <fieldset>
     <legend>Party settings</legend>
 
-    <label for="party-time">Date/time:</label>
-    <input type="datetime-local"
-           id="party-time" name="party-time" value="2018-06-12T19:30"
-           min="2018-06-07T00:00" max="2018-06-14T00:00" /><br/>
+    <div>
+        <label for="party-time">Date/time:</label>
+        <input type="datetime-local" id="party-time"
+               name="party-time" value="2018-06-12T19:30"
+               min="2018-06-07T00:00" max="2018-06-14T00:00" />
+    </div>
 
     <label for="dress-code">Dress code:</label>
     <select id="dress-code">

diff --git a/live-examples/html-examples/input/file.html b/live-examples/html-examples/input/file.html
@@ -1,13 +1,16 @@
 <fieldset>
     <legend>Profile</legend>
 
-    <label for="display-name">Display name:</label>
-    <input type="text"
-           id="display-name" name="display-name"/><br/>
+    <div>
+        <label for="name">Display name:</label>
+        <input type="text" id="name" name="name"/>
+    </div>
 
-    <label for="avatar">Profile picture:</label>
-    <input type="file"
-           id="avatar" name="avatar"
-           accept="image/png, image/jpeg" />
+    <div>
+        <label for="avatar">Profile picture:</label>
+        <input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg" />
+    </div>
 
 </fieldset>
diff --git a/live-examples/html-examples/input/meta.json b/live-examples/html-examples/input/meta.json
@@ -72,6 +72,14 @@
             "title": "HTML Demo: <input type=\"number\">",
             "type": "tabbed"
         },
+        "password": {
+            "baseTmpl": "tmpl/live-tabbed-tmpl.html",
+            "exampleCode": "live-examples/html-examples/input/password.html",
+            "cssExampleSrc": "live-examples/html-examples/input/css/password.css",
+            "fileName": "input-password.html",
+            "title": "HTML Demo: <input type=\"password\">",
+            "type": "tabbed"
+        },
         "radio": {
             "baseTmpl": "tmpl/live-tabbed-tmpl.html",
             "exampleCode": "live-examples/html-examples/input/radio.html",

diff --git a/live-examples/html-examples/input/password.html b/live-examples/html-examples/input/password.html
@@ -0,0 +1,19 @@
+<fieldset>
+    <legend>Sign in</legend>
+
+    <div>
+        <label for="userName">Username:</label>
+        <input type="text" id="username" name="username"
+               required />
+    </div>
+
+    <div>
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password"
+               minLength="8" required
+               placeholder="8 characters minimum" />
+    </div>
+
+    <input type="submit" value="Sign in">
+
+</fieldset>
diff --git a/live-examples/html-examples/text-content/css/hr.css b/live-examples/html-examples/text-content/css/hr.css
@@ -0,0 +1,16 @@
+hr {
+    border: none;
+    border-top: 3px double #333;
+    color: #333;
+    overflow: visible;
+    text-align: center;
+    height: 5px;
+}
+
+hr:after {
+    background: #fff;
+    content: '§';
+    padding: 0 4px;
+    position: relative;
+    top: -13px;
+}
diff --git a/live-examples/html-examples/text-content/css/li.css b/live-examples/html-examples/text-content/css/li.css
@@ -0,0 +1,7 @@
+ol li {
+    font-weight: bold;
+}
+
+ul li {
+    font-weight: normal;
+}
diff --git a/live-examples/html-examples/text-content/css/p.css b/live-examples/html-examples/text-content/css/p.css
@@ -0,0 +1,5 @@
+p {
+    margin: 10px 0;
+    padding: 5px;
+    border: 1px solid #999;
+}
diff --git a/live-examples/html-examples/text-content/css/ul.css b/live-examples/html-examples/text-content/css/ul.css
@@ -0,0 +1,7 @@
+li {
+    list-style-type: circle;
+}
+
+li li {
+    list-style-type: square;
+}
diff --git a/live-examples/html-examples/text-content/hr.html b/live-examples/html-examples/text-content/hr.html
@@ -0,0 +1,3 @@
+<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>
+<hr>
+<p>§2: The second rule of Fight Club is: You do not talk about Fight Club.</p>