Upload 5 files

editor /plugins/custom-code-editor.js

@@ -0,0 +1,154 @@
+function customCodeEditor(editor) {
+	const stylePrefix = editor.getConfig().stylePrefix;
+
+	// let code placeholder
+	let selectedComponent = '';
+
+	// Div set up
+	let codeDivEditor = document.createElement('div');
+	codeDivEditor.setAttribute("class", "gjs-cm-editor-c");
+
+	let codeDiv = document.createElement('div');
+	codeDiv.setAttribute("class", "gjs-cm-editor");
+	codeDiv.setAttribute("id", "gjs-cm-htmlmixed");
+
+	let codeDivTitle = document.createElement('div');
+	codeDivTitle.setAttribute("id", "gjs-cm-title");
+	codeDivTitle.innerHTML = "HTML";
+
+	let codeDivHTML = document.createElement('div');
+	codeDivHTML.setAttribute("id", "gjs-cm-code");
+
+	let btnSave = document.createElement('button');
+	btnSave.innerHTML = 'Apply <span class="dotted-white-bottom-border">HTML</span> Changes';
+	btnSave.className = stylePrefix + 'btn-prim ' + stylePrefix + 'btn-import ' + stylePrefix + 'btn--full';
+
+	codeDiv.appendChild(codeDivTitle);
+	codeDiv.appendChild(codeDivHTML);
+	codeDiv.appendChild(btnSave);
+
+	codeDivEditor.appendChild(codeDiv);
+
+	const command = editor.Commands
+	const modal = editor.Modal;
+
+	// CodeMirror setup
+	var htmlCodeViewer = editor.CodeManager.getViewer('CodeMirror').clone();
+	htmlCodeViewer.set({
+		codeName: 'htmlmixed',
+		readOnly: 0,
+		theme: 'hopscotch',
+		autoBeautify: true,
+		autoCloseTags: true,
+		autoCloseBrackets: true,
+		lineWrapping: true,
+		styleActiveLine: true,
+		smartIndent: true,
+		indentWithTabs: true,
+		tabSize: 3,
+		indentUnit: 3
+	});
+
+	// Save code changes
+	btnSave.onclick = function() {
+		// Get the new component code
+		let htmlComponentCode = htmlCodeViewer.editor.getValue();
+
+		// On the sleced component update the new htmlComponentCode
+		let replacedComponent = selectedComponent.replaceWith(htmlComponentCode.trim());
+		// Now select the replacedComponent
+		editor.select(replacedComponent);
+
+		// Make message
+		let msg = `
+	        <div class="uk-text-left uk-text-truncate uk-animation-slide-top-small">
+	        	<div class="uk-flex uk-flex-middle">
+					<span class="uk-margin-remove uk-text-small">
+						<span uk-icon="icon: check; ratio: 0.95;"></span>
+						<span>You've updated <span class="dotted-white-bottom-border">${replacedComponent.getName()}</span> component.</span>
+					</span>
+				</div>
+			</div>
+		`;
+
+		// Send notification
+		UIkit.notification({
+			message: msg,
+			status: 'primary',
+			pos: 'bottom-right',
+			group: 'message',
+			timeout: 3000
+		});
+
+		// close popup
+		modal.close();
+	};
+
+	// Command for opening the edit
+	command.add('edit-component-code', {
+		run: function(editor, sender) {
+			let component = editor.getSelected();
+
+			// Make sure component is selected
+			if (component == undefined) {
+				console.log("Warnning: No component was selected when executing 'edit-component-code' command");
+				return;
+			}
+
+			if (modal.isOpen())
+				modal.close();
+
+			let htmlViewer = htmlCodeViewer.editor;
+			if (!htmlViewer) {
+				let txtarea = document.createElement('textarea');
+				codeDivHTML.appendChild(txtarea);
+				htmlCodeViewer.init(txtarea);
+				htmlViewer = htmlCodeViewer.editor;
+			}
+
+			let htmlCode = component.toHTML();
+
+			// Set the current component of the component to selectedComponent
+			// so we can compare old and replace with new
+			selectedComponent = component;
+
+			// Now the set the component code
+			htmlCodeViewer.setContent(htmlCode);
+
+			modal.setTitle('Component Code');
+			modal.setContent(codeDivEditor);
+			modal.open();
+
+			htmlViewer.refresh();
+		}
+	});
+
+	// Open component settings on selection
+	editor.on('component:selected', () => {
+		const component = editor.getSelected();
+
+		// Switch view to open-tm (open trait manager)
+		editor.Panels.getButton('views', 'open-tm').set('active', true);
+
+		// Get the trait manger code button existance
+		const tmCodeBtn = component.get('traits').where({
+			name: 'tm-code-btn'
+		});
+
+		// Is the array empty?
+		if (tmCodeBtn.length == 0) {
+
+			// Adding button to trait manager
+			component.addTrait({
+				name: 'tm-code-btn', // Name is how we ref the trait
+				type: 'button',
+				text: 'Edit <span class="dotted-white-bottom-border">' + component.getName() + '</span> Code',
+				full: true, // Full width button
+				label: false,
+				command: 'edit-component-code'
+			}, {
+				at: 0
+			});
+		}
+	});
+};

editor /plugins/custom-page-manager.js

@@ -0,0 +1,20 @@
+function customPageManager(editor) {
+	const panelManager = editor.Panels;
+
+	var pages = {
+		current: 1,
+		pages: [
+			{ components: [], style: [] },
+		]
+	}
+
+	// Adding new button
+	panelManager.addButton('views', [{
+		id: 'manage-pages',
+		className: 'gjs-pn-btn',
+		command: '',
+		active: false,
+		label: `<span uk-icon="list" uk-tooltip="title: Manage Pages; pos: right"></span>`
+	}]);
+
+}

