v.2.3.4 add readymades to themes

system/typemill/Controllers/ControllerWebSystem.php

@@ -74,6 +74,7 @@ class ControllerWebSystem extends Controller
 		$extension 			= new Extension();
 		$themeDefinitions 	= $extension->getThemeDetails($this->settings['theme']);
 		$themeSettings 		= $extension->getThemeSettings($this->settings['themes']);
+		$readymades 		= [];
 
 		# add userroles and other datasets
 		foreach($themeDefinitions as $name => $definitions)
@@ -93,6 +94,11 @@ class ControllerWebSystem extends Controller
 					}
 				}
 			}
+
+			if(isset($definitions['readymades']))
+			{
+				$readymades[$name] = $definitions['readymades'];
+			}
 		}
 
 		$license = [];
@@ -106,9 +112,10 @@ class ControllerWebSystem extends Controller
 			'darkmode'			=> $request->getAttribute('c_darkmode'),
 			'mainnavi'			=> $mainNavigation,
 			'jsdata' 			=> [
-										'systemnavi'		=> $systemNavigation,
+										'systemnavi'	=> $systemNavigation,
 										'settings' 		=> $themeSettings,
 										'definitions'	=> $themeDefinitions,
+										'readymades' 	=> $readymades,
 										'theme'			=> $this->settings['theme'],
 										'license' 		=> $license,
 										'labels'		=> $this->c->get('translations'),

system/typemill/author/js/vue-forms.js

@@ -88,17 +88,25 @@ app.component('component-codearea', {
 			  </div>`,
 	mounted: function()
 	{
-		this.resizeCodearea();
-		this.highlight(this.value);
+		this.initialize()
+
+		eventBus.$on('codeareaupdate', this.initialize );		
 	},
 	methods: {
-		update: function($event, name)
+		initialize()
+		{
+			this.$nextTick(() => {
+				this.highlight(this.value);
+				this.resizeCodearea();
+			});
+		},
+		update($event, name)
 		{
 			this.highlight($event.target.value);
 			this.resizeCodearea();
 			eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
 		},
-		resizeCodearea: function()
+		resizeCodearea()
 		{
 			let codeeditor = this.$refs["editor"];
 
@@ -110,7 +118,7 @@ app.component('component-codearea', {
 				}
 			});
 		},
-		highlight: function(code)
+		highlight(code)
 		{
 			if(code === undefined)
 			{

system/typemill/author/js/vue-themes.js

@@ -35,6 +35,31 @@ const app = Vue.createApp({
 								</div>
 							</div>
 							<form class="w-full p-8" v-if="current == themename">
+								<div v-if="theme.readymades">
+									<fieldset class="flex flex-wrap justify-between block border-2 border-stone-200 p-4 my-8">
+										<legend class="text-lg font-medium">Readymades</legend>
+										<p class="w-full bg-stone-200 mb p-2">Readymades help you to setup your theme with prefilled settings. Load some readymades, check out the frontend and adjust the settings as needed. Find more informations about specific readymades on the <a class="text-teal-500" :href="themeurl(themename)">theme's website.</p>
+										<p class="w-full text-center mb-4 p-2 bg-rose-500 text-white">If you load and save a readymade, then your individual settins will be overwritten and are lost!</p>
+										<ul class="flex flex-wrap justify-between">
+											<li class="w-1/3 p-2 flex">
+												<div class="border-2 border-stone-200">
+													<button class="w-full center bg-stone-200 p-2 hover:bg-stone-300 transition duration-100" @click.prevent="loadReadymade('individual')">Load individual</button>
+													<div class="p-3">
+														<p>Load your stored individual settings.</p>
+													</div>
+												</div>
+											</li>
+											<li class="w-1/3 p-2 flex" v-for="(readysetup,readyname) in theme.readymades">
+												<div class="border-2 border-stone-200">
+													<button class="w-full center bg-stone-200 p-2 hover:bg-stone-300 transition duration-100" @click.prevent="loadReadymade(readyname)">Load {{ readysetup.name }}</button>
+													<div class="p-3">
+														<p>{{ readysetup.description }}</p>
+													</div>
+												</div>
+											</li>
+										</ul>
+									</fieldset>
+								</div>
 								<div v-for="(fieldDefinition, fieldname) in theme.forms.fields">
 									<fieldset class="flex flex-wrap justify-between border-2 border-stone-200 p-4 my-8" v-if="fieldDefinition.type == 'fieldset'">
 										<legend class="text-lg font-medium">{{ fieldDefinition.legend }}</legend>
@@ -89,6 +114,7 @@ const app = Vue.createApp({
 			current: '',
 			formDefinitions: data.definitions,
 			formData: data.settings,
+			readymades: data.readymades,
 			theme: data.theme,
 			license: data.license,
 			message: '',
@@ -140,6 +166,10 @@ const app = Vue.createApp({
 		});
 	},
 	methods: {
+		themeurl(name)
+		{
+			return 'https://themes.typemill.net/' + name;
+		},
 		deactivateThemes()
 		{
 			for (const theme in this.formData) {
@@ -212,6 +242,19 @@ const app = Vue.createApp({
 		{
 			return 'component-'+type;
 		},
+		loadReadymade(name)
+		{
+			if(this.readymades[this.current] && this.readymades[this.current].individual === undefined)
+			{
+				this.readymades[this.current].individual = { 'settings' : this.formData[this.current] };			
+			}
+			
+			if(this.readymades[this.current][name] !== undefined)
+			{
+				this.formData[this.current] = this.readymades[this.current][name].settings;
+				eventBus.$emit('codeareaupdate');
+			}
+		},
 		save()
 		{
 			this.reset();

system/typemill/author/layouts/layoutSystem.twig

@@ -48,6 +48,7 @@
 			const data = {{ jsdata | json_encode() | raw  }};
 			
 		</script>
+		<script src="{{ base_url() }}/system/typemill/author/js/autosize.min.js?v={{ settings.version }}"></script>		
 		<script src="{{ base_url() }}/system/typemill/author/js/axios.min.js?v={{ settings.version }}"></script>
 		<script>
 			const tmaxios = axios.create();