Skip to content

Commit

Permalink
fix: pass attributes renamed to state
Browse files Browse the repository at this point in the history
  • Loading branch information
@frankpagan
frankpagan committed Nov 24, 2023
1 parent 23f9a0f commit 1d4ca30
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 51 deletions.
10 changes: 5 additions & 5 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<div class="display:flex">
<button>
<a
actions="pass, openModal"
actions="state, openModal"
modal-src="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
modal-width="520px"
modal-height="100%"
Expand All @@ -35,7 +35,7 @@

<button>
<a
actions="pass, openModal"
actions="state, openModal"
modal-src="test2.html"
modal-width="320px"
modal-height="100%"
Expand All @@ -50,7 +50,7 @@

<button>
<a
actions="pass, openModal"
actions="state, openModal"
modal-src="test.html"
modal-width="320px"
modal-height="100%"
Expand All @@ -65,7 +65,7 @@

<button>
<a
actions="pass, openModal"
actions="state, openModal"
modal-src="test.html"
modal-width="320px"
modal-height="100%"
Expand All @@ -80,7 +80,7 @@

<button>
<a
actions="pass, openModal"
actions="state, openModal"
modal-src="test.html"
modal-width="320px"
modal-height="100%"
Expand Down
2 changes: 1 addition & 1 deletion demo/page.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" array="" object="" data-prefix="" pass_id="wnd">
<html lang="en" array="" object="" data-prefix="" state_id="wnd">
<head>
<title>Modal | CocreateJS</title>

