-
Notifications
You must be signed in to change notification settings - Fork 42
Expand file tree
/
Copy pathnative.html
More file actions
104 lines (98 loc) · 4.4 KB
/
Copy pathnative.html
File metadata and controls
104 lines (98 loc) · 4.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<title>React.js components as HTML custom elements - native custom elements demo</title>
<link rel="stylesheet" href="./css/style.css"></link>
<script src="./bower_components/react/react.js"></script>
<script src="../src/reactive-elements.js"></script>
<script src="./dist/my-reactive-element.js"></script>
<script>
window.browsers = [
{'text': 'Chrome'},
{'text': 'Firefox'},
{'text': 'Safari'},
{'text': 'Opera'},
{'text': 'IE'}
];
window.justNames = [
{'text': 'Denis'},
{'text': 'Natasha'},
{'text': 'Alisa'}
];
window.justBirds = [
{'text': 'Raven'},
{'text': 'Dove'},
{'text': 'Colibri'}
];
</script>
</head>
<body>
<div id="wrapper">
<img src="../assets/logo-reactive-elements-small.png"></img>
<div class="header">
<h1>
React.js components as native HTML elements
</h1>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<iframe style="display: inline-block;"
src="http://ghbtns.com/github-btn.html?user=PixelsCommander&repo=ReactiveElements&type=watch"
allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ea2f9164143bcfb"></script>
<!-- AddThis Button END -->
</div>
<ul>
<li>
<button onclick="changePropertiesDirectly()">Change component properties directly and force update</button>
</li><li>
<button onclick="callToReactComponentMethod()">Execute React component method</button>
</li><li>
<button onclick="changeAttribute()">Change component attributes</button>
</li><li>
<button onclick="addReactiveElement()">Add component with document.createElement</button>
</li><li>
<button onclick="window.location.href = 'http://pixelscommander.com/polygon/reactbb/react/tests/broadcasts-list.html';">TV Schedule custom element demo</button>
</li>
</ul>
<my-reactive-element id="carusel" class="left_top_widget" case-sensitive-property-name="Some value from camel case named variable" items="{window.browsers}"></my-reactive-element>
<script>
function callToReactComponentMethod() {
document.getElementById('carusel').changeColor('red');
}
function changeAttribute() {
document.getElementById('carusel').setAttribute('items', '{window.justBirds}');
}
function changePropertiesDirectly() {
var carusel = document.getElementById('carusel');
carusel.props.items = window.justNames;
carusel.forceUpdate();
}
function addReactiveElement() {
var carusel = document.createElement('my-reactive-element');
carusel.className = 'right_top_widget';
carusel.props.items = window.browsers;
var wrapper = document.getElementById('wrapper')
wrapper.appendChild(carusel);
carusel.forceUpdate();
}
</script>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<iframe style="display: inline-block;"
src="http://ghbtns.com/github-btn.html?user=PixelsCommander&repo=ReactiveElements&type=watch"
allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ea2f9164143bcfb"></script>
<!-- AddThis Button END -->
</div>
</body>
</html>