maglevcms 1.2.2 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 248515cbe62cad407de20c6cffc54b333b764b997051916dcc25db54744536ae
-  data.tar.gz: 1d7b14f11bde0e7efb1eb88b8804dc5028b3d55da858e963e538c92640377b5c
+  metadata.gz: 03a2b641a732256c52996191d8b8b5acd6fade31e3da46c7400b4ddd19d572b8
+  data.tar.gz: 7707349dac583ee782baf2b5eb6e2b6c4007d0935529c301376a8876a6a985f4
 SHA512:
-  metadata.gz: b3409a4c7c5712a9e7bfa0541ca7d683e3ce17ace4a0113f9eaafeb2c3ad0d9a24a5bc07717f6ec2b5942a94539ebb9312a0cf18f3f9c9ec6bf1516e9b560dce
-  data.tar.gz: a72a1e948ef6d9ad0003c987a745959a2da567ad78d0db890e1b207f45c4a50d3c86629537bec27bd891d6f4e48f333a0cef22b9bfa3c72168ec64b9a3a5966e
+  metadata.gz: 48519ed7bfc8b5281297b2996d92a11fa0f9114266e577d05953f507006be5a64d0619ee2cce6c56471c0c4776f3d0706822860f1161163a6ab52ec1e17add3a
+  data.tar.gz: ef616f5afbf2f8a25ffdf59cbb75cc72b0276f723ed68eca78bcc8c6bc9781fa54833dd7617a322a1f704807a4b06cf6d4c2e90bcc2058dcf1bd6c3f2a522fec

data/app/components/maglev/content/builder.rb

@@ -11,7 +11,9 @@ module Maglev
         color: Maglev::Content::Color,
         select: Maglev::Content::Select,
         collection_item: Maglev::Content::CollectionItem,
-        icon: Maglev::Content::Icon
+        icon: Maglev::Content::Icon,
+        divider: Maglev::Content::Void,
+        hint: Maglev::Content::Void
       }.freeze
 
       def build(scope, content, setting)

data/app/components/maglev/content/checkbox.rb

@@ -4,7 +4,7 @@ module Maglev
   module Content
     class Checkbox < Base
       def true?
-        !!content
+        !!cast_content
       end
 
       def false?
@@ -14,6 +14,12 @@ module Maglev
       def to_s
         content
       end
+
+      private
+
+      def cast_content
+        @cast_content ||= ActiveModel::Type::Boolean.new.cast(content)
+      end
     end
   end
 end

data/app/components/maglev/content/void.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Content
+    class Void < Base
+      def value
+        ''
+      end
+    end
+  end
+end

data/app/controllers/concerns/maglev/fetchers_concern.rb

@@ -30,7 +30,8 @@ module Maglev
         path: maglev_page_path_from_params,
         locale: content_locale,
         default_locale: default_content_locale,
-        fallback_to_default_locale: fallback_to_default_locale
+        fallback_to_default_locale: fallback_to_default_locale,
+        only_visible: maglev_rendering_mode == :live
       )
     end
 

data/app/controllers/concerns/maglev/rendering_concern.rb

@@ -11,8 +11,6 @@ module Maglev
     private
 
     def render_maglev_page
-      raise ActionController::UnknownFormat, 'Maglev renders HTML pages only' if request.format != 'html'
-
       fetch_maglev_page_content
 
       verify_canonical_path and return

data/app/controllers/maglev/editor_controller.rb

@@ -42,5 +42,9 @@ module Maglev
     def fallback_to_default_locale
       true
     end
+
+    def maglev_rendering_mode
+      :editor
+    end
   end
 end

data/app/frontend/admin/controllers/screenshot_controller.js

@@ -21,7 +21,7 @@ export default class extends Controller {
       '[data-maglev-dropzone]',
     )
     this.sourceTarget.contentWindow
