@interaktivgmbh/volto-comparison-slider 1.0.0

package/.release-it.json

@@ -0,0 +1,34 @@
+{
+  "plugins": {
+    "../../core/packages/scripts/prepublish.js": {}
+  },
+  "hooks": {
+    "after:bump": [
+      "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft",
+      "pipx run towncrier build --yes --version ${version}",
+      "cp ../../README.md ./ && cp CHANGELOG.md ../../CHANGELOG.md",
+      "python3 -c 'import json; data = json.load(open(\"../../package.json\")); data[\"version\"] = \"${version}\"; json.dump(data, open(\"../../package.json\", \"w\"), indent=2)'",
+      "git add ../../CHANGELOG.md ../../package.json"
+    ],
+    "after:release": "rm .changelog.draft README.md"
+  },
+  "npm": {
+    "publish": true
+  },
+  "plonePrePublish": {
+    "publish": true
+  },
+  "git": {
+    "changelog": "pipx run towncrier build --draft --yes --version 0.0.0",
+    "requireUpstream": false,
+    "requireCleanWorkingDir": false,
+    "commitMessage": "Release ${version}",
+    "tagName": "${version}",
+    "tagAnnotation": "Release ${version}"
+  },
+  "github": {
+    "release": true,
+    "releaseName": "${version}",
+    "releaseNotes": "cat .changelog.draft"
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+<!-- You should *NOT* be adding new change log entries to this file.
+     You should create a file in the news directory instead.
+     For helpful instructions, please see:
+     https://6.docs.plone.org/contributing/index.html#contributing-change-log-label
+-->
+
+<!-- towncrier release notes start -->

package/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = ['razzle'];
+  const plugins = [
+    [
+      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
+      {
+        messagesDir: './build/messages/',
+      },
+    ],
+  ];
+
+  return {
+    plugins,
+    presets,
+  };
+};

package/locales/de/LC_MESSAGES/volto.po

@@ -0,0 +1,63 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: volto-comparison-slider\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: de\n"
+"Language-Team: German\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgid "Comparison Slider"
+msgstr "Vergleichs-Slider"
+
+msgid "Before Image"
+msgstr "Vorher-Bild"
+
+msgid "After Image"
+msgstr "Nachher-Bild"
+
+msgid "Before Label"
+msgstr "Vorher-Beschriftung"
+
+msgid "After Label"
+msgstr "Nachher-Beschriftung"
+
+msgid "Initial Position"
+msgstr "Anfangsposition"
+
+msgid "Initial slider position (0-100)"
+msgstr "Anfangsposition des Sliders (0-100)"
+
+msgid "Show Labels"
+msgstr "Beschriftungen anzeigen"
+
+msgid "Slider Orientation"
+msgstr "Slider-Ausrichtung"
+
+msgid "Horizontal"
+msgstr "Horizontal"
+
+msgid "Vertical"
+msgstr "Vertikal"
+
+msgid "Select before and after images in the sidebar"
+msgstr "Wähle Vorher- und Nachher-Bilder in der Seitenleiste aus"
+
+msgid "Handle Type"
+msgstr "Griff-Typ"
+
+msgid "Icon"
+msgstr "Icon"
+
+msgid "Text"
+msgstr "Text"
+
+msgid "Handle Text"
+msgstr "Griff-Text"
+
+msgid "Text displayed on the slider handle (e.g. DRAG)"
+msgstr "Text auf dem Slider-Griff (z.B. ZIEHEN)"

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,63 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: volto-comparison-slider\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: en\n"
+"Language-Team: English\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgid "Comparison Slider"
+msgstr ""
+
+msgid "Before Image"
+msgstr ""
+
+msgid "After Image"
+msgstr ""
+
+msgid "Before Label"
+msgstr ""
+
+msgid "After Label"
+msgstr ""
+
+msgid "Initial Position"
+msgstr ""
+
+msgid "Initial slider position (0-100)"
+msgstr ""
+
+msgid "Show Labels"
+msgstr ""
+
+msgid "Slider Orientation"
+msgstr ""
+
+msgid "Horizontal"
+msgstr ""
+
+msgid "Vertical"
+msgstr ""
+
+msgid "Select before and after images in the sidebar"
+msgstr ""
+
+msgid "Handle Type"
+msgstr ""
+
+msgid "Icon"
+msgstr ""
+
+msgid "Text"
+msgstr ""
+
+msgid "Handle Text"
+msgstr ""
+
+msgid "Text displayed on the slider handle (e.g. DRAG)"
+msgstr ""

package/locales/es/LC_MESSAGES/volto.po

@@ -0,0 +1,19 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2023-05-09 11:45-0400\n"
+"PO-Revision-Date: 2023-05-10 11:34-0400\n"
+"Last-Translator: Leonardo J. Caballero G. <leonardocaballero@gmail.com>\n"
+"Language: es\n"
+"Language-Team: ES <LL@li.org>\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"Preferred-Encodings: utf-8\n"
+"MIME-Version: 1.0\n"
+"Language-Code: es\n"
+"Language-Name: Español\n"
+"Domain: volto\n"
+"X-Is-Fallback-For: es-ar es-bo es-cl es-co es-cr es-do es-ec es-es es-sv es-gt es-hn es-mx es-ni es-pa es-py es-pe es-pr es-us es-uy es-ve\n"
+"X-Generator: Poedit 2.2.1\n"

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -0,0 +1,17 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2023-04-06T16:01:32.969Z\n"
+"PO-Revision-Date: \n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language: \n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
+"Language-Code: pt_BR\n"
+"Language-Name: Português do Brasil\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"

package/locales/volto.pot

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2024-03-22T12:43:34.158Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@interaktivgmbh/volto-comparison-slider",
+  "version": "1.0.0",
+  "description": "A new add-on for Volto",
+  "main": "src/index.js",
+  "license": "MIT",
+  "keywords": [
+    "volto-addon",
+    "volto",
+    "plone",
+    "react"
+  ],
+  "author": "Interaktiv GmbH",
+  "homepage": "https://github.com/interaktivgmbh/volto-comparison-slider#readme",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:interaktivgmbh/volto-comparison-slider"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
+    "dry-release": "release-it --dry-run",
+    "release": "release-it",
+    "release-major-alpha": "release-it major --preRelease=alpha",
+    "release-alpha": "release-it --preRelease=alpha"
+  },
+  "addons": [],
+  "theme": "",
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.0.0"
+  },
+  "devDependencies": {
+    "@plone/volto": "workspace:*",
+    "react-intl": "^6.0.0",
+    "@plone/registry": "workspace:*",
+    "@plone/scripts": "workspace:*",
+    "@plone/types": "workspace:*",
+    "release-it": "^19.0.5"
+  }
+}

