Skip to content

Commit 48a45e6

Browse files
bmarkovbmarkov
authored
Add files via upload
1 parent 2fa1e10 commit 48a45e6

11 files changed

+1120
-0
lines changed

‎demos/smart-accordion/smart-accordion-animated.htm‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script>
5+
// IE/Edge polyfill.
6+
if (!window.customElements) {
7+
document.writeln('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"><\/script>');
8+
document.write('<!--');
9+
}
10+
</script>
11+
<script type="text/javascript" src="../../source-minified/native-shim.js"></script>
12+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
13+
<!--! do not remove -->
14+
<script>
15+
// IE polyfill.
16+
if (!(window.CSS && window.CSS.supports && window.CSS.supports('(--fake-var: 0)'))) {
17+
document.writeln('<link rel="stylesheet" href="../../source-minified/styles/smart.base-novars.css" type="text/css" />');
18+
document.write('<!--');
19+
}
20+
</script>
21+
<link rel="stylesheet" href="../../source-minified/styles/smart.base.css" type="text/css" />
22+
<!--! do not remove -->
23+
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
24+
<script type="text/javascript" src="../../source-minified/smart.element-polyfills.js"></script>
25+
<script type="text/javascript" src="../../source-minified/smart.element.js"></script>
26+
<script type="text/javascript" src="../../source-minified/smart.accordion.js"></script>
27+
<style>
28+
smart-accordion{
29+
width:250px;
30+
height:350px;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<smart-accordion class="animation">
36+
<smart-accordion-item label="First Item">First Item Content.</smart-accordion-item>
37+
<smart-accordion-item label="Second Item">Second Item Content.</smart-accordion-item>
38+
<smart-accordion-item label="Third Item">Third Item Content.</smart-accordion-item>
39+
<smart-accordion-item label="Fourth Item">Fourth Item Content.</smart-accordion-item>
40+
</smart-accordion>
41+
</body>
42+
</html>

‎demos/smart-accordion/smart-accordion-create-with-script.htm‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script>
5+
// IE/Edge polyfill.
6+
if (!window.customElements) {
7+
document.writeln('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"><\/script>');
8+
document.write('<!--');
9+
}
10+
</script>
11+
<script type="text/javascript" src="../../source-minified/native-shim.js"></script>
12+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
13+
<!--! do not remove -->
14+
<script>
15+
// IE polyfill.
16+
if (!(window.CSS && window.CSS.supports && window.CSS.supports('(--fake-var: 0)'))) {
17+
document.writeln('<link rel="stylesheet" href="../../source-minified/styles/smart.base-novars.css" type="text/css" />');
18+
document.write('<!--');
19+
}
20+
</script>
21+
<link rel="stylesheet" href="../../source-minified/styles/smart.base.css" type="text/css" />
22+
<!--! do not remove -->
23+
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
24+
<script type="text/javascript" src="../../source-minified/smart.element-polyfills.js"></script>
25+
<script type="text/javascript" src="../../source-minified/smart.element.js"></script>
26+
<script type="text/javascript" src="../../source-minified/smart.accordion.js"></script>
27+
<script>
28+
window.onload = function () {
29+
var accordion = document.createElement('smart-accordion');
30+
31+
for (var j = 0; j < 4; j++) {
32+
var accordionItem = document.createElement('smart-accordion-item');
33+
34+
accordionItem.label = 'Item ' + j;
35+
accordionItem.content = 'Content ' + j;
36+
accordion.appendChild(accordionItem);
37+
}
38+
39+
document.body.appendChild(accordion);
40+
}
41+
</script>
42+
<style>
43+
smart-accordion{
44+
width:250px;
45+
height:350px;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
</body>
51+
</html>

‎demos/smart-accordion/smart-accordion-events.htm‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script>
5+
// IE/Edge polyfill.
6+
if (!window.customElements) {
7+
document.writeln('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"><\/script>');
8+
document.write('<!--');
9+
}
10+
</script>
11+
<script type="text/javascript" src="../../source-minified/native-shim.js"></script>
12+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
13+
<!--! do not remove -->
14+
<script>
15+
// IE polyfill.
16+
if (!(window.CSS && window.CSS.supports && window.CSS.supports('(--fake-var: 0)'))) {
17+
document.writeln('<link rel="stylesheet" href="../../source-minified/styles/smart.base-novars.css" type="text/css" />');
18+
document.writeln('<link rel="stylesheet" href="../../source-minified/styles/smart.material-novars.css" type="text/css" />');
19+
document.writeln('<link rel="stylesheet" href="../../source-minified/styles/smart.material-dark-novars.css" type="text/css" />');
20+
document.write('<!--');
21+
}
22+
</script>
23+
<link rel="stylesheet" href="../../source-minified/styles/smart.base.css" type="text/css" />
24+
<link rel="stylesheet" href="../../source-minified/styles/smart.material.css" type="text/css" />
25+
<link rel="stylesheet" href="../../source-minified/styles/smart.material-dark.css" type="text/css" />
26+
<!--! do not remove -->
27+
<script type="text/javascript" src="../../source-minified/smart.element-polyfills.js"></script>
28+
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
29+
<script type="text/javascript" src="../../source-minified/smart.element.js"></script>
30+
<script type="text/javascript" src="../../source-minified/smart.accordion.js"></script>
31+
<script>
32+
window.onload = function () {
33+
var accordion = document.getElementById('accordion'),
34+
log = document.getElementById('log');
35+
36+
//Expanding event
37+
accordion.addEventListener('expanding', function (event) {
38+
updateEventLog(event);
39+
});
40+
41+
//Expanded event
42+
accordion.addEventListener('expanded', function (event) {
43+
updateEventLog(event);
44+
});
45+
46+
//Collapsing event
47+
accordion.addEventListener('collapsing', function (event) {
48+
updateEventLog(event);
49+
});
50+
51+
//Collapsed event
52+
accordion.addEventListener('collapsed', function (event) {
53+
updateEventLog(event);
54+
});
55+
56+
//Reorder Start event
57+
accordion.addEventListener('reorderStart', function (event) {
58+
updateEventLog(event);
59+
});
60+
61+
//Reorder End event
62+
accordion.addEventListener('reorderEnd', function (event) {
63+
updateEventLog(event);
64+
});
65+
66+
function updateEventLog(event) {
67+
var eventContainer = document.createElement('div'),
68+
eventType = event.type;
69+
70+
eventContainer.innerText = eventType + ' item #' + event.detail.index;
71+
eventContainer.className = eventType === 'expanded'? 'expanded':'';
72+
log.appendChild(eventContainer);
73+
}
74+
}
75+
</script>
76+
<style>
77+
body{
78+
font-family:Arial, sans-serif;
79+
margin:0px auto 0px auto;
80+
padding:0px 10px 0px 10px;
81+
}
82+
83+
smart-accordion{
84+
float:left;
85+
width:250px;
86+
height:500px;
87+
margin-right:50px;
88+
}
89+
90+
#sideContainer{
91+
float: left;
92+
padding-top:10px;
93+
height:100%;
94+
}
95+
96+
#log{
97+
float: left;
98+
padding-top:10px;
99+
height:100%;
100+
}
101+
102+
smart-accordion-item[expanded] .smart-accordion-item-header,
103+
smart-accordion-item[expanded] .smart-accordion-item-content{
104+
background-color:#f2f2f2;
105+
}
106+
107+
smart-accordion-item[expanded] .smart-accordion-item-header{
108+
border-bottom:gray dashed 1px;
109+
}
110+
111+
.expanded {
112+
margin-bottom:10px;
113+
}
114+
</style>
115+
</head>
116+
<body>
117+
<smart-accordion id="accordion" reorder>
118+
<smart-accordion-item label="Item 0">Content </smart-accordion-item>
119+
<smart-accordion-item label="Item 1">Content </smart-accordion-item>
120+
<smart-accordion-item label="Item 3">Content</smart-accordion-item>
121+
<smart-accordion-item label="Item 2">Content</smart-accordion-item>
122+
<smart-accordion-item label="Item 4">Content</smart-accordion-item>
123+
<smart-accordion-item label="Item 5">Content</smart-accordion-item>
124+
<smart-accordion-item label="Item 6">Content</smart-accordion-item>
125+
<smart-accordion-item label="Item 7">Content</smart-accordion-item>
126+
<smart-accordion-item label="Item 8">Content</smart-accordion-item>
127+
<smart-accordion-item label="Item 9">Content</smart-accordion-item>
128+
</smart-accordion>
129+
130+
<div id="sideContainer">
131+
<h2>Events</h2>
132+
<div id="log"></div>
133+
</div>
134+
</body>
135+
</html>

