feat(#224): improve switch between reveal or not for images

deckgo · Aug 11, 2019 · ef21986 · ef21986
1 parent 0594aa7
commit ef21986
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/studio/src/app/utils/editor/reveal-slot.utils.tsx b/studio/src/app/utils/editor/reveal-slot.utils.tsx
@@ -1,4 +1,3 @@
-import {ToggleSlotUtils} from './toggle-slot.utils';
 import {SlotType} from './create-slides.utils';
 
 export class RevealSlotUtils {
@@ -21,17 +20,10 @@ export class RevealSlotUtils {
             }
 
             const element: HTMLElement = reveal ? document.createElement(SlotType.REVEAL) : selectedElement.firstElementChild as HTMLElement;
-            await ToggleSlotUtils.copyAttributes(selectedElement, element);
+
+            this.moveSpecificAttributes(selectedElement, element);
 
             if (reveal) {
-                const attributeNames: string[] = selectedElement.getAttributeNames();
-                if (attributeNames && attributeNames.length > 0) {
-                    for (const attributeName of attributeNames) {
-                        if (attributeName && attributeName.toLowerCase() !== 'contenteditable') {
-                            selectedElement.removeAttribute(attributeName);
-                        }
-                    }
-                }
                 element.appendChild(selectedElement.cloneNode(true));
 
                 (element as any).reveal();
@@ -42,6 +34,22 @@ export class RevealSlotUtils {
         });
     }
 
+    private static moveSpecificAttributes(selectedElement: HTMLElement, element: HTMLElement) {
+        if (selectedElement.hasAttribute('slot')) {
+            element.setAttribute('slot', selectedElement.getAttribute('slot'));
+            selectedElement.removeAttribute('slot');
+        }
+
+        if (selectedElement.hasAttribute('style')) {
+            element.setAttribute('style', selectedElement.getAttribute('style'));
+            selectedElement.removeAttribute('style');
+        }
+
+        if (selectedElement.hasAttribute('contenteditable')) {
+            element.setAttribute('contenteditable', selectedElement.getAttribute('contenteditable'));
+        }
+    }
+
     static isNodeReveal(selectedElement: HTMLElement): boolean {
         return selectedElement && selectedElement.nodeName && selectedElement.nodeName.toLowerCase() === SlotType.REVEAL;
     }

diff --git a/studio/src/app/utils/editor/toggle-slot.utils.tsx b/studio/src/app/utils/editor/toggle-slot.utils.tsx
@@ -34,7 +34,7 @@ export class ToggleSlotUtils {
         });
     }
 
-    static copyAttributes(selectedElement: HTMLElement, element: HTMLElement): Promise<void> {
+    private static copyAttributes(selectedElement: HTMLElement, element: HTMLElement): Promise<void> {
         return new Promise<void>((resolve) => {
             if (selectedElement.attributes && selectedElement.attributes.length) {
                 for (let i: number = 0; i < selectedElement.attributes.length; i++) {
@@ -99,16 +99,10 @@ export class ToggleSlotUtils {
 
     private static copyContent(selectedElement: HTMLElement, element: HTMLElement, type: SlotType, reveal: boolean): Promise<void> {
         return new Promise<void>((resolve) => {
-            // We don't copy content if the target is an image
-            if (type === SlotType.IMG || type === SlotType.SOCIAL) {
-                resolve();
-                return;
-            }
-
             const currentContainer: HTMLElement = this.getSlotContainer(reveal ? selectedElement.firstElementChild as HTMLElement : selectedElement);
 
-            // We don't copy content if the source is an image
-            if (this.isNodeImage(currentContainer) || this.isNodeSocial(currentContainer)) {
+            // We don't copy content if the source is an image and target not or the contrary
+            if ((this.isNodeImage(currentContainer) || this.isNodeSocial(currentContainer)) && (type === SlotType.IMG || type === SlotType.SOCIAL)) {
                 resolve();
                 return;
             }

diff --git a/studio/src/global/theme/editor/editor-deck-deck.scss b/studio/src/global/theme/editor/editor-deck-deck.scss
@@ -52,7 +52,7 @@ deckgo-deck deckgo-social deckgo-lazy-img {
   --deckgo-lazy-img-padding: 0 8px 0 0;
 }
 
-deckgo-deck deckgo-lazy-img[slot] {
+deckgo-deck deckgo-lazy-img {
   width: 100%;
   height: auto;
   max-height: 100%;