Permalink
Browse files

Merge pull request #418 from Pomax/ux-changes-283-backbone-supplement

Ux changes 283 backbone supplement
  • Loading branch information...
2 parents eb5e61d + 759d9c9 commit 030b90dfdecf3f0f3890a59f977611de546985f0 @stenington stenington committed Dec 7, 2012
@@ -1,7 +1,5 @@
(function(){
- // global var
var CSRF = $("input[name='_csrf']").val();
-
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (settings.crossDomain)
@@ -11,5 +9,4 @@
xhr.setRequestHeader('X-CSRF-Token', CSRF)
}
});
-
}());
@@ -0,0 +1,75 @@
+/**
+ * Badge object representation - constructor
+ */
+var Badge = function(name, id, description, image_path, issuerName) {
+ // set up the model for this group
+ var badgeModel;
+ if(name && id && description && image_path && issuerName) {
+ badgeModel = new BadgeModel({
+ name: name,
+ id: id,
+ description: description,
+ image_path: image_path,
+ issuer: { name: issuerName }
+ });
+ } else {
+ badgeModel = new BadgeModel();
+ }
+ this.setModel(badgeModel);
+};
+
+/**
+ * Group object representation - 'copy' constructor
+ *
+ * @param {HTMLElement} element that acts as construction template
+ */
+Badge.fromElement = function (element) {
+ var $el = $(element),
+ name = $el.data("original-title"),
+ id = $el.data("id"),
+ description = $el.data("description"),
+ image_path = $el.data("image-path"),
+ issuerName = $el.data("issuer-name");
+ var badge = new Badge(name, id, description, image_path, issuerName);
+ $el.replaceWith(badge.currentView.$el);
+ return badge;
+};
+
+/**
+ * Group object representation - prototype
+ */
+Badge.prototype = {
+
+ // owning GroupListing object
+ owner: null,
+
+ // local model and views (filled by constructor)
+ model: null,
+ views: null,
+
+ // "this is what it looks like now" reference
+ currentView: null,
+
+ /**
+ * Set the model for this group
+ */
+ setModel: function(badgeModel) {
+ this.model = badgeModel;
+ badgeModel.controller = this;
+ this.views = {
+ entry: new BadgeView({model: badgeModel})
+ };
+ this.currentView = this.views.entry;
+ this.render();
+ },
+
+ /**
+ * Render this group (delegated to current view)
+ */
+ render: function() {
+ return this.currentView.render(this.model);
+ }
+};
+
+// ensure correct constructor identifier
+Badge.prototype.constructor = Badge;
@@ -0,0 +1,38 @@
+/**
+ * Individual badge model
+ */
+BadgeModel = Backbone.Model.extend({
+ urlRoot: '/badge',
+
+ defaults: {
+ name: "badge name",
+ description: "bade description",
+ id: -1,
+ image_path: "/image/path.png",
+ issuer: {
+ name: "issuer name"
+ }
+ },
+
+ /**
+ * Form a server-side compatible object representation.
+ * (since the same templates are used by the server and the client)
+ */
+ toBadgeAttributes: function() {
+ var json = this.toJSON()
+ return {
+ badge: {
+ attributes: {
+ id: json.id,
+ image_path: json.image_path,
+ body: {
+ badge: {
+ name: json.name,
+ description: json.description,
+ issuer: {
+ name: json.issuer.name
+ }}}}}};
+ }
+
+ // Badges cannot be modified by the client
+});
@@ -0,0 +1,35 @@
+// ensure window can listen to backbone events
+_.extend(window, Backbone.Events);
+
+// =======================
+// = =
+// = VIEWS =
+// = =
+// =======================
+
+
+/**
+ * View for groups as list items
+ */
+BadgeView = Backbone.View.extend({
+ parent: $('.collection .set'),
+
+ /**
+ * Render this view to the page
+ */
+ render: function() {
+ var values = this.model.toBadgeAttributes(),
+ html = env.render('Backpack.Badge.View.html', values);
+ this.setElement($(html));
+ this.setupUX();
+ return this;
+ },
+
+ /**
+ * Set up the UX for this view's element(s),
+ * tied to a specific controller for the logic.
+ */
+ setupUX: function() {
+ /** no UX **/
+ }
+});
@@ -0,0 +1,113 @@
+var BadgeCollection = function() {
+ this.setModel(new BadgeCollectionModel());
+};
+
+
+/**
+ * Group listing object representation - 'copy' constructor
+ *
+ * @param {HTMLElement} element that acts as construction template
+ */
+BadgeCollection.fromElement = function (element) {
+ var $el = $(element);
+
+ // set up a new collection
+ var collection = new BadgeCollection();
+
+ // find all badges that we need to boostrap, too
+ var badges = element.find(".badge");
+
+ // replace the collection with the backbone'd collection
+ var $newEl = collection.currentView.$el;
+ $el.replaceWith($newEl);
+
+ // if more than 0 badges, create badges inside
+ // this collection.
+ if(badges.length>0) {
+ badges.each(function() {
+ var badge = collection.createBadgeFromElement(this);
+ collection.addBadge(badge);
+ });
+ }
+ collection.currentView.selectSet(1);
+
+ // done
+ return collection;
+};
+
+/**
+ * Group listing object representation - prototype
+ */
+BadgeCollection.prototype = {
+ model: null,
+ views: null,
+ currentView: null,
+
+ /**
+ * Set the model for this group
+ */
+ setModel: function(BadgeCollectionModel) {
+ this.model = BadgeCollectionModel;
+ BadgeCollectionModel.controller = this;
+ this.views = {
+ listing: new BadgeCollectionView({model: BadgeCollectionModel})
+ };
+ this.views.listing.controller = this;
+ this.currentView = this.views.listing;
+ this.render();
+ },
+
+ /**
+ * Render this listing (delegated to current view)
+ */
+ render: function() {
+ return this.currentView.render(this.model);
+ },
+
+ /**
+ * Create a badge and add it to the list of known badges.
+ */
+ createBadge: function(a,b,c,d) {
+ var badge;
+ if(a && b && c && d) { badge = new Badge(a,b,c,d); }
+ else { badge = new Badge(); }
+ badge.owner = this;
+ this.model.addBadge(badge);
+ return badge;
+ },
+
+ /**
+ * Bootstrap a badge and add it to the list of known badges.
+ */
+ createBadgeFromElement: function(element) {
+ var badge = Badge.fromElement(element);
+ badge.owner = this;
+ this.model.addBadge(badge);
+ return badge;
+ },
+
+ /**
+ * Add a badge to this collection
+ */
+ addBadge: function(badge) {
+ this.currentView.addBadgeElement(badge.currentView.$el);
+ },
+
+ /**
+ * Add badge 'add to group' buttons (delegated to view)
+ */
+ addBadgePickers: function(group) {
+ var badgeArea = group.currentView.$el.find(".badgeArea");
+ this.currentView.addBadgePickers(group);
+ },
+
+ /**
+ * Remove badge 'add to group' buttons (delegated to view)
+ */
+ removeBadgePickers: function() {
+ this.currentView.removeBadgePickers();
+ }
+};
+
+// ensure correct constructor identifier
+BadgeCollection.prototype.constructor = BadgeCollection;
@@ -0,0 +1,25 @@
+/**
+ * Badge collection model
+ */
+BadgeCollectionModel = Backbone.Model.extend({
+ urlRoot: '/collections',
+ defaults: {
+ badges: []
+ },
+ /**
+ * add a basge to this collection model
+ */
+ addBadge: function(badge) {
+ this.get("badges").push(badge);
+ },
+ /**
+ * remove a badge from this collection
+ */
+ removeBadge: function(badge) {
+ var badges = this.get("badges");
+ var pos = badges.indexOf(badge);
+ if(pos!==-1) {
+ badges.splice(pos, 1);
+ }
+ }
+});
Oops, something went wrong.

0 comments on commit 030b90d

Please sign in to comment.