maglevcms 1.1.6 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f0d746d7653900e39f4c0a7b45ba3503a5688d37cc45f242943f7187729f607f
-  data.tar.gz: 4d5a6ff5eab5449ada366810c2ffedbde9466600faf1d30c8c4b6c906db24510
+  metadata.gz: b23017be4bbbf4d06d99cf0f94ede1136e0e0ea343e0fbbef94edb6dc4d112d4
+  data.tar.gz: b6e5d107a2ea7a18091ffdd084a3fed631d0726fe845e0ac0f7100f1fc3e2b60
 SHA512:
-  metadata.gz: 6395309dbf50aed228ef2143e48bc4fb34f3184f715d9b70b478487567c56485483253b8e66a951a512e592917732be376815f78591a6fc02fae3e730bede303
-  data.tar.gz: 7fd1217aae956ca2b19228fe83c815f9905e18020047db71feccb15c20662ff1b720d9af2dd54874e0217e7ed0f2ef90235e49444c130b6bac24d7b27f92c715
+  metadata.gz: 1b579c11945ca3c28bb48f59d7efc0ea70a6d1608b7275cd507c3044cf30446bf3a342163ad9c468f0f3cf690386be137401e34f6426bbc016b4306af2d701ff
+  data.tar.gz: d4257dfeb8ef1a210fc9147325e4cae5517c4a5f676b7c27637353573ee9c4ba315283edc4b0c97253d06b6327ba48b4fbf25199b4247f21913482b17f53777a

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

@@ -3,6 +3,8 @@
 module Maglev
   module Content
     class Image < Base
+      def_delegators :url, :present?
+
       def url
         return image[:url] if asset_host.nil? || !hosted_on_platform?
 

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

@@ -80,6 +80,7 @@ module Maglev
       # we drop the path after the "_" segment
       params[:path].split('/').reduce([]) do |memo, segment|
         return memo if segment == '_'
+
         memo.push(segment)
       end
     end

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

@@ -15,6 +15,8 @@ module Maglev
     private
 
     def fetch_maglev_site_scoped_sections
+      return if within_maglev_engine?
+
       fetch_maglev_site
       fetch_maglev_theme
       fetch_maglev_dummy_page
@@ -24,5 +26,9 @@ module Maglev
     def fetch_maglev_dummy_page
       @fetch_maglev_page = ::Maglev::Page.new(title: 'DummyPage', sections: fetch_maglev_site.sections)
     end
+
+    def within_maglev_engine?
+      controller_path.starts_with?('maglev/')
+    end
   end
 end

data/app/controllers/maglev/sitemap_controller.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Maglev
+  class SitemapController < ApplicationController
+    include Maglev::FetchersConcern
+    include Maglev::ServicesConcern
+    include Maglev::ContentLocaleConcern
+
+    before_action :verify_request_format!
+    before_action :fetch_maglev_site
+
+    def index
+      @host = request.protocol + fetch_host
+      @pages = fetch_pages
+    end
+
+    protected
+
+    def fetch_host
+      request.headers['HTTP_X_MAGLEV_HOST'] || request.host
+    end
+
+    def fetch_pages
+      Maglev::Page.all.visible
+    end
+
+    def verify_request_format!
+      raise ActionController::UnknownFormat, 'Sitemap is only rendered as XML' if request.format != 'xml'
+    end
+  end
+end

data/app/frontend/editor/assets/remixicons/ri-palette-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C17.5222 2 22 5.97778 22 10.8889C22 13.9556 19.5111 16.4444 16.4444 16.4444H14.4778C13.5556 16.4444 12.8111 17.1889 12.8111 18.1111C12.8111 18.5333 12.9778 18.9222 13.2333 19.2111C13.5 19.5111 13.6667 19.9 13.6667 20.3333C13.6667 21.2556 12.9 22 12 22C6.47778 22 2 17.5222 2 12C2 6.47778 6.47778 2 12 2ZM10.8111 18.1111C10.8111 16.0843 12.451 14.4444 14.4778 14.4444H16.4444C18.4065 14.4444 20 12.851 20 10.8889C20 7.1392 16.4677 4 12 4C7.58235 4 4 7.58235 4 12C4 16.19 7.2226 19.6285 11.324 19.9718C10.9948 19.4168 10.8111 18.7761 10.8111 18.1111ZM7.5 12C6.67157 12 6 11.3284 6 10.5C6 9.67157 6.67157 9 7.5 9C8.32843 9 9 9.67157 9 10.5C9 11.3284 8.32843 12 7.5 12ZM16.5 12C15.6716 12 15 11.3284 15 10.5C15 9.67157 15.6716 9 16.5 9C17.3284 9 18 9.67157 18 10.5C18 11.3284 17.3284 12 16.5 12ZM12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5C13.5 8.32843 12.8284 9 12 9Z"></path></svg>

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