‎demos/smart-accordion/smart-accordion-expand-mode.htm‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script>
5+
// IE/Edge polyfill.
6+
if (!window.customElements) {
7+
document.writeln('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"><\/script>');
8+
document.write('<!--');
9+
}
10+
</script>
11+
<script type="text/javascript" src="../../source-minified/native-shim.js"></script>
12+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
13+
<!--! do not remove -->
14+
<script>
15+
// IE polyfill.
16+
if (!(window.CSS && window.CSS.supports && window.CSS.supports('(--fake-var: 0)'))) {
17+
document.writeln('<link rel="stylesheet" href="../../source-minified/styles/smart.base-novars.css" type="text/css" />');
18+
document.writeln('<link rel="stylesheet" href="../../source-minified/styles/smart.material-novars.css" type="text/css" />');
19+
document.writeln('<link rel="stylesheet" href="../../source-minified/styles/smart.material-dark-novars.css" type="text/css" />');
20+
document.write('<!--');
21+
}
22+
</script>
23+
<link rel="stylesheet" href="../../source-minified/styles/smart.base.css" type="text/css" />
24+
<link rel="stylesheet" href="../../source-minified/styles/smart.material.css" type="text/css" />
25+
<link rel="stylesheet" href="../../source-minified/styles/smart.material-dark.css" type="text/css" />
26+
<!--! do not remove -->
27+
<script type="text/javascript" src="../../source-minified/smart.element-polyfills.js"></script> <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
28+
<script type="text/javascript" src="../../source-minified/smart.element.js"></script>
29+
<script type="text/javascript" src="./../../source-minified/smart.button.js"></script>
30+
<script type="text/javascript" src="./../../source-minified/smart.scrollbar.js"></script>
31+
<script type="text/javascript" src="./../../source-minified/smart.listbox.js"></script>
32+
<script type="text/javascript" src="./../../source-minified/smart.dropdownlist.js"></script>
33+
<script type="text/javascript" src="../../source-minified/smart.accordion.js"></script>
34+
<script>
35+
window.onload = function () {
36+
var accordion = document.getElementById('accordion'),
37+
expandModeDropDown = document.getElementById('expandMode');
38+
39+
expandModeDropDown.addEventListener('change', function (event) {
40+
accordion.expandMode = event.detail.value;
41+
});
42+
}
43+
</script>
44+
<style>
45+
body{
46+
font-family:Arial, sans-serif;
47+
margin:0px auto 0px auto;
48+
padding:0px 10px 0px 10px;
49+
}
50+
51+
smart-accordion{
52+
float:left;
53+
width:250px;
54+
height:500px;
55+
margin-right:50px;
56+
}
57+
58+
#sideContainer{
59+
float: left;
60+
padding-top:10px;
61+
}
62+
63+
#expandMode {
64+
float:left;
65+
width: 175px;
66+
height: 35px;
67+
position:relative;
68+
top:0px;
69+
left:0px;
70+
}
71+
72+
smart-accordion-item[expanded] .smart-accordion-item-header,
73+
smart-accordion-item[expanded] .smart-accordion-item-content{
74+
background-color:#f2f2f2;
75+
}
76+
77+
smart-accordion-item[expanded] .smart-accordion-item-header{
78+
border-bottom:gray dashed 1px;
79+
}
80+
</style>
81+
</head>
82+
<body>
83+
<smart-accordion id="accordion">
84+
<smart-accordion-item label="Item 0">Content </smart-accordion-item>
85+
<smart-accordion-item label="Item 1">Content </smart-accordion-item>
86+
<smart-accordion-item label="Item 3">Content</smart-accordion-item>
87+
<smart-accordion-item label="Item 2">Content</smart-accordion-item>
88+
<smart-accordion-item label="Item 4">Content</smart-accordion-item>
89+
<smart-accordion-item label="Item 5">Content</smart-accordion-item>
90+
<smart-accordion-item label="Item 6">Content</smart-accordion-item>
91+
<smart-accordion-item label="Item 7">Content</smart-accordion-item>
92+
<smart-accordion-item label="Item 8">Content</smart-accordion-item>
93+
<smart-accordion-item label="Item 9">Content</smart-accordion-item>
94+
</smart-accordion>
95+
96+
<div id="sideContainer">
97+
<h2>Expand Mode</h2>
98+
<smart-drop-down-list id="expandMode" selection-mode="one" selected-indexes="[1]">
99+
<smart-list-item value="single">Single</smart-list-item>
100+
<smart-list-item value="singleFitHeight">SingleFitHeight</smart-list-item>
101+
<smart-list-item value="multiple">Multiple</smart-list-item>
102+
<smart-list-item value="toggle">Toggle</smart-list-item>
103+
<smart-list-item value="none">None</smart-list-item>
104+
</smart-drop-down-list>
105+
</div>
106+
</body>
107+
</html>

