Permalink
Browse files

Add some code to do the main view transitons when clicking on the nav…

… bar
  • Loading branch information...
1 parent 9b87116 commit 1f9f5bdaeb978d5db01409b3113a7a42b07b1909 @jbass86 committed Dec 6, 2013
@@ -15,7 +15,7 @@ define(["vendor/backbone",
Backbone.View.extend(
- className: "customerSection",
+ className: "customerSection widthTransition",
events: {"click .insertCustomerButton" : "insertCustomerEvent", \
"click .customerTable .editButton" : "customerTableEdit", \
@@ -6,7 +6,7 @@ CustomerSectionBarView
define(["vendor/backbone", "plugins/CustomerSection/model/CustomerUpdatePanelModel", "plugins/CustomerSection/view/CustomerUpdatePanelView", "plugins/ConfirmDialog/model/ConfirmDialogModel", "plugins/ConfirmDialog/view/ConfirmDialogView", "plugins/CustomerSection/view/Templates", 'css!plugins/CustomerSection/view/res/css/customerSection.css'], function(Backbone, CustomerUpdatePanelModel, CustomerUpdatePanelView, ConfirmDialogModel, ConfirmDialogView, Templates, CSS) {
return Backbone.View.extend({
- className: "customerSection",
+ className: "customerSection widthTransition",
events: {
"click .insertCustomerButton": "insertCustomerEvent",
"click .customerTable .editButton": "customerTableEdit",
@@ -20,9 +20,13 @@
left top,
color-stop(0.06, rgb(4,18,54)),
color-stop(0.63, rgb(99,111,122))*/
+
+
+}
+
+.customerSection .sectionTransition{
transition: width 1s;
-webkit-transition: width 1s;
-
}
.customerSection .customerSectionTitle{
@@ -13,7 +13,8 @@ define(["vendor/backbone",
Backbone.View.extend(
className: "navigationBar pressedBorder",
- events: {"click .expandButton" : "toggleNavBarExpand"},
+ events: {"click .expandButton" : "toggleNavBarExpand", \
+ "click .section" : "selectView"},
initialize: (model) ->
@@ -63,5 +64,22 @@ define(["vendor/backbone",
@currentView.$el.css("width", "99%");
@$el.find(".navBarLabel").css("display", "none");
@$el.find(".section").css("display", "none");
+
+ selectView: (event)->
+
+ #unfortunatley css transition does not play nice with
+ #jqueryUI so remove it before the animation then re add it
+ #when its done.
+ @currentView.$el.removeClass("widthTransition");
+ @currentView.$el.effect( "blind", {}, 500, () =>
+ console.log("done folding now open new view");
+ @currentView.$el.addClass("widthTransition");
+ console.log("the event is ");
+ console.log(event);
+ );
+
+ loadNewView: (viewName) ->
+
+ console.log("loading up a new view...");
)
)
@@ -8,7 +8,8 @@ define(["vendor/backbone", "plugins/CustomerSection/model/CustomerSectionModel",
return Backbone.View.extend({
className: "navigationBar pressedBorder",
events: {
- "click .expandButton": "toggleNavBarExpand"
+ "click .expandButton": "toggleNavBarExpand",
+ "click .section": "selectView"
},
initialize: function(model) {
this.navBarExpanded = true;
@@ -52,6 +53,19 @@ define(["vendor/backbone", "plugins/CustomerSection/model/CustomerSectionModel",
this.$el.find(".navBarLabel").css("display", "none");
return this.$el.find(".section").css("display", "none");
}
+ },
+ selectView: function(event) {
+ var _this = this;
+ this.currentView.$el.removeClass("widthTransition");
+ return this.currentView.$el.effect("blind", {}, 500, function() {
+ console.log("done folding now open new view");
+ _this.currentView.$el.addClass("widthTransition");
+ console.log("the event is ");
+ return console.log(event);
+ });
+ },
+ loadNewView: function(viewName) {
+ return console.log("loading up a new view...");
}
});
});
@@ -206,4 +206,9 @@ div.table {
left: 0;
background-color: black;
+}
+
+.widthTransition{
+ transition: width 1s;
+ -webkit-transition: width 1s;
}

0 comments on commit 1f9f5bd

Please sign in to comment.