@@ -62,7 +62,7 @@
       v-model="inputValue"
       v-if="setting.type == 'link'"
     />
-    <color-picker
+    <color-input
       :label="setting.label"
       :name="setting.id"
       v-model="inputValue"
@@ -80,6 +80,7 @@
       :label="setting.label"
       :name="setting.id"
       v-model="inputValue"
+      :collection-id="options.collectionId"
       v-if="setting.type == 'collection_item'"
     />
   </div>

data/app/frontend/editor/components/header-nav/publish-button.vue

@@ -28,7 +28,7 @@
           spin
           v-if="isInProgress"
         />
-        <icon name="check-line" v-if="isSuccess" />
+        <icon name="ri-check-line" v-if="isSuccess" />
         <icon name="ri-alert-line" v-if="isFail" />
         <span>{{ label }}</span>
       </span>

data/app/frontend/editor/components/kit/collection-item-input.vue

@@ -10,7 +10,7 @@
       :searchEnabled="true"
       :searchPlaceholder="$t(`collectionItemInput.select.searchPlaceholder`)"
       :emptyLabel="$t(`collectionItemInput.select.emptyLabel`)"
-      :fetchList="(q) => services.collectionItem.findAll('products', { q })"
+      :fetchList="(q) => services.collectionItem.findAll(collectionId, { q })"
       :clearEnabled="true"
       buttonClass="h-10"
       v-model="selectedCollectionItem"
@@ -42,18 +42,21 @@
 </template>
 
 <script>
