diff default/assets/vendors/theme-widgets/widgets.js @ 0:1d038bc9b3d2 default tip

Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/assets/vendors/theme-widgets/widgets.js	Sat May 31 09:21:51 2025 +0800
@@ -0,0 +1,406 @@
+/* Todo Widget
+ * --------------------
+ *  Fetches latest tweets for the user provided
+ *  in the plugin options.
+ */
+
+
+var Todo = function Todo(node) {
+  var tasks = [];
+
+  // Initialise list from the node
+  var lists = node.getElementsByTagName('li');
+  for( var i = 0; i < lists.length; i++ ) {
+    var item = {
+      text: lists[i].innerHTML,
+      checked: JSON.parse( JSON.stringify( lists[i].dataset ) ).checked ? true : false
+    };
+    tasks.push(item);
+  }
+
+  // Todo App
+  var Todo = {
+    data: {
+      tasks: [],
+    },
+    oninit: function(vnode) {
+      vnode.state.data.tasks = tasks;
+    },
+    view: function(vnode) {
+      var self = this;
+      var ctrl = this.ctrl(vnode);
+      return [
+        m('div.list-group', [
+          vnode.state.data.tasks.map(function(item, index) {
+            return [
+              m('div', {
+                class: 'list-group-item todo-item checkbox checkbox-info ' + ( item.checked ? ' checked' : ''),
+              }, [
+                m('label', [
+                  m('input[type="checkbox"]', {
+                    onchange: m.withAttr("value", ctrl.checkTask),
+                    value: index,
+                    checked: item.checked,
+                  }),
+                  m('span.label-text', item.text),
+                ]),
+
+                m('span.delete-item.material-icons', {
+                  onclick: m.withAttr("value", ctrl.deleteTask),
+                  value: index,
+                }, 'delete'),
+
+                m('span.edit-item.material-icons', {
+                  onclick: m.withAttr("value", ctrl.editTask),
+                  value: index,
+                }, 'edit'),
+              ]),
+            ];
+          }),
+          m(this.noTaskMessage, { tasks: vnode.state.data.tasks } ),
+        ]),
+        m('input[type="text"].form-control', {
+          onkeypress: ctrl.addTask,
+          placeholder: 'add new task',
+        }, 'Add task'),
+      ];
+    },
+
+    ctrl: function( vnode ) {
+      return {
+
+        // Adding task on Enter Press of Input field
+        addTask: function(e) {
+          if( e.keyCode == 13 ) {
+            var val = e.target.value;
+            vnode.state.data.tasks.push( { text: val, checked: false } );
+            e.target.value = '';
+          }
+        },
+
+        // Check to task on click
+        checkTask: function(index) {
+          if( vnode.state.data.tasks[index] !== undefined)
+          vnode.state.data.tasks[index].checked = !vnode.state.data.tasks[index].checked;
+        },
+
+        // Delete task
+        deleteTask: function(index) {
+          vnode.state.data.tasks.splice(index, 1);
+        },
+
+        // Edit Task by adding a text field in the list
+        editTask: function(index) {
+          var parentNode = this.parentNode;
+          var labelText = parentNode.getElementsByClassName('label-text')[0];
+          var text = labelText.innerHTML;
+          labelText.style.display = "none";
+          parentNode.getElementsByClassName('delete-item')[0].style.display = "none";
+          parentNode.getElementsByClassName('edit-item')[0].style.display = "none";
+
+          // View of the Text Field
+          var EditField = {
+            view: function() {
+              var self = this;
+              return [
+                m('div.edit-field', [
+                  m('form.mr-t-0', {
+                    onsubmit: function( e ) {
+                      var container = parentNode.getElementsByClassName('edit-container-field')[0];
+                      var value = container.getElementsByTagName('input')[0].value;
+                      vnode.state.data.tasks[index].text = value;
+                      labelText.style.display = "block";
+                      parentNode.getElementsByClassName('delete-item')[0].style.display = "block";
+                      parentNode.getElementsByClassName('edit-item')[0].style.display = "block";
+                      container.parentNode.removeChild( container );
+                    }
+                  }, m('input[type="text"].form-control', {
+                    value: text,
+                  }),
+                    m('button[type="submit"].submit-btn.btn.btn-info', [
+                      m('i.material-icons', 'send'),
+                    ])
+                  ),
+                ]),
+              ];
+            }
+          };
+
+          var prevEditField = parentNode.parentNode.getElementsByClassName('edit-container-field');
+          if ( prevEditField.length ) {
+            var event = document.createEvent('HTMLEvents');
+            event.initEvent('submit', true, false);
+            prevEditField[0].getElementsByTagName('form')[0].dispatchEvent( event );
+          }
+          var editContainer = document.createElement('div');
+          editContainer.classList.add('edit-container-field');
+          parentNode.getElementsByTagName('label')[0].appendChild( editContainer );
+          m.mount( editContainer, EditField );
+        },
+      };
+    },
+  };
+
+  // View of Message when there is no task in the list
+  Todo.noTaskMessage = {
+    view: function(vnode) {
+      if( vnode.attrs.tasks.length === 0 ) {
+        return [
+          m('div.list-group-item', [
+            m('label', 'no tasks to display'),
+          ]),
+        ];
+      }
+      return null;
+    }
+  };
+
+  return m.mount(node, Todo);
+}
+
+
+
+
+/* Twitter Feed Widgets
+ * --------------------
+ *  Fetches latest tweets for the user provided
+ *  in the plugin options.
+ */
+
+var TwitterWidget = function TwitterWidget(node, options) {
+  var WidgetOptions = options;
+
+  var TweetsList = {
+    view: function(vnode) {
+      if ( vnode.attrs.tweets !== undefined ) {
+        return vnode.attrs.tweets.map( function(tweet, index) {
+          var hidden = index !== 0 ? 'hidden' : '';
+          return m('div.status', {
+            class: 'animated fadeInLeft',
+            hidden: hidden,
+          },[
+            m('p', tweet.text),
+          ]);
+        });
+      }
+      return m('p', 'no items to show');
+    },
+  };
+
+  var TwitterWidget = {
+    data: {
+      tweets: [],
+      user: {
+        name: 'John Doe',
+        screen_name: 'johndoe',
+        profile_image_url: 'assets/demo/users/user-image.png',
+      },
+    },
+    oninit: function(vnode) {
+      var ctrl = this.ctrl(vnode);
+      ctrl.getQuery();
+    },
+    view: function(vnode) {
+      var ctrl = this.ctrl(vnode);
+      return [
+        m('div.status-container', [
+          m('div.user-info', [
+            m('img.user-profile-picture', { src: vnode.state.data.user.profile_image_url, alt: vnode.state.data.user.screen_name + ' profile picture'  }),
+            m('div.user-name-group', [
+              m('h5.user-name', vnode.state.data.user.name),
+              m('h6.user-screen-name.ltr', '@' + vnode.state.data.user.screen_name),
+            ]),
+            m('i.widget-icon.feather.feather-twitter', null),
+          ]),
+          m('div.flex-1', null),
+          m( TweetsList, { oncreate: ctrl.slideTweets, tweets: vnode.state.data.tweets } ),
+        ]),
+      ];
+    },
+    ctrl: function(vnode) {
+      return {
+        getQuery: function() {
+          var queryString = "";
+          queryString = m.buildQueryString(JSON.parse(WidgetOptions));
+          queryString = '?' + queryString;
+          var url = 'assets/vendors/theme-widgets/getTwitterFeed.php' + queryString;
+          m.request({
+            method: "GET",
+            url: url,
+            callbackKey: 'none'
+          }).then( function(results) {
+            if ( results.error === undefined ) {
+              vnode.state.data.tweets = JSON.parse( JSON.stringify(results) );
+              vnode.state.data.user = vnode.state.data.tweets[0].user;
+            }
+            else
+            console.error( results );
+          }).catch( console.error );
+        },
+
+        slideTweets: function() {
+          var current = 0;
+          var statusDoms = vnode.dom.getElementsByClassName('status');
+          function showSlide() {
+            if ( vnode.state.data.tweets.length === 0 ) return;
+
+            var prev = current - 1;
+            if ( prev == -1 ) prev = vnode.state.data.tweets.length - 1;
+
+            var currentStatusNode = statusDoms[current];
+            if ( currentStatusNode !== undefined )
+            currentStatusNode.hidden = '';
+
+            var prevStatusNode = statusDoms[prev];
+            if ( prevStatusNode !== undefined )
+            prevStatusNode.hidden = 'hidden';
+
+            if ( current == vnode.state.data.tweets.length - 1 ) current = 0;
+            else current++;
+          }
+          showSlide();
+          setInterval(showSlide, 5000);
+        },
+      };
+    },
+  };
+
+  var App = {
+    view: function(vnode) {
+      return m('h4','jfdkas');
+    },
+  };
+
+  m.mount( node, TwitterWidget );
+}
+
+
+
+
+/* Facebook Feed Widget
+ * --------------------
+ *  Fetches latest tweets for the user provided
+ *  in the plugin options.
+ */
+
+var FacebookWidget = function FacebookWidget(node, options) {
+  var WidgetOptions = options;
+  var FacebookList = {
+    view: function(vnode) {
+      if ( vnode.attrs.statuses !== undefined ) {
+        return [
+          vnode.attrs.statuses.map(function(status, index) {
+            var hidden = ( index !== 0 ) ? 'hidden' : '';
+            var story = '';
+            if ( status.message !== undefined )
+              story = status.message;
+            else if ( status.story !== undefined )
+              story = status.story;
+
+            story = story.length > 160 ? story.substring(0,160) : story;
+            return m('div.status', {
+              class: "animated fadeInLeft",
+              hidden: hidden,
+            },[
+              m('p', story),
+            ]);
+          }),
+        ];
+      }
+
+      return m('p','no posts to show');
+    },
+  };
+
+  var FacebookWidget = {
+    data: {
+      statuses: [],
+      user: {
+        name: 'John Doe',
+        username: 'johndoe',
+        picture: {
+          data: {
+            url: 'assets/demo/users/user-image.png',
+          }
+        }
+      }
+    },
+    oninit: function(vnode) {
+      var ctrl = this.ctrl(vnode);
+      ctrl.fetchStatus();
+    },
+    view: function(vnode) {
+      var ctrl = this.ctrl(vnode);
+      return [
+        m('div.status-container',[
+          m('div.user-info',[
+            m('img.user-profile-picture', { src: vnode.state.data.user.picture.data.url }),
+            m('div.user-name-group', [
+              m('h5.user-name', vnode.state.data.user.username),
+              m('h6.user-screen-name.ltr', '@' + vnode.state.data.user.username),
+            ]),
+            m('i.widget-icon.feather.feather-facebook', null),
+          ]),
+          m('div.flex-1', null),
+          m(FacebookList, { oncreate: ctrl.slideStatus, statuses: vnode.state.data.statuses } ),
+        ]),
+      ];
+    },
+
+    ctrl: function(vnode) {
+      return {
+        fetchStatus: function() {
+          var queryString = "";
+          queryString = m.buildQueryString(JSON.parse(WidgetOptions));
+          queryString = '?' + queryString;
+          var url = 'assets/vendors/theme-widgets/getFacebookFeed.php' + queryString;
+          m.request({
+            method: 'GET',
+            url: url,
+            callbackKey: 'none'
+          }).then(function(results) {
+            if ( results.error === undefined ) {
+              vnode.state.data.statuses = results[0].data;
+              vnode.state.data.user = results[1];
+            }
+            else {
+              results.dom = node;
+              console.error( results );
+            }
+          }).catch(function(err) {
+            err.dom = node;
+            console.error( err );
+          });
+        },
+
+        slideStatus: function() {
+         var current = 0;
+          var statusDoms = vnode.dom.getElementsByClassName('status');
+          function showSlide() {
+            var prev = current - 1;
+            if ( prev == -1 ) prev = vnode.state.data.statuses.length - 1;
+
+            var currentStatusNode = statusDoms[current];
+            if ( currentStatusNode !== undefined )
+            currentStatusNode.hidden = '';
+
+            var prevStatusNode = statusDoms[prev];
+            if ( prevStatusNode !== undefined )
+            prevStatusNode.hidden = 'hidden';
+
+            if ( current == vnode.state.data.statuses.length - 1 ) current = 0;
+            else current++;
+          }
+          showSlide();
+          setInterval(showSlide, 5000);
+        },
+      };
+    },
+  };
+
+  m.mount( node, FacebookWidget);
+}
+
+window.Todo = Todo;
+window.FacebookWidget = FacebookWidget;
+window.TwitterWidget = TwitterWidget;