retold-content-system 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "retold-content-system",
-	"version": "1.0.9",
+	"version": "1.0.10",
 	"description": "Retold Content System - Markdown content viewer and editor",
 	"main": "source/Pict-ContentSystem-Bundle.js",
 	"bin": {

package/source/Pict-Application-ContentEditor.js

@@ -117,7 +117,7 @@ class ContentEditorApplication extends libPictApplication
 			// Settings
 			AutoSegmentMarkdown: false,
 			AutoSegmentDepth: 1,
-			AutoContentPreview: true,
+			ContentPreviewMode: 'off',
 			MarkdownEditingControls: true,
 			MarkdownWordWrap: true,
 			CodeWordWrap: false,
@@ -738,19 +738,8 @@ class ContentEditorApplication extends libPictApplication
 					tmpEditorView.render();
 					tmpEditorView.marshalToView();
 
-					// Always ensure the global preview class is clear so
-					// per-segment toggles work.
-					tmpEditorView.togglePreview(true);
-
-					// Set per-segment preview visibility based on the
-					// Auto Content Preview setting.  We must always loop
-					// to clear any stale _hiddenPreviewSegments state
-					// from previous file loads.
-					let tmpShowPreviews = !!tmpSelf.pict.AppData.ContentEditor.AutoContentPreview;
-					for (let tmpIdx in tmpEditorView._segmentEditors)
-					{
-						tmpEditorView.toggleSegmentPreview(parseInt(tmpIdx, 10), tmpShowPreviews);
-					}
+					// Apply the Content Preview Mode setting
+					tmpEditorView.setPreviewMode(tmpSelf.pict.AppData.ContentEditor.ContentPreviewMode || 'off');
 
 					// Apply the Editing Controls setting (line numbers
 					// and right sidebar) via the library's toggleControls.
@@ -1426,7 +1415,7 @@ class ContentEditorApplication extends libPictApplication
 		{
 			AutoSegmentMarkdown: tmpSettings.AutoSegmentMarkdown,
 			AutoSegmentDepth: tmpSettings.AutoSegmentDepth,
-			AutoContentPreview: tmpSettings.AutoContentPreview,
+			ContentPreviewMode: tmpSettings.ContentPreviewMode,
 			MarkdownEditingControls: tmpSettings.MarkdownEditingControls,
 			MarkdownWordWrap: tmpSettings.MarkdownWordWrap,
 			CodeWordWrap: tmpSettings.CodeWordWrap,
@@ -1479,9 +1468,14 @@ class ContentEditorApplication extends libPictApplication
 			{
 				tmpSettings.AutoSegmentDepth = tmpStored.AutoSegmentDepth;
 			}
-			if (typeof (tmpStored.AutoContentPreview) === 'boolean')
+			if (typeof (tmpStored.ContentPreviewMode) === 'string')
+			{
+				tmpSettings.ContentPreviewMode = tmpStored.ContentPreviewMode;
+			}
+			else if (typeof (tmpStored.AutoContentPreview) === 'boolean')
 			{
-				tmpSettings.AutoContentPreview = tmpStored.AutoContentPreview;
+				// Backward compat: migrate old boolean setting
+				tmpSettings.ContentPreviewMode = tmpStored.AutoContentPreview ? 'bottom' : 'off';
 			}
 			if (typeof (tmpStored.MarkdownEditingControls) === 'boolean')
 			{

package/source/views/PictView-Editor-SettingsPanel.js

@@ -274,11 +274,15 @@ const _ViewConfiguration =
 						onchange="{~P~}.views['ContentEditor-SettingsPanel'].onEditingControlsChanged(this.checked)">
 				</div>
 				<div class="content-editor-settings-row">
-					<label class="content-editor-settings-checkbox-label"
-						for="ContentEditor-Setting-AutoPreview">Auto Content Preview</label>
-					<input type="checkbox" class="content-editor-settings-checkbox"
-						id="ContentEditor-Setting-AutoPreview"
-						onchange="{~P~}.views['ContentEditor-SettingsPanel'].onAutoPreviewChanged(this.checked)">
+					<span class="content-editor-settings-select-label">Content Preview</span>
+					<select class="content-editor-settings-select"
+						id="ContentEditor-Setting-ContentPreviewMode"
+						onchange="{~P~}.views['ContentEditor-SettingsPanel'].onContentPreviewModeChanged(this.value)">
+						<option value="off">Off</option>
+						<option value="bottom">Underneath</option>
+						<option value="side">Beside</option>
+						<option value="tabbed">Tab</option>
+					</select>
 				</div>
 				<div class="content-editor-settings-row">
 					<label class="content-editor-settings-checkbox-label"
@@ -387,10 +391,10 @@ class ContentEditorSettingsPanelView extends libPictView
 			tmpControlsCheckbox[0].checked = tmpSettings.MarkdownEditingControls;
 		}
 
-		let tmpPreviewCheckbox = this.pict.ContentAssignment.getElement('#ContentEditor-Setting-AutoPreview');
-		if (tmpPreviewCheckbox && tmpPreviewCheckbox[0])
+		let tmpPreviewSelect = this.pict.ContentAssignment.getElement('#ContentEditor-Setting-ContentPreviewMode');
+		if (tmpPreviewSelect && tmpPreviewSelect[0])
 		{
-			tmpPreviewCheckbox[0].checked = tmpSettings.AutoContentPreview;
+			tmpPreviewSelect[0].value = tmpSettings.ContentPreviewMode || 'off';
 		}
 
 		let tmpSegmentCheckbox = this.pict.ContentAssignment.getElement('#ContentEditor-Setting-AutoSegment');
@@ -535,32 +539,15 @@ class ContentEditorSettingsPanelView extends libPictView
 		}
 	}
 
-	onAutoPreviewChanged(pChecked)
+	onContentPreviewModeChanged(pMode)
 	{
-		this.pict.AppData.ContentEditor.AutoContentPreview = pChecked;
+		this.pict.AppData.ContentEditor.ContentPreviewMode = pMode;
 		this.pict.PictApplication.saveSettings();
 
 		let tmpEditorView = this.pict.views['ContentEditor-MarkdownEditor'];
 		if (tmpEditorView && this.pict.AppData.ContentEditor.ActiveEditor === 'markdown')
 		{
-			if (pChecked)
-			{
-				// Turning ON: clear global hidden class and show all previews
-				tmpEditorView.togglePreview(true);
-				for (let tmpIdx in tmpEditorView._segmentEditors)
-				{
-					tmpEditorView.toggleSegmentPreview(parseInt(tmpIdx, 10), true);
-				}
-			}
-			else
-			{
-				// Turning OFF: hide each segment individually so
-				// per-segment toggle buttons still work
-				for (let tmpIdx in tmpEditorView._segmentEditors)
-				{
-					tmpEditorView.toggleSegmentPreview(parseInt(tmpIdx, 10), false);
-				}
-			}
+			tmpEditorView.setPreviewMode(pMode);
 		}
 	}