Mercurial > nebulaweb3
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;