@dnncommunity/dnn-elements 0.13.1 → 0.14.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/README.md +2 -2
  2. package/dist/cjs/dnn-button.cjs.entry.js +1 -1
  3. package/dist/cjs/{dnn-button_14.cjs.entry.js → dnn-button_16.cjs.entry.js} +274 -38
  4. package/dist/cjs/dnn-button_16.cjs.entry.js.map +1 -0
  5. package/dist/cjs/dnn-checkbox.cjs.entry.js +1 -1
  6. package/dist/cjs/dnn-chevron.cjs.entry.js +1 -1
  7. package/dist/cjs/dnn-collapsible.cjs.entry.js +1 -1
  8. package/dist/cjs/dnn-color-picker.cjs.entry.js +1 -1
  9. package/dist/cjs/dnn-dropzone.cjs.entry.js +1 -1
  10. package/dist/cjs/dnn-image-cropper.cjs.entry.js +7 -23
  11. package/dist/cjs/dnn-image-cropper.cjs.entry.js.map +1 -1
  12. package/dist/cjs/dnn-modal.cjs.entry.js +1 -1
  13. package/dist/cjs/dnn-searchbox.cjs.entry.js +1 -1
  14. package/dist/cjs/dnn-sort-icon.cjs.entry.js +1 -1
  15. package/dist/cjs/dnn-tab.cjs.entry.js +1 -1
  16. package/dist/cjs/dnn-tabs.cjs.entry.js +5 -3
  17. package/dist/cjs/dnn-tabs.cjs.entry.js.map +1 -1
  18. package/dist/cjs/dnn-toggle.cjs.entry.js +1 -1
  19. package/dist/cjs/dnn-treeview-item.cjs.entry.js +15 -13
  20. package/dist/cjs/dnn-treeview-item.cjs.entry.js.map +1 -1
  21. package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js +123 -0
  22. package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js.map +1 -0
  23. package/dist/cjs/dnn-vertical-splitview.cjs.entry.js +123 -0
  24. package/dist/cjs/dnn-vertical-splitview.cjs.entry.js.map +1 -0
  25. package/dist/cjs/dnn.cjs.js +2 -2
  26. package/dist/cjs/{index-e85ec026.js → index-6a6ac523.js} +4 -1
  27. package/dist/cjs/index-6a6ac523.js.map +1 -0
  28. package/dist/cjs/{index-eede7745.js → index-ba8b86b1.js} +2 -2
  29. package/dist/cjs/index-ba8b86b1.js.map +1 -0
  30. package/dist/cjs/loader.cjs.js +2 -2
  31. package/dist/cjs/mouseUtilities-75be531a.js +25 -0
  32. package/dist/cjs/mouseUtilities-75be531a.js.map +1 -0
  33. package/dist/collection/collection-manifest.json +3 -1
  34. package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js +6 -22
  35. package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js.map +1 -1
  36. package/dist/collection/components/dnn-tabs/dnn-tabs.js +4 -2
  37. package/dist/collection/components/dnn-tabs/dnn-tabs.js.map +1 -1
  38. package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js +14 -12
  39. package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js.map +1 -1
  40. package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.css +77 -0
  41. package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js +132 -0
  42. package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js.map +1 -0
  43. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.css +21 -0
  44. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js +219 -0
  45. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js.map +1 -0
  46. package/dist/collection/utilities/mouseUtilities.js +20 -0
  47. package/dist/collection/utilities/mouseUtilities.js.map +1 -0
  48. package/dist/dnn/dnn-button.entry.js +1 -1
  49. package/dist/dnn/dnn-checkbox.entry.js +1 -1
  50. package/dist/dnn/dnn-chevron.entry.js +1 -1
  51. package/dist/dnn/dnn-collapsible.entry.js +1 -1
  52. package/dist/dnn/dnn-color-picker.entry.js +1 -1
  53. package/dist/dnn/dnn-dropzone.entry.js +1 -1
  54. package/dist/dnn/dnn-image-cropper.entry.js +7 -23
  55. package/dist/dnn/dnn-image-cropper.entry.js.map +1 -1
  56. package/dist/dnn/dnn-modal.entry.js +1 -1
  57. package/dist/dnn/dnn-searchbox.entry.js +1 -1
  58. package/dist/dnn/dnn-sort-icon.entry.js +1 -1
  59. package/dist/dnn/dnn-tab.entry.js +1 -1
  60. package/dist/dnn/dnn-tabs.entry.js +5 -3
  61. package/dist/dnn/dnn-tabs.entry.js.map +1 -1
  62. package/dist/dnn/dnn-toggle.entry.js +1 -1
  63. package/dist/dnn/dnn-treeview-item.entry.js +15 -13
  64. package/dist/dnn/dnn-treeview-item.entry.js.map +1 -1
  65. package/dist/dnn/dnn-vertical-overflow-menu.entry.js +119 -0
  66. package/dist/dnn/dnn-vertical-overflow-menu.entry.js.map +1 -0
  67. package/dist/dnn/dnn-vertical-splitview.entry.js +119 -0
  68. package/dist/dnn/dnn-vertical-splitview.entry.js.map +1 -0
  69. package/dist/dnn/dnn.esm.js +2 -2
  70. package/dist/dnn/{index-6c0764e5.js → index-3e56049b.js} +2 -2
  71. package/dist/dnn/index-3e56049b.js.map +1 -0
  72. package/dist/dnn/mouseUtilities-817973b4.js +23 -0
  73. package/dist/dnn/mouseUtilities-817973b4.js.map +1 -0
  74. package/dist/dnn/p-d10994a3.js +2 -0
  75. package/dist/dnn/p-d10994a3.js.map +1 -0
  76. package/dist/dnn/{p-7acf3104.entry.js → p-fef1bc51.entry.js} +4 -4
  77. package/dist/dnn/p-fef1bc51.entry.js.map +1 -0
  78. package/dist/esm/dnn-button.entry.js +1 -1
  79. package/dist/esm/{dnn-button_14.entry.js → dnn-button_16.entry.js} +273 -39
  80. package/dist/esm/dnn-button_16.entry.js.map +1 -0
  81. package/dist/esm/dnn-checkbox.entry.js +1 -1
  82. package/dist/esm/dnn-chevron.entry.js +1 -1
  83. package/dist/esm/dnn-collapsible.entry.js +1 -1
  84. package/dist/esm/dnn-color-picker.entry.js +1 -1
  85. package/dist/esm/dnn-dropzone.entry.js +1 -1
  86. package/dist/esm/dnn-image-cropper.entry.js +7 -23
  87. package/dist/esm/dnn-image-cropper.entry.js.map +1 -1
  88. package/dist/esm/dnn-modal.entry.js +1 -1
  89. package/dist/esm/dnn-searchbox.entry.js +1 -1
  90. package/dist/esm/dnn-sort-icon.entry.js +1 -1
  91. package/dist/esm/dnn-tab.entry.js +1 -1
  92. package/dist/esm/dnn-tabs.entry.js +5 -3
  93. package/dist/esm/dnn-tabs.entry.js.map +1 -1
  94. package/dist/esm/dnn-toggle.entry.js +1 -1
  95. package/dist/esm/dnn-treeview-item.entry.js +15 -13
  96. package/dist/esm/dnn-treeview-item.entry.js.map +1 -1
  97. package/dist/esm/dnn-vertical-overflow-menu.entry.js +119 -0
  98. package/dist/esm/dnn-vertical-overflow-menu.entry.js.map +1 -0
  99. package/dist/esm/dnn-vertical-splitview.entry.js +119 -0
  100. package/dist/esm/dnn-vertical-splitview.entry.js.map +1 -0
  101. package/dist/esm/dnn.js +2 -2
  102. package/dist/esm/{index-f79d9e82.js → index-212d30ec.js} +4 -1
  103. package/dist/esm/index-212d30ec.js.map +1 -0
  104. package/dist/esm/{index-6c0764e5.js → index-3e56049b.js} +2 -2
  105. package/dist/esm/index-3e56049b.js.map +1 -0
  106. package/dist/esm/loader.js +2 -2
  107. package/dist/esm/mouseUtilities-817973b4.js +23 -0
  108. package/dist/esm/mouseUtilities-817973b4.js.map +1 -0
  109. package/dist/types/components/dnn-image-cropper/dnn-image-cropper.d.ts +0 -1
  110. package/dist/types/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.d.ts +17 -0
  111. package/dist/types/components/dnn-vertical-splitview/dnn-vertical-splitview.d.ts +21 -0
  112. package/dist/types/components.d.ts +54 -0
  113. package/dist/types/utilities/mouseUtilities.d.ts +4 -0
  114. package/package.json +1 -1
  115. package/dist/cjs/dnn-button_14.cjs.entry.js.map +0 -1
  116. package/dist/cjs/index-e85ec026.js.map +0 -1
  117. package/dist/cjs/index-eede7745.js.map +0 -1
  118. package/dist/dnn/index-6c0764e5.js.map +0 -1
  119. package/dist/dnn/p-7acf3104.entry.js.map +0 -1
  120. package/dist/dnn/p-bd3d3361.js +0 -2
  121. package/dist/dnn/p-bd3d3361.js.map +0 -1
  122. package/dist/esm/dnn-button_14.entry.js.map +0 -1
  123. package/dist/esm/index-6c0764e5.js.map +0 -1
  124. package/dist/esm/index-f79d9e82.js.map +0 -1
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-eede7745.js');
5
+ const index = require('./index-ba8b86b1.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  /*
@@ -30,7 +30,7 @@ const defineCustomElements = (win, options) => {
30
30
  if (typeof window === 'undefined') return Promise.resolve();
31
31
  return patchEsm().then(() => {
32
32
  appGlobals.globalScripts();
33
- return index.bootstrapLazy([["dnn-image-cropper.cjs",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1028],"hasChildren":[32]}]]],["dnn-checkbox.cjs",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs.cjs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle.cjs",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"animating":[32],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleOtherCollapsibleHeightChanged"]]]]],["dnn-dropzone.cjs",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]]], options);
33
+ return index.bootstrapLazy([["dnn-image-cropper.cjs",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1028],"hasChildren":[32]}]]],["dnn-checkbox.cjs",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs.cjs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle.cjs",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[2,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button.cjs",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"animating":[32],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleOtherCollapsibleHeightChanged"]]]]],["dnn-dropzone.cjs",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
34
34
  });
