@blokkli/editor 1.0.0

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="bk bk-media-library">
+    <div v-if="status === 'pending'" class="bk-loading">
+      <Icon name="loader" />
+    </div>
+    <div class="bk-media-library-filters">
+      <div class="bk-media-library-filters-listview">
+        <button @click="toggleListView">
+          <Icon :name="listViewIcon" />
+        </button>
+      </div>
+      <div v-for="filter in filters" :key="filter.key">
+        <label v-if="filter.filter.type === 'text'" class="bk-form-text">
+          <Icon name="search" />
+          <input
+            v-model.lazy="filterValues[filter.key]"
+            type="text"
+            :placeholder="filter.filter.placeholder"
+          />
+        </label>
+        <label
+          v-else-if="filter.filter.type === 'select'"
+          class="bk-form-select"
+        >
+          <div v-if="!filterValues[filter.key]">
+            {{ Object.values(filter.filter.options)[0] }}
+          </div>
+          <select v-model="filterValues[filter.key]">
+            <option
+              v-for="option in Object.entries(filter.filter.options)"
+              :key="option[0]"
+              :value="option[0]"
+            >
+              {{ option[1] }}
+            </option>
+          </select>
+        </label>
+        <label
+          v-else-if="filter.filter.type === 'checkbox'"
+          class="bk-checkbox-toggle"
+        >
+          <input v-model="filterValues[filter.key]" type="checkbox" />
+          <div />
+          <span>{{ filter.filter.label }}</span>
+        </label>
+      </div>
+    </div>
+    <div
+      ref="listEl"
+      class="bk-media-library-items bk-scrollbar-light"
+      :class="[{ 'bk-is-sortli': isSortli }, 'bk-is-' + listView]"
+    >
+      <Component :is="isSortli ? Sortli : 'div'" no-transition>
+        <div
+          v-for="item in items"
+          :key="item.mediaId"
+          class="bk-media-library-items-item"
+          :class="{ 'bk-is-selected': modelValue === item.mediaId }"
+          :data-sortli-id="'media_library_' + item.mediaId"
+          data-element-type="media_library"
+          :data-item-bundle="item.targetBundles[0]"
+          :data-media-id="item.mediaId"
+          :data-media-bundle="item.mediaBundle"
+          @click="onClick(item.mediaId)"
+        >
+          <div>
+            <div class="bk-media-library-items-item-image">
+              <img :src="item.thumbnail" />
+            </div>
+          </div>
+          <div class="bk-media-library-items-item-text">
+            <h3>{{ item.label }}</h3>
+            <p>{{ item.context }}</p>
+          </div>
+        </div>
+      </Component>
+    </div>
+
+    <div class="bk-pagination">
+      <button :disabled="page === 0" @click="page--">
+        <Icon name="arrow-left" />
+      </button>
+      <div>{{ page + 1 }} / {{ totalPages }}</div>
+      <button :disabled="page >= totalPages - 1" @click="page++">
+        <Icon name="arrow-right" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  useLazyAsyncData,
+  useBlokkli,
+  watch,
+  nextTick,
+} from '#imports'
+import { Sortli, Icon } from '#blokkli/components'
+import type { MediaLibraryFilter } from './../types'
+import type { BlokkliIcon } from '#blokkli/icons'
+
+const props = defineProps<{
+  isSortli?: boolean
+  modelValue?: string
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const onClick = (id: string) => {
+  if (props.isSortli) {
+    return
+  }
+
+  emit('update:modelValue', id)
+}
+
+type RenderedFilter = {
+  key: string
+  filter: MediaLibraryFilter
+}
+
+const { adapter, storage } = useBlokkli()
+
+const listView = storage.use<'horizontal' | 'grid'>(
+  'mediaLibraryListView',
+  'grid',
+)
+
+const listViewIcon = computed<BlokkliIcon>(() => {
+  if (listView.value === 'grid') {
+    return 'list-view-grid'
+  }
+
+  return 'list-view-horizontal'
+})
+
+const toggleListView = () => {
+  listView.value = listView.value === 'grid' ? 'horizontal' : 'grid'
+}
+
+const filterValues = ref<Record<string, any>>({})
+
+const listEl = ref<HTMLDivElement | null>(null)
+const page = ref(0)
+const key = computed(() => Object.values(filterValues.value).join(','))
+
+watch(key, () => {
+  page.value = 0
+})
+
+const { data, status } = await useLazyAsyncData(
+  () => {
+    return adapter.mediaLibraryGetResults!({
+      filters: filterValues.value,
+      page: page.value,
+    })
+  },
+  { watch: [key, page] },
+)
+
+watch(data, () => {
+  nextTick(() => {
+    if (listEl.value) {
+      listEl.value.scrollTop = 0
+    }
+  })
+})
+
+const items = computed(() => data.value?.items || [])
+const filters = computed<RenderedFilter[]>(() => {
+  return Object.entries(data.value?.filters || {}).map(([key, filter]) => {
+    return { key, filter }
+  })
+})
+
+const total = computed(() => data.value?.total || 0)
+const perPage = computed(() => data.value?.perPage || 0)
+
+const totalPages = computed(() => {
+  return Math.ceil(total.value / perPage.value)
+})
+</script>

package/dist/runtime/components/Edit/Features/MediaLibrary/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <PluginSidebar
+    id="media_library"
+    :title="$t('mediaLibrary', 'Media Library')"
+    :tour-text="
+      $t(
+        'mediaLibraryTourText',
+        'Search for media like images and drag and drop them into the page.',
+      )
+    "
+    edit-only
+    icon="image"
+    weight="-100"
+  >
+    <Library is-sortli />
+  </PluginSidebar>
+
+  <PluginDroppableEdit
+    id="media-replace"
+    title="Replace media"
+    icon="image"
+    entity-type="media"
+    @save="onDroppableEditSave"
+  >
+    <Library v-model="selected" />
+  </PluginDroppableEdit>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature, ref } from '#imports'
+import { PluginSidebar, PluginDroppableEdit } from '#blokkli/plugins'
+import Library from './Library/index.vue'
+import defineDropAreas from '#blokkli/helpers/composables/defineDropAreas'
+import { falsy } from '#blokkli/helpers'
+import type {
+  DraggableHostData,
+  DropArea,
+  DroppableEntityField,
+} from '#blokkli/types'
+
+defineBlokkliFeature({
+  id: 'media-library',
+  icon: 'image',
+  label: 'Media Library',
+  description:
+    'Implements a media library to easily drag and drop media like images or videos.',
+  requiredAdapterMethods: ['mediaLibraryGetResults', 'mediaLibraryAddBlock'],
+})
+
+const { $t, dom, adapter, state, runtimeConfig, types } = useBlokkli()
+
+const selected = ref('')
+
+const ERROR_MESSAGE = $t(
+  'mediaLibraryReplaceFailed',
+  'Failed to replace media.',
+)
+
+const onDroppableEditSave = async (e: DroppableEntityField) => {
+  if (!selected.value) {
+    return
+  }
+  if ('itemBundle' in e.host && adapter.mediaLibraryReplaceMedia) {
+    await state.mutateWithLoadingState(
+      () =>
+        adapter.mediaLibraryReplaceMedia!({
+          host: {
+            uuid: e.host.uuid,
+            type: runtimeConfig.itemEntityType,
+            fieldName: e.fieldName,
+          },
+          mediaId: selected.value,
+        }),
+      ERROR_MESSAGE,
+    )
+  } else if ('type' in e.host && adapter.mediaLibraryReplaceEntityMedia) {
+    const type = e.host.type
+    await state.mutateWithLoadingState(
+      () =>
+        adapter.mediaLibraryReplaceEntityMedia!({
+          host: {
+            uuid: e.host.uuid,
+            type,
+            fieldName: e.fieldName,
+          },
+          mediaId: selected.value,
+        }),
+      ERROR_MESSAGE,
+    )
+  }
+}
+
+defineDropAreas((dragItems) => {
+  // Not supported by adapter.
+  if (!adapter.mediaLibraryReplaceMedia) {
+    return
+  }
+
+  // Only a single item is supported.
+  if (dragItems.length !== 1) {
+    return
+  }
+
+  const item = dragItems[0]
+
+  // Not a media library item.
+  if (item.itemType !== 'media_library') {
+    return
+  }
+
+  // Generate a drop area for every matching droppable field.
+  return dom
+    .getAllDroppableFields()
+    .map<DropArea | undefined>((field) => {
+      const config = types.getDroppableFieldConfig(field.fieldName, field.host)
+      // @TODO: This should be provided by the adapter on the item.
+      if (config.allowedEntityType !== 'media') {
+        return
+      }
+
+      if (!config.allowedBundles.includes(item.mediaBundle)) {
+        return
+      }
+      const isBlock = 'itemBundle' in field.host
+      const draggableHost: DraggableHostData = {
+        uuid: field.host.uuid,
+        type:
+          'itemBundle' in field.host
+            ? runtimeConfig.itemEntityType
+            : field.host.type,
+        fieldName: field.fieldName,
+      }
+      const label = $t('mediaLibraryReplaceMedia', 'Replace @field').replace(
+        '@field',
+        config.label,
+      )
+
+      if (adapter.mediaLibraryReplaceMedia && isBlock) {
+        return {
+          id: `replace-media:${field.host.uuid}:${field.fieldName}`,
+          label,
+          element: field.element,
+          icon: 'swap-horizontal',
+          onDrop: () => {
+            return state.mutateWithLoadingState(
+              () =>
+                adapter.mediaLibraryReplaceMedia!({
+                  host: draggableHost,
+                  mediaId: item.mediaId,
+                }),
+              ERROR_MESSAGE,
+            )
+          },
+        }
+      } else if (adapter.mediaLibraryReplaceEntityMedia && !isBlock) {
+        return {
+          id: `replace-entity-media:${field.host.uuid}:${field.fieldName}`,
+          label,
+          element: field.element,
+          icon: 'swap-horizontal',
+          onDrop: () => {
+            return state.mutateWithLoadingState(
+              () =>
+                adapter.mediaLibraryReplaceEntityMedia!({
+                  host: draggableHost,
+                  mediaId: item.mediaId,
+                }),
+              ERROR_MESSAGE,
+            )
+          },
+        }
+      }
+    })
+    .filter(falsy)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'MediaLibrary',
+}
+</script>

package/dist/runtime/components/Edit/Features/MediaLibrary/types.d.ts

@@ -0,0 +1,57 @@
+import type { BlokkliIcon } from '#blokkli/icons';
+export type MediaLibraryFilterCheckbox = {
+    label: string;
+    type: 'checkbox';
+};
+export type MediaLibraryFilterCheckboxes = {
+    label: string;
+    type: 'checkboxes';
+    options: Record<string, string>;
+};
+export type MediaLibraryFilterText = {
+    label: string;
+    type: 'text';
+    placeholder: string;
+};
+export type MediaLibraryFilterSelect = {
+    label: string;
+    type: 'select';
+    default: string;
+    options: Record<string, string>;
+};
+export type MediaLibraryFilter = MediaLibraryFilterCheckbox | MediaLibraryFilterCheckboxes | MediaLibraryFilterText | MediaLibraryFilterSelect;
+export type MediaLibraryItem = {
+    mediaId: string;
+    label: string;
+    context: string;
+    targetBundles: string[];
+    thumbnail?: string;
+    icon?: BlokkliIcon;
+    mediaBundle?: string;
+};
+export type FilterTypes = 'checkbox' | 'checkboxes' | 'text' | 'select';
+export type MediaLibraryGetResults<F extends Record<string, FilterTypes>> = {
+    filters: {
+        [K in keyof F]: F[K] extends 'checkbox' ? MediaLibraryFilterCheckbox : F[K] extends 'checkboxes' ? MediaLibraryFilterCheckboxes : F[K] extends 'text' ? MediaLibraryFilterText : MediaLibraryFilterSelect;
+    };
+    items: MediaLibraryItem[];
+    total: number;
+    perPage: number;
+};
+type FilterValueTypes = {
+    checkbox: boolean;
+    checkboxes: string[];
+    text: string;
+    select: string;
+};
+export type MediaLibraryGetResultsData<F extends Record<string, FilterTypes>> = {
+    page: number;
+    filters: {
+        [K in keyof F]: FilterValueTypes[F[K]];
+    };
+};
+export type FilterTypeMapping = {
+    [key in FilterTypes]: MediaLibraryFilter;
+};
+export type GetMediaLibraryFunction<F extends Record<string, FilterTypes> = Record<string, FilterTypes>> = (e: MediaLibraryGetResultsData<F>) => Promise<MediaLibraryGetResults<F>>;
+export {};

package/dist/runtime/components/Edit/Features/MultiSelect/Overlay/fragment.glsl

@@ -0,0 +1,90 @@
+#version 300 es
+
+precision mediump float;
+
+in float v_intersecting;
+in float v_is_select_rect;
+in vec4 v_quad;
+in vec3 v_color_default;
+in vec3 v_color_active;
+in float v_rect_id;
+
+out vec4 fragColor;
+
+uniform float u_time;
+uniform float u_scale;
+uniform float u_dpi;
+uniform float u_offset_x;
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+uniform vec4 u_select_rect;
+
+float roundedBoxSDF(vec2 CenterPosition, vec2 Size, float Radius) {
+  return length(max(abs(CenterPosition) - Size + Radius, 0.0)) - Radius;
+}
+
+vec4 marchingAnts() {
+  float speed = 100.0 * u_dpi;
+  float count = 8.0;
+  float width = 2.0 * u_dpi;
+  float time = u_time * speed;
+  float phase = time * -1.0;
+  float stripePosition = mod(
+    (gl_FragCoord.x - gl_FragCoord.y + phase) / width,
+    count
+  );
+  float factor = step(count * 0.5, stripePosition);
+  vec3 col = vec3(factor);
+  return vec4(col, 1.0 - col / 5.0);
+}
+
+void main() {
+  // Marching ants selection rectangle.
+  if (v_is_select_rect > 0.5) {
+    fragColor = marchingAnts();
+    return;
+  }
+
+  // Selectable blocks.
+  float radius_base = 2.0 * u_scale;
+  float thickness = max(min(1.0 * u_scale, 3.0), 0.5);
+  float inset = max(min(2.0 * u_scale, 1.0), 2.0) * thickness;
+
+  float u_rect_x = v_quad.x + inset;
+  float u_rect_y = v_quad.y + inset;
+  float u_rectWidth = v_quad.z - 2.0 * inset;
+  float u_rectHeight = v_quad.w - 2.0 * inset;
+
+  vec2 size = vec2(u_rectWidth, u_rectHeight);
+
+  float x = u_rect_x;
+  float y = u_rect_y;
+  vec2 offsetPosition = vec2(x + size.x / 2.0, y + size.y / 2.0);
+
+  vec2 location = vec2(offsetPosition);
+
+  float edgeSoftness = 1.0 * u_dpi;
+  float radius =
+    min(radius_base * u_dpi, min(size.x, size.y) / 2.0) + thickness * 2.0;
+
+  float distance = roundedBoxSDF(
+    location - gl_FragCoord.xy,
+    size / 2.0,
+    radius
+  );
+
+  bool is_intersecting = v_intersecting >= 0.5;
+
+  vec3 color = is_intersecting ? v_color_active : v_color_default;
+  float mixedDistance = is_intersecting ? distance : abs(distance);
+
+  float smoothedAlpha =
+    1.0 - smoothstep(-edgeSoftness, edgeSoftness, mixedDistance - thickness);
+
+  fragColor = vec4(
+    color,
+    is_intersecting
+      ? smoothedAlpha - 0.7
+      : smoothedAlpha
+  );
+}