Add files via upload

HTMLElements · May 24, 2018 · 553dd00 · 553dd00
1 parent 19c0414
commit 553dd00
Show file tree

Hide file tree

Showing 17 changed files with 2,240 additions and 0 deletions.
diff --git a/demos/smart-tabs-badges.htm b/demos/smart-tabs-badges.htm
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script>
+        // IE/Edge polyfill.
+        if (!window.customElements) {
+            document.writeln('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"><\/script>');
+            document.write('<!--');
+        }
+    </script>
+    <script type="text/javascript" src="../../smart-core/source-minified/native-shim.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
+    <!--! do not remove -->
+    <script>
+       // IE polyfill.
+        if (!(window.CSS && window.CSS.supports && window.CSS.supports('(--fake-var: 0)'))) {
+            document.writeln('<link rel="stylesheet" href="../../smart-core/source-minified/styles/smart.base-novars.css" type="text/css" />');
+            document.write('<!--');
+        }
+    </script>
+    <link rel="stylesheet" href="../../smart-core/source-minified/styles/smart.base.css" type="text/css" />
+    <!--! do not remove --> 
+   <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.element-polyfills.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.element.js"></script>
+    <style type="text/css">
+        #tabs {
+            border-color: #878787;
+            width: 600px;
+            height: 250px;
+            outline: none;
+        }
+
+            #tabs .smart-tab-strip {
+                background-color: #E0E0E0;
+            }
+
+            #tabs .smart-tab-label-container {
+                border-top-width: 2px;
+                border-top-style: solid;
+                border-top-color: transparent;
+            }
+
+                #tabs .smart-tab-label-container.smart-tab-selected {
+                    background-color: #F2F2F2;
+                }
+
+                #tabs .smart-tab-label-container.smart-tab-hovered {
+                    background-color: #E5E5E5;
+                    color: black;
+                }
+
+                #tabs .smart-tab-label-container:nth-child(1).smart-tab-selected {
+                    border-color: #5cb85c;
+                }
+
+                #tabs .smart-tab-label-container:nth-child(1).smart-tab-hovered {
+                    border-color: #7DD17D;
+                }
+
+                #tabs .smart-tab-label-container:nth-child(2).smart-tab-selected {
+                    border-color: #5bc0de;
+                }
+
+                #tabs .smart-tab-label-container:nth-child(2).smart-tab-hovered {
+                    border-color: #7EDDF7;
+                }
+
+                #tabs .smart-tab-label-container:nth-child(3).smart-tab-selected {
+                    border-color: #d9534f;
+                }
+
+                #tabs .smart-tab-label-container:nth-child(3).smart-tab-hovered {
+                    border-color: #F27371;
+                }
+
+        .mailList {
+            border: none;
+            width: 100%;
+            height: 100%;
+        }
+
+        .smart-list-item-container {
+            width: 100%;
+        }
+
+        .date {
+            float: right;
+        }
+    </style>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.tabs.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.button.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.scrollbar.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.listbox.js"></script>
+</head>
+<body id="bodyLightTheme">
+    <smart-tabs id="tabs" selected-index="0">
+        <smart-tab-item label="primaryTemplate">
+            <smart-list-box class="mailList">
+                <smart-list-item>Re: Exam <strong class="date">9/1/17</strong></smart-list-item>
+                <smart-list-item>Dinner tonight? <strong class="date">8/16/17</strong></smart-list-item>
+                <smart-list-item>Hi <strong class="date">8/1/17</strong></smart-list-item>
+                <smart-list-item>About the interview <strong class="date">7/11/17</strong></smart-list-item>
+                <smart-list-item>Re: Query about car purchase <strong class="date">6/29/17</strong></smart-list-item>
+                <smart-list-item>Your weekly newsletter <strong class="date">6/17/17</strong></smart-list-item>
+                <smart-list-item>Important update <strong class="date">5/30/17</strong></smart-list-item>
+                <smart-list-item>Re: Introduction <strong class="date">5/30/17</strong></smart-list-item>
+                <smart-list-item>Welcome to our forums <strong class="date">5/28/17</strong></smart-list-item>
+                <smart-list-item>Your weekly newsletter <strong class="date">4/17/17</strong></smart-list-item>
+            </smart-list-box>
+        </smart-tab-item>
+        <smart-tab-item label="promotionsTemplate">
+            Your Promotions tab is empty.
+        </smart-tab-item>
+        <smart-tab-item label="spamTemplate">
+            <smart-list-box class="mailList">
+                <smart-list-item>Join our club today! <strong class="date">9/1/17</strong></smart-list-item>
+            </smart-list-box>
+        </smart-tab-item>
+    </smart-tabs>
+
+    <!--smart-tab-item label templates-->
+    <template id="primaryTemplate">
+        Primary
+        <span class='smart-badge smart-badge-success'>10</span>
+    </template>
+    <template id="promotionsTemplate">
+        Promotions
+        <span class='smart-badge smart-badge-info'>0</span>
+    </template>
+    <template id="spamTemplate">
+        Spam
+        <span class='smart-badge smart-badge-danger'>1</span>
+    </template>
+</body>
+</html>
diff --git a/demos/smart-tabs-close-buttons.htm b/demos/smart-tabs-close-buttons.htm
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script>
+        // IE/Edge polyfill.
+        if (!window.customElements) {
+            document.writeln('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"><\/script>');
+            document.write('<!--');
+        }
+    </script>
+    <script type="text/javascript" src="../../smart-core/source-minified/native-shim.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
+    <!--! do not remove -->
+    <script>
+       // IE polyfill.
+        if (!(window.CSS && window.CSS.supports && window.CSS.supports('(--fake-var: 0)'))) {
+            document.writeln('<link rel="stylesheet" href="../../smart-core/source-minified/styles/smart.base-novars.css" type="text/css" />');
+            document.write('<!--');
+        }
+    </script>
+    <link rel="stylesheet" href="../../smart-core/source-minified/styles/smart.base.css" type="text/css" />
+    <!--! do not remove --> 
+   <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.element-polyfills.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.element.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.tabs.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.button.js"></script>
+    <script type="text/javascript">
+        window.onload = function () {
+            var tabs1 = document.getElementById('tabs1');
+
+            document.getElementById('toggleCloseButtons').addEventListener('change', function () {
+                tabs1.closeButtons = this.checked;
+            });
+
+            var showCloseButton = document.getElementById('showCloseButton'),
+                hideCloseButton = document.getElementById('hideCloseButton');
+
+            tabs1.addEventListener('close', function (event) {
+                showCloseButton.disabled = true;
+                hideCloseButton.disabled = true;
+            });
+
+            showCloseButton.addEventListener('click', function () {
+                tabs1.getElementsByTagName('smart-tab-item')[2].closeButtonHidden = false;
+                showCloseButton.disabled = true;
+                hideCloseButton.disabled = false;
+            });
+
+            document.getElementById('hideCloseButton').addEventListener('click', function () {
+                tabs1.getElementsByTagName('smart-tab-item')[2].closeButtonHidden = true;
+                hideCloseButton.disabled = true;
+                showCloseButton.disabled = false;
+            });
+
+            document.getElementById('tabs2').addEventListener('closing', function (event) {
+                var close = window.confirm('Do you wish to close tab with index ' + event.detail.index + '?');
+
+                if (!close) {
+                    event.preventDefault();
+                }
+            });
+        }
+    </script>
+</head>
+<body id="bodyLightTheme">
+    <p>closeButtonMode 'default'</p>
+    <smart-tabs id="tabs1" class="demoTabsShort" close-buttons>
+        <smart-tab-item label="TAB 1">Content 1</smart-tab-item>
+        <smart-tab-item label="TAB 2" selected>Content 2</smart-tab-item>
+        <smart-tab-item label="TAB 3" close-button-hidden>Content 3</smart-tab-item>
+    </smart-tabs>
+    <br />
+    <smart-toggle-button id="toggleCloseButtons" class="demoButton" checked>Toggle close buttons</smart-toggle-button>
+    <smart-button id="showCloseButton" class="demoButton">Show third close button</smart-button>
+    <smart-button id="hideCloseButton" class="demoButton" disabled>Hide third close button</smart-button>
+    <p>closeButtonMode 'selected'</p>
+    <smart-tabs id="tabs2" class="demoTabsShort" close-buttons close-button-mode="selected" add-new-tab>
+        <smart-tab-item label="TAB 1">Content 1</smart-tab-item>
+        <smart-tab-item label="TAB 2">Content 2</smart-tab-item>
+        <smart-tab-item label="TAB 3" selected>Content 3</smart-tab-item>
+    </smart-tabs>
+</body>
+</html>
diff --git a/demos/smart-tabs-data-source.htm b/demos/smart-tabs-data-source.htm
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script>
+        // IE/Edge polyfill.
+        if (!window.customElements) {
+            document.writeln('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"><\/script>');
+            document.write('<!--');
+        }
+    </script>
+    <script type="text/javascript" src="../../smart-core/source-minified/native-shim.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
+    <!--! do not remove -->
+    <script>
+       // IE polyfill.
+        if (!(window.CSS && window.CSS.supports && window.CSS.supports('(--fake-var: 0)'))) {
+            document.writeln('<link rel="stylesheet" href="../../smart-core/source-minified/styles/smart.base-novars.css" type="text/css" />');
+            document.write('<!--');
+        }
+    </script>
+    <link rel="stylesheet" href="../../smart-core/source-minified/styles/smart.base.css" type="text/css" />
+    <!--! do not remove --> 
+   <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.element-polyfills.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.element.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.tabs.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.button.js"></script>
+    <script type="text/javascript">
+        window.onload = function () {
+            var tabs = document.createElement('smart-tabs');
+
+            tabs.className = 'demoTabs';
+
+            tabs.dataSource = [
+                {
+                    label: 'Group 1',
+                    items: [
+                        {
+                            label: 'Item 1.1',
+                            content: 'Content 1.1'
+                        },
+                        {
+                            label: 'Item 1.2',
+                            content: 'Content 1.2'
+                        },
+                        {
+                            label: 'Item 1.3',
+                            content: 'Content 1.3'
+                        }
+                    ]
+
+                },
+                {
+                    label: 'Item 2',
+                    content: 'Content 2'
+                },
+                {
+                    label: 'Item 3',
+                    content: 'Content 3',
+                    selected: true
+                }
+            ];
+
+            document.body.appendChild(tabs);
+
+            document.getElementById('loadDataSource').addEventListener('click', function () {
+                tabs.dataSource = [
+                    {
+                        label: 'Item A',
+                        content: 'Content A',
+                        index: 3
+                    },
+                    {
+                        label: 'Item B',
+                        labelSize: 100,
+                        content: 'Content B',
+                        selected: true,
+                        index: 2
+                    },
+                    {
+                        label: 'Item C',
+                        content: 'Content C',
+                        index: 1
+                    },
+                    {
+                        label: 'Item D',
+                        content: 'Content D',
+                        index: 0
+                    }
+                ];
+            });
+        }
+    </script>
+</head>
+<body id="bodyLightTheme">
+    <smart-button id="loadDataSource" class="demoButton">Load a different dataSource</smart-button>
+    <br />
+    <br />
+</body>
+</html>
diff --git a/demos/smart-tabs-dynamic-creation.htm b/demos/smart-tabs-dynamic-creation.htm
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script>
+        // IE/Edge polyfill.
+        if (!window.customElements) {
+            document.writeln('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"><\/script>');
+            document.write('<!--');
+        }
+    </script>
+    <script type="text/javascript" src="../../smart-core/source-minified/native-shim.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
+    <!--! do not remove -->
+    <script>
+       // IE polyfill.
+        if (!(window.CSS && window.CSS.supports && window.CSS.supports('(--fake-var: 0)'))) {
+            document.writeln('<link rel="stylesheet" href="../../smart-core/source-minified/styles/smart.base-novars.css" type="text/css" />');
+            document.write('<!--');
+        }
+    </script>
+    <link rel="stylesheet" href="../../smart-core/source-minified/styles/smart.base.css" type="text/css" />
+    <!--! do not remove --> 
+   <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.element-polyfills.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.element.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.tabs.js"></script>
+    <script type="text/javascript" src="../../smart-core/source-minified/smart.button.js"></script>
+    <script type="text/javascript">
+        window.onload = function () {
+            var tabs = document.createElement('smart-tabs');
+
+            document.body.appendChild(tabs);
+
+            var tabItem1 = document.createElement('smart-tab-item'),
+                tabItem2 = document.createElement('smart-tab-item');
+
+            tabItem1.label = 'TAB 1';
+            tabItem1.content = 'Content 1';
+            tabItem2.label = 'TAB 2';
+            tabItem2.content = 'Content 2';
+
+            tabs.appendChild(tabItem1);
+            tabs.appendChild(tabItem2);
+        }
+    </script>
+</head>
+<body id="bodyLightTheme">
+</body>
+</html>