fix(mvc.Dom): allow properties to be passed to attr() method (#2497)

clientIO · Jan 22, 2024 · d0898c3 · d0898c3
1 parent 74b1ef7
commit d0898c3
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 50 deletions.
diff --git a/packages/joint-core/src/mvc/Dom/methods.mjs b/packages/joint-core/src/mvc/Dom/methods.mjs
@@ -75,14 +75,6 @@ export function html(html) {
     return this;
 }
 
-export function text(text) {
-    const [el] = this;
-    if (!el) return null;
-    if (!text) return el.textContent;
-    el.textContent = text;
-    return this;
-}
-
 export function append(...nodes) {
     const [parent] = this;
     if (!parent) return this;
@@ -176,36 +168,6 @@ export function css(name, value) {
     return this;
 }
 
-export function attr(name, value) {
-    let attributes;
-    if (typeof name === 'string') {
-        if (value === undefined) {
-            const [el] = this;
-            if (!el) return null;
-            return el.getAttribute(name);
-        } else {
-            attributes = { [name]: value };
-        }
-    } else if (!name) {
-        throw new Error('no attributes provided');
-    } else {
-        attributes = name;
-    }
-    for (let attr in attributes) {
-        if (attributes.hasOwnProperty(attr)) {
-            for (let i = 0; i < this.length; i++) {
-                const value = attributes[attr];
-                if (value === null) {
-                    this[i].removeAttribute(attr);
-                } else {
-                    this[i].setAttribute(attr, value);
-                }
-            }
-        }
-    }
-    return this;
-}
-
 export function data(name, value) {
     if (arguments.length < 2) {
         const [el] = this;

diff --git a/packages/joint-core/src/mvc/Dom/props.mjs b/packages/joint-core/src/mvc/Dom/props.mjs
@@ -1,3 +1,20 @@
+const propertySetters = {
+    outerWidth: 'offsetWidth',
+    outerHeight: 'offsetHeight',
+    innerWidth: 'clientWidth',
+    innerHeight: 'clientHeight',
+    scrollLeft: 'scrollLeft',
+    scrollTop: 'scrollTop',
+    val: 'value',
+    text: 'textContent',
+};
+
+const propertiesMap = {
+    disabled: 'disabled',
+    value: 'value',
+    text: 'textContent',
+};
+
 function prop(name, value) {
     if (!name) throw new Error('no property provided');
     if (arguments.length === 1) {
@@ -12,23 +29,48 @@ function prop(name, value) {
     return this;
 }
 
-const properties = {
-    outerWidth: 'offsetWidth',
-    outerHeight: 'offsetHeight',
-    innerWidth: 'clientWidth',
-    innerHeight: 'clientHeight',
-    scrollLeft: 'scrollLeft',
-    scrollTop: 'scrollTop',
-    val: 'value',
-};
+function attr(name, value) {
+    let attributes;
+    if (typeof name === 'string') {
+        if (value === undefined) {
+            const [el] = this;
+            if (!el) return null;
+            return el.getAttribute(name);
+        } else {
+            attributes = { [name]: value };
+        }
+    } else if (!name) {
+        throw new Error('no attributes provided');
+    } else {
+        attributes = name;
+    }
+    for (let attr in attributes) {
+        if (attributes.hasOwnProperty(attr)) {
+            const value = attributes[attr];
+            if (propertiesMap[attr]) {
+                this.prop(propertiesMap[attr], value);
+                continue;
+            }
+            for (let i = 0; i < this.length; i++) {
+                if (value === null) {
+                    this[i].removeAttribute(attr);
+                } else {
+                    this[i].setAttribute(attr, value);
+                }
+            }
+        }
+    }
+    return this;
+}
 
 const methods = {
-    prop
+    prop,
+    attr
 };
 
-Object.keys(properties).forEach(methodName => {
+Object.keys(propertySetters).forEach(methodName => {
     methods[methodName] = function(...args) {
-        return this.prop(properties[methodName], ...args);
+        return this.prop(propertySetters[methodName], ...args);
     };
 });
 

diff --git a/packages/joint-core/test/jointjs/mvc.Dom.js b/packages/joint-core/test/jointjs/mvc.Dom.js
@@ -16,6 +16,19 @@ QUnit.module('joint.mvc.$', function(hooks) {
         assert.equal($el.prop('role'), null);
     });
 
+    QUnit.test('$.fn.attr', function(assert) {
+        const button = document.createElement('button');
+        const $button = joint.mvc.$(button);
+        $button.attr({
+            disabled: true,
+            testAttribute: 'testValue'
+        });
+        assert.equal(button.disabled, true);
+        assert.equal($button.attr('testAttribute'), 'testValue');
+        assert.equal(button.getAttribute('testAttribute'), 'testValue');
+        assert.notOk('testAttribute' in button);
+    });
+
     QUnit.module('$.fn.animate', function() {
 
         QUnit.test('options.complete is called when duration is 0.1s', function(assert) {