35
35
  };
36
36
 
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ function getMovementFromEvent(event, previousTouch) {
4
+ let movementX = 0;
5
+ let movementY = 0;
6
+ if (event instanceof MouseEvent) {
7
+ movementX = event.movementX;
8
+ movementY = event.movementY;
9
+ }
10
+ if (typeof TouchEvent !== "undefined") {
11
+ if (event instanceof TouchEvent) {
12
+ let touch = event.touches[0];
13
+ if (previousTouch != undefined) {
14
+ movementX = touch.pageX - this.previousTouch.pageX;
15
+ movementY = touch.pageY - this.previousTouch.pageY;
16
+ }
17
+ previousTouch = touch;
18
+ }
19
+ }
20
+ return { movementX, movementY };
21
+ }
22
+
23
+ exports.getMovementFromEvent = getMovementFromEvent;
24
+
25
+ //# sourceMappingURL=mouseUtilities-75be531a.js.map
@@ -0,0 +1 @@
1
+ {"file":"mouseUtilities-75be531a.js","mappings":";;SAAgB,oBAAoB,CAChC,KAA8B,EAC9B,aAAoB;EAEpB,IAAI,SAAS,GAAG,CAAC,CAAC;EAClB,IAAI,SAAS,GAAG,CAAC,CAAC;EAClB,IAAI,KAAK,YAAY,UAAU,EAAE;IAC/B,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;GAC7B;EACD,IAAI,OAAO,UAAU,KAAK,WAAW,EAAC;IACpC,IAAI,KAAK,YAAY,UAAU,EAAE;MAC/B,IAAI,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;MAC7B,IAAI,aAAa,IAAI,SAAS,EAAE;QAC9B,SAAS,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;QACnD,SAAS,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;OACpD;MACD,aAAa,GAAG,KAAK,CAAC;KACvB;GACF;EACD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAClC;;;;","names":[],"sources":["./src/utilities/mouseUtilities.ts"],"sourcesContent":["export function getMovementFromEvent(\r\n event: MouseEvent | TouchEvent,\r\n previousTouch: Touch\r\n) {\r\n let movementX = 0;\r\n let movementY = 0;\r\n if (event instanceof MouseEvent) {\r\n movementX = event.movementX;\r\n movementY = event.movementY;\r\n }\r\n if (typeof TouchEvent !== \"undefined\"){\r\n if (event instanceof TouchEvent) {\r\n let touch = event.touches[0];\r\n if (previousTouch != undefined) {\r\n movementX = touch.pageX - this.previousTouch.pageX;\r\n movementY = touch.pageY - this.previousTouch.pageY;\r\n }\r\n previousTouch = touch;\r\n }\r\n }\r\n return { movementX, movementY };\r\n }"],"version":3}
@@ -13,7 +13,9 @@
13
13
  "./components/dnn-tab/dnn-tab.js",
14
14
  "./components/dnn-tabs/dnn-tabs.js",
15
15
  "./components/dnn-toggle/dnn-toggle.js",
16
- "./components/dnn-treeview-item/dnn-treeview-item.js"
16
+ "./components/dnn-treeview-item/dnn-treeview-item.js",
17
+ "./components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js",
18
+ "./components/dnn-vertical-splitview/dnn-vertical-splitview.js"
17
19
  ],
