-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
1,294 additions
and
699 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,2 @@ | ||
| # Use default npmjs registry for the SDKs | ||
| registry = https://registry.npmjs.org/ | ||
| # For now, turn off npm auto-install of peer dependencies to get rid of warnings | ||
| legacy-peer-deps=true | ||
| # Turn off messages such as > [email protected] list and > dx-component-builder-sdk list | ||
| loglevel=silent | ||
| # | ||
| # |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,6 +30,7 @@ | |
| "PHARMACODE", | ||
| "reactflow", | ||
| "Talia", | ||
| "timegrid" | ||
| "timegrid", | ||
| "widthpx" | ||
| ] | ||
| } | ||
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { Meta, Primary, Controls, Story } from '@storybook/blocks'; | ||
| import * as DemoStories from './demo.stories'; | ||
|
|
||
| <Meta of={DemoStories} /> | ||
|
|
||
| # Overview | ||
|
|
||
| The Image Magnify component provides image magnification features. Users can zoom in on images either by hovering over them or by clicking/double-clicking, based on the specified trigger mode. | ||
| This component offers two magnification modes: the default "Side by side" mode displays the original image on one side and the magnified version on the other. Users can customize this arrangement to display the zoomed image on the left or within the same space as the preview. Additionally, the zoomed image can be set to fill the available screen space if desired. | ||
|
|
||
| In Advanced mode, users can access configuration options to adjust the size and position of the zoomed image, along with additional settings like z-index and preview image horizontal offset position for finer control. | ||
|
|
||
| This component operates with a single image provided via the mapped URL field. Users can adjust the size of the smaller image by setting the width value smaller than the actual width of the full referenced image. | ||
|
|
||
| <Primary /> | ||
|
|
||
| ## Props | ||
|
|
||
| <Controls /> |
294 changes: 294 additions & 0 deletions
294
src/components/Pega_Extensions_ImageMagnify/config.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,294 @@ | ||
| { | ||
| "name": "Pega_Extensions_ImageMagnify", | ||
| "label": "Image Magnify", | ||
| "description": "Image Magnify", | ||
| "organization": "Pega", | ||
| "version": "1.0.0", | ||
| "library": "Extensions", | ||
| "allowedApplications": [], | ||
| "componentKey": "Pega_Extensions_ImageMagnify", | ||
| "type": "Field", | ||
| "subtype": "Text-URL", | ||
| "icon": "images/pz-url-active.svg", | ||
| "properties": [ | ||
| { | ||
| "name": "label", | ||
| "label": "Field label", | ||
| "format": "TEXT" | ||
| }, | ||
| { | ||
| "label": "Column settings", | ||
| "format": "GROUP", | ||
| "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'", | ||
| "properties": [ | ||
| { | ||
| "name": "columnWidth", | ||
| "label": "Column width", | ||
| "format": "SELECT", | ||
| "source": [ | ||
| { | ||
| "key": "auto", | ||
| "value": "Auto" | ||
| }, | ||
| { | ||
| "key": "custom", | ||
| "value": "Custom" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "width", | ||
| "label": "Width (px)", | ||
| "format": "NUMBER", | ||
| "visibility": "$this.columnWidth == 'custom'" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Preview Image settings", | ||
| "format": "GROUP", | ||
| "properties": [ | ||
| { | ||
| "format": "GROUP", | ||
| "properties": [ | ||
| { | ||
| "format": "SELECT", | ||
| "name": "widthSel", | ||
| "label": "Width", | ||
| "defaultValue": "defaultWidth", | ||
| "source": [ | ||
| { | ||
| "key": "defaultWidth", | ||
| "value": "Default Width" | ||
| }, | ||
| { | ||
| "key": "widthpx", | ||
| "value": "Custom Width" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "customWidth", | ||
| "label": "Width (px)", | ||
| "visibility": "(widthSel = widthpx)", | ||
| "format": "NUMBER" | ||
| }, | ||
| { | ||
| "format": "CASCADE", | ||
| "source": { | ||
| "format": "SELECT", | ||
| "label": "Image Alt Text", | ||
| "name": "altText", | ||
| "defaultValue": "constant", | ||
| "source": [ | ||
| { | ||
| "key": "constant", | ||
| "value": "Constant" | ||
| }, | ||
| { | ||
| "key": "propertyRef", | ||
| "value": "Property Reference" | ||
| } | ||
| ] | ||
| }, | ||
| "cascadeElements": [ | ||
| { | ||
| "key": "altTextOfImage", | ||
| "format": "TEXT", | ||
| "name": "altTextOfImage", | ||
| "label": "Alt Text Value", | ||
| "defaultValue": "", | ||
| "match": "constant" | ||
| }, | ||
| { | ||
| "key": "altTextOfImage", | ||
| "format": "PROPERTY", | ||
| "name": "propaltTextOfImage", | ||
| "label": "Alt Text Value", | ||
| "match": "propertyRef" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Magnification settings", | ||
| "format": "GROUP", | ||
| "properties": [ | ||
| { | ||
| "name": "magnifyMode", | ||
| "label": "Magnifier mode", | ||
| "format": "SELECT", | ||
| "defaultValue": "magSideBySide", | ||
| "source": [ | ||
| { | ||
| "key": "magSideBySide", | ||
| "value": "Side by side" | ||
| }, | ||
| { | ||
| "key": "magAdvanced", | ||
| "value": "Advanced" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "magnifyTrigger", | ||
| "label": "Magnifier activation trigger", | ||
| "format": "SELECT", | ||
| "defaultValue": "magTriggerHover", | ||
| "source": [ | ||
| { | ||
| "key": "magTriggerHover", | ||
| "value": "Hover" | ||
| }, | ||
| { | ||
| "key": "magTriggerClick", | ||
| "value": "Click" | ||
| }, | ||
| { | ||
| "key": "magTriggerDoubleClick", | ||
| "value": "Double click" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Side by Side", | ||
| "format": "GROUP", | ||
| "visibility": "$this.magnifyMode == magSideBySide", | ||
| "properties": [ | ||
| { | ||
| "name": "alwaysInPlace", | ||
| "label": "Always magnify in place", | ||
| "format": "BOOLEAN" | ||
| }, | ||
| { | ||
| "name": "switchSides", | ||
| "label": "Show on left", | ||
| "format": "BOOLEAN" | ||
| }, | ||
| { | ||
| "name": "fillAvailableSpace", | ||
| "label": "Fill available Space", | ||
| "format": "BOOLEAN" | ||
| }, | ||
| { | ||
| "name": "fillAlignTop", | ||
| "label": "Align to top", | ||
| "format": "BOOLEAN" | ||
| }, | ||
| { | ||
| "name": "fillGapTop", | ||
| "label": "Gap top", | ||
| "format": "NUMBER" | ||
| }, | ||
| { | ||
| "name": "fillGapBottom", | ||
| "label": "Gap bottom", | ||
| "format": "NUMBER" | ||
| }, | ||
| { | ||
| "name": "fillGapLeft", | ||
| "label": "Gap left", | ||
| "format": "NUMBER" | ||
| }, | ||
| { | ||
| "name": "fillGapRight", | ||
| "label": "Gap right", | ||
| "format": "NUMBER" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Advanced", | ||
| "format": "GROUP", | ||
| "visibility": "$this.magnifyMode == magAdvanced", | ||
| "properties": [ | ||
| { | ||
| "name": "zoomTop", | ||
| "label": "Zoom top position (px)", | ||
| "format": "NUMBER" | ||
| }, | ||
| { | ||
| "name": "zoomLeft", | ||
| "label": "Zoom left position (px)", | ||
| "format": "NUMBER" | ||
| }, | ||
| { | ||
| "name": "zoomHeight", | ||
| "label": "Zoom display height (%)", | ||
| "format": "NUMBER" | ||
| }, | ||
| { | ||
| "name": "zoomWidth", | ||
| "label": "Zoom display width (px)", | ||
| "format": "NUMBER" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Conditions", | ||
| "format": "GROUP", | ||
| "properties": [ | ||
| { | ||
| "name": "visibility", | ||
| "label": "Visibility", | ||
| "format": "VISIBILITY" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Advanced", | ||
| "format": "GROUP", | ||
| "collapsible": true, | ||
| "properties": [ | ||
| { | ||
| "name": "testId", | ||
| "label": "Test ID", | ||
| "format": "TEXT", | ||
| "ignorePattern": "[^-_\\p{N}\\p{L}]", | ||
| "includeAnnotations": false | ||
| }, | ||
| { | ||
| "name": "zoomZIndex", | ||
| "label": "Zoom display z-index value", | ||
| "format": "NUMBER", | ||
| "visibility": "$this.magnifyMode == magAdvanced" | ||
| }, | ||
| { | ||
| "name": "previewRightOffset", | ||
| "label": "Preview image right offset (px)", | ||
| "format": "NUMBER", | ||
| "visibility": "$this.magnifyMode == magAdvanced" | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "defaultConfig": { | ||
| "label": "@L $this.label", | ||
| "widthSel": "defaultWidth", | ||
| "customWidth": 100, | ||
| "altText": "constant", | ||
| "altTextOfImage": "", | ||
| "propaltTextOfImage": "", | ||
| "magnifyTrigger": "magTriggerHover", | ||
| "magnifyMode": "magSideBySide", | ||
| "fillAvailableSpace": false, | ||
| "fillAlignTop": false, | ||
| "fillGapLeft": 0, | ||
| "fillGapRight": 0, | ||
| "fillGapTop": 0, | ||
| "fillGapBottom": 0, | ||
| "switchSides": false, | ||
| "alwaysInPlace": false, | ||
| "zoomTop": 0, | ||
| "zoomLeft": 0, | ||
| "zoomHeight": 100, | ||
| "zoomWidth": 300, | ||
| "previewRightOffset": 0, | ||
| "zoomZIndex": 999 | ||
| } | ||
| } |
Oops, something went wrong.