assets/js/builder/Views/Sidebar.js
/**
* Main sidebar view
*
* @since 3.16.0
* @version 7.2.0
*/
define( [
'Views/Editor',
'Views/Elements',
'Views/Utilities',
'Views/_Subview'
], function(
Editor,
Elements,
Utilities,
Subview
) {
return Backbone.View.extend( _.defaults( {
/**
* Current builder state
* @type {String}
*/
state: 'builder', // [builder|editor]
/**
* Current Subviews
* @type {Object}
*/
views: {
elements: {
class: Elements,
instance: null,
state: 'builder',
},
utilities: {
class: Utilities,
instance: null,
state: 'builder',
},
editor: {
class: Editor,
instance: null,
state: 'editor',
},
},
/**
* HTML element selector
* @type {String}
*/
el: '#llms-builder-sidebar',
/**
* DOM events
* @type {Object}
*/
events: {
'click #llms-save-button': 'save_now',
'click #llms-exit-button': 'exit_now',
'click .llms-builder-error': 'clear_errors',
},
/**
* Wrapper Tag name
* @type {String}
*/
tagName: 'aside',
/**
* Get the underscore template
* @type {[type]}
*/
template: wp.template( 'llms-sidebar-template' ),
/**
* Initialization callback func (renders the element on screen)
* @return void
* @since 3.16.0
* @version 3.16.0
*/
initialize: function( data ) {
// save a reference to the main Course view
this.CourseView = data.CourseView;
this.render();
Backbone.pubSub.on( 'current-save-status', this.changes_made, this );
Backbone.pubSub.on( 'heartbeat-send', this.heartbeat_send, this );
Backbone.pubSub.on( 'heartbeat-tick', this.heartbeat_tick, this );
Backbone.pubSub.on( 'lesson-selected', this.on_lesson_select, this );
Backbone.pubSub.on( 'sidebar-editor-close', this.on_editor_close, this );
this.$saveButton = $( '#llms-save-button' );
},
/**
* Compiles the template and renders the view
* @return self (for chaining)
* @since 3.16.0
* @version 3.16.0
*/
render: function( view_data ) {
view_data = view_data || {};
this.$el.html( this.template() );
this.render_subviews( _.extend( view_data, {
SidebarView: this,
} ) );
var $el = $( '.wrap.lifterlms.llms-builder' );
if ( 'builder' === this.state ) {
$el.removeClass( 'editor-active' );
} else {
$el.addClass( 'editor-active' );
}
this.$saveButton = this.$el.find( '#llms-save-button' );
return this;
},
/**
* Adds error message element
* @param {[type]} $err [description]
* @since 3.16.0
* @version 3.16.0
*/
add_error: function( $err ) {
this.$el.find( '.llms-builder-save' ).prepend( $err );
},
/**
* Clear any existing error message elements
* @return void
* @since 3.16.0
* @version 3.16.0
*/
clear_errors: function() {
this.$el.find( '.llms-builder-save .llms-builder-error' ).remove();
},
/**
* Update save status button when changes are detected
* runs on an interval to check status of course regularly for unsaved changes
* @param obj sync instance of the sync controller
* @return void
* @since 3.16.0
* @version 3.16.0
*/
changes_made: function( sync ) {
// if a save is currently running, don't do anything
if ( sync.saving ) {
return;
}
if ( sync.has_unsaved_changes ) {
this.$saveButton.attr( 'data-status', 'unsaved' );
this.$saveButton.removeAttr( 'disabled' );
} else {
this.$saveButton.attr( 'data-status', 'saved' );
this.$saveButton.attr( 'disabled', 'disabled' );
}
},
/**
* Exit the builder and return to the WP Course Editor
* @return void
* @since 3.16.7
* @version 3.16.7
*/
exit_now: function() {
window.location.href = window.llms_builder.CourseModel.get_edit_post_link();
},
/**
* Triggered when a heartbeat send event starts containing builder information
* @param obj sync instance of the sync controller
* @return void
* @since 3.16.0
* @version 3.16.0
*/
heartbeat_send: function( sync ) {
if ( sync.saving ) {
LLMS.Spinner.start( this.$saveButton.find( 'i' ), 'small' );
this.$saveButton.attr( {
'data-status': 'saving',
disabled: 'disabled',
} );
}
},
/**
* Triggered when a heartbeat tick completes and updates save status or appends errors
* @param obj sync instance of the sync controller
* @param obj data updated data
* @return void
* @since 3.16.0
* @version 3.16.0
*/
heartbeat_tick: function( sync, data ) {
if ( ! sync.saving ) {
var status = 'saved';
this.clear_errors();
if ( 'error' === data.status ) {
status = 'error';
var msg = data.message,
$err = $( '<ol class="llms-builder-error" />' );
if ( 'object' === typeof msg ) {
_.each( msg, function( txt ) {
$err.append( '<li>' + txt + '</li>' );
} );
} else {
$err = $err.append( '<li>' + msg + '</li>' );;
}
this.add_error( $err );
}
this.$saveButton.find( '.llms-spinning' ).remove();
this.$saveButton.attr( {
'data-status': status,
disabled: 'disabled',
} );
}
},
/**
* Determine if the editor is the currently active state
* @return boolean
* @since 3.16.0
* @version 3.16.0
*/
is_editor_active: function() {
return ( 'editor' === this.state );
},
/**
* Triggered when the editor closes, updates state to be the course builder view
* @return void
* @since 3.16.0
* @version 3.16.0
*/
on_editor_close: function() {
this.set_state( 'builder' ).render();
},
/**
* When a lesson is selected, opens the sidebar to the editor view
* @param obj lesson_model instance of the lesson model which was selected
* @return void
* @since 3.16.0
* @version 3.16.0
*/
on_lesson_select: function( lesson_model, tab ) {
if ( 'editor' !== this.state ) {
this.set_state( 'editor' );
} else {
this.remove_subview( 'editor' );
}
this.render( {
model: lesson_model,
tab: tab,
} );
},
/**
* Save button click event
* @return void
* @since 3.16.0
* @version 3.16.0
*/
save_now: function() {
window.llms_builder.sync.save_now();
},
}, Subview ) );
} );