Expand Down
2 changes: 1 addition & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ <h2 class="padding:5px_0px">Usage</h2>
<pre>
<code class="language-html">
&lt;button&gt;
&lt;a actions="pass, openModal" modal-src="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
&lt;a actions="state, openModal" modal-src="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
modal-width="520px"
modal-height="100%"
modal-color="#229954"
Expand Down
88 changes: 44 additions & 44 deletions src/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,29 @@ import '@cocreate/element-prototype'
function Modal(el, options, viewPort) {
if (!(el && el.nodeType && el.nodeType === 1))
return;

/** options **/
let defaults = {
minWidth: 60,
minHeight: 40,
};

this.id = uuid.generate();
this.viewPort = viewPort;
this.el = el;

this.hasHeader = true;
this.header = null;
this.isParked = false;
this.isParked = false;

this.width = 0;
this.height = 0;

this.frame = null;
this.options = Object.assign(defaults, options);

this.el.setAttribute("id", this.id);

localStorage.setItem('pageId', this.id)

this._init();
Expand All @@ -36,25 +36,25 @@ function Modal(el, options, viewPort) {

Modal.prototype = {
constructor: Modal,
_init : function() {

_init: function () {
let opt = this.options;
let src = opt.src ? opt.src : this.el.getAttribute("modal-src");
let width = opt.width ? opt.width : this.el.getAttribute("modal-width");
let height = opt.height? opt.height : this.el.getAttribute("modal-height");
let color = opt.color ? opt.color : this.el.getAttribute("modal-color");
let x = opt.x ? opt.x : this.el.getAttribute("modal-x")
let y = opt.y ? opt.y : this.el.getAttribute("modal-y")
let moveable = opt.moveable? opt.moveable : this.el.getAttribute("modal-moveable")
let header = opt.header? opt.header : this.el.getAttribute("modal-header")
let iframe = opt.iframe? opt.iframe : this.el.getAttribute("modal-iframe")
let src = opt.src ? opt.src : this.el.getAttribute("modal-src");
let width = opt.width ? opt.width : this.el.getAttribute("modal-width");
let height = opt.height ? opt.height : this.el.getAttribute("modal-height");
let color = opt.color ? opt.color : this.el.getAttribute("modal-color");
let x = opt.x ? opt.x : this.el.getAttribute("modal-x")
let y = opt.y ? opt.y : this.el.getAttribute("modal-y")
let moveable = opt.moveable ? opt.moveable : this.el.getAttribute("modal-moveable")
let header = opt.header ? opt.header : this.el.getAttribute("modal-header")
let iframe = opt.iframe ? opt.iframe : this.el.getAttribute("modal-iframe")

if (moveable !== 'false')
this.el.setAttribute("moveable", '');
this.viewPort.el.appendChild(this.el)

let attributes = opt.attributes;

if (width && width != "") {
this.el.style.width = width;
} else {
Expand All @@ -65,7 +65,7 @@ Modal.prototype = {
} else {
this.el.style.height = "100%";
}

if (this.el.parentElement.clientWidth < this.el.clientWidth) {
this.el.style.width = "100%"
}
Expand All @@ -87,9 +87,9 @@ Modal.prototype = {
hY = hY > 0 ? hY : 0
this.el.style.top = hY + "px";
}
if (color && color !== "")
if (color && color !== "")
this.el.style.borderColor = color;

let frame = null;
if (iframe && iframe != 'false' || iframe == '') {
frame = document.createElement('iframe')
Expand All @@ -101,43 +101,43 @@ Modal.prototype = {
frame.setAttribute('src', src);
}

if (attributes){
if (attributes['pass_to']) {
frame.setAttribute('pass_id', attributes['pass_to'].value);
if (attributes) {
if (attributes['state_to']) {
frame.setAttribute('state_id', attributes['state_to'].value);
}
for (let attribute of attributes){
if (attribute.name.startsWith('pass-')){
if (attribute.name == 'pass-value')
for (let attribute of attributes) {
if (attribute.name.startsWith('state-')) {
if (attribute.name == 'state-value')
frame.setValue(attribute.value)
else
frame.setAttribute(`${attribute.name.substring(5)}`, attribute.value);
}
}
}
}

if (header && header != "false" || header == '') {
if (header && header != "false" || header == '') {
this.hasHeader = true;
frame.classList.add('has-modal-header')
this._createHeader(header);
} else {
this.hasHeader = false;
this._createDragArea();
}

this.el.appendChild(frame)
this.frame = frame;

let self = this;
this.el.addEventListener("dblclick", function(e) {
this.el.addEventListener("dblclick", function (e) {
if (self.isParked) {
self.isParked = false;
self.el.classList.remove("modal-parked");
}
}
})

},
_createHeader: function(header) {
},

_createHeader: function (header) {
let headerTemplate
if (/<\/?[a-z][\s\S]*>/i.test(header))
headerTemplate = header
Expand All @@ -148,15 +148,15 @@ Modal.prototype = {
<!-- <li><a class="parkBtn"><i class="fas fa-dot-circle "></i></a></li> -->
<li><a class="closeBtn"><i class="height:18px fill:#505050" src="/assets/svg/times.svg"></i></a></li>
</ul></div>`;

this.el.innerHTML = headerTemplate + this.el.innerHTML;
this.header = this.el.querySelector('.modal-header');
},
_createDragArea: function() {

_createDragArea: function () {
let dragArea = document.createElement("div");
dragArea.setAttribute("drag-handle", "");

let topResize = document.createElement("div");
topResize.setAttribute("resize", "top");

Expand All @@ -177,17 +177,17 @@ Modal.prototype = {
this.el.appendChild(bottomResize);
},

_setModalSize: function() {
_setModalSize: function () {
let bound = this.el.getBoundingClientRect();
let parentBound = this.el.parentNode.getBoundingClientRect();
this.width = bound.width;
this.height = bound.height;

this.el.style.left = bound.left - parentBound.left;
this.el.style.top = bound.top - parentBound.top;
},

togglePark: function() {
togglePark: function () {
if (this.isParked) {
this.isParked = false;
this.el.classList.remove("modal-parked");
Expand All @@ -196,7 +196,7 @@ Modal.prototype = {
this.el.classList.add("modal-parked")
}
}

}

export default Modal;

0 comments on commit 1d4ca30

Please sign in to comment.