From 1c05808a6df1a28000bdd6c276c332cfe203eff9 Mon Sep 17 00:00:00 2001 From: David Riccitelli Date: Thu, 29 Oct 2015 17:42:41 +0100 Subject: [PATCH] see #1: add a Backbone structure --- src/admin/class-helixware-mico-admin.php | 16 ++-- src/admin/js/admin.js | 80 ++++++++++++++++++- src/admin/js/src/admin.manifest.js | 9 ++- .../js/src/controllers/test-controller.js | 8 +- .../js/src/models/face-detection-fragment.js | 3 + .../js/src/models/face-detection-fragments.js | 6 ++ src/admin/js/src/views/fragment-view.js | 24 ++++++ src/admin/js/src/views/fragments-view.js | 23 ++++++ 8 files changed, 159 insertions(+), 10 deletions(-) create mode 100644 src/admin/js/src/models/face-detection-fragment.js create mode 100644 src/admin/js/src/models/face-detection-fragments.js create mode 100644 src/admin/js/src/views/fragment-view.js create mode 100644 src/admin/js/src/views/fragments-view.js diff --git a/src/admin/class-helixware-mico-admin.php b/src/admin/class-helixware-mico-admin.php index 056a4c9..e135094 100644 --- a/src/admin/class-helixware-mico-admin.php +++ b/src/admin/class-helixware-mico-admin.php @@ -27,7 +27,7 @@ class Helixware_Mico_Admin { * * @since 1.0.0 * @access private - * @var string $plugin_name The ID of this plugin. + * @var string $plugin_name The ID of this plugin. */ private $plugin_name; @@ -36,7 +36,7 @@ class Helixware_Mico_Admin { * * @since 1.0.0 * @access private - * @var string $version The current version of this plugin. + * @var string $version The current version of this plugin. */ private $version; @@ -44,13 +44,14 @@ class Helixware_Mico_Admin { * Initialize the class and set its properties. * * @since 1.0.0 - * @param string $plugin_name The name of this plugin. - * @param string $version The version of this plugin. + * + * @param string $plugin_name The name of this plugin. + * @param string $version The version of this plugin. */ public function __construct( $plugin_name, $version ) { $this->plugin_name = $plugin_name; - $this->version = $version; + $this->version = $version; } @@ -97,6 +98,11 @@ public function enqueue_scripts() { */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/helixware-mico-admin.js', array( 'jquery' ), $this->version, false ); +// wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/admin.js', array( +// 'jquery', +// 'underscore', +// 'backbone' +// ), $this->version, false ); } diff --git a/src/admin/js/admin.js b/src/admin/js/admin.js index d032a4b..4368c0b 100644 --- a/src/admin/js/admin.js +++ b/src/admin/js/admin.js @@ -2,9 +2,83 @@ var $ = jQuery; var helixware = window.helixware = window.helixware || {}; +helixware.model = helixware.model || {}; +helixware.controller = helixware.controller || {}; +helixware.view = helixware.view || {}; -helixware.controller.Test = require( './controllers/test-controller.js' ); -},{"./controllers/test-controller.js":2}],2:[function(require,module,exports){ +helixware.model.FaceDetectionFragment = require( './models/face-detection-fragment' ); +helixware.model.FaceDetectionFragments = require( './models/face-detection-fragments' ); +helixware.view.FragmentView = require( './views/fragment-view' ); +helixware.view.FragmentsView = require( './views/fragments-view' ); +helixware.controller.Test = require( './controllers/test-controller' ); +},{"./controllers/test-controller":2,"./models/face-detection-fragment":3,"./models/face-detection-fragments":4,"./views/fragment-view":5,"./views/fragments-view":6}],2:[function(require,module,exports){ var x = 10; + +var fragments = new helixware.model.FaceDetectionFragments( [] ); +fragments.fetch(); + +var fragmentsView = new helixware.view.FragmentsView( fragments ); + + +},{}],3:[function(require,module,exports){ +var FaceDetectionFragment = Backbone.Model.extend( {} ); + +module.exports = FaceDetectionFragment; +},{}],4:[function(require,module,exports){ +var FaceDetectionFragments = Backbone.Collection.extend( { + model: helixware.model.FaceDetectionFragment, + url: '/wp-admin/admin-ajax.php?action=hw_face_detection_fragments&id=191' +} ); + +module.exports = FaceDetectionFragments; +},{}],5:[function(require,module,exports){ +var FragmentView = Backbone.View.extend( { + + tagName: 'li', + + template: _.template( '<#= start #>' ), + + initialize: function ( options ) { + + options = options || {}; + + this.model = options.model || null; + this.parentView = options.parentView || null; + + }, + + render: function () { + + this.$el.html( this.template( this.model.attributes ) ); + + } + +} ); + +module.exports = FragmentView; +},{}],6:[function(require,module,exports){ +var FragmentView = helixware.view.FragmentView; + +var FragmentsView = Backbone.View.extend( { + + el: 'body', + + initialize: function () { + + this.listenTo( this.model, 'change', this.render ); + + }, + + render: function () { + + _.each( this.model, function ( item ) { + this.$el.append( new FragmentView( item.attributes ) ); + } ); + + } + +} ); + +module.exports = FragmentsView; },{}]},{},[1]) -//# sourceMappingURL=data:application/json;charset:utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9ncnVudC1icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJzcmMvYWRtaW4vanMvc3JjL2FkbWluLm1hbmlmZXN0LmpzIiwic3JjL2FkbWluL2pzL3NyYy9jb250cm9sbGVycy90ZXN0LWNvbnRyb2xsZXIuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUNBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQ0pBIiwiZmlsZSI6ImdlbmVyYXRlZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIoZnVuY3Rpb24gZSh0LG4scil7ZnVuY3Rpb24gcyhvLHUpe2lmKCFuW29dKXtpZighdFtvXSl7dmFyIGE9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtpZighdSYmYSlyZXR1cm4gYShvLCEwKTtpZihpKXJldHVybiBpKG8sITApO3ZhciBmPW5ldyBFcnJvcihcIkNhbm5vdCBmaW5kIG1vZHVsZSAnXCIrbytcIidcIik7dGhyb3cgZi5jb2RlPVwiTU9EVUxFX05PVF9GT1VORFwiLGZ9dmFyIGw9bltvXT17ZXhwb3J0czp7fX07dFtvXVswXS5jYWxsKGwuZXhwb3J0cyxmdW5jdGlvbihlKXt2YXIgbj10W29dWzFdW2VdO3JldHVybiBzKG4/bjplKX0sbCxsLmV4cG9ydHMsZSx0LG4scil9cmV0dXJuIG5bb10uZXhwb3J0c312YXIgaT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2Zvcih2YXIgbz0wO288ci5sZW5ndGg7bysrKXMocltvXSk7cmV0dXJuIHN9KSIsInZhciAkID0galF1ZXJ5O1xuXG52YXIgaGVsaXh3YXJlID0gd2luZG93LmhlbGl4d2FyZSA9IHdpbmRvdy5oZWxpeHdhcmUgfHwge307XG5cbmhlbGl4d2FyZS5jb250cm9sbGVyLlRlc3QgPSByZXF1aXJlKCAnLi9jb250cm9sbGVycy90ZXN0LWNvbnRyb2xsZXIuanMnICk7IiwidmFyIHggPSAxMDsiXX0= +//# sourceMappingURL=data:application/json;charset:utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9ncnVudC1icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJzcmMvYWRtaW4vanMvc3JjL2FkbWluLm1hbmlmZXN0LmpzIiwic3JjL2FkbWluL2pzL3NyYy9jb250cm9sbGVycy90ZXN0LWNvbnRyb2xsZXIuanMiLCJzcmMvYWRtaW4vanMvc3JjL21vZGVscy9mYWNlLWRldGVjdGlvbi1mcmFnbWVudC5qcyIsInNyYy9hZG1pbi9qcy9zcmMvbW9kZWxzL2ZhY2UtZGV0ZWN0aW9uLWZyYWdtZW50cy5qcyIsInNyYy9hZG1pbi9qcy9zcmMvdmlld3MvZnJhZ21lbnQtdmlldy5qcyIsInNyYy9hZG1pbi9qcy9zcmMvdmlld3MvZnJhZ21lbnRzLXZpZXcuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUNBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FDWEE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUNQQTtBQUNBO0FBQ0E7O0FDRkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQ0xBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUN2QkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsImZpbGUiOiJnZW5lcmF0ZWQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiKGZ1bmN0aW9uIGUodCxuLHIpe2Z1bmN0aW9uIHMobyx1KXtpZighbltvXSl7aWYoIXRbb10pe3ZhciBhPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7aWYoIXUmJmEpcmV0dXJuIGEobywhMCk7aWYoaSlyZXR1cm4gaShvLCEwKTt2YXIgZj1uZXcgRXJyb3IoXCJDYW5ub3QgZmluZCBtb2R1bGUgJ1wiK28rXCInXCIpO3Rocm93IGYuY29kZT1cIk1PRFVMRV9OT1RfRk9VTkRcIixmfXZhciBsPW5bb109e2V4cG9ydHM6e319O3Rbb11bMF0uY2FsbChsLmV4cG9ydHMsZnVuY3Rpb24oZSl7dmFyIG49dFtvXVsxXVtlXTtyZXR1cm4gcyhuP246ZSl9LGwsbC5leHBvcnRzLGUsdCxuLHIpfXJldHVybiBuW29dLmV4cG9ydHN9dmFyIGk9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtmb3IodmFyIG89MDtvPHIubGVuZ3RoO28rKylzKHJbb10pO3JldHVybiBzfSkiLCJ2YXIgJCA9IGpRdWVyeTtcblxudmFyIGhlbGl4d2FyZSA9IHdpbmRvdy5oZWxpeHdhcmUgPSB3aW5kb3cuaGVsaXh3YXJlIHx8IHt9O1xuaGVsaXh3YXJlLm1vZGVsID0gaGVsaXh3YXJlLm1vZGVsIHx8IHt9O1xuaGVsaXh3YXJlLmNvbnRyb2xsZXIgPSBoZWxpeHdhcmUuY29udHJvbGxlciB8fCB7fTtcbmhlbGl4d2FyZS52aWV3ID0gaGVsaXh3YXJlLnZpZXcgfHwge307XG5cbmhlbGl4d2FyZS5tb2RlbC5GYWNlRGV0ZWN0aW9uRnJhZ21lbnQgPSByZXF1aXJlKCAnLi9tb2RlbHMvZmFjZS1kZXRlY3Rpb24tZnJhZ21lbnQnICk7XG5oZWxpeHdhcmUubW9kZWwuRmFjZURldGVjdGlvbkZyYWdtZW50cyA9IHJlcXVpcmUoICcuL21vZGVscy9mYWNlLWRldGVjdGlvbi1mcmFnbWVudHMnICk7XG5oZWxpeHdhcmUudmlldy5GcmFnbWVudFZpZXcgPSByZXF1aXJlKCAnLi92aWV3cy9mcmFnbWVudC12aWV3JyApO1xuaGVsaXh3YXJlLnZpZXcuRnJhZ21lbnRzVmlldyA9IHJlcXVpcmUoICcuL3ZpZXdzL2ZyYWdtZW50cy12aWV3JyApO1xuaGVsaXh3YXJlLmNvbnRyb2xsZXIuVGVzdCA9IHJlcXVpcmUoICcuL2NvbnRyb2xsZXJzL3Rlc3QtY29udHJvbGxlcicgKTsiLCJ2YXIgeCA9IDEwO1xuXG52YXIgZnJhZ21lbnRzID0gbmV3IGhlbGl4d2FyZS5tb2RlbC5GYWNlRGV0ZWN0aW9uRnJhZ21lbnRzKCBbXSApO1xuZnJhZ21lbnRzLmZldGNoKCk7XG5cbnZhciBmcmFnbWVudHNWaWV3ID0gbmV3IGhlbGl4d2FyZS52aWV3LkZyYWdtZW50c1ZpZXcoIGZyYWdtZW50cyApO1xuXG4iLCJ2YXIgRmFjZURldGVjdGlvbkZyYWdtZW50ID0gQmFja2JvbmUuTW9kZWwuZXh0ZW5kKCB7fSApO1xuXG5tb2R1bGUuZXhwb3J0cyA9IEZhY2VEZXRlY3Rpb25GcmFnbWVudDsiLCJ2YXIgRmFjZURldGVjdGlvbkZyYWdtZW50cyA9IEJhY2tib25lLkNvbGxlY3Rpb24uZXh0ZW5kKCB7XG4gICAgbW9kZWw6IGhlbGl4d2FyZS5tb2RlbC5GYWNlRGV0ZWN0aW9uRnJhZ21lbnQsXG4gICAgdXJsOiAnL3dwLWFkbWluL2FkbWluLWFqYXgucGhwP2FjdGlvbj1od19mYWNlX2RldGVjdGlvbl9mcmFnbWVudHMmaWQ9MTkxJ1xufSApO1xuXG5tb2R1bGUuZXhwb3J0cyA9IEZhY2VEZXRlY3Rpb25GcmFnbWVudHM7IiwidmFyIEZyYWdtZW50VmlldyA9IEJhY2tib25lLlZpZXcuZXh0ZW5kKCB7XG5cbiAgICB0YWdOYW1lOiAnbGknLFxuXG4gICAgdGVtcGxhdGU6IF8udGVtcGxhdGUoICc8Iz0gc3RhcnQgIz4nICksXG5cbiAgICBpbml0aWFsaXplOiBmdW5jdGlvbiAoIG9wdGlvbnMgKSB7XG5cbiAgICAgICAgb3B0aW9ucyA9IG9wdGlvbnMgfHwge307XG5cbiAgICAgICAgdGhpcy5tb2RlbCA9IG9wdGlvbnMubW9kZWwgfHwgbnVsbDtcbiAgICAgICAgdGhpcy5wYXJlbnRWaWV3ID0gb3B0aW9ucy5wYXJlbnRWaWV3IHx8IG51bGw7XG5cbiAgICB9LFxuXG4gICAgcmVuZGVyOiBmdW5jdGlvbiAoKSB7XG5cbiAgICAgICAgdGhpcy4kZWwuaHRtbCggdGhpcy50ZW1wbGF0ZSggdGhpcy5tb2RlbC5hdHRyaWJ1dGVzICkgKTtcblxuICAgIH1cblxufSApO1xuXG5tb2R1bGUuZXhwb3J0cyA9IEZyYWdtZW50VmlldzsiLCJ2YXIgRnJhZ21lbnRWaWV3ID0gaGVsaXh3YXJlLnZpZXcuRnJhZ21lbnRWaWV3O1xuXG52YXIgRnJhZ21lbnRzVmlldyA9IEJhY2tib25lLlZpZXcuZXh0ZW5kKCB7XG5cbiAgICBlbDogJ2JvZHknLFxuXG4gICAgaW5pdGlhbGl6ZTogZnVuY3Rpb24gKCkge1xuXG4gICAgICAgIHRoaXMubGlzdGVuVG8oIHRoaXMubW9kZWwsICdjaGFuZ2UnLCB0aGlzLnJlbmRlciApO1xuXG4gICAgfSxcblxuICAgIHJlbmRlcjogZnVuY3Rpb24gKCkge1xuXG4gICAgICAgIF8uZWFjaCggdGhpcy5tb2RlbCwgZnVuY3Rpb24gKCBpdGVtICkge1xuICAgICAgICAgICAgdGhpcy4kZWwuYXBwZW5kKCBuZXcgRnJhZ21lbnRWaWV3KCBpdGVtLmF0dHJpYnV0ZXMgKSApO1xuICAgICAgICB9ICk7XG5cbiAgICB9XG5cbn0gKTtcblxubW9kdWxlLmV4cG9ydHMgPSBGcmFnbWVudHNWaWV3OyJdfQ== diff --git a/src/admin/js/src/admin.manifest.js b/src/admin/js/src/admin.manifest.js index 7abb508..040586f 100644 --- a/src/admin/js/src/admin.manifest.js +++ b/src/admin/js/src/admin.manifest.js @@ -1,5 +1,12 @@ var $ = jQuery; var helixware = window.helixware = window.helixware || {}; +helixware.model = helixware.model || {}; +helixware.controller = helixware.controller || {}; +helixware.view = helixware.view || {}; -helixware.controller.Test = require( './controllers/test-controller.js' ); \ No newline at end of file +helixware.model.FaceDetectionFragment = require( './models/face-detection-fragment' ); +helixware.model.FaceDetectionFragments = require( './models/face-detection-fragments' ); +helixware.view.FragmentView = require( './views/fragment-view' ); +helixware.view.FragmentsView = require( './views/fragments-view' ); +helixware.controller.Test = require( './controllers/test-controller' ); \ No newline at end of file diff --git a/src/admin/js/src/controllers/test-controller.js b/src/admin/js/src/controllers/test-controller.js index 9f98f68..398a937 100644 --- a/src/admin/js/src/controllers/test-controller.js +++ b/src/admin/js/src/controllers/test-controller.js @@ -1 +1,7 @@ -var x = 10; \ No newline at end of file +var x = 10; + +var fragments = new helixware.model.FaceDetectionFragments( [] ); +fragments.fetch(); + +var fragmentsView = new helixware.view.FragmentsView( fragments ); + diff --git a/src/admin/js/src/models/face-detection-fragment.js b/src/admin/js/src/models/face-detection-fragment.js new file mode 100644 index 0000000..886ec6d --- /dev/null +++ b/src/admin/js/src/models/face-detection-fragment.js @@ -0,0 +1,3 @@ +var FaceDetectionFragment = Backbone.Model.extend( {} ); + +module.exports = FaceDetectionFragment; \ No newline at end of file diff --git a/src/admin/js/src/models/face-detection-fragments.js b/src/admin/js/src/models/face-detection-fragments.js new file mode 100644 index 0000000..a86671d --- /dev/null +++ b/src/admin/js/src/models/face-detection-fragments.js @@ -0,0 +1,6 @@ +var FaceDetectionFragments = Backbone.Collection.extend( { + model: helixware.model.FaceDetectionFragment, + url: '/wp-admin/admin-ajax.php?action=hw_face_detection_fragments&id=191' +} ); + +module.exports = FaceDetectionFragments; \ No newline at end of file diff --git a/src/admin/js/src/views/fragment-view.js b/src/admin/js/src/views/fragment-view.js new file mode 100644 index 0000000..b88b07f --- /dev/null +++ b/src/admin/js/src/views/fragment-view.js @@ -0,0 +1,24 @@ +var FragmentView = Backbone.View.extend( { + + tagName: 'li', + + template: _.template( '<#= start #>' ), + + initialize: function ( options ) { + + options = options || {}; + + this.model = options.model || null; + this.parentView = options.parentView || null; + + }, + + render: function () { + + this.$el.html( this.template( this.model.attributes ) ); + + } + +} ); + +module.exports = FragmentView; \ No newline at end of file diff --git a/src/admin/js/src/views/fragments-view.js b/src/admin/js/src/views/fragments-view.js new file mode 100644 index 0000000..5dc4b8e --- /dev/null +++ b/src/admin/js/src/views/fragments-view.js @@ -0,0 +1,23 @@ +var FragmentView = helixware.view.FragmentView; + +var FragmentsView = Backbone.View.extend( { + + el: 'body', + + initialize: function () { + + this.listenTo( this.model, 'change', this.render ); + + }, + + render: function () { + + _.each( this.model, function ( item ) { + this.$el.append( new FragmentView( item.attributes ) ); + } ); + + } + +} ); + +module.exports = FragmentsView; \ No newline at end of file