Elements.js

/**
 * Sidebar Elements View
 *
 * @since    3.16.0
 * @version  3.16.12
 */
define( [ 'Models/Section', 'Views/Section', 'Models/Lesson', 'Views/Lesson', 'Views/Popover', 'Views/PostSearch' ], function( Section, SectionView, Lesson, LessonView, Popover, LessonSearch ) {

	return Backbone.View.extend( {

		/**
		 * HTML element selector
		 *
		 * @type  {String}
		 */
		el: '#llms-elements',

		events: {
			'click #llms-new-section': 'add_new_section',
			'click #llms-new-lesson': 'add_new_lesson',
			'click #llms-existing-lesson': 'add_existing_lesson',
		},

		/**
		 * Wrapper Tag name
		 *
		 * @type  {String}
		 */
		tagName: 'div',

		/**
		 * Get the underscore template
		 *
		 * @type  {[type]}
		 */
		template: wp.template( 'llms-elements-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.SidebarView = data.SidebarView;

			// watch course sections and enable/disable lesson buttons conditionally
			this.listenTo( this.SidebarView.CourseView.model.get( 'sections' ), 'add', this.maybe_disable_buttons );
			this.listenTo( this.SidebarView.CourseView.model.get( 'sections' ), 'remove', this.maybe_disable_buttons );

		},

		/**
		 * Compiles the template and renders the view
		 *
		 * @return   self (for chaining)
		 * @since    3.16.0
		 * @version  3.16.0
		 */
		render: function() {

			this.$el.html( this.template() );
			this.draggable();
			this.maybe_add_initial_section();

			return this;
		},

		draggable: function() {

			$( '#llms-new-section' ).draggable( {
				appendTo: '#llms-sections',
				cancel: false,
				connectToSortable: '.llms-sections',
				helper: function() {
					return new SectionView( { model: new Section() } ).render().$el;
				},
				start: function() {
					$( '.llms-sections' ).addClass( 'dragging' );
				},
				stop: function() {
					$( '.llms-sections' ).removeClass( 'dragging' );
				},
			} );

			$( '#llms-new-lesson' ).draggable( {
				// appendTo: '#llms-sections .llms-section:first-child .llms-lessons',
				appendTo: '#llms-sections',
				cancel: false,
				connectToSortable: '.llms-lessons',
				helper: function() {
					return new LessonView( { model: new Lesson() } ).render().$el;
				},
				start: function() {

					$( '.llms-lessons' ).addClass( 'dragging' );

				},
				stop: function() {
					$( '.llms-lessons' ).removeClass( 'dragging' );
					$( '.drag-expanded' ).removeClass( '.drag-expanded' );
				},
			} );

		},

		add_new_section: function( event ) {

			event.preventDefault();
			Backbone.pubSub.trigger( 'add-new-section' );
		},

		add_new_lesson: function( event ) {
			event.preventDefault();
			Backbone.pubSub.trigger( 'add-new-lesson' );
		},

		/**
		 * Show the popover to add an existing lessons
		 *
		 * @param    object   event  JS Event Object
		 * @return   void
		 * @since    3.16.12
		 * @version  3.16.12
		 */
		add_existing_lesson: function( event ) {

			event.preventDefault();

			var pop, onLessonSelect;

			pop = new Popover( {
				el: '#llms-existing-lesson',
				args: {
					backdrop: true,
					closeable: true,
					container: '.wrap.lifterlms.llms-builder',
					dismissible: true,
					placement: 'left',
					width: 480,
					title: LLMS.l10n.translate( 'Add Existing Lesson' ),
					content: new LessonSearch( {
						post_type: 'lesson',
						searching_message: LLMS.l10n.translate( 'Search for existing lessons...' ),
					} ).render().$el,
					onHide: function() {
						Backbone.pubSub.off( 'lesson-search-select', onLessonSelect );
					},
				}
			} );

			onLessonSelect = function() {
				pop.hide();

				// Ref #3097 — pop.hide() doesn't always remove the DOM elements.
				$( '.webui-popover' ).remove();
				$( '.webui-popover-backdrop' ).remove();
			};

			pop.show();
			Backbone.pubSub.once( 'lesson-search-select', onLessonSelect );

		},

		/**
		 * Disables lesson add buttons if no sections are available to add a lesson to
		 *
		 * @return   void
		 * @since    3.16.0
		 * @version  3.16.0
		 */
		maybe_add_initial_section: function() {

			var $els = $( '#llms-new-lesson, #llms-existing-lesson' );

			if ( ! this.SidebarView.CourseView.model.get( 'sections' ).length ) {
				Backbone.pubSub.trigger( 'add-new-section' );
				Backbone.pubSub.trigger( 'add-new-lesson' );
				Backbone.pubSub.trigger( 'add-new-lesson' );
				Backbone.pubSub.trigger( 'add-new-lesson' );
			} else {
				$els.removeAttr( 'disabled' );
			}

		},

	} );

} );