432 lines
8.9 KiB
JavaScript
432 lines
8.9 KiB
JavaScript
/**
|
|
* slides lateral panel
|
|
*/
|
|
|
|
cdb.admin.SlidesPanel = cdb.core.View.extend({
|
|
|
|
className: 'slides_panel',
|
|
|
|
template_name: 'table/views/slides/panel',
|
|
|
|
initialize: function() {
|
|
|
|
this.template = this.getTemplate(this.template_name);
|
|
|
|
this.slides = this.options.slides;
|
|
this.toggleElement = this.options.toggle;
|
|
|
|
this.model = new cdb.core.Model({
|
|
visible: false
|
|
});
|
|
|
|
this.model.bind("change:visible", this._onChangeVisible, this);
|
|
|
|
if (!this.slides) {
|
|
throw new Error("slides is undefined");
|
|
}
|
|
|
|
this._bindSlides();
|
|
|
|
},
|
|
|
|
_bindSlides: function() {
|
|
|
|
this.add_related_model(this.slides);
|
|
|
|
this.slides.bind('reset' , function() {
|
|
this.slides.each(this._add.bind(this));
|
|
}, this);
|
|
|
|
this.slides.bind('remove', function() {
|
|
this._reInitScrollpane();
|
|
}, this);
|
|
|
|
this.slides.bind('add', this._add, this);
|
|
|
|
} ,
|
|
|
|
_addAddButton: function(slide) {
|
|
|
|
this.addSlideButton = new cdb.admin.SlideViewAdd({
|
|
model: new cdb.core.Model()
|
|
});
|
|
|
|
this.addSlideButton.bind("click", function() {
|
|
this.addSlideButton.model.set("loading", true);
|
|
this.slides.create();
|
|
}, this);
|
|
|
|
this.addView(this.addSlideButton);
|
|
this.$el.find(".scrollpane").append(this.addSlideButton.render().el);
|
|
|
|
},
|
|
|
|
_reInitScrollpane: function() {
|
|
var self = this;
|
|
setTimeout(function() {
|
|
this.$('.scrollpane').data('jsp') && this.$('.scrollpane').data('jsp').reinitialise();
|
|
this.$('.scrollpane.jspScrollable').css("overflow", "");
|
|
}, 500);
|
|
},
|
|
|
|
_add: function(slide) {
|
|
var v = new cdb.admin.SlideView({
|
|
user: this.options.user,
|
|
model: slide
|
|
});
|
|
// remove fake
|
|
if (this._fakeSlide) {
|
|
this._fakeSlide.clean();
|
|
this._fakeSlide = null;
|
|
}
|
|
|
|
this._addSlideView(v);
|
|
},
|
|
|
|
_addSlideView: function(slideView) {
|
|
this.addView(slideView);
|
|
this.$el.find(".scrollpane .slides").append(slideView.render().el);
|
|
|
|
slideView.show();
|
|
this._reInitScrollpane();
|
|
},
|
|
|
|
_onChangeVisible: function() {
|
|
|
|
var visible = this.model.get("visible")
|
|
visible ? this._show() : this._hide();
|
|
|
|
this.trigger("onChangeVisible", visible, this);
|
|
|
|
},
|
|
|
|
toggle: function() {
|
|
|
|
var visible = !this.model.get("visible");
|
|
this.model.set("visible", visible);
|
|
|
|
return visible;
|
|
|
|
},
|
|
|
|
show: function() {
|
|
this.model.set("visible", true);
|
|
},
|
|
|
|
hide: function() {
|
|
this.model.set("visible", false);
|
|
},
|
|
|
|
_hide: function() {
|
|
this.toggleElement.find("h5").html("Create");
|
|
this.toggleElement.removeClass("active");
|
|
this.$el.removeClass("active");
|
|
cdb.god.trigger("closeDialogs");
|
|
},
|
|
|
|
_show: function() {
|
|
this.toggleElement.find("h5").html("Hide");
|
|
this.toggleElement.addClass("active");
|
|
this.$el.addClass("active");
|
|
},
|
|
|
|
_initScrollPane: function() {
|
|
|
|
var $scrollpane = this.$el.find(".scrollpane");
|
|
var height = this.$el.height();
|
|
|
|
setTimeout(function() {
|
|
$scrollpane.css("max-height", height - 60);
|
|
$scrollpane.jScrollPane();
|
|
$scrollpane.css("overflow", "");
|
|
}, 500)
|
|
|
|
},
|
|
|
|
_initSortable: function() {
|
|
|
|
var self = this;
|
|
|
|
this.$el.find(".slides").sortable({
|
|
axis: "y",
|
|
update : function (event, ui) {
|
|
|
|
var current_id = ui.item.attr("id");
|
|
var next_id = ui.item.next() ? ui.item.next().attr("id") : null;
|
|
//var prev_id = ui.item.prev() ? ui.item.prev().attr("id") : null;
|
|
|
|
var slide = self.slides.get(current_id);
|
|
slide.setNext(next_id);
|
|
//self.trigger("on_sortable", { current: current_id, next: next_id }, self);;
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
_renderFake: function() {
|
|
this._fakeSlide = new cdb.admin.SlideViewFake();
|
|
this._addSlideView(this._fakeSlide);
|
|
},
|
|
|
|
render: function() {
|
|
|
|
this.clearSubViews();
|
|
|
|
this.$el.append(this.template());
|
|
|
|
this._renderFake();
|
|
|
|
this.slides.each(this._add.bind(this));
|
|
|
|
this._addAddButton();
|
|
this._initScrollPane();
|
|
this._initSortable();
|
|
|
|
this.slides.bind("add", function() {
|
|
this.addSlideButton.model.set("loading", false);
|
|
}, this);
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* view for the fake slide. When there are no slides the UI shows one (the master one) but it's not
|
|
* an actual slide in the server.
|
|
*/
|
|
|
|
cdb.admin.SlideViewFake = cdb.core.View.extend({
|
|
|
|
tagName: "a",
|
|
|
|
className: 'slide_view fake',
|
|
|
|
template_name: 'table/views/slides/slide',
|
|
|
|
initialize: function () {
|
|
this.template = this.getTemplate(this.template_name);
|
|
},
|
|
|
|
show: function() {
|
|
this.$el.addClass('animated bounceIn active');
|
|
},
|
|
|
|
render: function() {
|
|
this.$el.attr("href", "#");
|
|
this.$el.append(this.template({ count: 1, transition: false }));
|
|
return this;
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* view for a single slide
|
|
*/
|
|
cdb.admin.SlideView = cdb.core.View.extend({
|
|
|
|
tagName: "a",
|
|
|
|
className: 'slide_view',
|
|
|
|
template_name: 'table/views/slides/slide',
|
|
|
|
events: {
|
|
'click': '_onClick',
|
|
'click .count': '_onClick',
|
|
'click .info': '_onClickInfo',
|
|
'click .close': '_onClickClose'
|
|
},
|
|
|
|
initialize: function () {
|
|
|
|
this._setupModel();
|
|
this.template = this.getTemplate(this.template_name);
|
|
|
|
},
|
|
|
|
_setupDropdown: function() {
|
|
|
|
this.dropdown = new cdb.admin.TransitionDropdown({
|
|
target: this.$el.find('.js-change-transition-method'),
|
|
template_base: "table/views/slides/transition_dropdown",
|
|
horizontal_position: "left",
|
|
tick: "top",
|
|
vertical_offset: 58,
|
|
horizontal_offset: -145,
|
|
vis: this.model.visualization
|
|
});
|
|
|
|
this.addView(this.dropdown);
|
|
|
|
cdb.god.bind("closeDialogs", this._onHideDropdown, this);
|
|
|
|
this.$el.append(this.dropdown.render().el);
|
|
|
|
},
|
|
|
|
_onHideDropdown: function() {
|
|
|
|
this.dropdown.hide();
|
|
this.$el.css("z-index", 1);
|
|
|
|
},
|
|
|
|
_setupModel: function() {
|
|
|
|
this.model.bind('change:active', this._onChangeActive, this);
|
|
this.model.visualization.bind('change:transition_options', this._onChangeTransitionOptions, this);
|
|
this.model.bind('remove', this._onDestroy, this);
|
|
|
|
this.model.collection.bind('add remove reset change:next_id', this._onChangeCount, this);
|
|
this.add_related_model(this.model.collection);
|
|
|
|
},
|
|
|
|
_onClick: function(e) {
|
|
this.killEvent(e);
|
|
this.model.collection.setActive(this.model);
|
|
},
|
|
|
|
_onClickInfo: function(e) {
|
|
this.killEvent(e);
|
|
this.$el.css("z-index", 100)
|
|
},
|
|
|
|
_onClickClose: function(e) {
|
|
this.killEvent(e);
|
|
|
|
var delete_confirmation = cdb.editor.ViewFactory.createDialogByTemplate('common/dialogs/confirm_delete_slide');
|
|
delete_confirmation.ok = this.model.destroy.bind(this.model);
|
|
delete_confirmation.appendToBody();
|
|
},
|
|
|
|
_onDestroy: function() {
|
|
var self = this;
|
|
|
|
this.hide(function() {
|
|
self.clean();
|
|
});
|
|
|
|
},
|
|
|
|
_onChangeCount: function() {
|
|
this.$el.find(".count").html(this.model.collection.indexOf(this.model) + 1);
|
|
},
|
|
|
|
_onChangeTransitionOptions: function() {
|
|
|
|
var transition_method = this._getTransitionMethod();
|
|
|
|
this.$el.find(".js-change-transition-method").html(transition_method);
|
|
|
|
},
|
|
|
|
_onChangeActive: function() {
|
|
|
|
if (this.model.isActive()) {
|
|
this.$el.addClass("active");
|
|
} else {
|
|
this.$el.removeClass("active");
|
|
}
|
|
cdb.god.trigger("closeDialogs");
|
|
|
|
},
|
|
|
|
hide: function(callback) {
|
|
|
|
this.$el
|
|
.removeClass('animated bounceIn')
|
|
.addClass('animated bounceOut');
|
|
|
|
if (callback) {
|
|
setTimeout(function() {
|
|
callback();
|
|
}, 500)
|
|
}
|
|
|
|
},
|
|
|
|
_getTransitionMethod: function() {
|
|
|
|
var transition = this.model.visualization.get("transition_options");
|
|
var transition_method = "on click";
|
|
|
|
if (transition && transition.transition_trigger === "time") {
|
|
transition_method = (transition.time !== 1) ? transition.time + " seconds" : "1 second";
|
|
}
|
|
|
|
return transition_method;
|
|
|
|
},
|
|
|
|
show: function() {
|
|
this.$el.addClass('animated bounceIn');
|
|
},
|
|
|
|
render: function() {
|
|
|
|
this.$el.attr("href", "#");
|
|
|
|
// TODO: remove count && get the value from the model
|
|
var attributes = _.extend(this.model.attributes, { count: 1, transition: true, transition_method: this._getTransitionMethod() });
|
|
|
|
this.$el.append(this.template(attributes));
|
|
|
|
this._onChangeActive();
|
|
this._onChangeCount();
|
|
|
|
this._setupDropdown();
|
|
|
|
this.$el.attr("id", this.model.get("id"))
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
cdb.admin.SlideViewAdd = cdb.admin.SlideView.extend({
|
|
|
|
className: 'slide_view add',
|
|
|
|
template_name: 'table/views/slides/add_slide',
|
|
|
|
_setupModel: function() {
|
|
this.model.bind('change:loading', this._onChangeLoading, this);
|
|
},
|
|
|
|
_onChangeLoading: function(e) {
|
|
|
|
if (this.model.get("loading")) {
|
|
this.$el.addClass("loading");
|
|
} else {
|
|
this.$el.removeClass("loading");
|
|
}
|
|
|
|
},
|
|
|
|
_onClick: function(e) {
|
|
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
this.trigger("click", this);
|
|
|
|
},
|
|
|
|
render: function() {
|
|
|
|
this.$el.attr("href", "#");
|
|
|
|
var attributes = this.options;
|
|
|
|
this.$el.append(this.template(attributes));
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|