-      .html2canvas(realSource, { allowTaint: true, logging: true })
+      .html2canvas(realSource, { allowTaint: true, logging: true, useCORS: true })
       .then((canvas) => {
         this.outputTarget.src = canvas.toDataURL() // for debugging purpose
         axios

data/app/frontend/editor/components/dynamic-form/dynamic-input.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <text-input
-      :label="setting.label"
+      :label="label"
       :name="setting.id"
       :isFocused="isFocused"
       @blur="$emit('blur')"
@@ -13,7 +13,7 @@
       "
     />
     <textarea-input
-      :label="setting.label"
+      :label="label"
       :name="setting.id"
       :isFocused="isFocused"
       :rows="options.nbRows"
@@ -24,7 +24,7 @@
       "
     />
     <rich-text-input
-      :label="setting.label"
+      :label="label"
       :name="setting.id"
       :isFocused="isFocused"
       :lineBreak="options.lineBreak"
@@ -35,27 +35,27 @@
       v-if="setting.type == 'text' && options.html"
     />
     <image-input
-      :label="setting.label"
+      :label="label"
       :name="setting.id"
       :isFocused="isFocused"
       v-model="inputValue"
       v-if="setting.type == 'image'"
     />
     <icon-input
-      :label="setting.label"
+      :label="label"
       :name="setting.id"
       :isFocused="isFocused"
       v-model="inputValue"
       v-if="setting.type == 'icon'"
     />
     <checkbox-input
-      :label="setting.label"
+      :label="label"
       :name="setting.id"
       v-model="inputValue"
       v-if="setting.type == 'checkbox'"
     />
     <link-input
-      :label="setting.label"
+      :label="label"
       :name="setting.id"
       :isFocused="isFocused"
       :withText="options.withText"
@@ -63,26 +63,37 @@
       v-if="setting.type == 'link'"
     />
     <color-input
-      :label="setting.label"
+      :label="label"
       :name="setting.id"
       v-model="inputValue"
       :presets="options.presets"
       v-if="setting.type == 'color'"
     />
     <simple-select
-      :label="setting.label"
+      :label="label"
       :name="setting.id"
       v-model="inputValue"
       :selectOptions="options.selectOptions"
       v-if="setting.type == 'select'"
     />
     <collection-item-input
-      :label="setting.label"
+      :label="label"
       :name="setting.id"
       v-model="inputValue"
       :collection-id="options.collectionId"
       v-if="setting.type == 'collection_item'"
     />
+
+    <divider 
+      :text="label"
+      :withHint="options.withHint"
+      v-if="setting.type == 'divider'"
+    />
+
+    <hint 
+      :text="label"
+      v-if="setting.type == 'hint'"
+    />
   </div>
 </template>
 
@@ -93,8 +104,17 @@ export default {
     setting: { type: Object, default: () => ({ type: 'text' }) },
     content: { type: Array, required: true },
     isFocused: { type: Boolean, default: false },
+    i18nScope: { type: String, required: false }
   },
   computed: {
+    label() {
+      // i18n key examples: 
+      // - themes.simple.style.settings.main_color
+      // - themes.simple.sections.navbar_01.settings.title
+      const i18nKey = `${this.i18nScope}.${this.setting.id}`
+      const translation = !this.isBlank(this.i18nScope) ? this.$st(i18nKey) : null
+      return translation || this.setting.label
+    },
     options() {
       return this.setting.options
     },

data/app/frontend/editor/components/dynamic-form/index.vue

@@ -7,6 +7,7 @@
       :setting="setting"
       :content="content"
       :isFocused="focusedSetting === setting.id"
+      :i18nScope="i18nScope"
       @blur="$emit('blur')"
       @change="onChange"
     />
@@ -24,6 +25,7 @@ export default {
     settings: { type: Array, default: () => [] },
     content: { type: Array, default: () => [] },
     focusedSetting: { type: String, default: undefined },
+    i18nScope: { type: String, required: false }
   },
   methods: {
     onChange(change) {

data/app/frontend/editor/components/kit/color-input/core-input.vue

@@ -76,7 +76,7 @@ export default {
   },
   methods: {
     updateInput(event) {
-      var value = event.target.value
+      var value = event.target.value.replace('#', '')
       if (value.length > 0) value = `#${value}`
       this.$emit('input', value)
     }

data/app/frontend/editor/components/kit/color-input.vue

@@ -5,7 +5,7 @@
       :for="name"
       v-if="showLabel"
     >
-      <span>{{ label }}</span>
+      <span class="pr-2">{{ label }}</span>
       <core-input :presets="presets" v-model="updatableValue" />
     </label>
   </div>

data/app/frontend/editor/components/kit/divider.vue

@@ -0,0 +1,22 @@
+<template>
+  <div :class="{ 'pt-4': withHint, 'pt-4 pb-2': !withHint }">
+    <div class="relative">
+      <div class="absolute inset-0 flex items-center" aria-hidden="true">
+        <div class="w-full border-t border-gray-200"></div>
+      </div>
+      <div class="relative flex justify-center">
+        <span class="bg-white px-3 leading-6 text-gray-800">{{ text }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Divider',
+  props: {
+    text: { type: String, default: 'Text goes here' },
+    withHint: { type: Boolean, default: false }
+  }
+}
+</script>

data/app/frontend/editor/components/kit/hint.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="text-gray-600 text-sm">{{ text }}</div>
+</template>
+
+<script>
+export default {
+  name: 'Hint',
+  props: {
+    text: { type: String, default: 'Hint goes here' },
+  }
+}
+</script>

data/app/frontend/editor/components/kit/index.js

@@ -23,6 +23,8 @@ import ColorInput from './color-input.vue'
 import SimpleSelect from './simple-select.vue'
 import CollectionItemInput from './collection-item-input.vue'
 import ListItemButton from './list-item-button.vue'
+import Divider from './divider.vue'
+import Hint from './hint.vue'
 
 Vue.component('icon', Icon)
 Vue.component('v-popoper', VPopover)
@@ -48,3 +50,5 @@ Vue.component('color-input', ColorInput)
 Vue.component('simple-select', SimpleSelect)
 Vue.component('collection-item-input', CollectionItemInput)
 Vue.component('list-item-button', ListItemButton)
+Vue.component('divider', Divider)
+Vue.component('hint', Hint)

data/app/frontend/editor/components/page/form/seo.vue

@@ -86,7 +86,7 @@ export default {
         return { url: this.page.ogImageUrl }
       },
       set(ogImage) {
-        this.$emit('on-change', { ogImageUrl: ogImage.url })
+        this.$emit('on-change', { ogImageUrl: ogImage?.url ?? null })
       },
     },
   },

data/app/frontend/editor/components/section-block-pane/setting-list.vue

@@ -5,6 +5,7 @@
     :settings="sectionBlockSettings"
     :content="currentSectionBlockContent"
     :focusedSetting="settingId"
+    :i18nScope="i18nScope"
     @blur="onBlur"
     @change="updateSectionBlockContent"
   />
@@ -31,6 +32,9 @@ export default {
             this.currentSectionBlockContent,
           )
     },
+    i18nScope() {
+      return `${this.currentSectionBlockI18nScope}.settings`
+    }
   },
   methods: {
     ...mapActions(['updateSectionBlockContent']),

data/app/frontend/editor/components/section-highlighter/top-left-actions.vue

@@ -4,7 +4,7 @@
       class="bg-editor-primary text-white py-1 px-3 rounded-l-2xl text-xs flex items-center"
       :class="{ 'rounded-r-2xl': !displayMoveArrows }"
     >
-      <span>{{ hoveredSection.name }}</span>
+      <span>{{ name }}</span>
     </div>
     <button
       type="button"
@@ -34,6 +34,12 @@ export default {
     hoveredSection: { type: Object },
   },
   computed: {
+    name() {
+      return this.$st(`${this.currentI18nScope}.sections.${this.sectionType}.name`) || this.hoveredSection.name
+    },
+    sectionType() {
+      return this.hoveredSection.definition.id
+    },
     displayMoveArrows() {
       return !this.currentSection && !this.hoveredSection.definition.insertAt
     },

data/app/frontend/editor/components/section-list/list-item.vue

@@ -6,7 +6,7 @@
       :to="{ name: 'editSection', params: { sectionId: section.id } }"
       class="flex items-center"
     >
-      <span>{{ section.name | truncate(40) }}</span>
+      <span>{{ name | truncate(40) }}</span>
     </router-link>
     <confirmation-button @confirm="removeSection(section.id)" v-on="$listeners">
       <button
@@ -26,6 +26,11 @@ export default {
   props: {
     section: { type: Object, required: true },
   },
+  computed: {
+    name() {
+      return this.$st(`${this.currentI18nScope}.sections.${this.section.type}.name`) || this.section.name
+    }
+  },
   methods: {
     ...mapActions(['removeSection']),
   },

data/app/frontend/editor/components/section-pane/index.vue

@@ -62,6 +62,7 @@ export default {
     },
     blocksLabel() {
       return (
+        this.$st(`${this.currentSectionI18nScope}.blocks.label`) ||
         this.currentSectionDefinition.blocksLabel ||
         this.$t('sectionPane.tabs.blocks')
       )
@@ -70,7 +71,7 @@ export default {
       return this.currentSectionDefinition.blocksPresentation === 'tree'
         ? BlockTree
         : BlockList
-    },
+    }
   },
   methods: {
     findTabIndexFromRoute() {

data/app/frontend/editor/components/section-pane/setting-list.vue

@@ -5,6 +5,7 @@
     :settings="sectionSettings"
     :content="currentSectionContent"
     :focusedSetting="settingId"
+    :i18nScope="i18nScope"
     @blur="onBlur"
     @change="updateSectionContent"
   />
@@ -31,6 +32,9 @@ export default {
             this.currentSectionContent,
           )
     },
+    i18nScope() {
+      return `${this.currentSectionI18nScope}.settings`
+    }
   },
   methods: {
     ...mapActions(['updateSectionContent']),

data/app/frontend/editor/components/style-pane/index.vue

@@ -5,6 +5,7 @@
         parentKey="style"
         :settings="styleSettings"
         :content="style"
+        :i18nScope="i18nScope"
         @change="onChange"
       />
     </div>
@@ -28,6 +29,9 @@ export default {
     styleSettings() {
       return this.currentTheme.styleSettings
     },
+    i18nScope() {
+      return `${this.currentStyleI18nScope}.settings`
+    }
   },
   methods: {
     ...mapActions(['previewStyle']),

data/app/frontend/editor/locales/editor.fr.json

@@ -24,6 +24,7 @@
   "sidebarNav": {
     "addNewSectionTooltip": "Ajouter une nouvelle section au bas de la page",
     "managePageSectionsTooltip": "Gérer les sections de la page",
+    "editStyleTooltip": "Modifier le style du site",
     "openImageLibraryTooltip": "Ouvrir la galerie d'images",
     "leaveEditorTooltip": "Retour vers l'application principale"
   },
@@ -103,7 +104,7 @@
     "tabs": {
       "settings": "Contenu",
       "blocks": "Blocs",
-      "advanced": "Paramètres avancés"
+      "advanced": "Paramètres"
     },
     "blockList": {
       "add": "Ajouter un nouvel élément"
@@ -112,12 +113,17 @@
   "sectionBlockPane": {
     "tabs": {
       "settings": "Contenu",
-      "advanced": "Paramètres avancés"
+      "advanced": "Paramètres"
     }
   },
   "themeSectionList": {
     "emptyCategory": "Aucune section"
   },
+  "style": {
+    "edit": {
+      "title": "Styler site"
+    }
+  },
   "imageInput": {
     "addButton": "Ajouter une image",
     "replaceButton": "Remplacer l'image",