Course builder improvements

.changelogs/course-builder-improvements-1.yml

@@ -0,0 +1,4 @@
+significance: minor
+type: added
+entry: Lesson content can be edited within the Course Builder for new lessons,
+  or existing lessons with no existing content.

.changelogs/course-builder-improvements-2.yml

@@ -0,0 +1,3 @@
+significance: patch
+type: fixed
+entry: Close lesson settings panel when lesson has been trashed.

.changelogs/course-builder-improvements.yml

@@ -0,0 +1,9 @@
+significance: minor
+type: changed
+links:
+  - "#3033"
+  - "#3056"
+  - "#3097"
+  - "#2938"
+  - "#3030"
+entry: Various course builder fixes, with quizzes set to published by default.

assets/js/builder/Controllers/Sync.js

@@ -430,6 +430,18 @@ define( [], function() {
 						model.set( 'id', info.id );
 						delete model._unsavedChanges.id;
 					}
+
+					if ( info.permalink ) {
+						model.set( 'permalink', info.permalink );
+					}
+					if ( info.name ) {
+						model.set( 'name', info.name );
+					}
+
+					if ( info.content_added_in_builder ) {
+						model.set( 'content_added_in_builder', info.content_added_in_builder );
+					}
+
 					maybe_restart_tracking( model, info );
 
 					// check children
@@ -460,6 +472,20 @@ define( [], function() {
 							model.set( 'id', info.id );
 							delete model._unsavedChanges.id;
 						}
+
+						// Update permalink and name if provided by the server.
+						if ( info.permalink ) {
+							model.set( 'permalink', info.permalink );
+						}
+						if ( info.name ) {
+							model.set( 'name', info.name );
+						}
+
+						if ( info.content_added_in_builder ) {
+							model.set( 'content_added_in_builder', info.content_added_in_builder );
+						}
+
+
 						maybe_restart_tracking( model, info );
 
 						// check children

assets/js/builder/Models/Lesson.js

@@ -76,6 +76,8 @@ define( [ 'Models/Quiz', 'Models/_Relationships', 'Models/_Utilities', 'Schemas/
 				quiz: {}, // Quiz model/data.
 				quiz_enabled: 'no',
 
+				content_added_in_builder: '',
+
 				_forceSync: false,
 
 			};

assets/js/builder/Models/Quiz.js

@@ -64,7 +64,7 @@ define( [
 				type: 'llms_quiz',
 				lesson_id: '',
 
-				status: 'draft',
+				status: 'publish',
 
 				// editable fields.
 				content: '',

assets/js/builder/Schemas/Lesson.js

@@ -12,15 +12,34 @@ define( [], function() {
 			title: LLMS.l10n.translate( 'General Settings' ),
 			toggleable: true,
 			fields: [
-				[
-					{
-						attribute: 'permalink',
-						id: 'permalink',
-						type: 'permalink',
-			},
-				], [
-					{
-						attribute: 'video_embed',
+			[
+				{
+					attribute: 'permalink',
+					id: 'permalink',
+					type: 'permalink',
+		},
+			], [
+				{
+					attribute: 'content',
+					id: 'content',
+					label: LLMS.l10n.translate( 'Content' ),
+					type: 'editor',
+					condition: function() {
+						return '' === this.get( 'content' ) || 'yes' === this.get( 'content_added_in_builder' );
+					},
+		},
+			], [
+				{
+					id: 'content-page-builder-notice',
+					label: LLMS.l10n.translate( 'Content' ),
+					type: 'page_builder_notice',
+					condition: function() {
+						return '' !== this.get( 'content' ) && 'yes' !== this.get( 'content_added_in_builder' );
+					},
+		},
+			], [
+				{
+					attribute: 'video_embed',
 						id: 'video-embed',
 						label: LLMS.l10n.translate( 'Video Embed URL' ),
 						type: 'video_embed',

assets/js/builder/Views/Assignment.js

@@ -114,6 +114,8 @@ define( [
 					 */
 					this.model.set_parent( this.lesson );
 
+					this.listenTo( this.model, 'change:permalink', this.render_settings );
+
 				}
 
 				this.on( 'model-trashed', this.on_trashed );
@@ -154,6 +156,23 @@ define( [
 
 			},
 
+			/**
+			 * Re-render the settings subview when permalink updates after saving.
+			 *
+			 * @since [version]
+			 *
+			 * @return {Void}
+			 */
+			render_settings: function() {
+
+				var view = this.get_subview( 'settings' );
+				if ( view && view.instance ) {
+					view.instance.render();
+					this.init_selects();
+				}
+
+			},
+
 			/**
 			 * Adds a new assignment to a lesson which currently has no assignment associated with it.
 			 *
@@ -176,6 +195,7 @@ define( [
 					this.lesson.set( 'assignment_enabled', 'yes' );
 					this.lesson.set( 'assignment', this.model );
 
+					this.listenTo( this.model, 'change:permalink', this.render_settings );
 					this.render();
 
 				} else {
@@ -221,6 +241,7 @@ define( [
 				this.lesson.set( 'assignment', assignment );
 				this.model = assignment;
 
+				this.listenTo( this.model, 'change:permalink', this.render_settings );
 				this.render();
 
 			},

assets/js/builder/Views/Course.js

@@ -89,6 +89,12 @@ define( [
 
 			Backbone.pubSub.on( 'lesson-selected', this.active_lesson_change, this );
 
+			// Select the first section by default on load.
+			var firstSection = this.model.get( 'sections' ).first();
+			if ( firstSection ) {
+				this.sectionListView.setSelectedModel( firstSection );
+			}
+
 		},
 
 		/**
@@ -167,8 +173,7 @@ define( [
 		 */
 		on_section_toggle: function( model ) {
 
-			var selected = model.get( '_expanded' ) ? [ model ] : [];
-			this.sectionListView.setSelectedModels( selected );
+			this.sectionListView.setSelectedModel( model );
 
 		},
 

assets/js/builder/Views/Elements.js

@@ -130,7 +130,9 @@ define( [ 'Models/Section', 'Views/Section', 'Models/Lesson', 'Views/Lesson', 'V
 
 			event.preventDefault();
 
-			var pop = new Popover( {
+			var pop, onLessonSelect;
+
+			pop = new Popover( {
 				el: '#llms-existing-lesson',
 				args: {
 					backdrop: true,
@@ -144,13 +146,22 @@ define( [ 'Models/Section', 'Views/Section', 'Models/Lesson', 'Views/Lesson', 'V
 						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.on( 'lesson-search-select', function() {
-				pop.hide()
-			} );
+			Backbone.pubSub.once( 'lesson-search-select', onLessonSelect );
 
 		},
 

assets/js/builder/Views/LessonEditor.js

@@ -76,6 +76,9 @@ define( [
 				var change_events = window.llms.hooks.applyFilters( 'llms_lesson_rerender_change_events', [
 					'change:date_available',
 					'change:drip_method',
+					'change:permalink',
+					'change:content_added_in_builder',
+					'change:name',
 					'change:time_available',
 				] );
 				_.each( change_events, function( event ) {

assets/js/builder/Views/Quiz.js

@@ -125,6 +125,8 @@ define( [
 				this.model.set_parent( this.lesson );
 
 				this.listenTo( this.model, 'change:_points', this.render_points );
+				this.listenTo( this.model, 'change:permalink', this.render_settings );
+				this.listenTo( this.model, 'change:name', this.render_settings );
 
 			}
 
@@ -226,6 +228,27 @@ define( [
 
 		},
 
+		/**
+		 * Re-render the settings subview.
+		 *
+		 * Used when the permalink is updated after saving so the settings
+		 * panel reflects the new permalink without a full re-render.
+		 *
+		 * @since [version]
+		 *
+		 * @return {Void}
+		 */
+		render_settings: function() {
+
+			var view = this.get_subview( 'settings' );
+			if ( view && view.instance ) {
+				view.instance.render();
+				this.init_datepickers();
+				this.init_selects();
+			}
+
+		},
+
 		/**
 		 * Bulk expand / collapse question buttons.
 		 *
@@ -261,6 +284,9 @@ define( [
 			}
 
 			this.model = quiz;
+			this.listenTo( this.model, 'change:_points', this.render_points );
+			this.listenTo( this.model, 'change:permalink', this.render_settings );
+			this.listenTo( this.model, 'change:name', this.render_settings );
 			this.render();
 
 		},
@@ -298,6 +324,9 @@ define( [
 
 			this.lesson.add_quiz( quiz );
 			this.model = this.lesson.get( 'quiz' );
+			this.listenTo( this.model, 'change:_points', this.render_points );
+			this.listenTo( this.model, 'change:permalink', this.render_settings );
+			this.listenTo( this.model, 'change:name', this.render_settings );
 			this.render();
 
 		},

assets/js/builder/Views/Section.js

@@ -43,7 +43,6 @@ define( [
 		 */
 		events: _.defaults( {
 
-			'click': 'select',
 			'click .expand': 'expand',
 			'click .collapse': 'collapse',
 			'click .shift-up--section': 'shift_up',

assets/js/builder/Views/SectionList.js

@@ -16,7 +16,7 @@ define( [ 'Views/Section', 'Views/_Receivable' ], function( SectionView, Receiva
 		el: '#llms-sections',
 
 		events : {
-			'mousedown > li.llms-section > .llms-builder-header .llms-headline' : '_listItem_onMousedown',
+			'mousedown > li.llms-section' : '_listItem_onMousedown',
 			// 'dblclick > li, tbody > tr > td' : '_listItem_onDoubleClick',
 			'click' : '_listBackground_onClick',
 			'click ul.collection-view' : '_listBackground_onClick',

assets/js/builder/Views/_Editable.js

@@ -315,6 +315,8 @@ define( [], function() {
 		 */
 		on_select: function( event ) {
 
+			event.stopPropagation();
+
 			var $el       = $( event.target ),
 				multi     = ( $el.attr( 'multiple' ) ),
 				attr      = $el.attr( 'name' ),

assets/js/builder/Views/_Trashable.js

@@ -49,6 +49,11 @@ define( [], function() {
 				// publish event
 				Backbone.pubSub.trigger( 'model-trashed', this.model );
 
+				// close the editor sidebar if the trashed model is the one currently being edited
+				if ( this.model.get( '_selected' ) ) {
+					Backbone.pubSub.trigger( 'sidebar-editor-close' );
+				}
+
 				// trigger local event so extending views can run other actions where necessary
 				this.trigger( 'model-trashed', this.model );
 

assets/scss/admin/_course-builder.scss

@@ -186,6 +186,9 @@ body.admin_page_llms-course-builder {
 					.llms-lessons { overflow: visible; }
 				}
 				&.selected {
+					border-left: 3px solid $color-brand-blue;
+					box-shadow: 2px 2px 8px rgba( 0, 0, 0, 0.12 );
+					margin-left: -2px;
 					.llms-drag-utility.drag-section {
 						border-color: $color-brand-blue;
 					}

includes/admin/class.llms.admin.builder.php

@@ -1073,6 +1073,17 @@ private static function update_lessons( $lessons, $section ) {
 
 				$skip_props = apply_filters( 'llms_builder_update_lesson_skip_props', array( 'quiz' ) );
 
+				// Don't overwrite content if the content editor doesn't display.
+				if ( ! $created && '' !== $lesson->get( 'content' ) && ! llms_parse_bool( $lesson->get( 'content_added_in_builder' ) ) ) {
+					$skip_props[] = 'content';
+				}
+
+				if ( '' === $lesson->get( 'content' ) && isset( $lesson_data['content'] ) && '' !== $lesson_data['content']
+					&& ! isset( $lesson_data['content_added_in_builder'] ) ) {
+					// We're adding content via the builder for the first time; add a flag saying so.
+					$lesson_data['content_added_in_builder'] = 'yes';
+				}
+
 				// Update all updatable properties.
 				foreach ( $properties as $prop ) {
 					if ( isset( $lesson_data[ $prop ] ) && ! in_array( $prop, $skip_props, true ) ) {
@@ -1097,6 +1108,11 @@ private static function update_lessons( $lessons, $section ) {
 					$lesson->set( 'name', sanitize_title( $lesson_data['title'] ) );
 				}
 
+				// Include permalink, slug, and editor type in the response so the builder can update the model.
+				$res['permalink']                = get_permalink( $lesson->get( 'id' ) );
+				$res['name']                     = $lesson->get( 'name' );
+				$res['content_added_in_builder'] = $lesson->get( 'content_added_in_builder' );
+
 				// Remove revision prevention.
 				remove_filter( 'wp_revisions_to_keep', '__return_zero', 999 );
 
@@ -1253,7 +1269,12 @@ private static function update_quiz( $quiz_data, $lesson ) {
 		// Create a quiz.
 		if ( self::is_temp_id( $quiz_data['id'] ) ) {
 
-			$quiz = new LLMS_Quiz( 'new' );
+			$quiz = new LLMS_Quiz(
+				'new',
+				array(
+					'post_title' => isset( $quiz_data['title'] ) ? $quiz_data['title'] : __( 'New Quiz', 'lifterlms' ),
+				)
+			);
 
 			// Update existing quiz.
 		} else {
@@ -1301,6 +1322,10 @@ private static function update_quiz( $quiz_data, $lesson ) {
 				}
 			}
 
+			// Include permalink and slug in the response so the builder can update the model.
+			$res['permalink'] = get_permalink( $quiz->get( 'id' ) );
+			$res['name']      = $quiz->get( 'name' );
+
 			if ( isset( $quiz_data['questions'] ) && is_array( $quiz_data['questions'] ) ) {
 				$res['questions'] = self::update_questions( $quiz_data['questions'], $quiz );
 			}