Merge pull request #222 from chamaileon-sdk/rel/rel

feat: new stuff
chamaileon-sdk · Nov 10, 2023 · d43c77c · d43c77c
2 parents d198bc5 + a23f5a4
commit d43c77c
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # Changelog
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [1.10.0] - 2023-10-31
+### Added
+- inline header button config options for editor
 
 ## [1.9.1] - 2023-10-17
 ### Changed

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sdk-playground",
-	"version": "1.9.1",
+	"version": "1.10.0",
 	"private": true,
 	"scripts": {
 		"build": "vue-cli-service build",

diff --git a/src/App.vue b/src/App.vue
@@ -46,7 +46,7 @@ export default {
 	},
 	data() {
 		return {
-			localStorageVersion: "v4",
+			localStorageVersion: "v5",
 		};
 	},
 	computed: {

diff --git a/src/components/AppElements/components/CodeEditor/codeGenerators/emailEditorCodeGenerator.js b/src/components/AppElements/components/CodeEditor/codeGenerators/emailEditorCodeGenerator.js
@@ -213,6 +213,26 @@ const calculateCKTextInsert = (editorConfig, indent) => {
 	return literal;
 };
 
+const calculateInlineHeader = (editorConfig, indent) => {
+	let literal = "";
+	const arr = editorConfig.settings.buttons.inlineHeader;
+
+	if (editorConfig.settings.buttons.inlineHeader.length === 0) return "{},";
+
+	literal += "{\n";
+
+	Object.keys(arr).forEach((c) => {
+		literal += `${"\t".repeat(indent)}${c}: {\n`;
+		literal += `${"\t".repeat(indent + 1)}title: "${arr[c].title}",\n`;
+		literal += `${"\t".repeat(indent + 1)}visible: "${arr[c].visible}",\n`;
+		literal += `${"\t".repeat(indent)}},\n`;
+	});
+
+	literal += `${"\t".repeat(indent - 1)}},`;
+
+	return literal;
+};
+
 const calculateFontFiles = (editorConfig, indent) => {
 	if (Object.keys(editorConfig.settings.fontFiles).length === 0) return "{},";
 
@@ -326,6 +346,7 @@ ${"\t".repeat(indent)}},\n`;
 	string += `${"\t".repeat(indent)}buttons: {
 ${"\t".repeat(indent + 1)}header: ${calculateHeader(editorConfig, indent + 2)}
 ${"\t".repeat(indent + 1)}textInsert: ${calculateTextInsert(editorConfig, indent + 2)}
+${"\t".repeat(indent + 1)}inlineHeader: ${calculateInlineHeader(editorConfig, indent + 2)}
 ${"\t".repeat(indent + 1)}inlineTextInsert: ${calculateInlineTextInsert(editorConfig, indent + 2)}
 ${"\t".repeat(indent + 1)}cKEditorTextInsert: ${calculateCKTextInsert(editorConfig, indent + 2)}
 ${"\t".repeat(indent)}},

diff --git a/src/components/EmailEditor/components/Header.vue b/src/components/EmailEditor/components/Header.vue
@@ -12,6 +12,52 @@
 			<HeaderPreview />
 		</OptionsWrapper>
 
+		<div>
+			<h3>Inline Header Buttons</h3>
+			<p>
+				Hardcoded inline buttons are always visible in the header.
+			</p>
+
+			<OptionsWrapper>
+				<div
+					class="mt-8 list3 rounded"
+					style="max-height: 218px; overflow-y: auto"
+				>
+					<div v-for="(item, ind) in inlineHeaderBtnArr" :key="ind">
+						<ListItem3
+							:id="ind"
+							:title="item.title"
+							:visible="item.visible"
+							:disable-id="true"
+							:hide-delete="true"
+							:hide-drag="true"
+							:show-visible="true"
+							:show-title="true"
+							:hide-label="true"
+							:hide-icon="true"
+							@titleChange="
+								updateInlineHeaderButton({
+									key: ind,
+									target: 'title',
+									content: $event,
+								});
+								updateEditorSettings();
+							"
+							@visibilityChange="
+								updateInlineHeaderButton({
+									key: ind,
+									target: 'visible',
+									content: !item.visible,
+								});
+								updateEditorSettings();
+							"
+						/>
+						<v-divider v-show="ind !== inlineHeaderBtnArr.length - 1" />
+					</div>
+				</div>
+			</OptionsWrapper>
+		</div>
+
 		<h3>Your Buttons and Dropdowns</h3>
 		<p>
 			You can add and customize your buttons and dropdowns below. The icon is
@@ -48,6 +94,7 @@ import AddButton from "../../ViewUtilities/components/AddButton.vue";
 import HeaderPreview from "./Header/HeaderPreview.vue";
 import OptionsWrapper from "../../ViewUtilities/components/OptionWrapper.vue";
 import List6 from "../../Lists/components/List6.vue";
+import ListItem3 from "../../Lists/components/ListItem3.vue";
 import { mapMutations, mapActions } from "vuex";
 
 export default {
@@ -56,6 +103,7 @@ export default {
 		HeaderPreview,
 		OptionsWrapper,
 		List6,
+		ListItem3,
 	},
 	data() {
 		return {
@@ -65,10 +113,21 @@ export default {
 			},
 		};
 	},
+	computed: {
+		inlineHeaderBtnArr: {
+			get() {
+				return this.$store.state.editorConfig.settings.buttons.inlineHeader;
+			},
+			set(val) {
+				this.updateInlineHeaderButton(val);
+			},
+		},
+	},
 	methods: {
 		...mapMutations({
 			addBtn: "addEditorBtn",
 			addDD: "addEditorDropdown",
+			updateInlineHeaderButton: "updateInlineHeaderButton",
 		}),
 		...mapActions({
 			updateEditorSettings: "updateEditorSettings",

diff --git a/src/components/EmailEditor/store/emailEditorConfig.js b/src/components/EmailEditor/store/emailEditorConfig.js
@@ -59,6 +59,24 @@ const getDefaultState = () => {
 					},
 				],
 				textInsert: [],
+				inlineHeader: {
+					undo: {
+						title: "",
+						visible: true,
+					},
+					redo: {
+						title: "",
+						visible: true,
+					},
+					save: {
+						title: "",
+						visible: true,
+					},
+					zoom: {
+						title: "",
+						visible: true,
+					},
+				},
 				inlineTextInsert: {
 					videoAlt: {
 						id: "video-alt",
@@ -86,13 +104,13 @@ const getDefaultState = () => {
 					},
 					dynamicImageAlt: {
 						id: "dynamic-image-alt",
-						label: "",
+						title: "",
 						icon: "code-braces",
 						visible: true,
 					},
 					dynamicImageSrc: {
 						id: "dynamic-image-src",
-						label: "",
+						title: "",
 						icon: "code-braces",
 						visible: true,
 					},
@@ -110,8 +128,8 @@ const getDefaultState = () => {
 					},
 					buttonLink: {
 						id: "button-link",
-						label: "",
-						title: "code-braces",
+						title: "",
+						icon: "code-braces",
 						visible: true,
 					},
 					buttonLinkTitle: {
@@ -312,9 +330,7 @@ export default {
 				payload.obj.index,
 				1,
 				{
-					...state.settings.buttons.header[payload.parentIndex].items[
-						payload.obj.index
-					],
+					...state.settings.buttons.header[payload.parentIndex].items[payload.obj.index],
 					...newObj,
 				},
 			);
@@ -432,6 +448,10 @@ export default {
 			Vue.set(state.settings.buttons.inlineTextInsert[payload.key], payload.target, payload.content);
 		},
 
+		updateInlineHeaderButton(state, payload) {
+			Vue.set(state.settings.buttons.inlineHeader[payload.key], payload.target, payload.content);
+		},
+
 		updateCKEditorTextInsertButton(state, payload) {
 			Vue.set(state.settings.buttons.cKEditorTextInsert[payload.key], payload.target, payload.content);
 		},