-
+
Modal | CocreateJS
diff --git a/docs/index.html b/docs/index.html
index 0b2a027..6d58662 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -162,7 +162,7 @@ Usage
<button>
- <a actions="pass, openModal" modal-src="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
+ <a actions="state, openModal" modal-src="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
modal-width="520px"
modal-height="100%"
modal-color="#229954"
diff --git a/src/modal.js b/src/modal.js
index fe8777e..b98c158 100644
--- a/src/modal.js
+++ b/src/modal.js
@@ -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();
@@ -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 {
@@ -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%"
}
@@ -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')
@@ -101,21 +101,21 @@ 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);
@@ -123,21 +123,21 @@ Modal.prototype = {
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
@@ -148,15 +148,15 @@ Modal.prototype = {