18
20
  "compiler": {
19
21
  "name": "@stencil/core",
@@ -1,5 +1,6 @@
1
1
  import { Component, Host, h, State, Prop, Event } from '@stencil/core';
2
2
  import { CornerType } from './CornerType';
3
+ import { getMovementFromEvent } from "../../utilities/mouseUtilities";
3
4
  /**
4
5
  * Allows cropping an image in-browser with the option to enforce a specific final size.
5
6
  * All computation happens in the browser and the final image is emmited
@@ -97,7 +98,7 @@ export class DnnImageCropper {
97
98
  const wantedRatio = this.width / this.height;
98
99
  const cropRect = this.crop.getBoundingClientRect();
99
100
  const imageRect = this.image.getBoundingClientRect();
100
- let { movementX, movementY } = this.getMouvementFromEvent(event);
101
+ let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);
101
102
  if (Math.abs(movementX) < Math.abs(movementY)) {
102
103
  orientation = "vertical";
103
104
  }
@@ -211,7 +212,7 @@ export class DnnImageCropper {
211
212
  if (!this.isMouseStillInTarget(ev)) {
212
213
  return;
213
214
  }
214
- let { movementX, movementY } = this.getMouvementFromEvent(ev);
215
+ let { movementX, movementY } = getMovementFromEvent(ev, this.previousTouch);
215
216
  let newLeft = this.crop.offsetLeft + movementX;
216
217
  let newTop = this.crop.offsetTop + movementY;
217
218
  var imageRect = this.image.getBoundingClientRect();
@@ -233,7 +234,9 @@ export class DnnImageCropper {
233
234
  };
234
235
  }
235
236
  componentDidLoad() {
236
- this.setView("noPictureView");
237
+ requestAnimationFrame(() => {
238
+ this.setView("noPictureView");
239
+ });
237
240
  }
238
241
  setView(newView) {
239
242
  const views = this.host.shadowRoot.querySelectorAll(".view");
@@ -342,25 +345,6 @@ export class DnnImageCropper {
342
345
  }
343
346
  return { top, left };
344
347
  }
345
- getMouvementFromEvent(event) {
346
- let movementX = 0;
347
- let movementY = 0;
348
- if (event instanceof MouseEvent) {
349
- movementX = event.movementX;
350
- movementY = event.movementY;
351
- }
352
- if (typeof TouchEvent !== "undefined") {
353
- if (event instanceof TouchEvent) {
354
- let touch = event.touches[0];
355
- if (this.previousTouch != undefined) {
356
- movementX = touch.pageX - this.previousTouch.pageX;
357
- movementY = touch.pageY - this.previousTouch.pageY;
358
- }
359
- this.previousTouch = touch;
360
- }
361
- }
362
- return { movementX, movementY };
363
- }
364
348
  isMouseStillInTarget(event) {
365
349
  var inside = false;
366
350
  let mouseX;
@@ -1 +1 @@
1
- {"version":3,"file":"dnn-image-cropper.js","sourceRoot":"","sources":["../../../src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n tag: 'dnn-image-cropper',\r\n styleUrl: 'dnn-image-cropper.scss',\r\n shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n /** Sets the desired final image width. */\r\n @Prop() width: number = 600;\r\n\r\n /** Sets the desired final image height. */\r\n @Prop() height: number = 600;\r\n\r\n /** Can be used to customize controls text.\r\n * Some values support tokens, see default values for examples.\r\n */\r\n @Prop() resx: {\r\n capture: string;\r\n dragAndDropFile: string;\r\n or: string;\r\n takePicture: string;\r\n uploadFile: string;\r\n imageTooSmall: string;\r\n modalCloseText: string;\r\n } = {\r\n capture: \"Capture\",\r\n dragAndDropFile: \"Drag and drop an image\",\r\n or: \"or\",\r\n takePicture: \"Take a picture\",\r\n uploadFile: \"Upload an image\",\r\n imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\r\n modalCloseText: \"Close\",\r\n }\r\n\r\n /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n @Prop() quality: number = 0.8;\r\n\r\n /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n @Prop() preventUndersized: boolean = false;\r\n\r\n /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n @State() view: IComponentInterfaces[\"View\"];\r\n \r\n private host: HTMLElement;\r\n private hasPictureView: HTMLDivElement;\r\n private noPictureView: HTMLDivElement;\r\n private canvas: HTMLCanvasElement;\r\n private image: HTMLImageElement;\r\n private crop: HTMLDivElement;\r\n private previousTouch: Touch;\r\n private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n componentDidLoad() {\r\n this.setView(\"noPictureView\");\r\n }\r\n\r\n private setView(newView: IComponentInterfaces[\"View\"]){\r\n const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n views.forEach(v =>\r\n v.classList.remove(\"visible\"));\r\n switch (newView) {\r\n case \"noPictureView\":\r\n this.noPictureView.classList.add(\"visible\");\r\n break;\r\n case \"hasPictureView\":\r\n this.hasPictureView.classList.add(\"visible\");\r\n break;\r\n default:\r\n break;\r\n }\r\n this.view = newView;\r\n }\r\n\r\n private initCrop(){\r\n var wantedRatio = this.width / this.height;\r\n var imageRect = this.image.getBoundingClientRect();\r\n var imageRatio = imageRect.width / imageRect.height;\r\n \r\n if (wantedRatio > imageRatio){\r\n var wantedHeight = imageRect.width / wantedRatio;\r\n var diff = imageRect.height - wantedHeight;\r\n this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n }\r\n else{\r\n var wantedWidth = imageRect.height * wantedRatio;\r\n var diff = imageRect.width - wantedWidth;\r\n this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n }\r\n }\r\n\r\n private setImage(){\r\n this.image.addEventListener('load', () => {\r\n this.initCrop();\r\n this.emitImage();\r\n })\r\n this.image.src = this.canvas.toDataURL();\r\n }\r\n\r\n private handleNewFile(file: File): void {\r\n if (file.type.split('/')[0] != \"image\"){\r\n return;\r\n }\r\n \r\n var reader = new FileReader();\r\n reader.onload = readerLoadEvent => {\r\n var img = new Image();\r\n img.onload = () => {\r\n this.canvas.width = img.width;\r\n this.canvas.height = img.height;\r\n if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n this.imageTooSmallModal.show();\r\n return;\r\n }\r\n var ctx = this.canvas.getContext(\"2d\");\r\n ctx.drawImage(img,0,0);\r\n this.setView(\"hasPictureView\");\r\n this.setImage();\r\n }\r\n img.src = readerLoadEvent.target.result.toString();\r\n }\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n const element = event.target as HTMLElement;\r\n const className = element.classList[0];\r\n\r\n document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n switch (className) {\r\n case \"crop\":\r\n document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n break;\r\n case \"nw\":\r\n document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n break;\r\n case \"ne\":\r\n document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n break\r\n case \"se\":\r\n document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n break;\r\n case \"sw\":\r\n document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n private handleImageCropFinished = (_ev: MouseEvent) => {\r\n this.emitImage();\r\n document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n this.previousTouch = undefined;\r\n }\r\n\r\n private emitImage() {\r\n var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n var cropRect = this.crop.getBoundingClientRect();\r\n var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n if (x < 0)\r\n x = 0;\r\n if (x > this.image.naturalWidth)\r\n x = this.image.naturalWidth;\r\n if (y < 0)\r\n y = 0;\r\n if (y > this.image.naturalWidth)\r\n y = this.image.naturalWidth;\r\n if (width > this.image.naturalWidth)\r\n width = this.image.naturalWidth;\r\n if (height > this.image.naturalHeight)\r\n height = this.image.naturalHeight;\r\n\r\n var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n this.imageCropChanged.emit(dataUrl);\r\n }\r\n\r\n private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n this.canvas.width = desiredWidth;\r\n this.canvas.height = desiredHeight;\r\n const context = this.canvas.getContext(\"2d\");\r\n context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n }\r\n\r\n private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.nw);\r\n }\r\n\r\n private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.ne);\r\n }\r\n\r\n private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.se);\r\n }\r\n\r\n private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.sw);\r\n }\r\n\r\n private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n if (!this.isMouseStillInTarget(event)){\r\n return;\r\n }\r\n \r\n let {left, top} = this.getCornerLeftTop(corner);\r\n let newWidth = 0;\r\n let newHeight = 0;\r\n let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n const wantedRatio = this.width / this.height;\r\n const cropRect = this.crop.getBoundingClientRect();\r\n const imageRect = this.image.getBoundingClientRect();\r\n let { movementX, movementY } = this.getMouvementFromEvent(event);\r\n if (Math.abs(movementX) < Math.abs(movementY)){\r\n orientation = \"vertical\";\r\n }\r\n\r\n if (orientation == \"horizontal\"){\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.sw:\r\n newWidth = cropRect.width - movementX;\r\n newHeight = newWidth / wantedRatio;\r\n break;\r\n case CornerType.ne:\r\n case CornerType.se:\r\n newWidth = cropRect.width + movementX;\r\n newHeight = newWidth / wantedRatio;\r\n break;\r\n default:\r\n break;\r\n }\r\n } else{\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.ne:\r\n newHeight = cropRect.height - movementY;\r\n newWidth = newHeight * wantedRatio;\r\n break;\r\n case CornerType.se:\r\n case CornerType.sw:\r\n newHeight = cropRect.height + movementY;\r\n newWidth = newHeight * wantedRatio;\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.ne:\r\n case CornerType.nw:\r\n const topOffset = cropRect.height - newHeight;\r\n top = this.crop.offsetTop + topOffset;\r\n default:\r\n break;\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.sw:\r\n const leftOffset = cropRect.width - newWidth;\r\n left = this.crop.offsetLeft + leftOffset;\r\n if (left < 0) left = 0;\r\n if (left > imageRect.width) left = imageRect.width;\r\n if (top < 0) top = 0;\r\n if (top > imageRect.height) top = imageRect.height;\r\n if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n break;\r\n case CornerType.ne:\r\n case CornerType.se:\r\n if (top < 0) top = 0;\r\n if (top > imageRect.height) top = imageRect.height;\r\n if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n if (newWidth / newHeight != wantedRatio){\r\n return;\r\n }\r\n\r\n if (this.preventUndersized){\r\n const zoomRatio = this.image.width / this.image.naturalWidth;\r\n if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n return;\r\n }\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.ne:\r\n this.crop.style.top = `${top}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.nw:\r\n this.crop.style.left = `${left}px`;\r\n this.crop.style.top = `${top}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.se:\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.sw:\r\n this.crop.style.left = `${left}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n let left = 0;\r\n let top = 0;\r\n switch (corner) {\r\n case CornerType.se:\r\n left = this.crop.offsetLeft;\r\n top = this.crop.offsetTop;\r\n break;\r\n case CornerType.sw:\r\n top = this.crop.offsetTop;\r\n break;\r\n default:\r\n break;\r\n }\r\n return {top, left};\r\n }\r\n\r\n private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n if (!this.isMouseStillInTarget(ev)){\r\n return;\r\n }\r\n let {movementX, movementY} = this.getMouvementFromEvent(ev);\r\n let newLeft = this.crop.offsetLeft + movementX;\r\n let newTop = this.crop.offsetTop + movementY;\r\n var imageRect = this.image.getBoundingClientRect();\r\n var cropRect = this.crop.getBoundingClientRect();\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newTop < 0){\r\n newTop = 0;\r\n }\r\n if (newLeft + cropRect.width > imageRect.width){\r\n newLeft = this.crop.offsetLeft;\r\n }\r\n if (newTop + cropRect.height > imageRect.height){\r\n newTop = this.crop.offsetTop;\r\n }\r\n this.crop.style.left = newLeft + \"px\";\r\n this.crop.style.top = newTop + \"px\";\r\n };\r\n \r\n private getMouvementFromEvent(event: MouseEvent | TouchEvent) {\r\n let movementX = 0;\r\n let movementY = 0;\r\n if (event instanceof MouseEvent) {\r\n movementX = event.movementX;\r\n movementY = event.movementY;\r\n }\r\n if (typeof TouchEvent !== \"undefined\"){\r\n if (event instanceof TouchEvent) {\r\n let touch = event.touches[0];\r\n if (this.previousTouch != undefined) {\r\n movementX = touch.pageX - this.previousTouch.pageX;\r\n movementY = touch.pageY - this.previousTouch.pageY;\r\n }\r\n this.previousTouch = touch;\r\n }\r\n }\r\n return { movementX, movementY };\r\n }\r\n\r\n private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n var inside = false;\r\n let mouseX: number;\r\n let mouseY: number;\r\n const imageRect = this.image.getBoundingClientRect();\r\n \r\n if (event instanceof MouseEvent){\r\n mouseX = event.clientX;\r\n mouseY = event.clientY;\r\n }\r\n\r\n if (typeof TouchEvent !== \"undefined\"){\r\n if (event instanceof TouchEvent){\r\n var touch = event.touches[0];\r\n mouseX = touch.clientX;\r\n mouseY = touch.clientY;\r\n }\r\n }\r\n \r\n if (\r\n mouseX >= imageRect.x &&\r\n mouseY >= imageRect.y &&\r\n mouseX <= imageRect.left + imageRect.width &&\r\n mouseY <= imageRect.top + imageRect.height)\r\n {\r\n inside = true;\r\n }\r\n\r\n var corners = this.crop.querySelectorAll(\"div\");\r\n corners.forEach(corner =>{\r\n var cornerRect = corner.getBoundingClientRect();\r\n if (\r\n mouseX >= cornerRect.x &&\r\n mouseY >= cornerRect.y &&\r\n mouseX <= cornerRect.left + cornerRect.width &&\r\n mouseY <= cornerRect.top + cornerRect.height)\r\n {\r\n inside = true;\r\n }\r\n })\r\n\r\n return inside;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host ref={el => this.host = el}>\r\n <canvas ref={el => this.canvas = el} />\r\n <div\r\n class=\"view\"\r\n ref={el => this.hasPictureView = el}\r\n >\r\n <div class=\"cropper\">\r\n <img ref={el => this.image = el} />\r\n <div class=\"backdrop\" />\r\n <div\r\n class=\"crop\"\r\n ref={e => this.crop = e}\r\n onMouseDown={this.handleCropMouseDown}\r\n onTouchStart={this.handleCropMouseDown}\r\n >\r\n <div class=\"nw\" />\r\n <div class=\"ne\" />\r\n <div class=\"se\" />\r\n <div class=\"sw\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"view\"\r\n ref={el => this.noPictureView = el}>\r\n <dnn-dropzone\r\n allowCameraMode\r\n onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n resx={\r\n {\r\n capture: this.resx.capture,\r\n dragAndDropFile: this.resx.dragAndDropFile,\r\n or: this.resx.or,\r\n takePicture: this.resx.takePicture,\r\n uploadFile: this.resx.uploadFile,\r\n }\r\n }\r\n />\r\n </div>\r\n <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n </dnn-modal>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}"]}
1
+ {"version":3,"file":"dnn-image-cropper.js","sourceRoot":"","sources":["../../../src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n tag: 'dnn-image-cropper',\r\n styleUrl: 'dnn-image-cropper.scss',\r\n shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n /** Sets the desired final image width. */\r\n @Prop() width: number = 600;\r\n\r\n /** Sets the desired final image height. */\r\n @Prop() height: number = 600;\r\n\r\n /** Can be used to customize controls text.\r\n * Some values support tokens, see default values for examples.\r\n */\r\n @Prop() resx: {\r\n capture: string;\r\n dragAndDropFile: string;\r\n or: string;\r\n takePicture: string;\r\n uploadFile: string;\r\n imageTooSmall: string;\r\n modalCloseText: string;\r\n } = {\r\n capture: \"Capture\",\r\n dragAndDropFile: \"Drag and drop an image\",\r\n or: \"or\",\r\n takePicture: \"Take a picture\",\r\n uploadFile: \"Upload an image\",\r\n imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\r\n modalCloseText: \"Close\",\r\n }\r\n\r\n /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n @Prop() quality: number = 0.8;\r\n\r\n /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n @Prop() preventUndersized: boolean = false;\r\n\r\n /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n @State() view: IComponentInterfaces[\"View\"];\r\n \r\n private host: HTMLElement;\r\n private hasPictureView: HTMLDivElement;\r\n private noPictureView: HTMLDivElement;\r\n private canvas: HTMLCanvasElement;\r\n private image: HTMLImageElement;\r\n private crop: HTMLDivElement;\r\n private previousTouch: Touch;\r\n private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n this.setView(\"noPictureView\");\r\n })\r\n }\r\n\r\n private setView(newView: IComponentInterfaces[\"View\"]){\r\n const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n views.forEach(v =>\r\n v.classList.remove(\"visible\"));\r\n switch (newView) {\r\n case \"noPictureView\":\r\n this.noPictureView.classList.add(\"visible\");\r\n break;\r\n case \"hasPictureView\":\r\n this.hasPictureView.classList.add(\"visible\");\r\n break;\r\n default:\r\n break;\r\n }\r\n this.view = newView;\r\n }\r\n\r\n private initCrop(){\r\n var wantedRatio = this.width / this.height;\r\n var imageRect = this.image.getBoundingClientRect();\r\n var imageRatio = imageRect.width / imageRect.height;\r\n \r\n if (wantedRatio > imageRatio){\r\n var wantedHeight = imageRect.width / wantedRatio;\r\n var diff = imageRect.height - wantedHeight;\r\n this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n }\r\n else{\r\n var wantedWidth = imageRect.height * wantedRatio;\r\n var diff = imageRect.width - wantedWidth;\r\n this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n }\r\n }\r\n\r\n private setImage(){\r\n this.image.addEventListener('load', () => {\r\n this.initCrop();\r\n this.emitImage();\r\n })\r\n this.image.src = this.canvas.toDataURL();\r\n }\r\n\r\n private handleNewFile(file: File): void {\r\n if (file.type.split('/')[0] != \"image\"){\r\n return;\r\n }\r\n \r\n var reader = new FileReader();\r\n reader.onload = readerLoadEvent => {\r\n var img = new Image();\r\n img.onload = () => {\r\n this.canvas.width = img.width;\r\n this.canvas.height = img.height;\r\n if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n this.imageTooSmallModal.show();\r\n return;\r\n }\r\n var ctx = this.canvas.getContext(\"2d\");\r\n ctx.drawImage(img,0,0);\r\n this.setView(\"hasPictureView\");\r\n this.setImage();\r\n }\r\n img.src = readerLoadEvent.target.result.toString();\r\n }\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n const element = event.target as HTMLElement;\r\n const className = element.classList[0];\r\n\r\n document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n switch (className) {\r\n case \"crop\":\r\n document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n break;\r\n case \"nw\":\r\n document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n break;\r\n case \"ne\":\r\n document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n break\r\n case \"se\":\r\n document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n break;\r\n case \"sw\":\r\n document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n private handleImageCropFinished = (_ev: MouseEvent) => {\r\n this.emitImage();\r\n document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n this.previousTouch = undefined;\r\n }\r\n\r\n private emitImage() {\r\n var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n var cropRect = this.crop.getBoundingClientRect();\r\n var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n if (x < 0)\r\n x = 0;\r\n if (x > this.image.naturalWidth)\r\n x = this.image.naturalWidth;\r\n if (y < 0)\r\n y = 0;\r\n if (y > this.image.naturalWidth)\r\n y = this.image.naturalWidth;\r\n if (width > this.image.naturalWidth)\r\n width = this.image.naturalWidth;\r\n if (height > this.image.naturalHeight)\r\n height = this.image.naturalHeight;\r\n\r\n var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n this.imageCropChanged.emit(dataUrl);\r\n }\r\n\r\n private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n this.canvas.width = desiredWidth;\r\n this.canvas.height = desiredHeight;\r\n const context = this.canvas.getContext(\"2d\");\r\n context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n }\r\n\r\n private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.nw);\r\n }\r\n\r\n private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.ne);\r\n }\r\n\r\n private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.se);\r\n }\r\n\r\n private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.sw);\r\n }\r\n\r\n private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n if (!this.isMouseStillInTarget(event)){\r\n return;\r\n }\r\n \r\n let {left, top} = this.getCornerLeftTop(corner);\r\n let newWidth = 0;\r\n let newHeight = 0;\r\n let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n const wantedRatio = this.width / this.height;\r\n const cropRect = this.crop.getBoundingClientRect();\r\n const imageRect = this.image.getBoundingClientRect();\r\n let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);\r\n if (Math.abs(movementX) < Math.abs(movementY)){\r\n orientation = \"vertical\";\r\n }\r\n\r\n if (orientation == \"horizontal\"){\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.sw:\r\n newWidth = cropRect.width - movementX;\r\n newHeight = newWidth / wantedRatio;\r\n break;\r\n case CornerType.ne:\r\n case CornerType.se:\r\n newWidth = cropRect.width + movementX;\r\n newHeight = newWidth / wantedRatio;\r\n break;\r\n default:\r\n break;\r\n }\r\n } else{\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.ne:\r\n newHeight = cropRect.height - movementY;\r\n newWidth = newHeight * wantedRatio;\r\n break;\r\n case CornerType.se:\r\n case CornerType.sw:\r\n newHeight = cropRect.height + movementY;\r\n newWidth = newHeight * wantedRatio;\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.ne:\r\n case CornerType.nw:\r\n const topOffset = cropRect.height - newHeight;\r\n top = this.crop.offsetTop + topOffset;\r\n default:\r\n break;\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.sw:\r\n const leftOffset = cropRect.width - newWidth;\r\n left = this.crop.offsetLeft + leftOffset;\r\n if (left < 0) left = 0;\r\n if (left > imageRect.width) left = imageRect.width;\r\n if (top < 0) top = 0;\r\n if (top > imageRect.height) top = imageRect.height;\r\n if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n break;\r\n case CornerType.ne:\r\n case CornerType.se:\r\n if (top < 0) top = 0;\r\n if (top > imageRect.height) top = imageRect.height;\r\n if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n if (newWidth / newHeight != wantedRatio){\r\n return;\r\n }\r\n\r\n if (this.preventUndersized){\r\n const zoomRatio = this.image.width / this.image.naturalWidth;\r\n if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n return;\r\n }\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.ne:\r\n this.crop.style.top = `${top}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.nw:\r\n this.crop.style.left = `${left}px`;\r\n this.crop.style.top = `${top}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.se:\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.sw:\r\n this.crop.style.left = `${left}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n let left = 0;\r\n let top = 0;\r\n switch (corner) {\r\n case CornerType.se:\r\n left = this.crop.offsetLeft;\r\n top = this.crop.offsetTop;\r\n break;\r\n case CornerType.sw:\r\n top = this.crop.offsetTop;\r\n break;\r\n default:\r\n break;\r\n }\r\n return {top, left};\r\n }\r\n\r\n private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n if (!this.isMouseStillInTarget(ev)){\r\n return;\r\n }\r\n let {movementX, movementY} = getMovementFromEvent(ev, this.previousTouch);\r\n let newLeft = this.crop.offsetLeft + movementX;\r\n let newTop = this.crop.offsetTop + movementY;\r\n var imageRect = this.image.getBoundingClientRect();\r\n var cropRect = this.crop.getBoundingClientRect();\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newTop < 0){\r\n newTop = 0;\r\n }\r\n if (newLeft + cropRect.width > imageRect.width){\r\n newLeft = this.crop.offsetLeft;\r\n }\r\n if (newTop + cropRect.height > imageRect.height){\r\n newTop = this.crop.offsetTop;\r\n }\r\n this.crop.style.left = newLeft + \"px\";\r\n this.crop.style.top = newTop + \"px\";\r\n };\r\n\r\n private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n var inside = false;\r\n let mouseX: number;\r\n let mouseY: number;\r\n const imageRect = this.image.getBoundingClientRect();\r\n \r\n if (event instanceof MouseEvent){\r\n mouseX = event.clientX;\r\n mouseY = event.clientY;\r\n }\r\n\r\n if (typeof TouchEvent !== \"undefined\"){\r\n if (event instanceof TouchEvent){\r\n var touch = event.touches[0];\r\n mouseX = touch.clientX;\r\n mouseY = touch.clientY;\r\n }\r\n }\r\n \r\n if (\r\n mouseX >= imageRect.x &&\r\n mouseY >= imageRect.y &&\r\n mouseX <= imageRect.left + imageRect.width &&\r\n mouseY <= imageRect.top + imageRect.height)\r\n {\r\n inside = true;\r\n }\r\n\r\n var corners = this.crop.querySelectorAll(\"div\");\r\n corners.forEach(corner =>{\r\n var cornerRect = corner.getBoundingClientRect();\r\n if (\r\n mouseX >= cornerRect.x &&\r\n mouseY >= cornerRect.y &&\r\n mouseX <= cornerRect.left + cornerRect.width &&\r\n mouseY <= cornerRect.top + cornerRect.height)\r\n {\r\n inside = true;\r\n }\r\n })\r\n\r\n return inside;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host ref={el => this.host = el}>\r\n <canvas ref={el => this.canvas = el} />\r\n <div\r\n class=\"view\"\r\n ref={el => this.hasPictureView = el}\r\n >\r\n <div class=\"cropper\">\r\n <img ref={el => this.image = el} />\r\n <div class=\"backdrop\" />\r\n <div\r\n class=\"crop\"\r\n ref={e => this.crop = e}\r\n onMouseDown={this.handleCropMouseDown}\r\n onTouchStart={this.handleCropMouseDown}\r\n >\r\n <div class=\"nw\" />\r\n <div class=\"ne\" />\r\n <div class=\"se\" />\r\n <div class=\"sw\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"view\"\r\n ref={el => this.noPictureView = el}>\r\n <dnn-dropzone\r\n allowCameraMode\r\n onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n resx={\r\n {\r\n capture: this.resx.capture,\r\n dragAndDropFile: this.resx.dragAndDropFile,\r\n or: this.resx.or,\r\n takePicture: this.resx.takePicture,\r\n uploadFile: this.resx.uploadFile,\r\n }\r\n }\r\n />\r\n </div>\r\n <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n </dnn-modal>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}"]}
@@ -5,8 +5,10 @@ export class DnnTabs {
5
5
  this.selectedTabTitle = "";
6
6
  }