+import { camelizeKeys } from '@/misc/utils'
+
 export default {
   name: 'CollectionItemInput',
   props: {
     label: { type: String, default: 'Label' },
     name: { type: String, default: 'image' },
     value: { default: () => null },
+    collectionId: { type: String },
     isFocused: { type: Boolean, default: false },
   },
   computed: {
     selectedCollectionItem: {
       get() {
-        return this.value
+        return this.value === 'any' ? null : camelizeKeys(this.value)
       },
       set(collectionItem) {
         this.$emit('input', collectionItem ? { ...collectionItem } : null)

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="relative">
+    <div 
+      class="absolute left-3 top-2 w-6 h-6 rounded-sm border border-gray-200" 
+      :class="{ 'bg-checkerboard': isTransparent }"
+      :style="{ 'background-color': styleRgbaColor }"></div>
+
+    <span class="absolute left-11 top-1.5 font-bold text-gray-900 text-lg">#</span>
+
+    <input
+      type="text"
+      :value="inputColor"
+      @input="updateInput"
+      class="py-2 pl-14 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500 font-normal"
+      :class="{
+        'pr-8': hasPresets,
+        'pr-2': !hasPresets
+      }"
+      autocomplete="off"
+      minlength="4" 
+      maxlength="8"
+      size="7"
+    />
+
+    <preset-dropdown 
+      v-model="updatableValue" 
+      :presets="presets" 
+      v-if="hasPresets"
+    />
+  </div>
+</template>
+
+<script>
+import PresetDropdown from './preset-dropdown.vue'
+
+import { colorVariableToHex, colorVariableToRgb } from '@/misc/utils'
+
+export default {
+  name: 'CoreInput',
+  components: { PresetDropdown },
+  props: {
+    value: { type: String },
+    presets: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    inputColor() {
+      return this.hexColor?.replaceAll('#', '')
+    },
+    hexColor() {
+      return colorVariableToHex(this.value)
+    },
+    rgbColor() {
+      return colorVariableToRgb(this.value)
+    },
+    styleRgbaColor() {
+      const color = this.isTransparent ? { r: 255, g: 255, b: 255 } : (this.rgbColor || { r: 0, g: 0, b: 0 })
+      return `rgba(${color.r}, ${color.g}, ${color.b}, 1)`
+    },
+    isTransparent() {
+      return this.value === ''
+    },
+    hasPresets() {
+      return this.presets && this.presets.length > 0
+    },
+    updatableValue: {
+      get() {
+        return this.value
+      },
+      set(color) {
+        this.$emit('input', color)
+      },
+    },
+  },
+  methods: {
+    updateInput(event) {
+      var value = event.target.value
+      if (value.length > 0) value = `#${value}`
+      this.$emit('input', value)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div 
+    class="self-center cursor-pointer p-0.5 rounded-sm"
+    @click="selectPreset"
+  > 
+    <div
+      class="flex items-center justify-center w-6 h-6 rounded-sm transition transform duration-200 ease-in-out hover:scale-110 select-none text-white"
+      :class="{ 
+        'border border-gray-300 text-gray-800': isWhite,
+        'bg-checkerboard': isTransparent,
+      }"
+      :style="{ 'background-color': hexColor }"
+    >
+      <icon name="ri-check-line" size="1rem" v-if="selected" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { hexToRgb, colorVariableToHex, colorVariableToRgb } from '@/misc/utils'
+
+export default {
+  name: 'PresetButton',
+  props: {
+    preset: { type: String },
+    value: { type: String },
+  },
+  computed: {
+    selected() {
+      return !!this.value && this.value.trim().toLowerCase() === this.hexColor
+    },
+    hexColor() {
+      return colorVariableToHex(this.preset)
+    },    
+    rgbColor() {
+      return colorVariableToRgb(this.preset)
+    },
+    isWhite() {
+      if (!this.rgbColor) return true
+      return this.rgbColor.r === 255 && this.rgbColor.g === 255 && this.rgbColor.b === 255
+    },
+    isTransparent() {
+      return this.hexColor === ''
+    },
+    borderColor() {
+      if (!this.selected) return 'transparent'
+      let color = this.isWhite ? { r: 0, g: 0, b: 0 } : this.rgbColor
+      return `rgba(${color.r}, ${color.g}, ${color.b}, 0.40)`
+    }
+  },
+  methods: {
+    selectPreset() {
+      this.$emit('input', this.hexColor)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <dropdown v-on="$listeners" class="absolute top-1.5 right-1">
+    <template v-slot:button>
+      <button
+        class="px-1 py-1 hover:text-gray-900 focus:outline-none transition-colors duration-200"
+      >
+        <icon name="ri-palette-line" size="1.25rem" />
+      </button>
+    </template>
+    <template v-slot:content>
+      <div class="flex flex-wrap gap-1">
+        <preset-button 
+          v-for="preset in presets" 
+          v-model="updatableValue"
+          :preset="preset"
+          :key="preset" />
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import PresetButton from './preset-button.vue'
+
+export default {
+  name: 'PresetDropdown',
+  components: { PresetButton },
+  props: {
+    value: { type: String },
+    presets: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    updatableValue: {
+      get() {
+        return this.value
+      },
+      set(color) {
+        this.$emit('input', color)
+      },
+    },
+  }
+}
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="pt-1">
+    <label
+      class="flex items-center justify-between font-semibold text-gray-800"
+      :for="name"
+      v-if="showLabel"
+    >
+      <span>{{ label }}</span>
+      <core-input :presets="presets" v-model="updatableValue" />
+    </label>
+  </div>
+</template>
+
+<script>
+import { hexToRgb } from '@/misc/utils'
+
+import CoreInput from '@/components/kit/color-input/core-input.vue'
+
+export default {
+  name: 'ColorInput',
+  components: { CoreInput },
+  props: {
+    label: { type: String, default: 'Label' },
+    name: { type: String, default: 'color' },
+    presets: {
+      type: Array,
+      default: () => [],
+    },
+    value: { type: String },
+    showLabel: { type: Boolean, default: true }
+  },
+  computed: {
+    updatableValue: {
+      get() {
+        return this.value
+      },
+      set(color) {
+        this.$emit('input', color)
+      },
+    },
+  },
+}
+</script>

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

@@ -5,6 +5,7 @@
     :open="open"
     :placement="placement"
     class="flex"
+    v-on:auto-hide="close"
   >
     <div
       class="z-10 relative flex items-center focus:outline-none select-none cursor-pointer w-full"

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

@@ -19,7 +19,7 @@ import CheckboxInput from './checkbox-input.vue'
 import SearchInput from './search-input.vue'
 import Pagination from './pagination/index.vue'
 import PageIcon from './page-icon.vue'
-import ColorPicker from './color-picker.vue'
+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'
@@ -44,7 +44,7 @@ Vue.component('checkbox-input', CheckboxInput)
 Vue.component('search-input', SearchInput)
 Vue.component('pagination', Pagination)
 Vue.component('page-icon', PageIcon)
-Vue.component('color-picker', ColorPicker)
+Vue.component('color-input', ColorInput)
 Vue.component('simple-select', SimpleSelect)
 Vue.component('collection-item-input', CollectionItemInput)
 Vue.component('list-item-button', ListItemButton)

data/app/frontend/editor/components/kit/submit-button.vue

@@ -8,17 +8,17 @@
     <span v-if="isDefaultState" data-button-label>{{ defaultLabel }}</span>
 
     <span v-if="isInProgressState" class="flex items-center justify-center">
-      <icon icon="circle-notch" name="ri-loader-4-line" spin color="#fff" />
+      <icon name="ri-loader-4-line" spin color="#fff" key="progress" />
       <span class="ml-2" data-button-label>{{ inProgressLabel }}</span>
     </span>
 
     <span v-if="isSuccessState" class="flex items-center justify-center">
-      <icon icon="circle-notch" name="check-line" color="#fff" />
+      <icon name="ri-check-line" color="#fff" key="success" />
       <span class="ml-2" data-button-label>{{ successLabel }}</span>
     </span>
 
     <span v-if="isFailState" class="flex items-center justify-center">
-      <icon icon="circle-notch" name="ri-alert-line" color="#fff" />
+      <icon name="ri-alert-line" color="#fff" key="fail" />
       <span class="ml-2" data-button-label>{{ failLabel }}</span>
     </span>
   </button>

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

@@ -8,8 +8,9 @@
         v-for="(tab, index) in tabs"
         :key="`tab-${index}`"
         type="button"
-        class="text-gray-500 py-1 pb-0 px-4 block hover:text-editor-primary focus:outline-none border-b-2 border-transparent z-10"
+        class=" py-1 pb-0 px-4 block hover:text-editor-primary focus:outline-none border-b-2 z-10"
         :class="{
+          'text-gray-500 border-transparent': index !== currentIndex,
           'text-editor-primary font-medium border-editor-primary':
             index === currentIndex,
         }"

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="space-y-1">
     <label
       class="block font-semibold text-gray-800"
       :for="name"
@@ -20,7 +20,7 @@
       :placeholder="placeholder"
       @blur="blur()"
       @input="updateInput"
-      class="block w-full mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500"
+      class="block w-full py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500"
       autocomplete="off"
       ref="input"
     />

data/app/frontend/editor/misc/utils.js

@@ -8,11 +8,28 @@ export const isBlank = (object) => {
 }
 
 export const camelize = (str) => {
+  if (!str.includes('_')) return str
   return str
     .toLowerCase()
     .replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase())
 }
 
+export const camelizeKeys = (obj) => {
+  if (Array.isArray(obj)) {
+    return obj.map(v => camelizeKeys(v));
+  } else if (obj != null && obj.constructor === Object) {
+    return Object.keys(obj).reduce(
+      (result, key) => ({
+        ...result,
+        [camelize(key)]: camelizeKeys(obj[key]),
+      }),
+      {},
+    );
+  }
+  return obj;
+}
+
+
 export const numberToHumanSize = (size, i18n) => {
   if (isBlank(size)) return null
 
@@ -94,16 +111,29 @@ export const omitEmpty = (obj) =>
   Object.keys(obj).forEach((key) => obj[key] === undefined && delete obj[key])
 
 export const hexToRgb = (hex) => {
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim())
+  if (!hex) return null
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex.trim())
   return result
     ? {
         r: parseInt(result[1], 16),
         g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
+        b: result[3] ? parseInt(result[3], 16) : 0,
       }
     : null
 }
 
+export const colorVariableToHex = (variable) => {
+  if (!variable) return null
+  const color = (variable.startsWith('--')
+    ? getComputedStyle(document.body).getPropertyValue(variable)
+    : variable).trim().toLowerCase()
+  return color === 'transparent' ? '' : color
+}
+
+export const colorVariableToRgb = (variable) => {
+  return hexToRgb(colorVariableToHex(variable))
+}
+
 // Static pages have absolute path ("/something") but regular pages have no leading slash
 export const formatPath = (path) => {
   return path[0] === '/' ? path : `/${path}`

data/app/frontend/editor/services/api.js

@@ -18,10 +18,10 @@ const api = axios.create({
     Accept: 'application/json',
   },
   transformResponse(data) {
-    // camelcase in JS
+    // for "security" (even if the Rails API already camelcases the JSON), 
+    // we also camelcase the response in the Editor.
     // console.log('[DEBUG] API response', data)
     return data ? camelcaseObjectDeep(JSON.parse(data)) : {}
-    // return data ? JSON.parse(data) : {} // LEGACY
   },
 })