mirror of
https://github.com/xevidos/codiad.git
synced 2025-03-15 21:14:24 +01:00
1684 lines
No EOL
35 KiB
JavaScript
1684 lines
No EOL
35 KiB
JavaScript
( function( global, $ ) {
|
|
|
|
// Define core
|
|
let codiad = global.codiad,
|
|
scripts = document.getElementsByTagName( 'script' ),
|
|
path = scripts[scripts.length-1].src.split( '?' )[0],
|
|
curpath = path.split( '/' ).slice( 0, -1 ).join( '/' ) + '/';
|
|
|
|
codiad.forms = function( instance = null ) {
|
|
|
|
let _i = this;
|
|
|
|
this.back_label = "Back";
|
|
this.next_label = "Next";
|
|
this.page = 0;
|
|
this.saving = false;
|
|
this.submit_label = "Submit";
|
|
this.topics = {};
|
|
|
|
|
|
//Sub objects
|
|
this.m = {
|
|
|
|
conditional: function( o = {} ) {
|
|
|
|
let self = this;
|
|
this.form = _i;
|
|
this.parent = null;
|
|
this.subject = null;
|
|
this.valid_actions = [
|
|
"change_type",
|
|
"hide",
|
|
"show",
|
|
];
|
|
this.values = [];
|
|
|
|
this.change_type = function() {
|
|
|
|
let p = self.parent;
|
|
|
|
if( p.type === self.type ) {
|
|
|
|
return;
|
|
}
|
|
|
|
if( p.element ) {
|
|
|
|
let c = p.element.parent().parent();
|
|
let element = p.element;
|
|
|
|
element.detach();
|
|
element.off();
|
|
|
|
if( c.length ) {
|
|
|
|
c.remove();
|
|
}
|
|
p.element = null;
|
|
}
|
|
|
|
p.type = self.type;
|
|
|
|
let a = self.form.m.create( p );
|
|
|
|
self.parent.replace( a );
|
|
|
|
if( self.parent.previous.element.parent().length ) {
|
|
|
|
self.form.v.add( self.parent, null, self.parent.previous.element, null, true, false );
|
|
} else if( c.element.parent().length ) {
|
|
|
|
self.form.v.add( self.parent, c.element, null, null, true, false );
|
|
} else {
|
|
|
|
self.form.v.add( self.parent, null, null, null, true, false );
|
|
}
|
|
};
|
|
this.check = function() {
|
|
|
|
let value = null;
|
|
let total = self.values.length;
|
|
let pass = false;
|
|
|
|
if( typeof self.subject === "object" ) {
|
|
|
|
value = self.subject.value;
|
|
} else if( typeof self.subject === "function" ) {
|
|
|
|
value = self.subject();
|
|
}
|
|
|
|
for( let i = 0;i < total;i++ ) {
|
|
|
|
if( self.values[i].type ) {
|
|
|
|
self.type = self.values[i].type;
|
|
} else if( self.values[i].action === "change_type" ) {
|
|
|
|
self.type = self.parent.type;
|
|
}
|
|
|
|
if( value === self.values[i].value || `${value}` === `${self.values[i].value}` ) {
|
|
|
|
pass = self.values[i];
|
|
break;
|
|
} else {
|
|
|
|
pass = false;
|
|
}
|
|
}
|
|
return pass;
|
|
};
|
|
this.hide = function() {
|
|
|
|
self.form.v.remove( this.parent );
|
|
};
|
|
this.init = function( o ) {
|
|
|
|
$.each( o, function( key, value ) {
|
|
|
|
if( typeof o[key] === "object" && o[key] !== null && ! Array.isArray( o[key] ) ) {
|
|
|
|
self[key] = $.extend( true, self[key], value );
|
|
} else {
|
|
|
|
self[key] = value;
|
|
}
|
|
});
|
|
};
|
|
this.show = function() {
|
|
|
|
let i = true;
|
|
let j = false;
|
|
|
|
while( i === true ) {
|
|
|
|
if( j === false ) {
|
|
|
|
j = self.parent.previous;
|
|
} else {
|
|
|
|
j = j.previous;
|
|
}
|
|
|
|
if( j === null ) {
|
|
|
|
i = false;
|
|
self.form.v.add( self.parent, null, null, null, true );
|
|
break;
|
|
}
|
|
|
|
if( j.element.parent().length ) {
|
|
|
|
i = false;
|
|
self.form.v.add( self.parent, j.element.parent(), null, null, true );
|
|
break;
|
|
} else if( j.parent.element && j.parent.element.parent().length ) {
|
|
|
|
i = false;
|
|
self.form.v.add( self.parent, j.parent.element.parent(), null, null, true );
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
self.init( o );
|
|
},
|
|
data: {},
|
|
modal_data: function() {
|
|
|
|
let self = this;
|
|
this.class_names = {};
|
|
this.conditions = {};
|
|
this.css = {};
|
|
this.default = "";
|
|
this.description = null;
|
|
this.element = null;
|
|
this.form = _i;
|
|
this.key = null;
|
|
this.label = "";
|
|
this.listeners = {
|
|
|
|
change: [],
|
|
update_modal: [],
|
|
update_view: [],
|
|
};
|
|
this.name = "";
|
|
this.next = null;
|
|
this.options = {};
|
|
this.page = 0;
|
|
this.parent = _i.m.data;
|
|
this.placeholder = "";
|
|
this.previous = null;
|
|
this.render = null;
|
|
this.required = false;
|
|
this.shown_by_default = true;
|
|
this.subdescription = null;
|
|
this.subfields = {};
|
|
this.subscriptions = [];
|
|
this.subtitle = null;
|
|
this.title = null;
|
|
this.type = "text";
|
|
this.update = null;
|
|
this.validation = null;
|
|
this.value = "";
|
|
|
|
this.audit = function( o ) {
|
|
|
|
let r = false;
|
|
|
|
if( self.type === "repeatable" ) {
|
|
|
|
let length = self.value.length;
|
|
for( let i = 0;i < length;i++ ) {
|
|
|
|
self.audit( self.value[i].data );
|
|
}
|
|
} else {
|
|
|
|
$.each( self.conditions, function( k, v ) {
|
|
|
|
if( r !== false ) {
|
|
|
|
return;
|
|
}
|
|
|
|
r = v.check();
|
|
|
|
if( r !== false ) {
|
|
|
|
if( v.valid_actions.includes( r.action ) ) {
|
|
|
|
v[r.action]();
|
|
} else if( typeof r.action === "function" ) {
|
|
|
|
r.action();
|
|
}
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
this.clone = function() {
|
|
|
|
return _i.m.clone( self );
|
|
};
|
|
this.conditionals = function() {
|
|
|
|
let r = false;
|
|
|
|
$.each( self.conditions, function( k, v ) {
|
|
|
|
if( r !== false ) {
|
|
|
|
return;
|
|
}
|
|
|
|
r = v.check();
|
|
});
|
|
return r;
|
|
};
|
|
this.publish = function() {
|
|
|
|
console.log( self );
|
|
|
|
let total = self.subscriptions.length;
|
|
for( let i = 0;i < total;i++ ) {
|
|
|
|
self.subscriptions[i]( self );
|
|
}
|
|
};
|
|
this.remove = function() {
|
|
|
|
_i.v.remove( self );
|
|
_i.m.remove( self, _i.m.data );
|
|
};
|
|
this.replace = function( i, o = {} ) {
|
|
|
|
let restricted = [
|
|
"next",
|
|
"parent",
|
|
"previous",
|
|
];
|
|
|
|
if( typeof i === "object" ) {
|
|
|
|
$.each( i, function( key, value ) {
|
|
|
|
if( ! restricted.includes( key ) ) {
|
|
|
|
self[key] = value;
|
|
}
|
|
});
|
|
} else if( typeof i === "string" ) {
|
|
|
|
self[i] = o;
|
|
}
|
|
};
|
|
this.subscribe = function( subscription ) {
|
|
|
|
if( typeof subscription !== "function" ) {
|
|
|
|
return;
|
|
}
|
|
|
|
let index = self.subscriptions.indexOf( subscription );
|
|
|
|
if( index < 0 ) {
|
|
|
|
self.subscriptions.push( subscription );
|
|
}
|
|
};
|
|
this.unsubscribe = function( subscription ) {
|
|
|
|
let index = self.subscriptions.indexOf( subscription );
|
|
|
|
if( index >= 0 ) {
|
|
|
|
self.subscription.splice( index, 1 );
|
|
}
|
|
};
|
|
},
|
|
parent: _i,
|
|
requirements: {
|
|
|
|
default: [
|
|
"default",
|
|
],
|
|
repeatable: [
|
|
"default",
|
|
"subfields",
|
|
],
|
|
sortable: [
|
|
"default",
|
|
["options", "subfields"],
|
|
],
|
|
},
|
|
v: _i.v,
|
|
|
|
init: function() {
|
|
|
|
let _this = _i.m;
|
|
},
|
|
create: function( o ) {
|
|
|
|
let _this = _i.m;
|
|
|
|
if( typeof o !== "object" ) {
|
|
|
|
throw new Error({
|
|
message: "Creation of modal_data requires data of type Object",
|
|
data_recieved: o,
|
|
type_recieved: ( typeof o ),
|
|
});
|
|
}
|
|
|
|
if( ! o.type ) {
|
|
|
|
throw new Error({
|
|
message: "Creation of modal_data requires type to be specified in the passed object",
|
|
data_recieved: o,
|
|
type_recieved: ( typeof o.type ),
|
|
});
|
|
}
|
|
|
|
if( _this.requirements[`${o.type}`] ) {
|
|
|
|
let keys = _this.requirements[`${o.type}`];
|
|
let total = keys.length;
|
|
let pass = false;
|
|
|
|
for( let i = 0;i < total;i++ ) {
|
|
|
|
if( typeof keys[i] === "string" ) {
|
|
|
|
if( o[keys[i]] === undefined ) {
|
|
|
|
reject({
|
|
message: "Error, requirements to create object not met.",
|
|
required_fields: o.requirements[`${o.type}`],
|
|
});
|
|
}
|
|
} else if( Array.isArray( keys[i] ) ) {
|
|
|
|
let inner_total = keys[i].length;
|
|
pass = false;
|
|
|
|
for( let j = 0;j < total;j++ ) {
|
|
|
|
if( o[keys[i]] !== undefined ) {
|
|
|
|
pass = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if( ! pass ) {
|
|
|
|
reject({
|
|
message: "Error, requirements to create object not met.",
|
|
required_fields: o.requirements[`${o.type}`],
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
let a = new _this.modal_data();
|
|
|
|
a.get_value = function() {
|
|
|
|
a.update();
|
|
return a.value;
|
|
};
|
|
a.listeners.change = [function( o, e ) {
|
|
|
|
o.update();
|
|
}];
|
|
|
|
if( o.conditions ) {
|
|
|
|
a.shown_by_default = false;
|
|
}
|
|
|
|
$.each( o, function( key, value ) {
|
|
|
|
a[key] = value;
|
|
});
|
|
a.value = a.default;
|
|
|
|
switch( true ) {
|
|
|
|
case( a.type === "checkbox" ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( `<input type="checkbox" />` );
|
|
}
|
|
|
|
a.update = function() {
|
|
|
|
a.value = !!a.element.prop( "checked" );
|
|
a.publish();
|
|
};
|
|
a.render = function() {
|
|
|
|
a.element.prop( "checked", a.value );
|
|
};
|
|
break;
|
|
|
|
case( a.type === "checkboxes" ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( "<div></div>" );
|
|
}
|
|
|
|
a.update = function() {
|
|
|
|
let v = codiad.common.get_check_box_values( a.name );
|
|
a.value = v;
|
|
a.publish();
|
|
};
|
|
a.render = function() {
|
|
|
|
let _this = a;
|
|
let checks = a.element.find( ':checkbox' );
|
|
|
|
a.element.html( '' );
|
|
$.each( a.options, function( id, value ) {
|
|
|
|
let label = $( `<label></label>` );
|
|
let check = $( `<input type="checkbox" name="${_this.name}" value="${value}" />` );
|
|
label.append( check );
|
|
label.append( `${id}` );
|
|
|
|
if( _this.value.includes( value ) ) {
|
|
|
|
check.prop( "checked", true );
|
|
} else {
|
|
|
|
check.prop( "checked", false );
|
|
}
|
|
_i.v.add_listeners( _this, check );
|
|
_this.element.append( label );
|
|
});
|
|
};
|
|
a.get_value = function() {
|
|
|
|
a.update();
|
|
return a.value;
|
|
};
|
|
break;
|
|
|
|
case( a.type === "date" ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( `<input type="date" />` );
|
|
}
|
|
break;
|
|
|
|
case( a.type === "datetime" ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( `<input type="datetime-local" />` );
|
|
}
|
|
break;
|
|
|
|
case( a.type === "email" ):
|
|
|
|
if( ! o.element ) {
|
|
|
|
a.element = $( `<input type="email" />` );
|
|
}
|
|
|
|
if( ! a.validation ) {
|
|
|
|
a.validation = _i.validation.validate;
|
|
}
|
|
break;
|
|
|
|
case( a.type === "hidden" ):
|
|
|
|
if( ! o.element ) {
|
|
|
|
a.element = $( `<input type="hidden" />` );
|
|
}
|
|
break;
|
|
|
|
case( a.type === "number" ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( `<input type="number" />` );
|
|
}
|
|
|
|
if( ! a.validation ) {
|
|
|
|
a.validation = _i.validation.validate;
|
|
}
|
|
break;
|
|
|
|
case( a.type === "phone" ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( `<input type="tel" />` );
|
|
}
|
|
|
|
if( ! a.validation ) {
|
|
|
|
a.validation = _i.validation.validate;
|
|
}
|
|
break;
|
|
|
|
case( _i.m.is_repeatable( a ) ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
if( a.type === "sortable" ) {
|
|
|
|
a.element = $( `<ul></ul>` );
|
|
} else {
|
|
|
|
a.element = $( `<div></div>` );
|
|
}
|
|
}
|
|
|
|
a.value = [];
|
|
|
|
a.add = function( o = {} ) {
|
|
|
|
let _r = a;
|
|
let subs = {};
|
|
|
|
subs.data = {};
|
|
subs.element = $( `<div class="child-container" data-type="child-container"></div>` );
|
|
subs.type = "repeatable-data";
|
|
|
|
let previous = null;
|
|
|
|
$.each( _r.subfields, function( key, value ) {
|
|
|
|
let object = _i.m.clone( value );
|
|
if( o[key] !== undefined && o[key] !== null ) {
|
|
|
|
object.default = o[key];
|
|
}
|
|
|
|
if( object.element ) {
|
|
|
|
object.element = object.element.clone();
|
|
object.element.detach();
|
|
object.element.off();
|
|
}
|
|
|
|
subs.data[key] = _i.m.create( object );
|
|
subs.data[key].parent = subs;
|
|
subs.data[key].previous = previous;
|
|
subs.data[key].key = key;
|
|
|
|
if( previous !== null ) {
|
|
|
|
previous.next = subs.data[key];
|
|
}
|
|
previous = subs.data[key];
|
|
});
|
|
|
|
$.each( o, function( key, value ) {
|
|
|
|
if( typeof value !== "object" && Object.keys( subs ).includes( key ) ) {
|
|
|
|
subs.data[key].value = value;
|
|
} else if( typeof subs[key] === "object" && typeof value === "object" && value !== null ) {
|
|
|
|
subs.data[key] = $.extend( subs.data[key], value );
|
|
} else if( typeof value === "object" && value !== null ) {
|
|
|
|
subs.data[key] = value;
|
|
} else {
|
|
|
|
console.log( "Unknown add field action", key, value );
|
|
}
|
|
});
|
|
subs.parent = _r;
|
|
subs.remove = function() {
|
|
|
|
let total = subs.parent.value.length;
|
|
|
|
for( let i = 0;i < total;i++ ) {
|
|
|
|
if( subs.parent.value[i] === subs ) {
|
|
|
|
subs.parent.value.splice( i, 1 );
|
|
}
|
|
}
|
|
_r.render();
|
|
};
|
|
subs.render = function() {
|
|
|
|
let _this = subs;
|
|
_this.element.off();
|
|
_this.element.detach();
|
|
_this.element.html( "" );
|
|
|
|
console.log( _this.element, _this.element[0].isConnected );
|
|
if( ! _this.element[0].isConnected ) {
|
|
|
|
_this.parent.element.append( _this.element );
|
|
}
|
|
|
|
$.each( _this.data, function( key, value ) {
|
|
|
|
value.element.off();
|
|
value.element.detach();
|
|
value.element.html( "" );
|
|
_i.v.add( value, _this.element );
|
|
});
|
|
|
|
let remove = $( `<a data-type="repeatable-remove">Remove</a>` );
|
|
remove.addClass( 'button' );
|
|
remove.on( 'click', function( e ) {
|
|
|
|
_this.remove();
|
|
});
|
|
_this.element.append( remove );
|
|
};
|
|
|
|
_i.m.conditionals( [], subs.data );
|
|
_r.value.push( subs );
|
|
};
|
|
a.get_value = function() {
|
|
|
|
let _this = a;
|
|
let data = [];
|
|
let total = a.value.length;
|
|
|
|
for( let i = 0;i < total;i++ ) {
|
|
|
|
let object = {};
|
|
$.each( a.value[i].data, function( key, value ) {
|
|
|
|
object[key] = value.get_value();
|
|
});
|
|
data.push( object );
|
|
}
|
|
return data;
|
|
};
|
|
a.remove = function( i ) {
|
|
|
|
a.value[i].remove();
|
|
return a;
|
|
};
|
|
a.render = function() {
|
|
|
|
a.element.html( "" );
|
|
let total = a.value.length;
|
|
|
|
for( let i = 0;i < total;i++ ) {
|
|
|
|
a.value[i].render();
|
|
}
|
|
|
|
if( a.element.parent().find( '[data-type="repeatable-add"]' ).length < 1 ) {
|
|
|
|
let add = $( `<a data-type="repeatable-add">${o.repeat_label}</a>` );
|
|
add.addClass( 'button' );
|
|
add.on( 'click', function( e ) {
|
|
|
|
a.add();
|
|
a.value[(a.value.length - 1)].render();
|
|
});
|
|
a.element.parent().append( add );
|
|
}
|
|
};
|
|
a.update = function() {};
|
|
|
|
if( a.default ) {
|
|
|
|
let total = a.default.length;
|
|
for( let i = 0;i < total;i++ ) {
|
|
|
|
a.add( a.default[i] );
|
|
}
|
|
}
|
|
break;
|
|
|
|
case( a.type === "select" ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( `<select></select>` );
|
|
}
|
|
|
|
a.render = function() {
|
|
|
|
a.element.html( '' );
|
|
let options = {};
|
|
let _this = a;
|
|
|
|
if( typeof a.options === "function" ) {
|
|
|
|
options = a.options( o );
|
|
} else {
|
|
|
|
options = a.options;
|
|
}
|
|
|
|
$.each( options, function( id, value ) {
|
|
|
|
let option = $( `<option value="${value}">${id}</option>` );
|
|
_this.element.append( option );
|
|
});
|
|
a.element.val( a.value );
|
|
};
|
|
break;
|
|
|
|
case( a.type === "sortable" ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( `<ul></ul>` );
|
|
}
|
|
break;
|
|
|
|
case( a.type === "weekday" ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( `<select></select>` );
|
|
}
|
|
|
|
a.render = function() {
|
|
|
|
a.element.html( '' );
|
|
let options = {
|
|
|
|
"Sunday": "sunday",
|
|
"Monday": "monday",
|
|
"Tuesday": "tuesday",
|
|
"Wednesday": "wednesday",
|
|
"Thursday": "thursday",
|
|
"Friday": "friday",
|
|
"Sunday": "sunday",
|
|
};
|
|
let _this = a;
|
|
|
|
$.each( options, function( id, value ) {
|
|
|
|
let option = $( `<option value="${value}">${id}</option>` );
|
|
_this.element.append( option );
|
|
});
|
|
a.element.val( a.value );
|
|
};
|
|
break;
|
|
|
|
case( a.type === "year" ):
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( `<input type="text" />` );
|
|
}
|
|
|
|
if( ! a.validation ) {
|
|
|
|
a.validation = _i.validation.validate;
|
|
}
|
|
break;
|
|
|
|
default:
|
|
|
|
if( ! a.element ) {
|
|
|
|
a.element = $( `<input type="text" />` );
|
|
}
|
|
break;
|
|
}
|
|
|
|
if( typeof a.update !== "function" ) {
|
|
|
|
a.update = function() {
|
|
|
|
a.value = a.element.val();
|
|
a.publish();
|
|
}
|
|
}
|
|
|
|
if( typeof a.render !== "function" ) {
|
|
|
|
a.render = function() {
|
|
|
|
a.element.val( a.value );
|
|
}
|
|
}
|
|
return a;
|
|
},
|
|
clone: function( o ) {
|
|
|
|
return $.extend( true, {}, o );
|
|
},
|
|
conditionals: function( filter = [], data = null ) {
|
|
|
|
let _this = this;
|
|
let total_filters = filter.length;
|
|
let root_keys = Object.keys( this.data );
|
|
|
|
if( data === null ) {
|
|
|
|
data = this.data;
|
|
}
|
|
|
|
let keys = Object.keys( data );
|
|
|
|
$.each( data, function( key, value ) {
|
|
|
|
if( total_filters > 0 && filter.inlcudes( value ) ) {
|
|
|
|
return;
|
|
}
|
|
|
|
$.each( value.conditions, function( k, v ) {
|
|
|
|
let c = new _this.conditional( v );
|
|
|
|
c.parent = value;
|
|
|
|
if( keys.includes( k ) ) {
|
|
|
|
if( c.subject === null ) {
|
|
|
|
c.subject = data[k];
|
|
}
|
|
} else {
|
|
|
|
if( root_keys.includes( k ) ) {
|
|
|
|
if( c.subject === null ) {
|
|
|
|
c.subject = data[k];
|
|
}
|
|
}
|
|
}
|
|
c.subject.subscribe( value.audit );
|
|
value.conditions[k] = c;
|
|
});
|
|
});
|
|
},
|
|
get_value: function( o ) {
|
|
|
|
let _this = _i.m;
|
|
let data = null;
|
|
|
|
if( typeof o === "string" ) {
|
|
|
|
o = _i.m.data[o];
|
|
}
|
|
return o.get_value();
|
|
},
|
|
get_values: function( o = null ) {
|
|
|
|
let _this = _i.m;
|
|
let data = {};
|
|
|
|
if( o === null ) {
|
|
|
|
o = this.data;
|
|
}
|
|
|
|
$.each( o, function( key, value ) {
|
|
|
|
data[key] = _this.get_value( value );
|
|
});
|
|
return data;
|
|
},
|
|
is_repeatable: function( o ) {
|
|
|
|
return ( o.type === "repeatable" || ( o.type === "sortable" && Object.keys( o.subfields ).length ) );
|
|
},
|
|
merge: function( ...objects ) {
|
|
|
|
let o = objects[0];
|
|
let total = objects.length;
|
|
|
|
for( let i = 0;i < total;i++ ) {
|
|
|
|
$.extend( true, o, objects[i] );
|
|
}
|
|
return o;
|
|
},
|
|
remove: function( o, data ) {
|
|
|
|
$.each( data, function( key, value ) {
|
|
|
|
if( value === o ) {
|
|
|
|
_i.v.remove( value );
|
|
data[key] = undefined;
|
|
delete data[key];
|
|
}
|
|
});
|
|
},
|
|
set_data: function() {},
|
|
update: function() {},
|
|
};
|
|
this.publish = function( topic, info ) {
|
|
|
|
let _this = _i;
|
|
|
|
// If the topic doesn't exist, or there's no listeners in queue, just leave
|
|
if( ! _this.topics.hasOwnProperty.call( _this.topics, topic ) ) {
|
|
|
|
return;
|
|
}
|
|
|
|
// Cycle through topics queue, fire!
|
|
_this.topics[topic].forEach( function( item ) {
|
|
|
|
item( info !== undefined ? info : {} );
|
|
});
|
|
};
|
|
this.subscribe = function( topic, listener ) {
|
|
|
|
let _this = _i;
|
|
let add = true;
|
|
|
|
// Create the topic's object if not yet created
|
|
if( ! _this.topics.hasOwnProperty.call( _this.topics, topic ) ) {
|
|
|
|
_this.topics[topic] = [];
|
|
}
|
|
|
|
// Add the listener to queue if not already in it.
|
|
for( let i = _this.topics[topic].length;i--; ) {
|
|
|
|
if( _this.topics[topic][i] == listener ) {
|
|
|
|
add = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if( add ) {
|
|
|
|
let index = _this.topics[topic].push( listener ) - 1;
|
|
}
|
|
|
|
// Provide handle back for removal of topic
|
|
return {
|
|
remove: function() {
|
|
|
|
delete _this.topics[topic][index];
|
|
}
|
|
};
|
|
};
|
|
this.v = {
|
|
|
|
checking_conditions: false,
|
|
container: null,
|
|
controls: null,
|
|
m: _i.m,
|
|
message: null,
|
|
parent: _i,
|
|
|
|
init: function() {
|
|
|
|
let _this = this;
|
|
|
|
if( _this.container === null ) {
|
|
|
|
_this.container = $( "<div></div>" );
|
|
}
|
|
|
|
if( _this.message === null ) {
|
|
|
|
_this.message = $( "<div></div>" );
|
|
}
|
|
},
|
|
add: function( o, c = null, previous = null, next = null, show = false, conditions = true ) {
|
|
|
|
let _this = _i.v;
|
|
|
|
if( typeof o !== "object" ) {
|
|
|
|
throw new Error({
|
|
message: "Creation of form view object requires data of type modal_data",
|
|
data_recieved: o,
|
|
type_recieved: ( typeof o ),
|
|
});
|
|
}
|
|
|
|
let connected = ( !!o.element ) ? o.element.parent().length : false;
|
|
|
|
if( connected || ( ! o.shown_by_default && ! show ) ) {
|
|
|
|
return;
|
|
}
|
|
|
|
if( c === null ) {
|
|
|
|
c = this.container;
|
|
}
|
|
|
|
_this.add_listeners( o );
|
|
|
|
let container = $( '<div class="data-container" data-type="data-container"></div>' );
|
|
let label = $( `<label></label>` );
|
|
let text = ( !!o.label ) ? o.label : ' ';
|
|
let repeatable = _i.m.is_repeatable( o );
|
|
|
|
let title = null;
|
|
let description = null;
|
|
let subtitle = null;
|
|
let subdescription = null;
|
|
let instructions = null;
|
|
|
|
if( typeof o.title === "function" ) {
|
|
|
|
title = o.title( o, container, label );
|
|
} else if( o.title ) {
|
|
|
|
if( ! $( c ).find( `#${o.key}_title` ).length ) {
|
|
|
|
title = $( `<h2 id="${o.key}_title"></h2>` ).html( o.title );
|
|
}
|
|
}
|
|
|
|
if( typeof o.description === "function" ) {
|
|
|
|
description = o.description( o, container, label );
|
|
} else if( o.description ) {
|
|
|
|
if( ! $( c ).find( `#${o.key}_description` ).length ) {
|
|
|
|
description = $( `<p id="${o.key}_description"></p>` ).html( o.description );
|
|
}
|
|
}
|
|
|
|
if( typeof o.subtitle === "function" ) {
|
|
|
|
subtitle = o.subtitle( o, container, label );
|
|
} else if( o.subtitle ) {
|
|
|
|
if( ! $( c ).find( `#${o.key}_subtitle` ).length ) {
|
|
|
|
subtitle = $( `<h4 id="${o.key}_subtitle"></h4>` ).text( o.subtitle );
|
|
}
|
|
}
|
|
|
|
if( typeof o.subdescription === "function" ) {
|
|
|
|
subdescription = o.subdescription( o, container, label );
|
|
} else if( o.subdescription ) {
|
|
|
|
if( ! $( c ).find( `#${o.key}_subdescription` ).length ) {
|
|
|
|
subdescription = $( `<br><small id="${o.key}_subdescription"></small>` ).text( o.subdescription );
|
|
}
|
|
}
|
|
|
|
if( typeof o.label === "function" ) {
|
|
|
|
text = o.label( o, container, label );
|
|
}
|
|
|
|
if( o.required === true ) {
|
|
|
|
text = text + ' *';
|
|
}
|
|
|
|
label.text( text );
|
|
|
|
if( o.classes && o.classes.container ) {
|
|
|
|
let total_classes = o.classes.container;
|
|
|
|
for( let i = 0;i < total_classes;i++ ) {
|
|
|
|
o.addClass( o.classes.container[i] );
|
|
}
|
|
}
|
|
|
|
o.element.css( o.css );
|
|
|
|
if( o.title ) {
|
|
|
|
container.append( title );
|
|
}
|
|
|
|
if( o.description ) {
|
|
|
|
container.append( description );
|
|
}
|
|
|
|
if( o.subtitle ) {
|
|
|
|
label.append( subtitle );
|
|
}
|
|
|
|
if( o.subdescription ) {
|
|
|
|
label.append( subdescription );
|
|
}
|
|
|
|
if( o.placeholder ) {
|
|
|
|
o.element.attr( "placeholder", o.placeholder );
|
|
}
|
|
|
|
if( o.label ) {
|
|
|
|
container.append( label );
|
|
label.append( o.element );
|
|
} else {
|
|
|
|
container.append( o.element );
|
|
}
|
|
|
|
switch( true ) {
|
|
|
|
case( typeof o.load === "function" ):
|
|
|
|
o.load( o );
|
|
return o;
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
}
|
|
|
|
if( previous ) {
|
|
|
|
container.insertAfter( previous );
|
|
} else if( next ) {
|
|
|
|
container.insertBefore( next );
|
|
} else {
|
|
|
|
c.append( container );
|
|
}
|
|
|
|
if( typeof o.render === "function" ) {
|
|
|
|
o.render();
|
|
}
|
|
return o;
|
|
},
|
|
add_listeners: function( o, element = null ) {
|
|
|
|
if( element === null ) {
|
|
|
|
element = o.element;
|
|
}
|
|
|
|
$.each( o.listeners, function( id, value ) {
|
|
|
|
if( Array.isArray( value ) ) {
|
|
|
|
for( let i = value.length;i--; ) {
|
|
|
|
element.on( id, function( e ) {
|
|
|
|
value[i]( o, e );
|
|
});
|
|
}
|
|
} else {
|
|
|
|
element.on( id, function( e ) {
|
|
|
|
value( o, e );
|
|
});
|
|
}
|
|
});
|
|
},
|
|
conditionals: function( filter = [], data = null ) {
|
|
|
|
let _this = this;
|
|
let filter_length = filter.length;
|
|
|
|
console.log( "checking conditions", filter, data, this.checking_conditions, _i.m.data.element );
|
|
|
|
if( this.checking_conditions === true && data === null ) {
|
|
|
|
return;
|
|
}
|
|
|
|
this.checking_conditions = true;
|
|
|
|
if( data === null ) {
|
|
|
|
data = _i.m.data;
|
|
}
|
|
|
|
$.each( data, function( key, value ) {
|
|
|
|
if( filter_length && ! filter.includes( value ) ) {
|
|
|
|
return;
|
|
}
|
|
|
|
if( _i.page !== value.page ) {
|
|
|
|
return;
|
|
}
|
|
|
|
value.audit();
|
|
});
|
|
this.checking_conditions = false;
|
|
},
|
|
next_page: async function() {
|
|
|
|
let _this = _i.v;
|
|
let v = await _i.validation.verify();
|
|
let total = _i.get_total_pages()
|
|
if( _i.page < total && v ) {
|
|
|
|
_i.v.render_page( _i.page + 1 );
|
|
} else if( _i.page == total && v ) {
|
|
|
|
_i.submit();
|
|
}
|
|
return _i.page;
|
|
},
|
|
previous_page: async function() {
|
|
|
|
if( _i.page > 0 ) {
|
|
|
|
_i.v.render_page( _i.page - 1 );
|
|
}
|
|
return _i.page;
|
|
},
|
|
remove: function( o ) {
|
|
|
|
if( typeof o !== "object" || ! o ) {
|
|
|
|
throw new Error({
|
|
message: "Removal of form view object requires data of type modal_data",
|
|
data_recieved: o,
|
|
type_recieved: ( typeof o.type ),
|
|
});
|
|
}
|
|
|
|
if( ! o.element ) {
|
|
|
|
console.log( "removal of blank element", o );
|
|
return o;
|
|
}
|
|
|
|
let c = o.element.parent();
|
|
let element = o.element;
|
|
let i = null;
|
|
|
|
i = element.detach();
|
|
i = element.off();
|
|
|
|
if( c.length ) {
|
|
|
|
i = c.remove();
|
|
}
|
|
return o;
|
|
},
|
|
render_controls: function() {
|
|
|
|
let _this = _i.v;
|
|
let controls = _this.controls;
|
|
let next = $( `<button class="button">${_i.next_label}</button>` );
|
|
let back = $( `<button class="button">${_i.back_label}</button>` );
|
|
|
|
controls.html( '' );
|
|
|
|
next.on( "click", function( e ) {
|
|
|
|
_this.next_page();
|
|
});
|
|
back.on( "click", function( e ) {
|
|
|
|
_this.previous_page();
|
|
});
|
|
|
|
if( _i.page == _i.get_total_pages() ) {
|
|
|
|
next.text( _i.submit_label );
|
|
next.attr( "type", "submit" )
|
|
}
|
|
|
|
if( _i.page == 0 ) {
|
|
|
|
controls.append( next );
|
|
} else {
|
|
|
|
controls.append( back );
|
|
controls.append( next );
|
|
}
|
|
},
|
|
render_page: function( id ) {
|
|
|
|
let _this = this;
|
|
|
|
_i.publish( "data.onWillRenderPage", {
|
|
page: id,
|
|
view: this,
|
|
});
|
|
|
|
_this.unrender_page( _i.page );
|
|
_i.page = id;
|
|
_this.container.append( _this.message );
|
|
|
|
$.each( _this.m.data, function( key, value ) {
|
|
|
|
if( ! value || value.page !== _i.page || value.shown_by_default === false ) {
|
|
|
|
return;
|
|
}
|
|
|
|
let check = value.conditionals();
|
|
|
|
console.log( check );
|
|
|
|
if( check !== false && check.action === "hide" ) {
|
|
|
|
return;
|
|
}
|
|
|
|
_this.add( value );
|
|
});
|
|
|
|
_this.controls = $( `<div data-type="controls"></div>` );
|
|
_this.container.append( _this.controls );
|
|
_this.render_controls();
|
|
_this.update();
|
|
_i.publish( "data.onRenderedPage", {
|
|
page: id,
|
|
view: this,
|
|
});
|
|
},
|
|
unrender_page: function( id ) {
|
|
|
|
let _this = this;
|
|
let keys = Object.keys( _this.m.data );
|
|
let total = keys.length;
|
|
|
|
_i.publish( "data.onUnRenderPage", {
|
|
page: id,
|
|
view: this,
|
|
});
|
|
|
|
for( let i = 0;i < total;i++ ) {
|
|
|
|
if( _this.m.data[keys[i]].page === id ) {
|
|
|
|
_this.remove( _this.m.data[keys[i]] );
|
|
}
|
|
}
|
|
_this.container.html( '' );
|
|
},
|
|
update: function() {},
|
|
};
|
|
this.validation = {
|
|
|
|
empty_values: [
|
|
undefined,
|
|
null,
|
|
'null',
|
|
'',
|
|
[],
|
|
],
|
|
parent: _i,
|
|
types: {
|
|
|
|
email: /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/,
|
|
number: /^(?=.)([+-]?(\d*)(\.(\d+))?)$/,
|
|
phone: /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/,
|
|
year: /^[0-9]{4}$/,
|
|
},
|
|
|
|
validate: function( o ) {
|
|
|
|
let _this = _i.validation;
|
|
let pass = true;
|
|
|
|
return new Promise( function( resolve, reject ) {
|
|
|
|
if( Object.keys( _this.types ).includes( o.type ) ) {
|
|
|
|
if( typeof _this.types[`${o.type}`] === "function" ) {
|
|
|
|
_this.types[`${o.type}`]( o )
|
|
.then( resolve );
|
|
} else {
|
|
|
|
if( o.required ) {
|
|
|
|
if( _this.empty_values.includes( o.value ) ) {
|
|
|
|
pass = false;
|
|
}
|
|
}
|
|
|
|
console.log( o, o.value );
|
|
|
|
if( pass && ! _this.types[`${o.type}`].test( o.value ) ) {
|
|
|
|
pass = false;
|
|
}
|
|
|
|
resolve( pass );
|
|
}
|
|
} else {
|
|
|
|
reject( false );
|
|
}
|
|
});
|
|
},
|
|
verify: function( data = null ) {
|
|
|
|
return new Promise( async function( resolve, reject ) {
|
|
|
|
let empty_values = [
|
|
undefined,
|
|
null,
|
|
'null',
|
|
'',
|
|
[],
|
|
];
|
|
let _this = _i.validation;
|
|
let values = [];
|
|
|
|
if( data == null ) {
|
|
|
|
_i.publish( "data.onWillVerify", {
|
|
form: _i,
|
|
});
|
|
|
|
data = _i.m.data
|
|
}
|
|
|
|
$.each( data, async function( key, value ) {
|
|
|
|
let show = true;
|
|
let repeatable = _i.m.is_repeatable( value );
|
|
let pass = true;
|
|
|
|
if( value.page !== _i.page ) {
|
|
|
|
return;
|
|
}
|
|
|
|
if( ! value.required && ! repeatable ) {
|
|
|
|
return;
|
|
}
|
|
|
|
if( typeof value.conditions === "function" ) {
|
|
|
|
show = value.conditions( value );
|
|
} else if( value.conditions ) {
|
|
|
|
$.each( value.conditions, function( i, v ) {
|
|
|
|
if( ( v.value === v.o.value || `${v.value}` === `${v.o.value}` ) && show ) {
|
|
|
|
show = true;
|
|
} else {
|
|
|
|
show = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
if( ! show ) {
|
|
|
|
return;
|
|
}
|
|
|
|
if( repeatable ) {
|
|
|
|
let total = value.value.length;
|
|
for( let i = 0;i < total;i++ ) {
|
|
|
|
let a = await _this.verify( value.value[i].data );
|
|
values.concat( a );
|
|
}
|
|
}
|
|
|
|
if( value.subfields ) {
|
|
|
|
if( value.required && ! value.value.length ) {
|
|
|
|
pass = false;
|
|
}
|
|
}
|
|
|
|
if( typeof value.validation === "function" ) {
|
|
|
|
pass = await value.validation( value );
|
|
}
|
|
|
|
values.push( pass );
|
|
if( pass ) {
|
|
|
|
value.element.parent().css( 'color', 'black' );
|
|
} else {
|
|
|
|
value.element.parent().css( 'color', 'red' );
|
|
}
|
|
});
|
|
|
|
if( ! values.includes( false ) ) {
|
|
|
|
resolve( true );
|
|
_i.publish( "data.onVerificationSuccess", {
|
|
form: _i,
|
|
});
|
|
} else {
|
|
|
|
_i.publish( "data.onVerificationFailure", {
|
|
form: _i,
|
|
});
|
|
_i.v.message.html( codiad.common.message( "Please be sure to fill out all denoted fields", "error" ) );
|
|
$( "html, body" ).animate( { scrollTop: 0 }, "slow" );
|
|
reject( false );
|
|
}
|
|
});
|
|
},
|
|
};
|
|
this.submit = function() {};
|
|
|
|
_i.m.init();
|
|
_i.v.init();
|
|
|
|
if( instance !== null ) {
|
|
|
|
_i.init( instance );
|
|
}
|
|
return _i;
|
|
};
|
|
|
|
codiad.forms.prototype.create = function( key, o ) {
|
|
|
|
if( typeof o !== "object" ) {
|
|
|
|
throw new Error({
|
|
message: "Initialization of form object requires data of type Object",
|
|
data_recieved: o,
|
|
type_recieved: ( typeof o ),
|
|
});
|
|
}
|
|
|
|
this.m.data[key] = this.m.create( o );
|
|
};
|
|
codiad.forms.prototype.get_first_page = function() {
|
|
|
|
let _this = this;
|
|
let i = null;
|
|
|
|
$.each( _this.m.data, function( key, value ) {
|
|
|
|
if( i === null ) {
|
|
|
|
i = value.page;
|
|
} else if( value.page > i ) {
|
|
|
|
i = value.page;
|
|
}
|
|
});
|
|
return i;
|
|
},
|
|
codiad.forms.prototype.get_total_pages = function() {
|
|
|
|
let _this = this;
|
|
let i = 0;
|
|
$.each( _this.m.data, function( key, value ) {
|
|
|
|
if( value.page > i ) {
|
|
|
|
i = value.page;
|
|
}
|
|
});
|
|
return i;
|
|
};
|
|
codiad.forms.prototype.clone = function( o ) {};
|
|
codiad.forms.prototype.init = function( o ) {
|
|
|
|
if( typeof o !== "object" ) {
|
|
|
|
throw new Error({
|
|
message: "Initialization of form object requires data of type Object",
|
|
data_recieved: o,
|
|
type_recieved: ( typeof o.type ),
|
|
});
|
|
}
|
|
|
|
let _this = this;
|
|
|
|
if( o.container ) {
|
|
|
|
this.v.container = o.container;
|
|
}
|
|
|
|
if( ! o.data ) {
|
|
|
|
o.data = {};
|
|
}
|
|
|
|
if( o.back_label ) {
|
|
|
|
this.back_label = o.back_label;
|
|
}
|
|
|
|
if( o.next_label ) {
|
|
|
|
this.next_label = o.next_label;
|
|
}
|
|
|
|
if( o.submit_label ) {
|
|
|
|
this.submit_label = o.submit_label;
|
|
}
|
|
|
|
let previous = null;
|
|
|
|
$.each( o.data, async function( key, value ) {
|
|
|
|
if( value.key === undefined ) {
|
|
|
|
value.key = key;
|
|
}
|
|
_this.create( key, value );
|
|
|
|
_this.m.data[key].previous = previous;
|
|
|
|
if( previous !== null ) {
|
|
|
|
previous.next = _this.m.data[key];
|
|
}
|
|
|
|
previous = _this.m.data[key];
|
|
});
|
|
this.m.conditionals();
|
|
this.v.render_page( 0 );
|
|
};
|
|
})( this, jQuery ); |