|
0
|
1 /* Todo Widget
|
|
|
2 * --------------------
|
|
|
3 * Fetches latest tweets for the user provided
|
|
|
4 * in the plugin options.
|
|
|
5 */
|
|
|
6
|
|
|
7
|
|
|
8 var Todo = function Todo(node) {
|
|
|
9 var tasks = [];
|
|
|
10
|
|
|
11 // Initialise list from the node
|
|
|
12 var lists = node.getElementsByTagName('li');
|
|
|
13 for( var i = 0; i < lists.length; i++ ) {
|
|
|
14 var item = {
|
|
|
15 text: lists[i].innerHTML,
|
|
|
16 checked: JSON.parse( JSON.stringify( lists[i].dataset ) ).checked ? true : false
|
|
|
17 };
|
|
|
18 tasks.push(item);
|
|
|
19 }
|
|
|
20
|
|
|
21 // Todo App
|
|
|
22 var Todo = {
|
|
|
23 data: {
|
|
|
24 tasks: [],
|
|
|
25 },
|
|
|
26 oninit: function(vnode) {
|
|
|
27 vnode.state.data.tasks = tasks;
|
|
|
28 },
|
|
|
29 view: function(vnode) {
|
|
|
30 var self = this;
|
|
|
31 var ctrl = this.ctrl(vnode);
|
|
|
32 return [
|
|
|
33 m('div.list-group', [
|
|
|
34 vnode.state.data.tasks.map(function(item, index) {
|
|
|
35 return [
|
|
|
36 m('div', {
|
|
|
37 class: 'list-group-item todo-item checkbox checkbox-info ' + ( item.checked ? ' checked' : ''),
|
|
|
38 }, [
|
|
|
39 m('label', [
|
|
|
40 m('input[type="checkbox"]', {
|
|
|
41 onchange: m.withAttr("value", ctrl.checkTask),
|
|
|
42 value: index,
|
|
|
43 checked: item.checked,
|
|
|
44 }),
|
|
|
45 m('span.label-text', item.text),
|
|
|
46 ]),
|
|
|
47
|
|
|
48 m('span.delete-item.material-icons', {
|
|
|
49 onclick: m.withAttr("value", ctrl.deleteTask),
|
|
|
50 value: index,
|
|
|
51 }, 'delete'),
|
|
|
52
|
|
|
53 m('span.edit-item.material-icons', {
|
|
|
54 onclick: m.withAttr("value", ctrl.editTask),
|
|
|
55 value: index,
|
|
|
56 }, 'edit'),
|
|
|
57 ]),
|
|
|
58 ];
|
|
|
59 }),
|
|
|
60 m(this.noTaskMessage, { tasks: vnode.state.data.tasks } ),
|
|
|
61 ]),
|
|
|
62 m('input[type="text"].form-control', {
|
|
|
63 onkeypress: ctrl.addTask,
|
|
|
64 placeholder: 'add new task',
|
|
|
65 }, 'Add task'),
|
|
|
66 ];
|
|
|
67 },
|
|
|
68
|
|
|
69 ctrl: function( vnode ) {
|
|
|
70 return {
|
|
|
71
|
|
|
72 // Adding task on Enter Press of Input field
|
|
|
73 addTask: function(e) {
|
|
|
74 if( e.keyCode == 13 ) {
|
|
|
75 var val = e.target.value;
|
|
|
76 vnode.state.data.tasks.push( { text: val, checked: false } );
|
|
|
77 e.target.value = '';
|
|
|
78 }
|
|
|
79 },
|
|
|
80
|
|
|
81 // Check to task on click
|
|
|
82 checkTask: function(index) {
|
|
|
83 if( vnode.state.data.tasks[index] !== undefined)
|
|
|
84 vnode.state.data.tasks[index].checked = !vnode.state.data.tasks[index].checked;
|
|
|
85 },
|
|
|
86
|
|
|
87 // Delete task
|
|
|
88 deleteTask: function(index) {
|
|
|
89 vnode.state.data.tasks.splice(index, 1);
|
|
|
90 },
|
|
|
91
|
|
|
92 // Edit Task by adding a text field in the list
|
|
|
93 editTask: function(index) {
|
|
|
94 var parentNode = this.parentNode;
|
|
|
95 var labelText = parentNode.getElementsByClassName('label-text')[0];
|
|
|
96 var text = labelText.innerHTML;
|
|
|
97 labelText.style.display = "none";
|
|
|
98 parentNode.getElementsByClassName('delete-item')[0].style.display = "none";
|
|
|
99 parentNode.getElementsByClassName('edit-item')[0].style.display = "none";
|
|
|
100
|
|
|
101 // View of the Text Field
|
|
|
102 var EditField = {
|
|
|
103 view: function() {
|
|
|
104 var self = this;
|
|
|
105 return [
|
|
|
106 m('div.edit-field', [
|
|
|
107 m('form.mr-t-0', {
|
|
|
108 onsubmit: function( e ) {
|
|
|
109 var container = parentNode.getElementsByClassName('edit-container-field')[0];
|
|
|
110 var value = container.getElementsByTagName('input')[0].value;
|
|
|
111 vnode.state.data.tasks[index].text = value;
|
|
|
112 labelText.style.display = "block";
|
|
|
113 parentNode.getElementsByClassName('delete-item')[0].style.display = "block";
|
|
|
114 parentNode.getElementsByClassName('edit-item')[0].style.display = "block";
|
|
|
115 container.parentNode.removeChild( container );
|
|
|
116 }
|
|
|
117 }, m('input[type="text"].form-control', {
|
|
|
118 value: text,
|
|
|
119 }),
|
|
|
120 m('button[type="submit"].submit-btn.btn.btn-info', [
|
|
|
121 m('i.material-icons', 'send'),
|
|
|
122 ])
|
|
|
123 ),
|
|
|
124 ]),
|
|
|
125 ];
|
|
|
126 }
|
|
|
127 };
|
|
|
128
|
|
|
129 var prevEditField = parentNode.parentNode.getElementsByClassName('edit-container-field');
|
|
|
130 if ( prevEditField.length ) {
|
|
|
131 var event = document.createEvent('HTMLEvents');
|
|
|
132 event.initEvent('submit', true, false);
|
|
|
133 prevEditField[0].getElementsByTagName('form')[0].dispatchEvent( event );
|
|
|
134 }
|
|
|
135 var editContainer = document.createElement('div');
|
|
|
136 editContainer.classList.add('edit-container-field');
|
|
|
137 parentNode.getElementsByTagName('label')[0].appendChild( editContainer );
|
|
|
138 m.mount( editContainer, EditField );
|
|
|
139 },
|
|
|
140 };
|
|
|
141 },
|
|
|
142 };
|
|
|
143
|
|
|
144 // View of Message when there is no task in the list
|
|
|
145 Todo.noTaskMessage = {
|
|
|
146 view: function(vnode) {
|
|
|
147 if( vnode.attrs.tasks.length === 0 ) {
|
|
|
148 return [
|
|
|
149 m('div.list-group-item', [
|
|
|
150 m('label', 'no tasks to display'),
|
|
|
151 ]),
|
|
|
152 ];
|
|
|
153 }
|
|
|
154 return null;
|
|
|
155 }
|
|
|
156 };
|
|
|
157
|
|
|
158 return m.mount(node, Todo);
|
|
|
159 }
|
|
|
160
|
|
|
161
|
|
|
162
|
|
|
163
|
|
|
164 /* Twitter Feed Widgets
|
|
|
165 * --------------------
|
|
|
166 * Fetches latest tweets for the user provided
|
|
|
167 * in the plugin options.
|
|
|
168 */
|
|
|
169
|
|
|
170 var TwitterWidget = function TwitterWidget(node, options) {
|
|
|
171 var WidgetOptions = options;
|
|
|
172
|
|
|
173 var TweetsList = {
|
|
|
174 view: function(vnode) {
|
|
|
175 if ( vnode.attrs.tweets !== undefined ) {
|
|
|
176 return vnode.attrs.tweets.map( function(tweet, index) {
|
|
|
177 var hidden = index !== 0 ? 'hidden' : '';
|
|
|
178 return m('div.status', {
|
|
|
179 class: 'animated fadeInLeft',
|
|
|
180 hidden: hidden,
|
|
|
181 },[
|
|
|
182 m('p', tweet.text),
|
|
|
183 ]);
|
|
|
184 });
|
|
|
185 }
|
|
|
186 return m('p', 'no items to show');
|
|
|
187 },
|
|
|
188 };
|
|
|
189
|
|
|
190 var TwitterWidget = {
|
|
|
191 data: {
|
|
|
192 tweets: [],
|
|
|
193 user: {
|
|
|
194 name: 'John Doe',
|
|
|
195 screen_name: 'johndoe',
|
|
|
196 profile_image_url: 'assets/demo/users/user-image.png',
|
|
|
197 },
|
|
|
198 },
|
|
|
199 oninit: function(vnode) {
|
|
|
200 var ctrl = this.ctrl(vnode);
|
|
|
201 ctrl.getQuery();
|
|
|
202 },
|
|
|
203 view: function(vnode) {
|
|
|
204 var ctrl = this.ctrl(vnode);
|
|
|
205 return [
|
|
|
206 m('div.status-container', [
|
|
|
207 m('div.user-info', [
|
|
|
208 m('img.user-profile-picture', { src: vnode.state.data.user.profile_image_url, alt: vnode.state.data.user.screen_name + ' profile picture' }),
|
|
|
209 m('div.user-name-group', [
|
|
|
210 m('h5.user-name', vnode.state.data.user.name),
|
|
|
211 m('h6.user-screen-name.ltr', '@' + vnode.state.data.user.screen_name),
|
|
|
212 ]),
|
|
|
213 m('i.widget-icon.feather.feather-twitter', null),
|
|
|
214 ]),
|
|
|
215 m('div.flex-1', null),
|
|
|
216 m( TweetsList, { oncreate: ctrl.slideTweets, tweets: vnode.state.data.tweets } ),
|
|
|
217 ]),
|
|
|
218 ];
|
|
|
219 },
|
|
|
220 ctrl: function(vnode) {
|
|
|
221 return {
|
|
|
222 getQuery: function() {
|
|
|
223 var queryString = "";
|
|
|
224 queryString = m.buildQueryString(JSON.parse(WidgetOptions));
|
|
|
225 queryString = '?' + queryString;
|
|
|
226 var url = 'assets/vendors/theme-widgets/getTwitterFeed.php' + queryString;
|
|
|
227 m.request({
|
|
|
228 method: "GET",
|
|
|
229 url: url,
|
|
|
230 callbackKey: 'none'
|
|
|
231 }).then( function(results) {
|
|
|
232 if ( results.error === undefined ) {
|
|
|
233 vnode.state.data.tweets = JSON.parse( JSON.stringify(results) );
|
|
|
234 vnode.state.data.user = vnode.state.data.tweets[0].user;
|
|
|
235 }
|
|
|
236 else
|
|
|
237 console.error( results );
|
|
|
238 }).catch( console.error );
|
|
|
239 },
|
|
|
240
|
|
|
241 slideTweets: function() {
|
|
|
242 var current = 0;
|
|
|
243 var statusDoms = vnode.dom.getElementsByClassName('status');
|
|
|
244 function showSlide() {
|
|
|
245 if ( vnode.state.data.tweets.length === 0 ) return;
|
|
|
246
|
|
|
247 var prev = current - 1;
|
|
|
248 if ( prev == -1 ) prev = vnode.state.data.tweets.length - 1;
|
|
|
249
|
|
|
250 var currentStatusNode = statusDoms[current];
|
|
|
251 if ( currentStatusNode !== undefined )
|
|
|
252 currentStatusNode.hidden = '';
|
|
|
253
|
|
|
254 var prevStatusNode = statusDoms[prev];
|
|
|
255 if ( prevStatusNode !== undefined )
|
|
|
256 prevStatusNode.hidden = 'hidden';
|
|
|
257
|
|
|
258 if ( current == vnode.state.data.tweets.length - 1 ) current = 0;
|
|
|
259 else current++;
|
|
|
260 }
|
|
|
261 showSlide();
|
|
|
262 setInterval(showSlide, 5000);
|
|
|
263 },
|
|
|
264 };
|
|
|
265 },
|
|
|
266 };
|
|
|
267
|
|
|
268 var App = {
|
|
|
269 view: function(vnode) {
|
|
|
270 return m('h4','jfdkas');
|
|
|
271 },
|
|
|
272 };
|
|
|
273
|
|
|
274 m.mount( node, TwitterWidget );
|
|
|
275 }
|
|
|
276
|
|
|
277
|
|
|
278
|
|
|
279
|
|
|
280 /* Facebook Feed Widget
|
|
|
281 * --------------------
|
|
|
282 * Fetches latest tweets for the user provided
|
|
|
283 * in the plugin options.
|
|
|
284 */
|
|
|
285
|
|
|
286 var FacebookWidget = function FacebookWidget(node, options) {
|
|
|
287 var WidgetOptions = options;
|
|
|
288 var FacebookList = {
|
|
|
289 view: function(vnode) {
|
|
|
290 if ( vnode.attrs.statuses !== undefined ) {
|
|
|
291 return [
|
|
|
292 vnode.attrs.statuses.map(function(status, index) {
|
|
|
293 var hidden = ( index !== 0 ) ? 'hidden' : '';
|
|
|
294 var story = '';
|
|
|
295 if ( status.message !== undefined )
|
|
|
296 story = status.message;
|
|
|
297 else if ( status.story !== undefined )
|
|
|
298 story = status.story;
|
|
|
299
|
|
|
300 story = story.length > 160 ? story.substring(0,160) : story;
|
|
|
301 return m('div.status', {
|
|
|
302 class: "animated fadeInLeft",
|
|
|
303 hidden: hidden,
|
|
|
304 },[
|
|
|
305 m('p', story),
|
|
|
306 ]);
|
|
|
307 }),
|
|
|
308 ];
|
|
|
309 }
|
|
|
310
|
|
|
311 return m('p','no posts to show');
|
|
|
312 },
|
|
|
313 };
|
|
|
314
|
|
|
315 var FacebookWidget = {
|
|
|
316 data: {
|
|
|
317 statuses: [],
|
|
|
318 user: {
|
|
|
319 name: 'John Doe',
|
|
|
320 username: 'johndoe',
|
|
|
321 picture: {
|
|
|
322 data: {
|
|
|
323 url: 'assets/demo/users/user-image.png',
|
|
|
324 }
|
|
|
325 }
|
|
|
326 }
|
|
|
327 },
|
|
|
328 oninit: function(vnode) {
|
|
|
329 var ctrl = this.ctrl(vnode);
|
|
|
330 ctrl.fetchStatus();
|
|
|
331 },
|
|
|
332 view: function(vnode) {
|
|
|
333 var ctrl = this.ctrl(vnode);
|
|
|
334 return [
|
|
|
335 m('div.status-container',[
|
|
|
336 m('div.user-info',[
|
|
|
337 m('img.user-profile-picture', { src: vnode.state.data.user.picture.data.url }),
|
|
|
338 m('div.user-name-group', [
|
|
|
339 m('h5.user-name', vnode.state.data.user.username),
|
|
|
340 m('h6.user-screen-name.ltr', '@' + vnode.state.data.user.username),
|
|
|
341 ]),
|
|
|
342 m('i.widget-icon.feather.feather-facebook', null),
|
|
|
343 ]),
|
|
|
344 m('div.flex-1', null),
|
|
|
345 m(FacebookList, { oncreate: ctrl.slideStatus, statuses: vnode.state.data.statuses } ),
|
|
|
346 ]),
|
|
|
347 ];
|
|
|
348 },
|
|
|
349
|
|
|
350 ctrl: function(vnode) {
|
|
|
351 return {
|
|
|
352 fetchStatus: function() {
|
|
|
353 var queryString = "";
|
|
|
354 queryString = m.buildQueryString(JSON.parse(WidgetOptions));
|
|
|
355 queryString = '?' + queryString;
|
|
|
356 var url = 'assets/vendors/theme-widgets/getFacebookFeed.php' + queryString;
|
|
|
357 m.request({
|
|
|
358 method: 'GET',
|
|
|
359 url: url,
|
|
|
360 callbackKey: 'none'
|
|
|
361 }).then(function(results) {
|
|
|
362 if ( results.error === undefined ) {
|
|
|
363 vnode.state.data.statuses = results[0].data;
|
|
|
364 vnode.state.data.user = results[1];
|
|
|
365 }
|
|
|
366 else {
|
|
|
367 results.dom = node;
|
|
|
368 console.error( results );
|
|
|
369 }
|
|
|
370 }).catch(function(err) {
|
|
|
371 err.dom = node;
|
|
|
372 console.error( err );
|
|
|
373 });
|
|
|
374 },
|
|
|
375
|
|
|
376 slideStatus: function() {
|
|
|
377 var current = 0;
|
|
|
378 var statusDoms = vnode.dom.getElementsByClassName('status');
|
|
|
379 function showSlide() {
|
|
|
380 var prev = current - 1;
|
|
|
381 if ( prev == -1 ) prev = vnode.state.data.statuses.length - 1;
|
|
|
382
|
|
|
383 var currentStatusNode = statusDoms[current];
|
|
|
384 if ( currentStatusNode !== undefined )
|
|
|
385 currentStatusNode.hidden = '';
|
|
|
386
|
|
|
387 var prevStatusNode = statusDoms[prev];
|
|
|
388 if ( prevStatusNode !== undefined )
|
|
|
389 prevStatusNode.hidden = 'hidden';
|
|
|
390
|
|
|
391 if ( current == vnode.state.data.statuses.length - 1 ) current = 0;
|
|
|
392 else current++;
|
|
|
393 }
|
|
|
394 showSlide();
|
|
|
395 setInterval(showSlide, 5000);
|
|
|
396 },
|
|
|
397 };
|
|
|
398 },
|
|
|
399 };
|
|
|
400
|
|
|
401 m.mount( node, FacebookWidget);
|
|
|
402 }
|
|
|
403
|
|
|
404 window.Todo = Todo;
|
|
|
405 window.FacebookWidget = FacebookWidget;
|
|
|
406 window.TwitterWidget = TwitterWidget;
|