package/src/components/Blocks/ComparisonSlider/ComparisonSliderBody.jsx

@@ -0,0 +1,182 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import Image from '@plone/volto/components/theme/Image/Image';
+
+const getImageUrl = (image) =>
+  image?.[0] ? flattenToAppURL(`${image[0]['@id']}/@@images/image`) : null;
+
+const ComparisonSliderBody = ({ data, isEditMode = false }) => {
+  const {
+    beforeImage,
+    afterImage,
+    beforeLabel = 'Before',
+    afterLabel = 'After',
+    initialPosition = 50,
+    showLabels = true,
+    orientation = 'horizontal',
+    handleType = 'icon',
+    handleText = 'DRAG',
+  } = data;
+
+  const isHorizontal = orientation === 'horizontal';
+  const [sliderPosition, setSliderPosition] = useState(initialPosition);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef(null);
+
+  const beforeUrl = getImageUrl(beforeImage);
+  const afterUrl = getImageUrl(afterImage);
+
+  const updatePosition = useCallback(
+    (clientX, clientY) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const position = isHorizontal
+        ? ((clientX - rect.left) / rect.width) * 100
+        : ((clientY - rect.top) / rect.height) * 100;
+      setSliderPosition(Math.max(0, Math.min(100, position)));
+    },
+    [isHorizontal],
+  );
+
+  const handleStart = useCallback(
+    (e) => {
+      if (isEditMode) return;
+      e.preventDefault();
+      setIsDragging(true);
+      const point = e.touches?.[0] || e;
+      updatePosition(point.clientX, point.clientY);
+    },
+    [isEditMode, updatePosition],
+  );
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (isEditMode) return;
+      const step = e.shiftKey ? 10 : 1;
+      const decreaseKeys = isHorizontal ? ['ArrowLeft'] : ['ArrowUp'];
+      const increaseKeys = isHorizontal ? ['ArrowRight'] : ['ArrowDown'];
+
+      if (decreaseKeys.includes(e.key)) {
+        e.preventDefault();
+        setSliderPosition((prev) => Math.max(0, prev - step));
+      } else if (increaseKeys.includes(e.key)) {
+        e.preventDefault();
+        setSliderPosition((prev) => Math.min(100, prev + step));
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        setSliderPosition(0);
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        setSliderPosition(100);
+      }
+    },
+    [isEditMode, isHorizontal],
+  );
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMove = (e) => {
+      const point = e.touches?.[0] || e;
+      updatePosition(point.clientX, point.clientY);
+    };
+    const handleEnd = () => setIsDragging(false);
+
+    document.addEventListener('mousemove', handleMove);
+    document.addEventListener('mouseup', handleEnd);
+    document.addEventListener('touchmove', handleMove);
+    document.addEventListener('touchend', handleEnd);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMove);
+      document.removeEventListener('mouseup', handleEnd);
+      document.removeEventListener('touchmove', handleMove);
+      document.removeEventListener('touchend', handleEnd);
+    };
+  }, [isDragging, updatePosition]);
+
+  useEffect(() => {
+    setSliderPosition(initialPosition);
+  }, [initialPosition]);
+
+  if (!beforeUrl || !afterUrl) {
+    return null;
+  }
+
+  const clipPath = isHorizontal
+    ? `inset(0 ${100 - sliderPosition}% 0 0)`
+    : `inset(0 0 ${100 - sliderPosition}% 0)`;
+
+  const sliderStyle = isHorizontal
+    ? { left: `${sliderPosition}%` }
+    : { top: `${sliderPosition}%` };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`comparison-slider comparison-slider--${orientation} ${isDragging ? 'is-dragging' : ''}`}
+      role="slider"
+      tabIndex={isEditMode ? -1 : 0}
+      aria-valuenow={Math.round(sliderPosition)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={`Image comparison slider: ${beforeLabel} vs ${afterLabel}`}
+      onMouseDown={handleStart}
+      onTouchStart={handleStart}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="comparison-slider__image-container">
+        <Image
+          src={afterUrl}
+          alt={afterLabel}
+          className="comparison-slider__image comparison-slider__image--after"
+          draggable={false}
+        />
+        <Image
+          src={beforeUrl}
+          alt={beforeLabel}
+          className="comparison-slider__image comparison-slider__image--before"
+          style={{ clipPath }}
+          draggable={false}
+        />
+      </div>
+
+      <div
+        className={`comparison-slider__handle ${isHorizontal ? 'comparison-slider__handle--horizontal' : 'comparison-slider__handle--vertical'}`}
+        style={sliderStyle}
+      >
+        <div className="comparison-slider__handle-line" />
+        <div
+          className={`comparison-slider__handle-button ${handleType === 'text' ? 'comparison-slider__handle-button--text' : ''}`}
+        >
+          {handleType === 'text' ? (
+            <span className="comparison-slider__handle-text">{handleText}</span>
+          ) : (
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d={
+                  isHorizontal
+                    ? 'M8 5v14l-7-7 7-7zm8 0v14l7-7-7-7z'
+                    : 'M5 8h14l-7-7-7 7zm0 8h14l-7 7-7-7z'
+                }
+              />
+            </svg>
+          )}
+        </div>
+      </div>
+
+      {showLabels && (
+        <>
+          <span className="comparison-slider__label comparison-slider__label--before">
+            {beforeLabel}
+          </span>
+          <span className="comparison-slider__label comparison-slider__label--after">
+            {afterLabel}
+          </span>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ComparisonSliderBody;

package/src/components/Blocks/ComparisonSlider/Edit.jsx

@@ -0,0 +1,53 @@
+import { defineMessages } from 'react-intl';
+import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
+import ComparisonSliderBody from '@interaktivgmbh/volto-comparison-slider/components/Blocks/ComparisonSlider/ComparisonSliderBody';
+import { ComparisonSliderSchema } from '@interaktivgmbh/volto-comparison-slider/components/Blocks/ComparisonSlider/schema';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import comparisonSliderSVG from '@interaktivgmbh/volto-comparison-slider/icons/comparison-slider.svg';
+
+const messages = defineMessages({
+  selectImages: {
+    id: 'Select before and after images in the sidebar',
+    defaultMessage: 'Select before and after images in the sidebar',
+  },
+});
+
+function Edit({ data, block, onChangeBlock, selected, intl }) {
+  const schema = ComparisonSliderSchema(intl);
+
+  const hasImages = data.beforeImage?.[0] && data.afterImage?.[0];
+
+  return (
+    <div className="block comparison-slider-block">
+      {hasImages ? (
+        <ComparisonSliderBody data={data} isEditMode={true} />
+      ) : (
+        <div className="comparison-slider-placeholder">
+          <Icon
+            name={comparisonSliderSVG}
+            size="64px"
+            className="placeholder-icon"
+          />
+          <p>{intl.formatMessage(messages.selectImages)}</p>
+        </div>
+      )}
+
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+          block={block}
+        />
+      </SidebarPortal>
+    </div>
+  );
+}
+
+export default Edit;

package/src/components/Blocks/ComparisonSlider/View.jsx

@@ -0,0 +1,19 @@
+import ComparisonSliderBody from '@interaktivgmbh/volto-comparison-slider/components/Blocks/ComparisonSlider/ComparisonSliderBody';
+
+function View(props) {
+  const { data, className } = props;
+  const beforeImage = data.beforeImage;
+  const afterImage = data.afterImage;
+
+  if (!beforeImage?.[0] || !afterImage?.[0]) {
+    return null;
+  }
+
+  return (
+    <div className={`block comparison-slider-block ${className || ''}`}>
+      <ComparisonSliderBody data={data} isEditMode={false} />
+    </div>
+  );
+}
+
+export default View;

package/src/components/Blocks/ComparisonSlider/schema.js

@@ -0,0 +1,148 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  comparisonSlider: {
+    id: 'Comparison Slider',
+    defaultMessage: 'Comparison Slider',
+  },
+  beforeImage: {
+    id: 'Before Image',
+    defaultMessage: 'Before Image',
+  },
+  afterImage: {
+    id: 'After Image',
+    defaultMessage: 'After Image',
+  },
+  beforeLabel: {
+    id: 'Before Label',
+    defaultMessage: 'Before Label',
+  },
+  afterLabel: {
+    id: 'After Label',
+    defaultMessage: 'After Label',
+  },
+  initialPosition: {
+    id: 'Initial Position',
+    defaultMessage: 'Initial Position',
+  },
+  initialPositionDescription: {
+    id: 'Initial slider position (0-100)',
+    defaultMessage: 'Initial slider position (0-100)',
+  },
+  showLabels: {
+    id: 'Show Labels',
+    defaultMessage: 'Show Labels',
+  },
+  sliderOrientation: {
+    id: 'Slider Orientation',
+    defaultMessage: 'Slider Orientation',
+  },
+  horizontal: {
+    id: 'Horizontal',
+    defaultMessage: 'Horizontal',
+  },
+  vertical: {
+    id: 'Vertical',
+    defaultMessage: 'Vertical',
+  },
+  handleType: {
+    id: 'Handle Type',
+    defaultMessage: 'Handle Type',
+  },
+  handleIcon: {
+    id: 'Icon',
+    defaultMessage: 'Icon',
+  },
+  handleText: {
+    id: 'Text',
+    defaultMessage: 'Text',
+  },
+  handleTextValue: {
+    id: 'Handle Text',
+    defaultMessage: 'Handle Text',
+  },
+  handleTextDescription: {
+    id: 'Text displayed on the slider handle (e.g. DRAG)',
+    defaultMessage: 'Text displayed on the slider handle (e.g. DRAG)',
+  },
+});
+
+export const ComparisonSliderSchema = (intl) => ({
+  title: intl.formatMessage(messages.comparisonSlider),
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'beforeImage',
+        'afterImage',
+        'beforeLabel',
+        'afterLabel',
+        'initialPosition',
+        'showLabels',
+        'orientation',
+        'handleType',
+        'handleText',
+      ],
+    },
+  ],
+  properties: {
+    beforeImage: {
+      title: intl.formatMessage(messages.beforeImage),
+      widget: 'object_browser',
+      mode: 'image',
+      allowExternals: true,
+    },
+    afterImage: {
+      title: intl.formatMessage(messages.afterImage),
+      widget: 'object_browser',
+      mode: 'image',
+      allowExternals: true,
+    },
+    beforeLabel: {
+      title: intl.formatMessage(messages.beforeLabel),
+      default: 'Before',
+    },
+    afterLabel: {
+      title: intl.formatMessage(messages.afterLabel),
+      default: 'After',
+    },
+    initialPosition: {
+      title: intl.formatMessage(messages.initialPosition),
+      description: intl.formatMessage(messages.initialPositionDescription),
+      type: 'integer',
+      minimum: 0,
+      maximum: 100,
+      default: 50,
+    },
+    showLabels: {
+      title: intl.formatMessage(messages.showLabels),
+      type: 'boolean',
+      default: true,
+    },
+    orientation: {
+      title: intl.formatMessage(messages.sliderOrientation),
+      choices: [
+        ['horizontal', intl.formatMessage(messages.horizontal)],
+        ['vertical', intl.formatMessage(messages.vertical)],
+      ],
+      default: 'horizontal',
+    },
+    handleType: {
+      title: intl.formatMessage(messages.handleType),
+      choices: [
+        ['icon', intl.formatMessage(messages.handleIcon)],
+        ['text', intl.formatMessage(messages.handleText)],
+      ],
+      default: 'icon',
+    },
+    handleText: {
+      title: intl.formatMessage(messages.handleTextValue),
+      description: intl.formatMessage(messages.handleTextDescription),
+      default: 'DRAG',
+    },
+  },
+  required: ['beforeImage', 'afterImage'],
+});
+
+export default ComparisonSliderSchema;