editor /plugins/customize-devices.js

@@ -0,0 +1,30 @@
+function customizeDevices(editor) {
+	const panelManager = editor.Panels;
+
+	// Hide default devices
+	editor.getConfig().showDevices = 0;
+
+	// Device icons manager
+	panelManager.addPanel({ id: "devices-c" }).get("buttons").add([
+		{
+			id: "set-device-desktop",
+			command: function(e) { return e.setDevice("Desktop") },
+			className: "gjs-dekstop-device",
+			active: true,
+			label: `<span uk-icon="icon: desktop; ratio: 1" uk-tooltip="title: Desktop Layout; pos: top"></span>`
+		},
+		{
+			id: "set-device-tablet",
+			command: function(e) { return e.setDevice("Tablet") },
+			className: "gjs-tablet-device",
+			label: `<span uk-icon="icon: tablet; ratio: 1" uk-tooltip="title: Tablet Layout; pos: top"></span>`
+		},
+		{
+			id: "set-device-mobile",
+			command: function(e) { return e.setDevice("Mobile portrait") },
+			className: "gjs-mobile-portrait-device",
+			label: `<span uk-icon="icon: phone; ratio: 1" uk-tooltip="title: Phone Layout; pos: top"></span>`
+		},
+	]);
+
+}

editor /plugins/customize-options.js

@@ -0,0 +1,77 @@
+function customizeOptions(editor) {
+	const panelManager = editor.Panels;
+	const command = editor.Commands
+
+	// Command for opening the edit
+	command.add('custom-clear-canvas', {
+		run: function(editor, sender) {
+			// Clear components
+			editor.DomComponents.clear();
+			// Clear styles
+			editor.CssComposer.clear();
+			// Clear undo history
+			editor.UndoManager.clear();
+
+			// Make message
+			let msg = `
+		        <div class="uk-text-left uk-text-truncate uk-animation-slide-top-small">
+		        	<div class="uk-flex uk-flex-middle">
+						<span class="uk-margin-remove uk-text-small">
+							<span uk-icon="icon: check; ratio: 0.95;"></span>
+							<span>You've cleared your canvas.</span>
+						</span>
+					</div>
+				</div>
+			`;
+
+			// Send notification
+			UIkit.notification({
+				message: msg,
+				status: 'primary',
+				pos: 'bottom-right',
+				group: 'message',
+				timeout: 3000
+			});
+		}
+	});
+
+	// Options button manager
+	panelManager.getButton('options', 'sw-visibility').set({
+		id: "sw-visibility",
+		className: 'gjs-pn-btn',
+		command: "sw-visibility",
+		active: true,
+		label: `<span uk-icon="thumbnails" uk-tooltip="title: Guide Lines; pos: bottom"></span>`
+	});
+	panelManager.getButton('options', 'preview').set({
+		id: "preview",
+		className: 'gjs-pn-btn',
+		command: "preview",
+		active: false,
+		label: `<span uk-icon="push" uk-tooltip="title: Preview; pos: bottom"></span>`
+	});
+	panelManager.getButton('options', 'fullscreen').set({
+		id: "fullscreen",
+		className: 'gjs-pn-btn',
+		command: "fullscreen",
+		active: false,
+		label: `<span uk-icon="expand" uk-tooltip="title: Set Fullscreen; pos: bottom"></span>`
+	});
+	panelManager.getButton('options', 'export-template').set({
+		id: "export-template",
+		className: 'gjs-pn-btn',
+		command: "export-template",
+		active: false,
+		label: `<span uk-icon="code" uk-tooltip="title: Show Code; pos: bottom"></span>`
+	});
+
+	// Adding new button
+	panelManager.addButton('options', [{
+		id: 'clear-canvas',
+		className: 'gjs-pn-btn',
+		command: 'custom-clear-canvas',
+		active: false,
+		label: `<span uk-icon="trash" uk-tooltip="title: Clear Canvas; pos: bottom"></span>`
+	}, ]);
+
+}

editor /plugins/customize-views.js

@@ -0,0 +1,45 @@
+function customizeViews(editor) {
+	const panelManager = editor.Panels;
+
+	// Views button manager
+	panelManager.getButton('views', 'open-sm').set({
+		id: "open-sm",
+		className: 'gjs-pn-btn',
+		command: "open-sm",
+		active: true,
+		attributes: {
+			title: "Open Style Manager"
+		},
+		label: `<span uk-icon="paint-bucket" uk-tooltip="title: Customization; pos: right"></span>`
+	});
+	panelManager.getButton('views', 'open-tm').set({
+		id: "open-tm",
+		className: 'gjs-pn-btn',
+		command: "open-tm",
+		active: false,
+		attributes: {
+			title: "Open Settings"
+		},
+		label: `<span uk-icon="settings" uk-tooltip="title: Settings; pos: right"></span>`
+	});
+	panelManager.getButton('views', 'open-layers').set({
+		id: "open-layers",
+		className: 'gjs-pn-btn',
+		command: "open-layers",
+		active: false,
+		attributes: {
+			title: "Open Layers"
+		},
+		label: `<span uk-icon="table" uk-tooltip="title: Layers; pos: right"></span>`
+	});
+	panelManager.getButton('views', 'open-blocks').set({
+		id: "open-blocks",
+		className: 'gjs-pn-btn',
+		command: "open-blocks",
+		active: false,
+		attributes: {
+			title: "Open Blocks"
+		},
+		label: `<span uk-icon="grid" uk-tooltip="title: Blocks; pos: right"></span>`
+	});
+}