7
7
  componentDidLoad() {
8
- this.updateTitles();
9
- this.showFirstTab();
8
+ requestAnimationFrame(() => {
9
+ this.updateTitles();
10
+ this.showFirstTab();
11
+ });
10
12
  }
11
13
  getTabs() {
12
14
  return this.component.shadowRoot.querySelector("slot").assignedElements();
@@ -1 +1 @@
1
- {"version":3,"file":"dnn-tabs.js","sourceRoot":"","sources":["../../../src/components/dnn-tabs/dnn-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,OAAO;EALpB;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;GAsD1C;EApDG,gBAAgB;IACZ,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,YAAY,EAAE,CAAC;EACxB,CAAC;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;EACrG,CAAC;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;EAC5E,CAAC;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;EACzC,CAAC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;MACf,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;IACf,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;EACrC,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE;MAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAC3B,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA,CAAC,CAAC,EAAE,EACxD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC;MACN,WAAK,KAAK,EAAC,YAAY;QACnB,eAAa,CACX,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'dnn-tabs',\r\n styleUrl: 'dnn-tabs.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTabs {\r\n private component: HTMLElement;\r\n\r\n @State() tabTitles: string[] = [];\r\n @State() selectedTabTitle: string = \"\";\r\n\r\n componentDidLoad(){\r\n this.updateTitles();\r\n this.showFirstTab();\r\n }\r\n\r\n private getTabs() {\r\n return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n }\r\n\r\n private updateTitles(){\r\n const tabs = this.getTabs();\r\n tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n }\r\n\r\n private showFirstTab(){\r\n const tab = this.getTabs()[0];\r\n tab.show();\r\n this.selectedTabTitle = tab.tabTitle;\r\n }\r\n\r\n private showTab(tabTitle: string) {\r\n const tabs = this.getTabs();\r\n tabs.forEach(tab => {\r\n if (tab.tabTitle == tabTitle){\r\n tab.show();\r\n return;\r\n }\r\n\r\n tab.hide();\r\n });\r\n this.selectedTabTitle = tabTitle;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host ref={el => this.component = el}>\r\n <div class=\"tabTitles\">\r\n {this.tabTitles.map(tabTitle =>\r\n <button\r\n class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n onClick={() => this.showTab(tabTitle)}\r\n >\r\n {tabTitle}\r\n </button>\r\n )}\r\n </div>\r\n <div class=\"currentTab\">\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"]}
1
+ {"version":3,"file":"dnn-tabs.js","sourceRoot":"","sources":["../../../src/components/dnn-tabs/dnn-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,OAAO;EALpB;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;GAwD1C;EAtDG,gBAAgB;IACZ,qBAAqB,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;EACrG,CAAC;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;EAC5E,CAAC;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;EACzC,CAAC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;MACf,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;IACf,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;EACrC,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE;MAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAC3B,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA,CAAC,CAAC,EAAE,EACxD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC;MACN,WAAK,KAAK,EAAC,YAAY;QACnB,eAAa,CACX,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'dnn-tabs',\r\n styleUrl: 'dnn-tabs.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTabs {\r\n private component: HTMLElement;\r\n\r\n @State() tabTitles: string[] = [];\r\n @State() selectedTabTitle: string = \"\";\r\n\r\n componentDidLoad(){\r\n requestAnimationFrame(() => {\r\n this.updateTitles();\r\n this.showFirstTab();\r\n });\r\n }\r\n\r\n private getTabs() {\r\n return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n }\r\n\r\n private updateTitles(){\r\n const tabs = this.getTabs();\r\n tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n }\r\n\r\n private showFirstTab(){\r\n const tab = this.getTabs()[0];\r\n tab.show();\r\n this.selectedTabTitle = tab.tabTitle;\r\n }\r\n\r\n private showTab(tabTitle: string) {\r\n const tabs = this.getTabs();\r\n tabs.forEach(tab => {\r\n if (tab.tabTitle == tabTitle){\r\n tab.show();\r\n return;\r\n }\r\n\r\n tab.hide();\r\n });\r\n this.selectedTabTitle = tabTitle;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host ref={el => this.component = el}>\r\n <div class=\"tabTitles\">\r\n {this.tabTitles.map(tabTitle =>\r\n <button\r\n class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n onClick={() => this.showTab(tabTitle)}\r\n >\r\n {tabTitle}\r\n </button>\r\n )}\r\n </div>\r\n <div class=\"currentTab\">\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"]}
@@ -6,18 +6,20 @@ export class DnnTreeviewItem {
6
6
  this.hasChildren = false;
7
7
  }
8
8
  componentDidLoad() {
9
- const children = this.childrenElement.children[0];
10
- const count = children.assignedElements().length;
11
- if (count > 0) {
12
- this.hasChildren = true;
13
- }
14
- if (this.expanded) {
15
- this.expander.classList.add("expanded");
16
- this.collapsible.expanded = false;
17
- setTimeout(() => {
18
- this.collapsible.expanded = true;
19
- }, 300);
20
- }
9
+ requestAnimationFrame(() => {
10
+ const children = this.childrenElement.children[0];
11
+ const count = children.assignedElements().length;
12
+ if (count > 0) {
13
+ this.hasChildren = true;
14
+ }
15
+ if (this.expanded) {
16
+ this.expander.classList.add("expanded");
17
+ this.collapsible.expanded = false;
18
+ setTimeout(() => {
19
+ this.collapsible.expanded = true;
20
+ }, 300);
21
+ }
22
+ });
21
23
  }
22
24
  toggleCollapse() {
23
25
  this.expanded = !this.expanded;
@@ -1 +1 @@
1
- {"version":3,"file":"dnn-treeview-item.js","sourceRoot":"","sources":["../../../src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,eAAe;EAL5B;IAWE,+CAA+C;IACxB,aAAQ,GAAY,KAAK,CAAC;IAExC,gBAAW,GAAY,KAAK,CAAC;GAsDvC;EAjDC,gBAAgB;IACd,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;IACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;IAChD,IAAI,KAAK,GAAG,CAAC,EAAC;MACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;KACzB;IACD,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;MAClC,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;MACnC,CAAC,EAAE,GAAG,CAAC,CAAC;KACT;EACH,CAAC;EAEO,cAAc;IACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;EAC7C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;QACf,cACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;UACpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;YAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE;YAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP;MACN,WAAK,KAAK,EAAC,MAAM;QACf,WAAK,KAAK,EAAC,WAAW;UACpB,eAAa,CACT;QACN,uBAAiB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACxE,WAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE;YACvC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-treeview-item',\r\n styleUrl: 'dnn-treeview-item.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n \r\n private expander!: HTMLDivElement;\r\n\r\n @Element() el!: HTMLDnnTreeviewItemElement;\r\n \r\n /** Defines if the current node is expanded */\r\n @Prop({mutable: true}) expanded: boolean = false;\r\n\r\n @State() hasChildren: boolean = false;\r\n \r\n private childrenElement!: HTMLDivElement;\r\n private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n componentDidLoad() {\r\n const children = this.childrenElement.children[0] as HTMLSlotElement;\r\n const count = children.assignedElements().length\r\n if (count > 0){\r\n this.hasChildren = true;\r\n }\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n this.collapsible.expanded = false;\r\n setTimeout(() => {\r\n this.collapsible.expanded = true;\r\n }, 300);\r\n }\r\n }\r\n\r\n private toggleCollapse(): void {\r\n this.expanded = !this.expanded;\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n return;\r\n }\r\n\r\n this.expander.classList.remove(\"expanded\");\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"expander\" ref={el => this.expander = el}>\r\n {this.hasChildren &&\r\n <button\r\n onClick={() => this.toggleCollapse()}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n </button>\r\n }\r\n </div>\r\n <div class=\"item\">\r\n <div class=\"item-slot\">\r\n <slot></slot>\r\n </div>\r\n <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n <div ref={el => this.childrenElement = el}>\r\n <slot name=\"children\"></slot>\r\n </div>\r\n </dnn-collapsible>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n state: \"expanded\" | \"collapsed\";\r\n height: number;\r\n}"]}
1
+ {"version":3,"file":"dnn-treeview-item.js","sourceRoot":"","sources":["../../../src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,eAAe;EAL5B;IAWE,+CAA+C;IACxB,aAAQ,GAAY,KAAK,CAAC;IAExC,gBAAW,GAAY,KAAK,CAAC;GAwDvC;EAnDC,gBAAgB;IACd,qBAAqB,CAAC,GAAG,EAAE;MACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;MACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;MAChD,IAAI,KAAK,GAAG,CAAC,EAAC;QACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;OACzB;MACD,IAAI,IAAI,CAAC,QAAQ,EAAC;QAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;QAClC,UAAU,CAAC,GAAG,EAAE;UACd,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;QACnC,CAAC,EAAE,GAAG,CAAC,CAAC;OACT;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAEO,cAAc;IACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;EAC7C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;QACf,cACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;UACpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;YAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE;YAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP;MACN,WAAK,KAAK,EAAC,MAAM;QACf,WAAK,KAAK,EAAC,WAAW;UACpB,eAAa,CACT;QACN,uBAAiB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACxE,WAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE;YACvC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-treeview-item',\r\n styleUrl: 'dnn-treeview-item.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n \r\n private expander!: HTMLDivElement;\r\n\r\n @Element() el!: HTMLDnnTreeviewItemElement;\r\n \r\n /** Defines if the current node is expanded */\r\n @Prop({mutable: true}) expanded: boolean = false;\r\n\r\n @State() hasChildren: boolean = false;\r\n \r\n private childrenElement!: HTMLDivElement;\r\n private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n const children = this.childrenElement.children[0] as HTMLSlotElement;\r\n const count = children.assignedElements().length\r\n if (count > 0){\r\n this.hasChildren = true;\r\n }\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n this.collapsible.expanded = false;\r\n setTimeout(() => {\r\n this.collapsible.expanded = true;\r\n }, 300);\r\n }\r\n });\r\n }\r\n\r\n private toggleCollapse(): void {\r\n this.expanded = !this.expanded;\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n return;\r\n }\r\n\r\n this.expander.classList.remove(\"expanded\");\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"expander\" ref={el => this.expander = el}>\r\n {this.hasChildren &&\r\n <button\r\n onClick={() => this.toggleCollapse()}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n </button>\r\n }\r\n </div>\r\n <div class=\"item\">\r\n <div class=\"item-slot\">\r\n <slot></slot>\r\n </div>\r\n <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n <div ref={el => this.childrenElement = el}>\r\n <slot name=\"children\"></slot>\r\n </div>\r\n </dnn-collapsible>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n state: \"expanded\" | \"collapsed\";\r\n height: number;\r\n}"]}
@@ -0,0 +1,77 @@
1
+ :host {
2
+ display: block;
3
+ /** Defines the menu background color. */
4
+ --background-color: var(--dnn-color-primary-contrast, white);
5
+ /** A color that contrasts well over the background color. */
6
+ --foreground-color: var(--dnn-color-primary, blue);
7
+ /** The color of the text. */
8
+ --text-color: #222;
9
+ }
10
+
11
+ .menu-container {
12
+ display: flex;
13
+ justify-content: flex-start;
14
+ align-items: center;
15
+ background-color: var(--background-color);
16
+ color: var(--text-color);
17
+ }
18
+ .menu-container button {
19
+ cursor: pointer;
20
+ }
21
+ .menu-container button svg {
22
+ fill: var(--foreground-color);
23
+ }
24
+ .menu-container .menu {
25
+ margin: 0.5em;
26
+ display: flex;
27
+ gap: 1em;
28
+ justify-content: flex-start;
29
+ align-items: center;
30
+ white-space: nowrap;
31
+ width: 100%;
32
+ }
33
+ .menu-container .menu a {
34
+ display: flex;
35
+ align-items: center;
36
+ color: var(--text-color);
37
+ text-decoration: none;
38
+ }
39
+ .menu-container .menu a svg {
40
+ fill: var(--foreground-color);
41
+ }
42
+ .menu-container .overflow {
43
+ margin-left: auto;
44
+ position: relative;
45
+ }
46
+ .menu-container .overflow button {
47
+ padding: 0;
48
+ margin: 0;
49
+ background-color: transparent;
50
+ border: none;
51
+ }
52
+ .menu-container .overflow .dropdown {
53
+ position: absolute;
54
+ display: flex;
55
+ flex-direction: column;
56
+ white-space: nowrap;
57
+ right: 0;
58
+ transition: 100ms ease-in-out;
59
+ height: 0;
60
+ overflow: hidden;
61
+ }
62
+ .menu-container .overflow .dropdown a {
63
+ color: var(--text-color);
64
+ }
65
+ .menu-container .overflow .dropdown a svg {
66
+ fill: var(--foreground-color);
67
+ }
68
+ .menu-container .overflow .dropdown.visible {
69
+ padding: 1em;
70
+ gap: 0.5em;
71
+ background-color: var(--background-color);
72
+ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
73
+ }
74
+ .menu-container .overflow .dropdown > * {
75
+ display: flex;
76
+ align-items: center;
77
+ }
@@ -0,0 +1,132 @@
1
+ import { Component, Element, Host, h, State } from '@stencil/core';
2
+ export class DnnVerticalOverflowMenu {
3
+ constructor() {
4
+ this.showDropdownButton = false;
5
+ this.showDropdownMenu = false;
6
+ this.previousMenuWidth = 0;
7
+ }
8
+ componentDidRender() {
9
+ requestAnimationFrame(() => {
10
+ this.moveAllSlottedItemsIntoMenu();
11
+ this.moveItemsToDropDownIfNecessery();
12
+ this.resizeObserver = new ResizeObserver(entries => {
13
+ for (let entry of entries) {
14
+ if (entry.contentRect.width < this.previousMenuWidth) {
15
+ this.moveItemsToDropDownIfNecessery();
16
+ }
17
+ if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth) {
18
+ this.moveItemsToMenuIfPossible();
19
+ }
20
+ this.previousMenuWidth = entry.contentRect.width;
21
+ }
22
+ });
23
+ this.resizeObserver.observe(this.element);
24
+ });
25
+ }
26
+ moveAllSlottedItemsIntoMenu() {
27
+ const menuItems = this.element.shadowRoot.querySelector("slot").assignedElements();
28
+ menuItems.forEach(menuItem => this.menu.appendChild(menuItem));
29
+ }
30
+ moveItemsToDropDownIfNecessery() {
31
+ const menuItems = Array.from(this.menu.children);
32
+ const availableWidth = this.menu.getBoundingClientRect().width;
33
+ let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
34
+ menuItems.forEach(item => neededWidth += this.getFullWidth(item));
35
+ neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);
36
+ if (neededWidth > availableWidth) {
37
+ this.showDropdownButton = true;
38
+ var lastItem = menuItems[menuItems.length - 1];
39
+ if (this.dropdown == undefined) {
40
+ return;
41
+ }
42
+ this.dropdown.prepend(lastItem);
43
+ this.moveItemsToDropDownIfNecessery();
44
+ }
45
+ }
46
+ moveItemsToMenuIfPossible() {
47
+ if (this.dropdown == undefined || !this.dropdown.hasChildNodes()) {
48
+ return;
49
+ }
50
+ const menuItems = Array.from(this.menu.children);
51
+ const availableWidth = this.menu.getBoundingClientRect().width;
52
+ let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
53
+ neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);
54
+ menuItems.forEach(item => neededWidth += this.getFullWidth(item));
55
+ neededWidth += this.getFullWidth(this.dropdown.children[0]);
56
+ if (neededWidth < availableWidth) {
57
+ const firstItem = this.dropdown.children[0];
58
+ this.menu.appendChild(firstItem);
59
+ if (!this.dropdown.hasChildNodes()) {
60
+ this.dropdown.classList.remove("visible");
61
+ this.showDropdownMenu = false;
62
+ this.showDropdownButton = false;
63
+ }
64
+ }
65
+ }
66
+ getFullWidth(item) {
67
+ var width = item.getBoundingClientRect().width;
68
+ var styles = getComputedStyle(item);
69
+ width += parseFloat(styles.marginLeft);
70
+ width += parseFloat(styles.marginRight);
71
+ width += parseFloat(styles.paddingLeft);
72
+ width += parseFloat(styles.paddingRight);
73
+ return width;
74
+ }
75
+ toggleOverflowMenu() {
76
+ this.showDropdownMenu = !this.showDropdownMenu;
77
+ if (this.showDropdownMenu) {
78
+ this.dropdown.classList.add("visible");
79
+ let contentHeight = 0;
80
+ const items = Array.from(this.dropdown.children);
81
+ items.forEach(item => contentHeight += item.getBoundingClientRect().height);
82
+ var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;
83
+ var additionalHeight = emHeight * (this.dropdown.children.length - 1);
84
+ contentHeight += additionalHeight;
85
+ this.dropdown.style.height = `${contentHeight}px`;
86
+ const dismissMenu = (e) => {
87
+ const buttonRect = this.button.getBoundingClientRect();
88
+ if (e.clientX < buttonRect.left ||
89
+ e.clientX > buttonRect.right ||
90
+ e.clientY < buttonRect.top ||
91
+ e.clientY > buttonRect.bottom) {
92
+ this.toggleOverflowMenu();
93
+ }
94
+ document.removeEventListener("click", dismissMenu);
95
+ };
96
+ setTimeout(() => {
97
+ document.addEventListener("click", dismissMenu, false);
98
+ }, 100);
99
+ }
100
+ else {
101
+ this.dropdown.classList.remove("visible");
102
+ this.dropdown.style.height = "0px";
103
+ }
104
+ }
105
+ render() {
106
+ return (h(Host, null,
107
+ h("div", { class: "menu-container" },
108
+ h("div", { class: "menu", ref: el => this.menu = el },
109
+ h("slot", null)),
110
+ this.showDropdownButton &&
111
+ h("div", { class: "overflow" },
112
+ h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() },
113
+ h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
114
+ h("path", { d: "M0 0h24v24H0z", fill: "none" }),
115
+ h("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }))),
116
+ h("div", { class: "dropdown", ref: el => this.dropdown = el })))));
117
+ }
118
+ static get is() { return "dnn-vertical-overflow-menu"; }
119
+ static get encapsulation() { return "shadow"; }
120
+ static get originalStyleUrls() { return {
121
+ "$": ["dnn-vertical-overflow-menu.scss"]
122
+ }; }
123
+ static get styleUrls() { return {
124
+ "$": ["dnn-vertical-overflow-menu.css"]
125
+ }; }
126
+ static get states() { return {
127
+ "showDropdownButton": {},
128
+ "showDropdownMenu": {}
129
+ }; }
130
+ static get elementRef() { return "element"; }
131
+ }
132
+ //# sourceMappingURL=dnn-vertical-overflow-menu.js.map