package/src/icons/comparison-slider.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <rect x="2" y="6" width="32" height="24" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2"/>
+  <line x1="18" y1="6" x2="18" y2="30" stroke="currentColor" stroke-width="2"/>
+  <circle cx="18" cy="18" r="4" fill="currentColor"/>
+  <polygon points="14,18 10,14 10,22" fill="currentColor"/>
+  <polygon points="22,18 26,14 26,22" fill="currentColor"/>
+  <rect x="4" y="8" width="12" height="4" fill="currentColor" opacity="0.3"/>
+  <rect x="20" y="24" width="12" height="4" fill="currentColor" opacity="0.3"/>
+</svg>

package/src/index.js

@@ -0,0 +1,24 @@
+import View from '@interaktivgmbh/volto-comparison-slider/components/Blocks/ComparisonSlider/View';
+import Edit from '@interaktivgmbh/volto-comparison-slider/components/Blocks/ComparisonSlider/Edit';
+import { ComparisonSliderSchema } from '@interaktivgmbh/volto-comparison-slider/components/Blocks/ComparisonSlider/schema';
+import comparisonSliderSVG from '@interaktivgmbh/volto-comparison-slider/icons/comparison-slider.svg';
+import '@interaktivgmbh/volto-comparison-slider/theme/_main.css';
+
+const applyConfig = (config) => {
+  config.blocks.blocksConfig.comparisonSlider = {
+    id: 'comparisonSlider',
+    title: 'Comparison Slider',
+    icon: comparisonSliderSVG,
+    group: 'media',
+    view: View,
+    edit: Edit,
+    blockSchema: ({ intl }) => ComparisonSliderSchema(intl),
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+  };
+
+  return config;
+};
+
+export default applyConfig;

