Mercurial > nebulaweb3
view 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 source
/* 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;