‎demos/smart-accordion/smart-accordion-fluid-demo.htm‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script>
5+
// IE/Edge polyfill.
6+
if (!window.customElements) {
7+
document.writeln('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"><\/script>');
8+
document.write('<!--');
9+
}
10+
</script>
11+
<script type="text/javascript" src="../../source-minified/native-shim.js"></script>
12+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
13+
<!--! do not remove -->
14+
<script>
15+
// IE polyfill.
16+
if (!(window.CSS && window.CSS.supports && window.CSS.supports('(--fake-var: 0)'))) {
17+
document.writeln('<link rel="stylesheet" href="../../source-minified/styles/smart.base-novars.css" type="text/css" />');
18+
document.write('<!--');
19+
}
20+
</script>
21+
<link rel="stylesheet" href="../../source-minified/styles/smart.base.css" type="text/css" />
22+
<!--! do not remove -->
23+
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
24+
<script type="text/javascript" src="../../source-minified/smart.element-polyfills.js"></script>
25+
<script type="text/javascript" src="../../source-minified/smart.element.js"></script>
26+
<script type="text/javascript" src="../../source-minified/smart.accordion.js"></script>
27+
<style>
28+
body{
29+
width:100vw;
30+
height:99vh;
31+
margin:0px;
32+
padding:0px;
33+
}
34+
35+
smart-accordion{
36+
width:100%;
37+
height:100%;
38+
}
39+
</style>
40+
</head>
41+
<body>
42+
<smart-accordion id="accordion">
43+
<smart-accordion-item label="Item 1">Content</smart-accordion-item>
44+
<smart-accordion-item label="Item 3">Content</smart-accordion-item>
45+
<smart-accordion-item label="Item 2">Content</smart-accordion-item>
46+
<smart-accordion-item label="Item 4">Content</smart-accordion-item>
47+
<smart-accordion-item label="Item 5">Content</smart-accordion-item>
48+
<smart-accordion-item label="Item 6">Content</smart-accordion-item>
49+
<smart-accordion-item label="Item 7">Content</smart-accordion-item>
50+
<smart-accordion-item label="Item 8">Content</smart-accordion-item>
51+
<smart-accordion-item label="Item 9">Content</smart-accordion-item>
52+
</smart-accordion>
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)