package/src/theme/_main.css

@@ -0,0 +1,199 @@
+.comparison-slider-block {
+  width: 100%;
+}
+
+.comparison-slider {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  cursor: ew-resize;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.comparison-slider--vertical {
+  cursor: ns-resize;
+}
+
+.comparison-slider.is-dragging {
+  cursor: grabbing;
+}
+
+.comparison-slider__image-container {
+  position: relative;
+  width: 100%;
+}
+
+.comparison-slider__image {
+  display: block;
+  width: 100%;
+  height: auto;
+  pointer-events: none;
+}
+
+.comparison-slider__image--before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.comparison-slider__handle {
+  position: absolute;
+  z-index: 10;
+}
+
+.comparison-slider__handle--horizontal {
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  transform: translateX(-50%);
+}
+
+.comparison-slider__handle--vertical {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 4px;
+  transform: translateY(-50%);
+}
+
+.comparison-slider__handle-line {
+  position: absolute;
+  background-color: #fff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+}
+
+.comparison-slider__handle--horizontal .comparison-slider__handle-line {
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 4px;
+  transform: translateX(-50%);
+}
+
+.comparison-slider__handle--vertical .comparison-slider__handle-line {
+  top: 50%;
+  right: 0;
+  left: 0;
+  height: 4px;
+  transform: translateY(-50%);
+}
+
+.comparison-slider__handle-button {
+  position: absolute;
+  display: flex;
+  width: 44px;
+  height: 44px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  transition: transform 0.15s ease;
+}
+
+.comparison-slider__handle--horizontal .comparison-slider__handle-button {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.comparison-slider__handle--vertical .comparison-slider__handle-button {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.comparison-slider:hover .comparison-slider__handle-button,
+.comparison-slider.is-dragging .comparison-slider__handle-button {
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+.comparison-slider__handle-button svg {
+  width: 24px;
+  height: 24px;
+  color: #333;
+}
+
+/* Text handle variant */
+.comparison-slider__handle-button--text {
+  width: auto;
+  min-width: 44px;
+  height: auto;
+  min-height: 44px;
+  padding: 8px 16px;
+  border-radius: 22px;
+}
+
+.comparison-slider__handle-text {
+  color: #333;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.comparison-slider__label {
+  position: absolute;
+  z-index: 5;
+  padding: 8px 16px;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  pointer-events: none;
+}
+
+.comparison-slider--horizontal .comparison-slider__label--before {
+  top: 16px;
+  left: 16px;
+}
+
+.comparison-slider--horizontal .comparison-slider__label--after {
+  top: 16px;
+  right: 16px;
+}
+
+.comparison-slider--vertical .comparison-slider__label--before {
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.comparison-slider--vertical .comparison-slider__label--after {
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.comparison-slider-placeholder {
+  display: flex;
+  min-height: 300px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  border: 2px dashed #ccc;
+  border-radius: 8px;
+  background-color: #f5f5f5;
+  text-align: center;
+}
+
+.comparison-slider-placeholder .placeholder-icon {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.comparison-slider-placeholder p {
+  margin: 0;
+  color: #666;
+  font-size: 16px;
+}

package/towncrier.toml

@@ -0,0 +1,33 @@
+[tool.towncrier]
+filename = "CHANGELOG.md"
+directory = "news/"
+title_format = "## {version} ({project_date})"
+underlines = ["", "", ""]
+template = "./node_modules/@plone/scripts/templates/towncrier_template.jinja"
+start_string = "<!-- towncrier release notes start -->\n"
+issue_format = "[#{issue}](https://github.com/interaktivgmbh/volto-comparison-slider/issue/{issue})"
+
+[[tool.towncrier.type]]
+directory = "breaking"
+name = "Breaking"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "feature"
+name = "Feature"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "bugfix"
+name = "Bugfix"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "internal"
+name = "Internal"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "documentation"
+name = "Documentation"
+showcontent = true

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "module": "preserve",
+    "noEmit": true,
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "jsx": "react-jsx",
+    "paths": {
+      "@plone/volto/*": ["../../core/packages/volto/src/*"],
+      "@interaktivgmbh/volto-comparison-slider/*": ["./src/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "public",
+    "coverage",
+    "**/*.test.{js,jsx,ts,tsx}",
+    "**/*.spec.{js,jsx,ts,tsx}",
+    "**/*.stories.{js,jsx,ts,tsx}"
+  ]
+}