diff options
Diffstat (limited to 'public/assets/javascripts/ui/site')
| -rw-r--r-- | public/assets/javascripts/ui/site/EditProfileModal.js | 9 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/site/EditSubscriptionModal.js | 290 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/site/HomeView.js | 28 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/site/LayoutsIndex.js | 85 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/site/LayoutsModal.js | 183 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/site/NewProjectModal.js | 118 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/site/ProfileView.js | 28 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/site/ProjectList.js | 64 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/site/StaffView.js | 70 |
9 files changed, 768 insertions, 107 deletions
diff --git a/public/assets/javascripts/ui/site/EditProfileModal.js b/public/assets/javascripts/ui/site/EditProfileModal.js index b023923..d0e5d05 100644 --- a/public/assets/javascripts/ui/site/EditProfileModal.js +++ b/public/assets/javascripts/ui/site/EditProfileModal.js @@ -3,11 +3,14 @@ var EditProfileModal = ModalFormView.extend({ el: ".mediaDrawer.editProfile", action: "/api/profile", method: "put", + + events: { + "click [data-role='changePasswordToggle']": 'togglePasswordFields' + }, load: function(){ this.reset() $.get("/api/profile", function(data){ - console.log(data) for (var i in data) { this.$("[name='" + i + "']").val(data[i]) @@ -25,6 +28,10 @@ var EditProfileModal = ModalFormView.extend({ this.show() }.bind(this)) }, + + togglePasswordFields: function(){ + this.$("[data-role='changePasswordFields']").toggleClass("hidden") + }, validate: function(){ var errors = [] diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js new file mode 100644 index 0000000..c1dc9f8 --- /dev/null +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -0,0 +1,290 @@ + +var EditSubscriptionModal = ModalView.extend({ + el: ".mediaDrawer.editSubscription", + action: "/api/subscription", + syncAction: "/api/subscription/sync", + updateAction: "/api/subscription", + destroyAction: "/api/subscription/destroy", + + fixedClose: true, + editing: false, + subscriber: null, + tempSubscriber: null, + + events: { + "click [data-role='addLayouts']": 'addLayouts', + "click [data-role='changePlan']": 'changePlan', + "click [data-role='cancelSubscription']": 'destroy', + "click .gear": 'sync', + "click .planList button": 'followLink', + + "click [data-role=showEditMenu]": "editMode", + + "click [data-role=closeMenu]": "resetMode", + + "input [data-role=basicLayoutInput]": "updateQuantity", + "input [data-role=proLayoutInput]": "updateQuantity", + "click [data-role=saveChanges]": "saveChanges", + + "change [name=planRadio]": "updatePlan", + "click [data-role=savePlan]": "savePlan", + + "submit form": "preventDefault", + }, + + initialize: function(){ + // this.parent = opt.parent + this.__super__.initialize.call(this) + + // two sections + this.$freePlan = this.$(".freePlan") + this.$paidPlan = this.$(".paidPlan") + + // subscription table + this.$planInfo = this.$(".planInfo") + this.$planRow = this.$(".planRow") + this.$basicLayoutRow = this.$(".basicLayoutRow") + this.$proLayoutRow = this.$(".proLayoutRow") + this.$totalRow = this.$(".totalRow") + this.$planList = this.$(".planList") + + this.$billingInterval = this.$("[data-role=billingInterval]") + + // plan stuff + this.$planName = this.$("[data-role=planName]") + this.$planCost = this.$("[data-role=planCost]") + this.$planTotal = this.$("[data-role=planTotal]") + + this.$basicPlanName = this.$("[data-role=basicPlanName]") + this.$basicPlanCost = this.$("[data-role=basicPlanCost]") + + this.$proPlanName = this.$("[data-role=proPlanName]") + this.$proPlanCost = this.$("[data-role=proPlanCost]") + + // basic + pro layout stuff + this.$basicLayoutCost = this.$("[data-role=basicLayoutCost]") + this.$basicLayoutQuantity = this.$("[data-role=basicLayoutQuantity]") + this.$basicLayoutTotal = this.$("[data-role=basicLayoutTotal]") + + this.$proLayoutCost = this.$("[data-role=proLayoutCost]") + this.$proLayoutQuantity = this.$("[data-role=proLayoutQuantity]") + this.$proLayoutTotal = this.$("[data-role=proLayoutTotal]") + + // menus.. main menu + this.$showEditMenu = this.$("[data-role=showEditMenu]") + this.$cancelSubscription = this.$("[data-role=cancelSubscription]") + + // three submenus + this.$editMenu = this.$("[data-role=editMenu]") + this.$planMenu = this.$("[data-role=planMenu]") + + this.$buyLayouts = this.$("[data-role=buyLayouts]") + this.$closeMenu = this.$("[data-role=closeMenu]") + this.$changePlan = this.$("[data-role=changePlan]") + + // input fields + this.$basicLayoutInput = this.$("[data-role=basicLayoutInput]") + this.$proLayoutInput = this.$("[data-role=proLayoutInput]") + this.$planRadio = this.$("[name=planRadio]") + this.$basicPlanInput = this.$("[data-role=basicPlanInput]") + this.$proPlanInput = this.$("[data-role=proPlanInput]") + + this.$gear = this.$(".gear") + }, + + plan_levels: { + free: 0, + basic: 1, + pro: 2, + custom: 3, + artist: 4, + }, + + loaded: false, + load: function(){ + if (this.loaded) { return this.show() } + $.get(this.action, this.didLoad.bind(this)) + }, + didLoad: function(data){ + this.loaded = true + this.plans = data.plans + if (data.subscription) { + this.subscriber = data.subscription + } + else if (data.error) { + // ...no subscription found + this.subscriber = null + } + return this.show() + }, + followLink: function(e){ + e.preventDefault(); + window.location.href = $(e.target).closest("a").attr("href") + }, + + show: function(){ + this.$gear.removeClass("turning") + if (! this.subscriber) { + this.$freePlan.show() + this.$paidPlan.hide() + this.$planList.load("/partials/plans", function(){ + this.$(".free_plan_info").remove() + this.__super__.show.call(this) + }.bind(this)) + return + } + + this.$freePlan.hide() + this.$paidPlan.show() + + this.resetMode() + + this.__super__.show.call(this) + }, + reset: function(){ + var subscriber = this.subscriber + var plan = this.getPlan(subscriber.plan_type) + this.displayTotals(subscriber, plan) + }, + getPlan: function(plan_type){ + return this.plans[ this.plan_levels[ plan_type ] ] + }, + calculateTotals: function(subscriber, plan){ + var t = {} + t.is_pro = subscriber.plan_type == "pro" + t.is_monthly = subscriber.plan_period == "monthly" + t.plan_price = t.is_monthly ? plan.monthly_price : plan.yearly_price + t.basic_layout_price = t.is_monthly ? plan.basic_layout_monthly_price : plan.basic_layout_yearly_price + t.basic_layout_total = subscriber.basic_layouts * t.basic_layout_price + t.pro_layout_price = t.is_monthly ? plan.pro_layout_monthly_price : plan.pro_layout_yearly_price + t.pro_layout_total = t.is_pro ? subscriber.pro_layouts * t.pro_layout_price : 0 + t.plan_total = t.plan_price + t.basic_layout_total + t.pro_layout_total + return t + }, + displayTotals: function(subscriber, plan){ + var totals = this.calculateTotals(subscriber, plan) + + this.$basicPlanName.html ( this.plans[1].name ) + this.$proPlanName.html ( this.plans[2].name ) + this.$basicPlanCost.toDollars ( totals.is_monthly ? this.plans[1].monthly_price : this.plans[2].yearly_price) + this.$proPlanCost.toDollars ( totals.is_monthly ? this.plans[2].monthly_price : this.plans[2].yearly_price) + + this.$planName.html ( plan.name ) + this.$planCost.toDollars ( totals.plan_price ) + + this.$billingInterval.html ( totals.is_monthly ? "mo." : "yr." ) + this.$basicLayoutRow.toggle ( subscriber.basic_layouts > 0 ) + this.$proLayoutRow.toggle ( totals.is_pro && subscriber.pro_layouts > 0) + + this.$basicLayoutCost.toDollars ( totals.basic_layout_price ) + this.$basicLayoutQuantity.html ( subscriber.basic_layouts ) + this.$basicLayoutTotal.toDollars ( totals.basic_layout_total ) + + this.$proLayoutCost.toDollars ( totals.pro_layout_price ) + this.$proLayoutQuantity.html ( subscriber.pro_layouts ) + this.$proLayoutTotal.toDollars ( totals.pro_layout_total ) + + this.$planTotal.toDollars ( totals.plan_total ) + }, + + editMode: function(e){ + e && e.preventDefault() + + this.editing = true + this.$el.addClass("editing") + this.tempSubscriber = defaults({}, this.subscriber) + this.$basicLayoutInput.val( this.subscriber.basic_layouts ) + this.$proLayoutInput.val( this.subscriber.pro_layouts ) + this.$basicLayoutRow.show() + this.$proLayoutRow.toggle(this.subscriber.plan_type == "pro") + switch (this.subscriber.plan_type) { + case 'basic': this.$basicPlanInput.prop('checked', true); break; + case 'pro': this.$proPlanInput.prop('checked', true); break; + } + }, + resetMode: function(e){ + e && e.preventDefault() + this.editing = false + this.$el.removeClass("editing") + this.reset() + }, + + updateQuantity: function(e){ + e && e.preventDefault() + var plan = this.getPlan( this.tempSubscriber.plan_type ) + this.tempSubscriber.basic_layouts = clamp( this.$basicLayoutInput.int() || 0, 0, 100) + this.tempSubscriber.pro_layouts = clamp( this.$proLayoutInput.int() || 0, 0, 100) + + this.$basicLayoutInput.val(this.tempSubscriber.basic_layouts) + this.$proLayoutInput.val(this.tempSubscriber.pro_layouts) + this.displayTotals(this.tempSubscriber, plan) + this.$basicLayoutRow.show() + this.$proLayoutRow.toggle(this.tempSubscriber.plan_type == "pro") + }, + saveChanges: function(e){ + e && e.preventDefault() + var is_changed = false + var diff = {} + "plan_type basic_layouts pro_layouts".split(" ").forEach(function(field){ + diff[field] = this.tempSubscriber[field] + if (this.tempSubscriber[field] != this.subscriber[field]) { + is_changed = true + } + }.bind(this)) + + if (is_changed) { + this.update(diff) + } + this.subscriber = this.tempSubscriber + this.resetMode() + }, + + updatePlan: function(e){ + e && e.preventDefault() + this.tempSubscriber.plan_type = this.$("[name=planRadio]:checked").val() + this.updateQuantity() + }, + + sync: function(){ + this.$gear.addClass("turning") + $.ajax({ + url: this.syncAction, + type: "put", + data: { _csrf: $("[name=_csrf]").val() }, + success: this.didLoad.bind(this) + }) + }, + + update: function(data){ + data['_csrf'] = $("[name=_csrf]").val() + this.$gear.addClass("turning") + $.ajax({ + url: this.updateAction, + type: "put", + data: data, + success: function(data){ + this.$gear.removeClass("turning") + }.bind(this) + }) + }, + + destroy: function(e){ + e.preventDefault() + var msg = "Are you sure you want to cancel your subscription?" + ConfirmModal.confirm(msg, function(){ + $.ajax({ + url: this.destroyAction, + type: "delete", + data: { _csrf: $("[name=_csrf]").val() }, + success: function(data){ + this.subscriber = null + this.didLoad(data) + }.bind(this) + }) + }.bind(this), + function(){ + this.show() + }.bind(this)) + }, + +}) diff --git a/public/assets/javascripts/ui/site/HomeView.js b/public/assets/javascripts/ui/site/HomeView.js index 02f9ab9..20452bd 100644 --- a/public/assets/javascripts/ui/site/HomeView.js +++ b/public/assets/javascripts/ui/site/HomeView.js @@ -6,6 +6,32 @@ var HomeView = View.extend({ load: function() { this.projectList = new ProjectList () - } + + var iframe = $("#okplayer")[0] + var player = $f( iframe ) + player.addEvent('ready', function(){ + player.addEvent('play', function(){ + player.api('setVolume', 1.0) + }) + player.addEvent('finish', function(){ + hide() + }) + }) + $('.hero .circle').click( function(){ + $('.videoModal').css("display","table").addClass('active'); + player.api('play') + }) + + $('.videoModal .ion-ios-close-empty').click( function(){ + player.api('pause') + hide() + }) + + function hide() { + $('.videoModal').fadeOut(300, function(){ + $('.videoModal').removeClass('active') + }) + } + }, }) diff --git a/public/assets/javascripts/ui/site/LayoutsIndex.js b/public/assets/javascripts/ui/site/LayoutsIndex.js new file mode 100644 index 0000000..f7272bb --- /dev/null +++ b/public/assets/javascripts/ui/site/LayoutsIndex.js @@ -0,0 +1,85 @@ + +var LayoutsIndex = View.extend({ + + initialize: function(){ + this.$templates = this.$(".templates") + this.$templatesList = this.$(".templates-list") + this.$noTemplates = this.$(".no-templates") + this.$form = this.$("form") + + this.$userTemplatesList = this.$(".userTemplatesList") + this.$blueprintsList = this.$(".blueprintsList") + this.$newBlueprintButton = this.$("[data-role='create-new-blueprint']") + }, + + load: function(type){ + this.$templates.children("span").remove() + + $.get(this.action, this.populate.bind(this)) + }, + + populate: function(data){ + if (! data.layouts.length) { + this.$templates.hide() + this.$form.hide() + this.$noTemplates.show() + } + this.$templatesList.empty() + data.layouts.forEach(function(room){ + var $span = $("<span>") + $span.data("slug", room.slug) + + var $label = $("<label>") + $label.html( room.name ) + + var $image = $("<span>") + $image.addClass("image").css("background-image", "url(" + room.photo + ")") + + $span.append( $image ) + $span.append( $label ) + + this.$templatesList.append($span) + }.bind(this)) + this.show() + } + +}) + + + +var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ + el: ".mediaDrawer.projects", + + action: "/api/project", + + events: { + "click .templates span": 'toggleActive', + "submit form": 'newProject', + }, + + populate: function(data){ + if (! data.length) { + app.router.newProject() + } + else { + this.__super__.populate.call(this, data) + } + }, + + toggleActive: function(e){ + e.preventDefault() + this.$(".templates .active").removeClass("active") + var $layout = $(e.currentTarget) + $layout.addClass("active") + + // actually do + window.location.pathname = "/project/" + $layout.data("slug") + "/edit" + }, + + newProject: function(e){ + e && e.preventDefault() + window.location.pathname = "/project/new" + } + +}) + diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index 2449465..0222077 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -1,127 +1,106 @@ +var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({ + el: ".mediaDrawer.layouts", -var LayoutsIndex = View.extend({ + action: "/api/layout", - initialize: function(){ - this.$templates = this.$(".templates") - this.$noTemplates = this.$(".no-templates") - this.$form = this.$("form") + events: { + "click [data-role='create-new-layout']": 'createNewLayout', + "click [data-role='create-new-blueprint']": 'createNewBlueprint', + "click .templates span": 'pick', }, + + pick: function(e){ + e.preventDefault() + var layout = $(e.currentTarget).data("slug") + var isBlueprint = $(e.currentTarget).data("blueprint") - load: function(type){ - this.$templates.children("span").remove() + if (! layout || ! layout.length) return - $.get(this.action, this.populate.bind(this)) + if (isBlueprint) { + window.location.pathname = "/blueprint/" + layout + } + else { + window.location.pathname = "/layout/" + layout + } + }, + + createNewLayout: function(e){ + e.preventDefault() + window.location.pathname = "/layout/new" + }, + + createNewBlueprint: function(e){ + e.preventDefault() + window.location.pathname = "/blueprint/new" }, populate: function(data){ - if (! data.length) { +/* + if (data.user.plan_level < 1 && data.projectCount == 1) { + // show lockout message + } +*/ + if (! data.layouts.length) { this.$templates.hide() this.$form.hide() this.$noTemplates.show() } - this.$templates.empty() - data.forEach(function(room){ + this.$templatesList.empty() + data.layouts.forEach(function(room){ var $span = $("<span>") - // $span.html(JSON.stringify(room)) $span.data("slug", room.slug) - $span.css("background-image", "url(" + room.photo + ")") - $span.attr("data-name", room.name) - this.$templates.append($span) + var $label = $("<label>") + $label.html( room.name ) + + var $image = $("<span>") + $image.addClass("image").css("background-image", "url(" + room.photo + ")") + + $span.append( $image ) + $span.append( $label ) + + this.$templatesList.append($span) }.bind(this)) - console.log(this.$templates.html()) - this.show() - } - -}) - -var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ - el: ".mediaDrawer.projects", - - action: "/api/project", - - events: { - "click .templates span": 'toggleActive', - "submit form": 'newProject', - }, - - populate: function(data){ - if (! data.length) { - app.router.newProject() - } - else { - this.__super__.populate.call(this, data) - } - }, - - toggleActive: function(e){ - e.preventDefault() - this.$(".templates .active").removeClass("active") - var $layout = $(e.currentTarget) - $layout.addClass("active") - - // actually do - window.location.pathname = "/project/" + $layout.data("slug") + "/edit" - }, - - newProject: function(e){ - e && e.preventDefault() - window.location.pathname = "/project/new" - } - -}) - - -var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({ - el: ".mediaDrawer.layouts", - - action: "/api/layout", - events: { - "click .templates span": 'toggleActive', - "submit form": 'newLayout', - }, - - toggleActive: function(e){ - e.preventDefault() - this.$(".templates .active").removeClass("active") - var $layout = $(e.currentTarget) - $layout.addClass("active") + data.user_layouts.forEach(function(room){ + var $span = $("<span>") + $span.data("slug", room.slug) + + var $label = $("<label>") + $label.html( room.name ) + + var $image = $("<span>") + $image.addClass("image").css("background-image", "url(" + room.photo + ")") + + $span.append( $image ) + $span.append( $label ) + + this.$templatesList.append($span) + }.bind(this)) + + data.blueprints.forEach(function(blueprint){ + var $span = $("<span>") + $span.data("slug", blueprint.slug) + $span.data("blueprint", true) + + var $label = $("<label>") + $label.html( blueprint.name ) + + var $image = $("<span>") + $image.addClass("image").css("background-image", "url(" + blueprint.url + ")") + + $span.append( $image ) + $span.append( $label ) + + this.$templatesList.append($span) + }.bind(this)) - // actually do - window.location.pathname = "/layout/" + $layout.data("slug") + this.show() }, - + newLayout: function(e){ e && e.preventDefault() window.location.pathname = "/layout/new" } }) - - -var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({ - el: ".mediaDrawer.newProject", - - action: "/api/layout", - - events: { - "click .templates span": 'choose', - "submit form": 'choose', - }, - - toggleActive: function(e){ - e.preventDefault() - this.$(".templates .active").removeClass("active") - $(e.currentTarget).addClass("active") - }, - - choose: function(e){ - e && e.preventDefault() -// var layout = this.$(".templates .active").data("slug") - var layout = $(e.currentTarget).data("slug") - if (! layout || ! layout.length) return - window.location.pathname = "/project/new/" + layout - } - -}) diff --git a/public/assets/javascripts/ui/site/NewProjectModal.js b/public/assets/javascripts/ui/site/NewProjectModal.js new file mode 100644 index 0000000..31675ba --- /dev/null +++ b/public/assets/javascripts/ui/site/NewProjectModal.js @@ -0,0 +1,118 @@ +var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({ + el: ".mediaDrawer.newProject", + + action: "/api/layout", + + events: { + "click [data-role='create-new-layout']": 'createNewLayout', + "click [data-role='create-new-blueprint']": 'createNewBlueprint', + "click .templates span": 'pick', + }, + + toggleActive: function(e){ + e.preventDefault() + this.$(".templates .active").removeClass("active") + $(e.currentTarget).addClass("active") + }, + + pick: function(e){ + e && e.preventDefault() +// var layout = this.$(".templates .active").data("slug") + var layout = $(e.currentTarget).data("slug") + var isBlueprint = $(e.currentTarget).data("blueprint") + if (! layout || ! layout.length) return + + if (isBlueprint) { + window.location.pathname = "/project/blueprint/" + layout + } + else { + window.location.pathname = "/project/new/" + layout + } + }, + + createNewLayout: function(e){ + e.preventDefault() + window.location.pathname = "/project/new/empty" + }, + + createNewBlueprint: function(e){ + e.preventDefault() + window.location.pathname = "/blueprint/new" + }, + + populate: function(data){ +/* + if (data.user.plan_level < 1 && data.projectCount == 1) { + // show lockout message + this.$newBlueprintButton.hide() + } +*/ + if (! data.layouts.length) { + this.$templates.hide() + this.$form.hide() + this.$noTemplates.show() + } + if (! data.blueprints.length) { + this.$blueprintsList.parent().hide() + } + if (! data.user_layouts.length) { + this.$userTemplatesList.parent().hide() + } + + this.$templatesList.empty() + data.layouts.forEach(function(room){ + var $span = $("<span>") + $span.data("slug", room.slug) + + var $label = $("<label>") + $label.html( room.name ) + + var $image = $("<span>") + $image.addClass("image").css("background-image", "url(" + room.photo + ")") + + $span.append( $image ) + $span.append( $label ) + + this.$templatesList.append($span) + }.bind(this)) + + data.user_layouts.forEach(function(room){ + var $span = $("<span>") + $span.data("slug", room.slug) + + var $label = $("<label>") + $label.html( room.name ) + + var $image = $("<span>") + $image.addClass("image").css("background-image", "url(" + room.photo + ")") + + $span.append( $image ) + $span.append( $label ) + + this.$templatesList.append($span) + }.bind(this)) + + data.blueprints.forEach(function(blueprint){ + if (! blueprint.slug) { return } + + var $span = $("<span>") + $span.data("blueprint", true) + $span.data("slug", blueprint.slug) + + var $label = $("<label>") + $label.html( blueprint.name ) + + var $image = $("<span>") + $image.addClass("image").css("background-image", "url(" + blueprint.url + ")") + + $span.append( $image ) + $span.append( $label ) + + this.$templatesList.append($span) + }.bind(this)) + + this.show() + }, + + +})
\ No newline at end of file diff --git a/public/assets/javascripts/ui/site/ProfileView.js b/public/assets/javascripts/ui/site/ProfileView.js index f3b35d9..8471abc 100644 --- a/public/assets/javascripts/ui/site/ProfileView.js +++ b/public/assets/javascripts/ui/site/ProfileView.js @@ -1,6 +1,12 @@ var ProfileView = View.extend({ + el: ".profilepage", + + events: { + "change #profile_avatar": "uploadAvatar", + }, + initialize: function() { }, @@ -12,6 +18,28 @@ var ProfileView = View.extend({ $(".bio").addClass(choice(classes)); this.projectList = new ProjectList () + }, + + uploadAvatar: function(){ + var fd = new FormData(), hasCSRF = false + var files = this.$("#profile_avatar")[0].files + if (! files.length) return + + fd.append("avatar", files[0]); + fd.append("_csrf", $("[name=_csrf]").val()) + + var request = $.ajax({ + url: "/api/profile", + type: "put", + data: fd, + dataType: "json", + processData: false, + contentType: false, + }) + + request.done($.proxy(function (response) { + window.location.href = "/profile" + }, this)); } }) diff --git a/public/assets/javascripts/ui/site/ProjectList.js b/public/assets/javascripts/ui/site/ProjectList.js index 993d805..076a674 100644 --- a/public/assets/javascripts/ui/site/ProjectList.js +++ b/public/assets/javascripts/ui/site/ProjectList.js @@ -1,16 +1,75 @@ +var projectListTimeout = null var ProjectList = View.extend({ el: ".projectList", events: { - "mouseenter .room": 'spinOn', - "mouseleave .room": 'spinOff', + "click .viewMore": 'viewMore', + "mouseenter .room": 'enter', + "mouseleave .room": 'leave', }, initialize: function(){ + this.$viewMore = this.$(".viewMore") + this.$(".images").each(function(){ + $divs = $(this).children("div") + $divs.hide() + $divs.first().show() + $(this).data("index", 0) + }) }, + timeout: null, + enter: function(e){ + clearTimeout(projectListTimeout) + this.advance(e.currentTarget) + }, + + leave: function(e){ + clearTimeout(projectListTimeout) + var $divs = $(e.currentTarget).find(".images div") + $divs.hide() + $divs.eq(0).show() + }, + + advance: function(el){ + projectListTimeout = setTimeout(function(){ + this.advance(el) + }.bind(this), 500) + var $images = $(el).find(".images") + var $divs = $images.children("div") + var index = $images.data("index") + var nextIndex = (index + 1) % $divs.length + $divs.eq(index).hide() + $divs.eq(nextIndex).show() + $images.data("index", nextIndex) + }, + + viewMore: function(e){ + e.preventDefault() + var criteria = {} + criteria.offset = this.$(".projectItem").length + if (window.location.pathname == "/" || window.location.pathname.match("/home")) { + criteria.home = 1 + } + else { + criteria.user_id = this.$(".projectItem").first().data("userid") + } + + $.get("/api/project/paginate", criteria, function(data){ + var offset = this.$viewMore.offset() + var $data = $(data) + var $els = $data.find(".projectItem") + $els.insertBefore( this.$viewMore ) + if (! $data.find(".viewMore").length) { + this.$viewMore.hide() + } + $("body,html").animate({ scrollTop: offset.top - 80 }, 300) + }.bind(this)) + }, + +/* spinOn: function(e){ var iframe = $(e.currentTarget).find("iframe").get('0') if (! iframe) return @@ -22,5 +81,6 @@ var ProjectList = View.extend({ if (! iframe) return iframe.contentWindow.postMessage("spin-off", window.location.origin) } +*/ }) diff --git a/public/assets/javascripts/ui/site/StaffView.js b/public/assets/javascripts/ui/site/StaffView.js index fdf39d2..97f86c2 100644 --- a/public/assets/javascripts/ui/site/StaffView.js +++ b/public/assets/javascripts/ui/site/StaffView.js @@ -3,14 +3,29 @@ var StaffView = View.extend({ events: { "click #toggle-staff": "toggleStaff", + "click #toggle-featured": "toggleFeatured", + "click #toggle-stock": "toggleStock", + "click #toggle-artist": "toggleArtist", }, initialize: function() { this.$toggleStaff = $("#toggle-staff") + this.$toggleFeatured = $("#toggle-featured") + this.$toggleStock = $("#toggle-stock") + this.$toggleArtist = $("#toggle-artist") this.$mediaEmbed = $("#media-embed") if (this.$toggleStaff.length && this.$toggleStaff.data().isstaff) { this.$toggleStaff.html("Is Staff") } + if (this.$toggleFeatured.length && this.$toggleFeatured.data().featured) { + this.$toggleFeatured.html("Featured Project") + } + if (this.$toggleStock.length && this.$toggleStock.data().stock) { + this.$toggleStock.html("Layout is Stock") + } + if (this.$toggleArtist.length && this.$toggleArtist.data().isartist) { + this.$toggleArtist.html("Is Artist") + } if (this.$mediaEmbed.length) { var media = this.$mediaEmbed.data() this.$mediaEmbed.html( Parser.tag( media ) ) @@ -44,6 +59,59 @@ var StaffView = View.extend({ }.bind(this) }) }.bind(this)) - }, + }, + toggleFeatured: function(){ + var state = ! this.$toggleFeatured.data().featured + $.ajax({ + type: "put", + dataType: "json", + url: window.location.href + "/feature", + data: { + state: state, + _csrf: $("#_csrf").val(), + }, + success: function(data){ + this.$toggleFeatured.data("featured", data.state) + this.$toggleFeatured.html(data.state ? "Featured Project" : "Feature this project") + $("#isFeaturedProject").html(data.state ? "yes" : "no") + }.bind(this) + }) + }, + + toggleStock: function(){ + var state = ! this.$toggleStock.data().stock + $.ajax({ + type: "put", + dataType: "json", + url: window.location.href + "/stock", + data: { + state: state, + _csrf: $("#_csrf").val(), + }, + success: function(data){ + this.$toggleStock.data("stock", data.state) + this.$toggleStock.html(data.state ? "Stock Layout" : "Make this layout Stock") + $("#isStockLayout").html(data.state ? "yes" : "no") + }.bind(this) + }) + }, + + toggleArtist: function(){ + var state = ! this.$toggleArtist.data().isartist + $.ajax({ + type: "put", + dataType: "json", + url: window.location.href + "/artist", + data: { + state: state, + _csrf: $("#_csrf").val(), + }, + success: function(data){ + this.$toggleArtist.data("stock", data.state) + this.$toggleArtist.html(data.state ? "Is Artist" : "Make Artist") + $("#isArtist").html(data.state ? "yes" : "no") + }.bind(this) + }) + }, }) |