Merge pull request #5 from node-projects/feature/slidershow

Feature/slidershow

Author: cedricfranke28

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-projects/automatic-slidershow-webcomponent",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "type": "module",
   "private": false,
@@ -32,4 +32,4 @@
   "dependencies": {
     "@node-projects/base-custom-webcomponent": "^0.17.2"
   }
-}
+}

package.json

@@ -1,5 +1,5 @@
 import { IDesignerCanvas, IElementInteractionService } from "@node-projects/web-component-designer";
-import { AutomaticSliderShowWebcomponent } from "../slider/AutomaticSliderShowWebcomponent";
+import { AutomaticSliderShowWebcomponent } from "../slider/AutomaticSliderShowWebcomponent.js";
 
 export default class ElementInteractionService implements IElementInteractionService {
     stopEventHandling(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) {

src/designer/ElementInteractionService.ts

@@ -1,5 +1,5 @@
 import { DefaultPlacementService, IDesignItem, IPlacementView, IPoint } from "@node-projects/web-component-designer";
-import { AutomaticSliderShowWebcomponent } from "../slider/AutomaticSliderShowWebcomponent";
+import { AutomaticSliderShowWebcomponent } from "../slider/AutomaticSliderShowWebcomponent.js";
 
 export default class SliderShowPlacementService extends DefaultPlacementService {
     override serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration) {

src/designer/TabPlacementService.ts …c/designer/SliderShowPlacementService.tssrc/designer/TabPlacementService.ts renamed to src/designer/SliderShowPlacementService.ts src/designer/TabPlacementService.ts renamed to src/designer/SliderShowPlacementService.ts

@@ -23,7 +23,7 @@ export class AutomaticSliderShowWebcomponent extends BaseCustomWebComponentConst
             
             .slideshow-container{
                 grid-area: 1 / 1 / 2 / 2;
-                width: calc(100% - 20px);
+                width: 100%;
                 height: 100%;
                 border: 1px solid grey;
                 overflow: hidden;
@@ -109,7 +109,7 @@ export class AutomaticSliderShowWebcomponent extends BaseCustomWebComponentConst
 
     connectedCallback() {
         this._observer.observe(this, { childList: true });
-        this._interval = parseInt(this.getAttribute('interval'));
+        this._interval = parseInt(this.getAttribute('interval')) || this._interval;
         this._initializeSlider();
     }
 
@@ -121,17 +121,6 @@ export class AutomaticSliderShowWebcomponent extends BaseCustomWebComponentConst
 
     ready() {
         this._parseAttributesToProperties();
-        let count = 1;
-        for (let index = 0; index < this.children.length; index++) {
-            const dotElement = document.createElement('div');
-            dotElement.className = "dot-element";
-            dotElement.id = "dot-element-" + count;
-            this._dots.appendChild(dotElement);
-            count++;
-        }
-
-        (<HTMLDivElement>this._dots.children[0]).classList.add("dot-active");
-
         (<HTMLDivElement>this._getDomElement('left-arrow')).onclick = () => this.prevSlide();
         (<HTMLDivElement>this._getDomElement('right-arrow')).onclick = () => this.nextSlide();
     }
@@ -151,6 +140,18 @@ export class AutomaticSliderShowWebcomponent extends BaseCustomWebComponentConst
             this._slideIndex = 0;
         }
 
+        let count = 1;
+        this._dots.innerHTML = "";
+        for (let index = 0; index < this.children.length; index++) {
+            const dotElement = document.createElement('div');
+            dotElement.className = "dot-element";
+            dotElement.id = "dot-element-" + count;
+            this._dots.appendChild(dotElement);
+            count++;
+        }
+
+        (<HTMLDivElement>this._dots.children[this._slideIndex]).classList.add("dot-active");
+
         let i = 0;
         for (const item of this.children as any as HTMLElement[]) {
             item.setAttribute('slot', i === this._slideIndex ? 'main' : '');

src/slider/AutomaticSliderShowWebcomponent.ts

@@ -5,10 +5,7 @@
                 "./dist/designer/ElementInteractionService.js"
             ],
             "containerService": [
-                "./dist/designer/TabPlacementService.js"
-            ],
-            "attachedPropertyService": [
-                "./dist/designer/AttachedPropertiesService.js"
+                "./dist/designer/SliderShowPlacementService.js"
             ]
         }
     }