From: Steve Sutton Date: Tue, 22 Aug 2017 20:49:56 +0000 (-0400) Subject: Working on redo for backbone models and views. X-Git-Tag: v1.0.0^2~452 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/index.cgi?a=commitdiff_plain;h=ba1fa3ace16207e7eece6be68942289061cd1fa1;p=WP-Plugins%2Fglm-member-db-registrations.git Working on redo for backbone models and views. Creating new model for registrant. Adding edit method to the view to allow editing of the registrant name and email. --- diff --git a/css/front.css b/css/front.css index d2fc016..db365ec 100644 --- a/css/front.css +++ b/css/front.css @@ -73,4 +73,25 @@ } .glm-reg-level-registrant-email { } - +.registrant-edit { + width: 100%; + display: none; +} +.editing .registrant-edit { + display: block; +} +.editing .registrant-label { + display: none; +} +.registrant-edit input[type='text'] { + width: 40% !important; + float: left; + margin-right: 1rem; +} +.registrant-edit input[type='submit'] { + width: 10%; + float: left; + padding: .5rem .2rem; + margin: 0; + font-size: .75rem; +} diff --git a/js/collections/eventRegistrantList.js b/js/collections/eventRegistrantList.js new file mode 100644 index 0000000..9abd6a3 --- /dev/null +++ b/js/collections/eventRegistrantList.js @@ -0,0 +1,11 @@ +// js/collections/eventRegistrantList.js +var app = app || {}; + +// Event Registrant collection +app.EventRegistrantList = Backbone.Collection.extend({ + model: app.EventRegistrant, + + localStorage: new Backbone.LocalStorage('RegistrantList') +}); + + diff --git a/js/eventRegApp.js b/js/eventRegApp.js index 6bbc324..105ed08 100644 --- a/js/eventRegApp.js +++ b/js/eventRegApp.js @@ -1,8 +1,19 @@ +// eventRegApp.js +var app = app || {}; + jQuery(document).ready(function($){ - // Use the registration object to build new EventReg - // var event1 = new EventReg({ 'event_name': registration.event_name, 'descr': registration.descr }); - // var eventList = new EventRegList( [ event1 ] ); - // var eventRegView = new EventListView({ collection: eventList }); + var registrant1 = new app.EventRegistrant({ 'name': 'Steve Sutton', 'email': 'steve@gaslightmedia.com' }), + registrant2 = new app.EventRegistrant({ 'name': 'Laury Garcia van Rooiken', 'email': 'laury@gaslightmedia.com' }), + registrant3 = new app.EventRegistrant({ 'name': 'Anthony Talarico', 'email': 'talarico@gaslightmedia.com' }); + + app.EventRegistrants = new app.EventRegistrantList( [ + registrant1, + registrant2, + registrant3 + ] ); + + new app.EventRegistrantListView(); + console.log( app.EventRegistrants ); }); diff --git a/js/lib/backbone.localStorage.min.js b/js/lib/backbone.localStorage.min.js new file mode 100644 index 0000000..c36062a --- /dev/null +++ b/js/lib/backbone.localStorage.min.js @@ -0,0 +1 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("underscore"),require("backbone")):"function"==typeof define&&define.amd?define(["underscore","backbone"],t):"object"==typeof exports?exports["Backbone.LocalStorage"]=t(require("underscore"),require("backbone")):e["Backbone.LocalStorage"]=t(e._,e.Backbone)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=7)}([function(e,t,r){"use strict";(function(e){function n(){return(0|65536*(1+Math.random())).toString(16).substring(1)}function o(){return""+n()+n()+"-"+n()+"-"+n()+"-"+n()+"-"+n()+n()+n()}function i(e){return(0,u.result)(e,"localStorage")||(0,u.result)(e.collection,"localStorage")}function a(){return(0,u.isUndefined)(window)?e:window}Object.defineProperty(t,"__esModule",{value:!0}),t.guid=o,t.getLocalStorage=i,t.getWindow=a;var u=r(1)}).call(t,r(6))},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.ajaxSync,n=(0,s.getLocalStorage)(e);return!r&&n?c.sync:l}Object.defineProperty(t,"__esModule",{value:!0}),t.LocalStorage=void 0;var i=r(2),a=n(i),u=r(4),c=r(5),s=r(0);a.default.LocalStorage=u.LocalStorage;var l=a.default.sync;a.default.sync=function(e,t,r){return o(t,r).apply(this,[e,t,r])},t.LocalStorage=u.LocalStorage},function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0}),t.LocalStorage=void 0;var o=function(){function e(e,t){for(var r=0;r0&&void 0!==arguments[0]?arguments[0]:"",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:u;if(n(this,e),this.name=t,this.serializer=r,!this.localStorage)throw"Backbone.localStorage: Environment does not support localStorage.";var o=this._getItem(this.name);this.records=o&&o.split(",")||[]}return o(e,[{key:"localStorage",value:function(){return(0,a.getWindow)().localStorage}},{key:"save",value:function(){this._setItem(this.name,this.records.join(","))}},{key:"create",value:function(e){return e.id||0===e.id||(e.id=(0,a.guid)(),e.set(e.idAttribute,e.id)),this._setItem(this._itemName(e.id),this.serializer.serialize(e)),this.records.push(e.id.toString()),this.save(),this.find(e)}},{key:"update",value:function(e){this._setItem(this._itemName(e.id),this.serializer.serialize(e));var t=e.id.toString();return(0,i.contains)(this.records,t)||(this.records.push(t),this.save()),this.find(e)}},{key:"find",value:function(e){return this.serializer.deserialize(this._getItem(this._itemName(e.id)))}},{key:"findAll",value:function(){var e=this;return(0,i.chain)(this.records).map(function(t){return e.serializer.deserialize(e._getItem(e._itemName(t)))}).filter(function(e){return null!=e}).value()}},{key:"destroy",value:function(e){this._removeItem(this._itemName(e.id));var t=(0,i.without)(this.records,e);return this.records=t,this.save(),e}},{key:"_clear",value:function(){var e=this.localStorage(),t=new RegExp("^"+this.name+"-");e.removeItem(this.name);for(var r in e)t.test(r)&&e.removeItem(r);this.records.length=0}},{key:"_storageSize",value:function(){return this.localStorage().length}},{key:"_getItem",value:function(e){return this.localStorage().getItem(e)}},{key:"_itemName",value:function(e){return this.name+"-"+e}},{key:"_setItem",value:function(e,t){this.localStorage().setItem(e,t)}},{key:"_removeItem",value:function(e){this.localStorage().removeItem(e)}}]),e}()},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(){return u.default.$?(0,c.result)(u.default.$,"Deferred",!1):(0,c.result)(u.default,"Deferred",!1)}function i(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=(0,s.getLocalStorage)(t),i=void 0,a=void 0,u=o();try{switch(e){case"read":i=(0,c.isUndefined)(t.id)?n.findAll():n.find(t);break;case"create":i=n.create(t);break;case"patch":case"update":i=n.update(t);break;case"delete":i=n.destroy(t)}}catch(e){a=22===e.code&&0===n._storageSize()?"Private browsing is unsupported":e.message}return i?(r.success&&r.success.call(t,i,r),u&&u.resolve(i)):(a=a?a:"Record Not Found",r.error&&r.error.call(t,a,r),u&&u.reject(a)),r.complete&&r.complete.call(t,i),u&&u.promise()}Object.defineProperty(t,"__esModule",{value:!0}),t.sync=i;var a=r(2),u=n(a),c=r(1),s=r(0)},function(e,t){var r;r=function(){return this}();try{r=r||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(r=window)}e.exports=r},function(e,t,r){e.exports=r(3)}])}); \ No newline at end of file diff --git a/js/models/eventRegistrant.js b/js/models/eventRegistrant.js new file mode 100644 index 0000000..3fa061c --- /dev/null +++ b/js/models/eventRegistrant.js @@ -0,0 +1,13 @@ +// js/models/eventRegistrant.js + +var app = app || {}; + +// Event Registrant Model +app.EventRegistrant = Backbone.Model.extend({ + // Default registrant values + defaults: { + name: '', + email: '', + }, + +}); diff --git a/js/views/eventRegApp.js b/js/views/eventRegApp.js new file mode 100644 index 0000000..4e6c422 --- /dev/null +++ b/js/views/eventRegApp.js @@ -0,0 +1,8 @@ +// Overall **AppView** +var appView = Backbone.View.extend({ + el: '.glm-reg-level', + + initialize: function(){ + this.listenTo(); + }, +}); diff --git a/js/views/eventRegistrant.js b/js/views/eventRegistrant.js new file mode 100644 index 0000000..e10fcb3 --- /dev/null +++ b/js/views/eventRegistrant.js @@ -0,0 +1,47 @@ +// js/views/eventRegistrant.js +var app = app || {}; + +// Event Registrant View +app.EventRegistrantView = Backbone.View.extend({ + tagName: 'div', + + className: 'glm-reg-level-registrant clearfix', + + eventRegistrantTpl: _.template( $('#eventRegistrant-template').html() ), + + events: { + 'dblclick label': 'edit', + 'click .saveRegistrant': 'close', + }, + + initialize: function(){ + this.listenTo( this.model, 'change', this.render ); + return this; + }, + + render: function(){ + this.$el.html( this.eventRegistrantTpl( this.model.toJSON() ) ); + this.$nameInput = this.$('.editName'); + this.$emailInput = this.$('.editEmail'); + return this; + }, + + edit: function(){ + this.$el.addClass( 'editing' ); + this.$nameInput.focus(); + }, + + close: function(){ + var regname = this.$nameInput.val().trim(); + var regemail = this.$emailInput.val().trim(); + + if ( regname && regemail ) { + this.model.save({ name: regname, email: regemail }); + } else { + this.clear(); // NEW + } + + this.$el.removeClass('editing'); + }, + +}); diff --git a/js/views/eventRegistrantList.js b/js/views/eventRegistrantList.js new file mode 100644 index 0000000..0d20238 --- /dev/null +++ b/js/views/eventRegistrantList.js @@ -0,0 +1,35 @@ +// js/views/eventRegistrantList.js +var app = app || {}; + +// Event Registrant List View +app.EventRegistrantListView = Backbone.View.extend({ + + el: '.glm-reg-level', + + initialize: function(){ + this.listenTo( app.EventRegistrants, 'add', this.addOne ); + this.listenTo( app.EventRegistrants, 'reset', this.addAll ); + app.EventRegistrants.fetch(); + //this.collection.bind('add', this.onModelAdded, this); + //this.render(); + }, + + addOne: function(item){ + var view = new app.EventRegistrantView({ model: item }); + this.$el.append( view.render().el ); + }, + + addAll: function(){ + this.$('.glm-reg-level').html(''); + app.EventRegistrants.each(this.addOne, this); + }, + + render: function(){ + var eventRegistrantView = this.collection.map(function(item){ + return (new app.EventRegistrantView({ model: item })).render().el; + }); + this.$el.append(eventRegistrantView); + return this; + }, + +}); diff --git a/models/front/registrations/registration.php b/models/front/registrations/registration.php index 12fabc1..a8c8800 100644 --- a/models/front/registrations/registration.php +++ b/models/front/registrations/registration.php @@ -38,11 +38,12 @@ public function modelAction($actionData = false) { $scripts = array( - 'eventRegView' => 'js/views/eventReg.js', - 'eventListView' => 'js/views/eventList.js', - 'eventRegModel' => 'js/models/eventReg.js', - 'eventRegList' => 'js/collections/eventRegList.js', - 'mybackboneapp' => 'js/eventRegApp.js', + 'backbone-local' => 'js/lib/backbone.localStorage.min.js', + 'registrantView' => 'js/views/eventRegistrant.js', + 'registrantListView' => 'js/views/eventRegistrantList.js', + 'registrantModel' => 'js/models/eventRegistrant.js', + 'registrantList' => 'js/collections/eventRegistrantList.js', + 'mybackboneapp' => 'js/eventRegApp.js', ); foreach ( $scripts as $scriptName => $scriptPath ) { wp_register_script( diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html index 5e77056..66301cb 100644 --- a/views/front/registrations/registration.html +++ b/views/front/registrations/registration.html @@ -1,4 +1,6 @@ +{* Event Registration App - Backbone.js *}
+{* Underscore Templates for the Event Registration App *} {literal} + {/literal}
{$event = $entry.reg_event} @@ -37,9 +50,3 @@
-