UNPKG

6.11 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>Plumes - Examples</title>
6
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <link rel="stylesheet" href="/public/plumes/plumes.css" type="text/css" />
9 <style type="text/css">
10 .example-mask {
11 z-index: 99998;
12 position: fixed;
13 top: 0;
14 left: 0;
15 right: 0;
16 bottom: 0;
17 background: #fff;
18 }
19 </style>
20</head>
21<body>
22
23 <rv-require
24 name="pl-layout-platform"
25 src="../public/layouts/pl-layout-platform"
26
27 data-bind-onloaded="onloaded"
28 data-bind-beforerequire="beforerequire"
29 data-bind-apps="apps"
30 data-bind-buttonsleft="buttonsleft"
31 data-bind-buttonsright="buttonsright"
32 >
33 <rv-partial target="mask-title">
34 Plumes <span class="theme">example</span>
35 </rv-partial>
36 <rv-partial target="message-title">
37 Plumes <span class="theme">example</span>
38 </rv-partial>
39 <rv-partial target="context-left-panels">
40
41 <div class="pl-group" data-group="group-1" data-title="articles">
42 <div class="pl-section" style="padding: 3rem;">
43
44 <ul>
45 <li>Article 1</li>
46 <li>Article 2</li>
47 <li>Article 3</li>
48 <li>Article 4</li>
49 <li>Article 5</li>
50 <li>Article 6</li>
51 <li>Article 7</li>
52 <li>Article 8</li>
53 </ul>
54
55 </div>
56 </div>
57
58 <div class="pl-group" data-group="group-2" data-title="content">
59 <div class="pl-section" style="padding: 3rem;">
60
61 <p>My big content</p>
62
63 </div>
64 </div>
65
66 </rv-partial>
67 <rv-partial target="context-right-panels">
68
69 <div class="pl-group" data-group="group-3" data-title="notifications">
70
71 <rv-require
72 data-name="notifications"
73 name="pl-notifications-panel"
74 src="../public/notifications-panel/pl-notifications-panel"
75
76 data-dark="true"
77 ></rv-require>
78
79 </div>
80
81 </rv-partial>
82 <rv-partial target="content">
83
84 <rv-require name="index-content" src="index-content"></rv-require>
85
86 </rv-partial>
87 </rv-require>
88
89 <div class="example-mask"></div>
90
91 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
92 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.js"></script>
93 <script type="text/javascript" src="http://cdn.ractivejs.org/latest/ractive.js"></script>
94 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ractive-require/0.5.4/ractive-require.js"></script>
95 <script type="text/javascript" src="/public/plumes/plumes.js"></script>
96
97 <script type="text/javascript">
98 (function() {
99 'use strict';
100
101 window.Ractive.Plumes.bootstrap(function(page) {
102
103 page.set('apps', [{
104 name: 'Plumes',
105 selected: true,
106 select: function() {
107 window.location.href = 'index.html';
108 }
109 }, {
110 name: 'Example Login',
111 select: function() {
112 window.location.href = 'login.html';
113 }
114 }, {
115 name: 'Example Lists',
116 select: function() {
117 window.location.href = 'lists.html';
118 }
119 }]);
120
121 var buttonsleft = page.get('buttonsleft') || [];
122
123 buttonsleft.push({
124 icon: 'fa fa-list-ul',
125 group: 'group-1'
126 })
127
128 page.set('buttonsleft', buttonsleft);
129
130 setTimeout(function() {
131 var buttonsleft = page.get('buttonsleft');
132
133 buttonsleft.unshift({
134 icon: 'fa fa-file-text',
135 group: 'group-2'
136 });
137
138 page.set('buttonsleft', buttonsleft);
139 }, 2000);
140
141 var profileButton = null;
142
143 var buttonsright = page.get('buttonsright') || [];
144
145 buttonsright.push({
146 icon: 'fa fa-bell',
147 action: function(event, button) {
148 button.set('icon', button.get('icon') == 'fa fa-bell' ? 'fa fa-bell-slash' : 'fa fa-bell');
149 }
150 });
151
152 buttonsright.push({
153 icon: 'fa fa-play',
154 action: function(event, button) {
155 profileButton.pushNotification(
156 'We have released a new <strong>Plumes</strong> version!',
157 '/examples/plumes-logo.png',
158 {
159 id: 10
160 }
161 );
162
163 var notificationsPanel = page.findChild('data-name', 'notifications');
164
165 notificationsPanel.pushNotification(
166 'The user already connected and <strong>13 other bugs</strong> are now fixed on <strong>Plumes</strong>!',
167 '13 hours ago',
168 '/examples/plumes-logo.png',
169 {
170 id: 10
171 }
172 );
173 }
174 });
175
176 buttonsright.push({
177 type: 'indicator',
178 image: 'https://www.gravatar.com/avatar/9e38451efa23937301594f273033c5f1.png',
179 group: 'group-3',
180 action: function(event, button) {
181 button.clearNotificationsCount();
182 },
183 ready: function(button) {
184 profileButton = button;
185 }
186 });
187
188 page.set('buttonsright', buttonsright);
189
190 page.set('beforerequire', function(layout, callback) {
191 if (Cookies.get('intro') == 'done') {
192 return callback();
193 }
194
195 layout.require('pl-screen-message').then(function() {
196
197 var screenMessage = layout.findChild('name', 'pl-screen-message');
198
199 screenMessage.fire('play', {
200 message: [
201 'Hello',
202 'It\'s your first time on the <strong class="accent">Plumes</strong> examples.',
203 'We thank you for using <strong class="accent">Plumes</strong>.',
204 'Have a good day.'
205 ],
206 done: function() {
207 Cookies.set('intro', 'done', {
208 expires: 10
209 });
210
211 screenMessage.teardown();
212
213 callback();
214 }
215 });
216 });
217
218 });
219
220 page.set('onloaded', function() {
221 $('.example-mask').remove();
222 });
223
224 page.require();
225 });
226
227 })();
228</script>
229</body>
230</html>