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>
|