feat: add centered alignment option for media elements

oat-sa · Jul 31, 2024 · dabed1c · dabed1c
1 parent d949fe8
commit dabed1c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 33 deletions.
diff --git a/src/mediaEditor/plugins/mediaAlignment/helper.js b/src/mediaEditor/plugins/mediaAlignment/helper.js
@@ -20,6 +20,7 @@ import _ from 'lodash';
 
 export const FLOAT_LEFT_CLASS = 'wrap-left';
 export const FLOAT_RIGHT_CLASS = 'wrap-right';
+export const CENTER_CLASS = 'tao-centered';
 
 const searchRecurse = (parentElement, serial) => {
     if (!parentElement) {
@@ -44,26 +45,10 @@ const searchRecurse = (parentElement, serial) => {
     return found;
 };
 
-export const positionFloat = function positionFloat(widget, position) {
-    if (!position) {
-        return;
-    }
-
-    widget.$container.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS}`);
-    widget.$original.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS}`);
-
-    let className;
-
-    switch (position) {
-        case 'right':
-            className = FLOAT_RIGHT_CLASS;
-            break;
-        case 'left':
-            className = FLOAT_LEFT_CLASS;
-            break;
-        case 'default':
-            className = '';
-    }
+export const positionFloat = function positionFloat(widget, className) {
+    debugger;
+    widget.$container.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS} ${CENTER_CLASS}`);
+    widget.$original.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS} ${CENTER_CLASS}`);
 
     // Update DOM
     widget.$container.addClass(className);
@@ -102,10 +87,9 @@ export const positionFloat = function positionFloat(widget, position) {
 };
 
 export const initAlignment = function initAlignment(widget) {
-    if (widget.element.hasClass(FLOAT_LEFT_CLASS)) {
-        return positionFloat(widget, 'left');
-    }
-    if (widget.element.hasClass(FLOAT_RIGHT_CLASS)) {
-        return positionFloat(widget, 'right');
+    for (const className of [FLOAT_LEFT_CLASS, FLOAT_RIGHT_CLASS, CENTER_CLASS]) {
+        if (widget.element.hasClass(className)) {
+            return positionFloat(widget, className);
+        }
     }
 };
diff --git a/src/mediaEditor/plugins/mediaAlignment/mediaAlignmentComponent.js b/src/mediaEditor/plugins/mediaAlignment/mediaAlignmentComponent.js
@@ -26,7 +26,7 @@ import _ from 'lodash';
 import component from 'ui/component';
 import tpl from 'ui/mediaEditor/plugins/mediaAlignment/tpl/mediaAlignment';
 import 'ui/mediaEditor/plugins/mediaAlignment/style.css';
-import { FLOAT_LEFT_CLASS, FLOAT_RIGHT_CLASS } from './helper';
+import { FLOAT_LEFT_CLASS, FLOAT_RIGHT_CLASS, CENTER_CLASS } from './helper';
 
 /**
  * Creates mediaAlignment component
@@ -45,16 +45,20 @@ export default function mediaAlignmentFactory($container, media) {
         update(conf) {
             $template.find('input:checked').prop('checked', false);
             switch (conf) {
-                case 'wrap-right':
-                    conf = 'right';
+                case FLOAT_RIGHT_CLASS:
+                    conf = FLOAT_RIGHT_CLASS;
                     $template.find('input[name="wrap-right"]').prop('checked', true);
                     break;
-                case 'wrap-left':
-                    conf = 'left';
+                case FLOAT_LEFT_CLASS:
+                    conf = FLOAT_LEFT_CLASS;
                     $template.find('input[name="wrap-left"]').prop('checked', true);
                     break;
+                case CENTER_CLASS:
+                    conf = CENTER_CLASS;
+                    $template.find('input[name="center"]').prop('checked', true);
+                    break;
                 default:
-                    conf = 'default';
+                    conf = '';
                     $template.find('input[name="wrap-inline"]').prop('checked', true);
                     break;
             }
@@ -78,9 +82,11 @@ export default function mediaAlignmentFactory($container, media) {
             const classListTag = container.classList;
 
             if (classListTag.contains(FLOAT_RIGHT_CLASS)) {
-                this.update('wrap-right');
+                this.update(FLOAT_RIGHT_CLASS);
             } else if (classListTag.contains(FLOAT_LEFT_CLASS)) {
-                this.update('wrap-left');
+                this.update(FLOAT_LEFT_CLASS);
+            } else if (classListTag.contains(CENTER_CLASS)) {
+                this.update(CENTER_CLASS);
             } else {
                 this.update('wrap-inline');
             }

diff --git a/src/mediaEditor/plugins/mediaAlignment/tpl/mediaAlignment.tpl b/src/mediaEditor/plugins/mediaAlignment/tpl/mediaAlignment.tpl
@@ -21,5 +21,12 @@
             <span class="icon-wrap-right"></span>
             {{__ 'Wrap image right'}}
         </label>
+        <br>
+        <label class="smaller-prompt">
+            <input type="radio" name="tao-centered"/>
+            <span class="icon-radio"></span>
+            <span class="icon-align-center"></span>
+            {{__ 'Center'}}
+        </label>
     </fieldset>
 </div>