remove semicolon
This commit is contained in:
parent
4f4a1790db
commit
a8d38dcef9
426
src/component.js
426
src/component.js
|
@ -1,47 +1,47 @@
|
|||
import Omi from './omi.js';
|
||||
import style from './style.js';
|
||||
import scopedEvent from './event.js';
|
||||
import morphdom from './morphdom.js';
|
||||
import html2json from './html2json.js';
|
||||
import Omi from './omi.js'
|
||||
import style from './style.js'
|
||||
import scopedEvent from './event.js'
|
||||
import morphdom from './morphdom.js'
|
||||
import html2json from './html2json.js'
|
||||
|
||||
class Component {
|
||||
constructor(data, server) {
|
||||
//re render the server-side rendering html on the client-side
|
||||
const type = Object.prototype.toString.call(data);
|
||||
const isReRendering = type !== '[object Object]' && type !== '[object Undefined]';
|
||||
const type = Object.prototype.toString.call(data)
|
||||
const isReRendering = type !== '[object Object]' && type !== '[object Undefined]'
|
||||
if (isReRendering) {
|
||||
this.renderTo = typeof data === "string" ? document.querySelector(data) : data;
|
||||
this._hidden = this.renderTo.querySelector('.omi_scoped__hidden_data');
|
||||
this.id = this._hidden.dataset.omiId;
|
||||
this.data = JSON.parse(this._hidden.value);
|
||||
this.renderTo = typeof data === "string" ? document.querySelector(data) : data
|
||||
this._hidden = this.renderTo.querySelector('.omi_scoped__hidden_data')
|
||||
this.id = this._hidden.dataset.omiId
|
||||
this.data = JSON.parse(this._hidden.value)
|
||||
} else {
|
||||
this.data = data || {};
|
||||
this._omi_server_rendering = server;
|
||||
this.id = this._omi_server_rendering ? (1000000+ Omi.getInstanceId()) : Omi.getInstanceId();
|
||||
this.data = data || {}
|
||||
this._omi_server_rendering = server
|
||||
this.id = this._omi_server_rendering ? (1000000+ Omi.getInstanceId()) : Omi.getInstanceId()
|
||||
}
|
||||
this.refs = {};
|
||||
this.children = [];
|
||||
this.childrenData = [];
|
||||
this.HTML = null;
|
||||
this._addedItems = [];
|
||||
Omi.instances[this.id] = this;
|
||||
this.dataFirst = true;
|
||||
this.refs = {}
|
||||
this.children = []
|
||||
this.childrenData = []
|
||||
this.HTML = null
|
||||
this._addedItems = []
|
||||
Omi.instances[this.id] = this
|
||||
this.dataFirst = true
|
||||
|
||||
this._omi_scoped_attr = Omi.STYLESCOPEDPREFIX + this.id;
|
||||
//this.BODY_ELEMENT = document.createElement('body');
|
||||
this._preCSS = null;
|
||||
this._omiGroupDataCounter = {};
|
||||
this._omi_scoped_attr = Omi.STYLESCOPEDPREFIX + this.id
|
||||
//this.BODY_ELEMENT = document.createElement('body')
|
||||
this._preCSS = null
|
||||
this._omiGroupDataCounter = {}
|
||||
if(Omi.dataFromGlobalStore){
|
||||
this.dataFromStore = true;
|
||||
this.useStore(Omi.globalStore);
|
||||
this.dataFromStore = true
|
||||
this.useStore(Omi.globalStore)
|
||||
}else{
|
||||
this.dataFromStore = false;
|
||||
this.dataFromStore = false
|
||||
}
|
||||
if (this._omi_server_rendering || isReRendering) {
|
||||
this.install();
|
||||
this._render(true);
|
||||
this._childrenInstalled(this);
|
||||
this.installed();
|
||||
this.install()
|
||||
this._render(true)
|
||||
this._childrenInstalled(this)
|
||||
this.installed()
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -70,7 +70,7 @@ class Component {
|
|||
}
|
||||
|
||||
useStore(store){
|
||||
this.store = store;
|
||||
this.store = store
|
||||
this.data = store.data
|
||||
let isInclude = false
|
||||
this.dataFromStore = true
|
||||
|
@ -82,408 +82,406 @@ class Component {
|
|||
if(!isInclude){
|
||||
store.instances.push(this)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
update() {
|
||||
this.beforeUpdate();
|
||||
this._childrenBeforeUpdate(this);
|
||||
this.beforeUpdate()
|
||||
this._childrenBeforeUpdate(this)
|
||||
if (this.renderTo) {
|
||||
this._render();
|
||||
this._render()
|
||||
} else {
|
||||
// update child node
|
||||
if(this._omi_removed ) {
|
||||
let hdNode = this._createHiddenNode();
|
||||
this.node.parentNode.replaceChild(hdNode,this.node);
|
||||
this.node = hdNode;
|
||||
let hdNode = this._createHiddenNode()
|
||||
this.node.parentNode.replaceChild(hdNode,this.node)
|
||||
this.node = hdNode
|
||||
}else{
|
||||
morphdom(this.node, scopedEvent(this._childRender(this._omiChildStr), this.id));
|
||||
morphdom(this.node, scopedEvent(this._childRender(this._omiChildStr), this.id))
|
||||
|
||||
this.node = document.querySelector("[" + this._omi_scoped_attr + "]");
|
||||
this._queryElements(this);
|
||||
this._fixForm();
|
||||
this.node = document.querySelector("[" + this._omi_scoped_attr + "]")
|
||||
this._queryElements(this)
|
||||
this._fixForm()
|
||||
}
|
||||
}
|
||||
//update added components
|
||||
this._renderAddedChildren();
|
||||
this._childrenAfterUpdate(this);
|
||||
this.afterUpdate();
|
||||
this._renderAddedChildren()
|
||||
this._childrenAfterUpdate(this)
|
||||
this.afterUpdate()
|
||||
}
|
||||
|
||||
_childrenBeforeUpdate(root){
|
||||
root.children.forEach((child)=>{
|
||||
child.beforeUpdate();
|
||||
this._childrenBeforeUpdate(child);
|
||||
child.beforeUpdate()
|
||||
this._childrenBeforeUpdate(child)
|
||||
})
|
||||
}
|
||||
|
||||
_childrenAfterUpdate(root){
|
||||
root.children.forEach((child)=>{
|
||||
this._childrenAfterUpdate(child);
|
||||
child.afterUpdate();
|
||||
this._childrenAfterUpdate(child)
|
||||
child.afterUpdate()
|
||||
})
|
||||
}
|
||||
|
||||
setData(data, update) {
|
||||
this.data = data;
|
||||
this.data = data
|
||||
if (update) {
|
||||
this.update();
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
|
||||
removeChild(indexOrChild){
|
||||
let child = indexOrChild;
|
||||
let child = indexOrChild
|
||||
if(typeof indexOrChild === 'number'){
|
||||
child = this.children[indexOrChild];
|
||||
child = this.children[indexOrChild]
|
||||
}
|
||||
|
||||
child.remove();
|
||||
child.remove()
|
||||
}
|
||||
|
||||
restoreChild(indexOrChild){
|
||||
let child = indexOrChild;
|
||||
let child = indexOrChild
|
||||
if(typeof indexOrChild === 'number'){
|
||||
child = this.children[indexOrChild];
|
||||
child = this.children[indexOrChild]
|
||||
}
|
||||
|
||||
child.restore();
|
||||
child.restore()
|
||||
}
|
||||
|
||||
//beforeBegin,beforeEnd,afterBegin,afterEnd
|
||||
addComponent(position, el, component) {
|
||||
this._addedItems.push({position: position, el: el, component: component});
|
||||
this.update();
|
||||
this._addedItems.push({position: position, el: el, component: component})
|
||||
this.update()
|
||||
}
|
||||
|
||||
removeComponent(component) {
|
||||
for(let i = 0,len = this._addedItems.length;i<len;i++){
|
||||
if(component.id === this._addedItems[i].component.id){
|
||||
this._addedItems.splice(i,1);
|
||||
break;
|
||||
for (let i = 0, len = this._addedItems.length; i < len; i++) {
|
||||
if (component.id === this._addedItems[i].component.id) {
|
||||
this._addedItems.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
this.update();
|
||||
this.update()
|
||||
}
|
||||
|
||||
remove (){
|
||||
this._omi_removed = true;
|
||||
this.update();
|
||||
this.uninstall();
|
||||
|
||||
this._omi_removed = true
|
||||
this.update()
|
||||
this.uninstall()
|
||||
}
|
||||
|
||||
restore(){
|
||||
this._omi_removed = false;
|
||||
this.update();
|
||||
this.installed();
|
||||
this._omi_removed = false
|
||||
this.update()
|
||||
this.installed()
|
||||
}
|
||||
|
||||
_renderAddedChildren(){
|
||||
this._addedItems.forEach((item)=>{
|
||||
let target = typeof item.el === "string" ? this.node.querySelector(item.el) : item.el;
|
||||
item.component.install();
|
||||
item.component._render(true);
|
||||
item.component.installed();
|
||||
item.component._childrenInstalled(item.component);
|
||||
target.insertAdjacentHTML(item.position ,item.component.HTML);
|
||||
});
|
||||
let target = typeof item.el === "string" ? this.node.querySelector(item.el) : item.el
|
||||
item.component.install()
|
||||
item.component._render(true)
|
||||
item.component.installed()
|
||||
item.component._childrenInstalled(item.component)
|
||||
target.insertAdjacentHTML(item.position ,item.component.HTML)
|
||||
})
|
||||
this.children.forEach((child)=>{
|
||||
child._renderAddedChildren();
|
||||
});
|
||||
child._renderAddedChildren()
|
||||
})
|
||||
}
|
||||
|
||||
_render(isFirst) {
|
||||
if(this._omi_removed ){
|
||||
let node = this._createHiddenNode();
|
||||
let node = this._createHiddenNode()
|
||||
if(!isFirst){
|
||||
this.node.parentNode.replaceChild(node, this.node);
|
||||
this.node = node;
|
||||
this.node.parentNode.replaceChild(node, this.node)
|
||||
this.node = node
|
||||
}else if(this.renderTo){
|
||||
this.renderTo.appendChild(node);
|
||||
this.renderTo.appendChild(node)
|
||||
}
|
||||
return;
|
||||
return
|
||||
}
|
||||
this._generateHTMLCSS();
|
||||
this._extractChildren(this);
|
||||
this._generateHTMLCSS()
|
||||
this._extractChildren(this)
|
||||
|
||||
this.children.forEach((item, index) => {
|
||||
this.HTML = this.HTML.replace(item._omiChildStr, this.children[index].HTML);
|
||||
});
|
||||
this.HTML = scopedEvent(this.HTML, this.id);
|
||||
this.HTML = this.HTML.replace(item._omiChildStr, this.children[index].HTML)
|
||||
})
|
||||
this.HTML = scopedEvent(this.HTML, this.id)
|
||||
if (isFirst) {
|
||||
if (this.renderTo) {
|
||||
if (this._omi_increment) {
|
||||
this.renderTo.insertAdjacentHTML('beforeend', this.HTML);
|
||||
this.renderTo.insertAdjacentHTML('beforeend', this.HTML)
|
||||
} else {
|
||||
this.renderTo.innerHTML = this.HTML ;
|
||||
this.renderTo.innerHTML = this.HTML
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.HTML !== "") {
|
||||
morphdom(this.node, this.HTML);
|
||||
morphdom(this.node, this.HTML)
|
||||
} else {
|
||||
morphdom(this.node ,this._createHiddenNode());
|
||||
morphdom(this.node ,this._createHiddenNode())
|
||||
}
|
||||
}
|
||||
//get node prop from parent node
|
||||
if (this.renderTo) {
|
||||
this.node = document.querySelector("[" + this._omi_scoped_attr + "]");
|
||||
this._queryElements(this);
|
||||
this._fixForm();
|
||||
this.node = document.querySelector("[" + this._omi_scoped_attr + "]")
|
||||
this._queryElements(this)
|
||||
this._fixForm()
|
||||
}
|
||||
}
|
||||
|
||||
_childRender(childStr,isFirst) {
|
||||
if(this._omi_removed ){
|
||||
this.HTML = '<input type="hidden" omi_scoped_'+this.id+' >';
|
||||
return this.HTML;
|
||||
this.HTML = '<input type="hidden" omi_scoped_'+this.id+' >'
|
||||
return this.HTML
|
||||
}
|
||||
//childStr = childStr.replace("<child", "<div").replace("/>", "></div>");
|
||||
this._mergeData(childStr);
|
||||
this._generateHTMLCSS();
|
||||
this._extractChildren(this);
|
||||
//childStr = childStr.replace("<child", "<div").replace("/>", "></div>")
|
||||
this._mergeData(childStr)
|
||||
this._generateHTMLCSS()
|
||||
this._extractChildren(this)
|
||||
|
||||
this.children.forEach((item, index) => {
|
||||
this.HTML = this.HTML.replace(item._omiChildStr, this.children[index].HTML);
|
||||
});
|
||||
this.HTML = scopedEvent(this.HTML, this.id);
|
||||
return this.HTML;
|
||||
this.HTML = this.HTML.replace(item._omiChildStr, this.children[index].HTML)
|
||||
})
|
||||
this.HTML = scopedEvent(this.HTML, this.id)
|
||||
return this.HTML
|
||||
}
|
||||
|
||||
_queryElements(current) {
|
||||
current._mixRefs();
|
||||
current._execPlugins();
|
||||
current._mixRefs()
|
||||
current._execPlugins()
|
||||
current.children.forEach((item)=>{
|
||||
item.node = current.node.querySelector("[" + Omi.STYLESCOPEDPREFIX + item.id + "]");
|
||||
item.node = current.node.querySelector("[" + Omi.STYLESCOPEDPREFIX + item.id + "]")
|
||||
//recursion get node prop from parent node
|
||||
item.node && current._queryElements(item);
|
||||
});
|
||||
item.node && current._queryElements(item)
|
||||
})
|
||||
}
|
||||
|
||||
_mixRefs() {
|
||||
let nodes = Omi.$$('*[ref]',this.node);
|
||||
let nodes = Omi.$$('*[ref]',this.node)
|
||||
nodes.forEach(node => {
|
||||
if(node.hasAttribute(this._omi_scoped_attr) ) {
|
||||
this.refs[node.getAttribute('ref')] = node;
|
||||
this.refs[node.getAttribute('ref')] = node
|
||||
}
|
||||
});
|
||||
let attr = this.node.getAttribute('ref');
|
||||
})
|
||||
let attr = this.node.getAttribute('ref')
|
||||
if(attr) {
|
||||
this.refs[attr] = this.node;
|
||||
this.refs[attr] = this.node
|
||||
}
|
||||
}
|
||||
|
||||
_execPlugins(){
|
||||
Object.keys(Omi.plugins).forEach(item => {
|
||||
let nodes = Omi.$$('*['+item+']',this.node);
|
||||
let nodes = Omi.$$('*['+item+']',this.node)
|
||||
nodes.forEach(node => {
|
||||
if(node.hasAttribute(this._omi_scoped_attr) ) {
|
||||
Omi.plugins[item](node,this);
|
||||
Omi.plugins[item](node,this)
|
||||
}
|
||||
});
|
||||
})
|
||||
if(this.node.hasAttribute(item)) {
|
||||
Omi.plugins[item](this.node, this);
|
||||
Omi.plugins[item](this.node, this)
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
_childrenInstalled(root){
|
||||
root.children.forEach((child)=>{
|
||||
this._childrenInstalled(child);
|
||||
child.installed();
|
||||
this._childrenInstalled(child)
|
||||
child.installed()
|
||||
})
|
||||
}
|
||||
|
||||
_fixForm (){
|
||||
|
||||
Omi.$$('input',this.node).forEach(element =>{
|
||||
let type = element.type.toLowerCase();
|
||||
let type = element.type.toLowerCase()
|
||||
if (element.getAttribute('value') === '') {
|
||||
element.value = '';
|
||||
element.value = ''
|
||||
}
|
||||
if (type === 'checked' || type === 'radio') {
|
||||
if (element.hasAttribute('checked')) {
|
||||
element.checked = 'checked';
|
||||
element.checked = 'checked'
|
||||
} else {
|
||||
element.checked = false;
|
||||
element.checked = false
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
Omi.$$('textarea',this.node).forEach(textarea =>{
|
||||
textarea.value = textarea.getAttribute('value');
|
||||
});
|
||||
textarea.value = textarea.getAttribute('value')
|
||||
})
|
||||
|
||||
Omi.$$('select',this.node).forEach(select =>{
|
||||
let value = select.getAttribute('value')
|
||||
if (value) {
|
||||
Omi.$$('option',select).forEach(option =>{
|
||||
if(value === option.getAttribute('value')) {
|
||||
option.setAttribute('selected', 'selected');
|
||||
option.setAttribute('selected', 'selected')
|
||||
}
|
||||
})
|
||||
}else {
|
||||
let firstOption = Omi.$$('option', select)[0];
|
||||
firstOption && firstOption.setAttribute('selected', 'selected');
|
||||
let firstOption = Omi.$$('option', select)[0]
|
||||
firstOption && firstOption.setAttribute('selected', 'selected')
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
_replaceTags(array, html) {
|
||||
const str = array.join("|");
|
||||
const reg = new RegExp('<(' + str + '+)((?:\\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\\s*=\\s*(?:(?:"[^"]*")|(?:\'[^\']*\')|[^>\\s]+))?)*)\\s*(\\/?)>', 'g');
|
||||
const str = array.join("|")
|
||||
const reg = new RegExp('<(' + str + '+)((?:\\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\\s*=\\s*(?:(?:"[^"]*")|(?:\'[^\']*\')|[^>\\s]+))?)*)\\s*(\\/?)>', 'g')
|
||||
return html.replace(reg, function (m, a) {
|
||||
var d = m.length - 2;
|
||||
var d = m.length - 2
|
||||
if (d >= 0 && m.lastIndexOf('/>') === m.length - 2) {
|
||||
return m.replace('<' + a, '<child tag="' + a + '"').substr(0, m.length + 10) + '></child>';
|
||||
return m.replace('<' + a, '<child tag="' + a + '"').substr(0, m.length + 10) + '></child>'
|
||||
} else if (m.lastIndexOf('>') === m.length - 1) {
|
||||
return m.replace('<' + a, '<child tag="' + a + '"') + '</child>';
|
||||
return m.replace('<' + a, '<child tag="' + a + '"') + '</child>'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
_createHiddenNode(){
|
||||
let hdNode = document.createElement("input");
|
||||
hdNode.setAttribute("type","hidden");
|
||||
hdNode.setAttribute( this._omi_scoped_attr, '');
|
||||
return hdNode;
|
||||
let hdNode = document.createElement("input")
|
||||
hdNode.setAttribute("type","hidden")
|
||||
hdNode.setAttribute( this._omi_scoped_attr, '')
|
||||
return hdNode
|
||||
}
|
||||
|
||||
_mergeData(childStr) {
|
||||
if(this.dataFromStore) return;
|
||||
if(this.dataFromStore) return
|
||||
if(this.dataFirst){
|
||||
this.data = Object.assign({},this._getDataset(childStr),this.data);
|
||||
this.data = Object.assign({},this._getDataset(childStr),this.data)
|
||||
}else{
|
||||
this.data = Object.assign({},this.data, this._getDataset(childStr));
|
||||
this.data = Object.assign({},this.data, this._getDataset(childStr))
|
||||
}
|
||||
}
|
||||
|
||||
_generateHTMLCSS() {
|
||||
this.CSS = (this.style()|| '').replace(/<\/?style>/g,'') ;
|
||||
this.CSS = (this.style()|| '').replace(/<\/?style>/g,'')
|
||||
if (this.CSS) {
|
||||
this.CSS = style.scoper(this.CSS, "[" + this._omi_scoped_attr + "]");
|
||||
this.CSS = style.scoper(this.CSS, "[" + this._omi_scoped_attr + "]")
|
||||
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
|
||||
style.addStyle(this.CSS, this.id);
|
||||
this._preCSS = this.CSS;
|
||||
style.addStyle(this.CSS, this.id)
|
||||
this._preCSS = this.CSS
|
||||
}
|
||||
}
|
||||
let tpl = this.render();
|
||||
this.HTML = this._scopedAttr(Omi.template(tpl ? tpl : "", this.data), this._omi_scoped_attr).trim();
|
||||
let tpl = this.render()
|
||||
this.HTML = this._scopedAttr(Omi.template(tpl ? tpl : "", this.data), this._omi_scoped_attr).trim()
|
||||
if (this._omi_server_rendering) {
|
||||
this.HTML = '\r\n<style id="'+Omi.STYLEPREFIX+this.id+'">\r\n' + this.CSS + '\r\n</style>\r\n'+this.HTML ;
|
||||
this.HTML = '\r\n<style id="'+Omi.STYLEPREFIX+this.id+'">\r\n' + this.CSS + '\r\n</style>\r\n'+this.HTML
|
||||
this.HTML += '\r\n<input type="hidden" data-omi-id="' + this.id + '" class="' + Omi.STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n'
|
||||
}
|
||||
}
|
||||
|
||||
_scopedAttr(html, id) {
|
||||
return html.replace(/<[^/]([A-Za-z]*)[^>]*>/g, function (m) {
|
||||
let str = m.split(" ")[0].replace(">", "");
|
||||
return m.replace(str, str + " " + id);
|
||||
});
|
||||
let str = m.split(" ")[0].replace(">", "")
|
||||
return m.replace(str, str + " " + id)
|
||||
})
|
||||
}
|
||||
|
||||
_getDataset(childStr) {
|
||||
let json = html2json(childStr);
|
||||
let attr = json.child[0].attr;
|
||||
let json = html2json(childStr)
|
||||
let attr = json.child[0].attr
|
||||
Object.keys(attr).forEach(key => {
|
||||
if(key.indexOf('data-') === 0){
|
||||
this._dataset[this._capitalize(key.replace('data-', ''))] = attr[key];
|
||||
this._dataset[this._capitalize(key.replace('data-', ''))] = attr[key]
|
||||
}
|
||||
});
|
||||
return this._dataset;
|
||||
})
|
||||
return this._dataset
|
||||
}
|
||||
|
||||
_capitalize (str){
|
||||
str = str.toLowerCase();
|
||||
str = str.toLowerCase()
|
||||
str = str.replace(/\b\w+\b/g, function (word) {
|
||||
return word.substring(0, 1).toUpperCase() + word.substring(1);
|
||||
}).replace(/-/g,'');
|
||||
return str.substring(0, 1).toLowerCase() + str.substring(1);
|
||||
return word.substring(0, 1).toUpperCase() + word.substring(1)
|
||||
}).replace(/-/g,'')
|
||||
return str.substring(0, 1).toLowerCase() + str.substring(1)
|
||||
}
|
||||
|
||||
_extractPropertyFromString(str, instance){
|
||||
let arr = str.replace(/['|"|\]]/g,'' ).replace(/\[/g,'.').split('.');
|
||||
let current = instance;
|
||||
let arr = str.replace(/['|"|\]]/g,'' ).replace(/\[/g,'.').split('.')
|
||||
let current = instance
|
||||
arr.forEach(prop => {
|
||||
current = current[prop];
|
||||
});
|
||||
arr = null;
|
||||
return current;
|
||||
current = current[prop]
|
||||
})
|
||||
arr = null
|
||||
return current
|
||||
|
||||
}
|
||||
|
||||
_extractChildren(child){
|
||||
if (Omi.customTags.length > 0) {
|
||||
child.HTML = this._replaceTags(Omi.customTags, child.HTML);
|
||||
child.HTML = this._replaceTags(Omi.customTags, child.HTML)
|
||||
}
|
||||
let arr = child.HTML.match(/<child[^>][\s\S]*?tag=['|"](\S*)['|"][\s\S]*?><\/child>/g);
|
||||
let arr = child.HTML.match(/<child[^>][\s\S]*?tag=['|"](\S*)['|"][\s\S]*?><\/child>/g)
|
||||
|
||||
if(arr){
|
||||
arr.forEach( (childStr, i) =>{
|
||||
let json = html2json(childStr);
|
||||
let attr = json.child[0].attr;
|
||||
let name = attr.tag;
|
||||
delete attr.tag;
|
||||
let cmi = this.children[i];
|
||||
let json = html2json(childStr)
|
||||
let attr = json.child[0].attr
|
||||
let name = attr.tag
|
||||
delete attr.tag
|
||||
let cmi = this.children[i]
|
||||
//if not first time to invoke _extractChildren method
|
||||
if (cmi && cmi.___omi_constructor_name === name) {
|
||||
cmi._childRender(childStr);
|
||||
cmi._childRender(childStr)
|
||||
} else {
|
||||
let baseData = {};
|
||||
let dataset = {};
|
||||
let dataFromParent = {};
|
||||
let groupData = {};
|
||||
let omiID = null;
|
||||
let instanceName = null;
|
||||
let baseData = {}
|
||||
let dataset = {}
|
||||
let dataFromParent = {}
|
||||
let groupData = {}
|
||||
let omiID = null
|
||||
let instanceName = null
|
||||
Object.keys(attr).forEach(key => {
|
||||
const value = attr[key];
|
||||
const value = attr[key]
|
||||
if (key.indexOf('on') === 0) {
|
||||
let handler = child[value];
|
||||
let handler = child[value]
|
||||
if (handler) {
|
||||
baseData[key] = handler.bind(child);
|
||||
baseData[key] = handler.bind(child)
|
||||
}
|
||||
} else if (key === 'omi-id'){
|
||||
omiID = value;
|
||||
omiID = value
|
||||
}else if (key === 'name'){
|
||||
instanceName = value;
|
||||
instanceName = value
|
||||
}else if (key === 'group-data') {
|
||||
if (child._omiGroupDataCounter.hasOwnProperty(value)) {
|
||||
child._omiGroupDataCounter[value]++;
|
||||
child._omiGroupDataCounter[value]++
|
||||
} else {
|
||||
child._omiGroupDataCounter[value] = 0;
|
||||
child._omiGroupDataCounter[value] = 0
|
||||
}
|
||||
groupData = this._extractPropertyFromString(value,child)[child._omiGroupDataCounter[value]];
|
||||
groupData = this._extractPropertyFromString(value,child)[child._omiGroupDataCounter[value]]
|
||||
|
||||
} else if(key.indexOf('data-') === 0){
|
||||
dataset[this._capitalize(key.replace('data-', ''))] = value;
|
||||
dataset[this._capitalize(key.replace('data-', ''))] = value
|
||||
}else if(key === 'data'){
|
||||
dataFromParent = this._extractPropertyFromString(value,child);
|
||||
dataFromParent = this._extractPropertyFromString(value,child)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
let ChildClass = Omi.getClassFromString(name);
|
||||
if (!ChildClass) throw "Can't find Class called [" + name+"]";
|
||||
let sub_child = new ChildClass( Object.assign(baseData,child.childrenData[i],dataset,dataFromParent,groupData ),false);
|
||||
sub_child._omiChildStr = childStr;
|
||||
sub_child.parent = child;
|
||||
sub_child.___omi_constructor_name = name;
|
||||
sub_child._dataset = {};
|
||||
sub_child.install();
|
||||
let ChildClass = Omi.getClassFromString(name)
|
||||
if (!ChildClass) throw "Can't find Class called [" + name+"]"
|
||||
let sub_child = new ChildClass( Object.assign(baseData,child.childrenData[i],dataset,dataFromParent,groupData ),false)
|
||||
sub_child._omiChildStr = childStr
|
||||
sub_child.parent = child
|
||||
sub_child.___omi_constructor_name = name
|
||||
sub_child._dataset = {}
|
||||
sub_child.install()
|
||||
|
||||
omiID && (Omi.mapping[omiID] = sub_child);
|
||||
instanceName && (child[instanceName] = sub_child);
|
||||
omiID && (Omi.mapping[omiID] = sub_child)
|
||||
instanceName && (child[instanceName] = sub_child)
|
||||
|
||||
if (!cmi) {
|
||||
child.children.push(sub_child);
|
||||
child.children.push(sub_child)
|
||||
} else {
|
||||
child.children[i] = sub_child;
|
||||
child.children[i] = sub_child
|
||||
}
|
||||
|
||||
sub_child._childRender(childStr,true);
|
||||
sub_child._childRender(childStr,true)
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
export default Component
|
12
src/event.js
12
src/event.js
|
@ -2,12 +2,12 @@ function scopedEvent(tpl,id) {
|
|||
return tpl.replace(/<[\s\S]*?>/g, function (item) {
|
||||
return item.replace(/on(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave|Abort|Blur|Cancel|CanPlay|CanPlayThrough|Change|Click|Close|ContextMenu|CueChange|DblClick|Drag|DragEnd|DragEnter|DragLeave|DragOver|DragStart|Drop|DurationChange|Emptied|Ended|Error|Focus|Input|Invalid|KeyDown|KeyPress|KeyUp|Load|LoadedData|LoadedMetadata|LoadStart|MouseDown|MouseEnter|MouseLeave|MouseMove|MouseOut|MouseOver|MouseUp|MouseWheel|Pause|Play|Playing|Progress|RateChange|Reset|Resize|Scroll|Seeked|Seeking|Select|Show|Stalled|Submit|Suspend|TimeUpdate|Toggle|VolumeChange|Waiting|AutoComplete|AutoCompleteError|BeforeCopy|BeforeCut|BeforePaste|Copy|Cut|Paste|Search|SelectStart|Wheel|WebkitFullScreenChange|WebkitFullScreenError|TouchStart|TouchMove|TouchEnd|TouchCancel|PointerDown|PointerUp|PointerCancel|PointerMove|PointerOver|PointerOut|PointerEnter|PointerLeave)=('|")([\s\S]*?)\([\s\S]*?\)/g, function (eventStr, b, c, d) {
|
||||
if (d.indexOf( 'Omi.instances[')===0){
|
||||
return eventStr;
|
||||
return eventStr
|
||||
}else {
|
||||
return eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].');
|
||||
return eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].')
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default scopedEvent;
|
||||
export default scopedEvent
|
20
src/index.js
20
src/index.js
|
@ -1,15 +1,15 @@
|
|||
import Omi from './omi.js';
|
||||
import Mustache from './mustache.js';
|
||||
import Component from './component.js';
|
||||
import Store from './store.js';
|
||||
import Omi from './omi.js'
|
||||
import Mustache from './mustache.js'
|
||||
import Component from './component.js'
|
||||
import Store from './store.js'
|
||||
|
||||
Omi.template = Mustache.render;
|
||||
Omi.template = Mustache.render
|
||||
|
||||
Omi.Store = Store;
|
||||
Omi.Component = Component;
|
||||
Omi.Store = Store
|
||||
Omi.Component = Component
|
||||
if(window.Omi){
|
||||
module.exports = window.Omi;
|
||||
module.exports = window.Omi
|
||||
}else {
|
||||
window.Omi = Omi;
|
||||
module.exports = Omi;
|
||||
window.Omi = Omi
|
||||
module.exports = Omi
|
||||
}
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
import Omi from './omi.js';
|
||||
import Component from './component.js';
|
||||
import Store from './store.js';
|
||||
import Omi from './omi.js'
|
||||
import Component from './component.js'
|
||||
import Store from './store.js'
|
||||
|
||||
Omi.template = function(tpl, data){
|
||||
return tpl;
|
||||
return tpl
|
||||
}
|
||||
|
||||
Omi.Store = Store;
|
||||
Omi.Component = Component;
|
||||
Omi.Store = Store
|
||||
Omi.Component = Component
|
||||
|
||||
if(window.Omi){
|
||||
module.exports = window.Omi;
|
||||
module.exports = window.Omi
|
||||
}else {
|
||||
window.Omi = Omi;
|
||||
module.exports = Omi;
|
||||
window.Omi = Omi
|
||||
module.exports = Omi
|
||||
}
|
146
src/omi.js
146
src/omi.js
|
@ -1,14 +1,14 @@
|
|||
var Omi = {};
|
||||
Omi.instances = {};
|
||||
Omi._instanceId = 0;
|
||||
var Omi = {}
|
||||
Omi.instances = {}
|
||||
Omi._instanceId = 0
|
||||
Omi.getInstanceId = function () {
|
||||
return Omi._instanceId++;
|
||||
};
|
||||
Omi.customTags = [];
|
||||
Omi.mapping = {};
|
||||
return Omi._instanceId++
|
||||
}
|
||||
Omi.customTags = []
|
||||
Omi.mapping = {}
|
||||
|
||||
Omi.STYLEPREFIX = "omi_style_";
|
||||
Omi.STYLESCOPEDPREFIX = "omi_scoped_";
|
||||
Omi.STYLEPREFIX = "omi_style_"
|
||||
Omi.STYLESCOPEDPREFIX = "omi_scoped_"
|
||||
|
||||
//fix ie bug
|
||||
if (typeof Object.assign != 'function') {
|
||||
|
@ -108,167 +108,167 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
function toArr(obj) {
|
||||
let arr = [];
|
||||
let arr = []
|
||||
for (let key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
arr.push({key: key, value: obj[key]});
|
||||
arr.push({key: key, value: obj[key]})
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
return arr
|
||||
}
|
||||
|
||||
Omi.create = function(tagName ,parent,setting) {
|
||||
let u_setting = parent,
|
||||
u_parent = Omi.Component;
|
||||
u_parent = Omi.Component
|
||||
if (arguments.length > 2) {
|
||||
u_setting = setting;
|
||||
u_parent = parent;
|
||||
u_setting = setting
|
||||
u_parent = parent
|
||||
}
|
||||
Omi[tagName] = function (parent) {
|
||||
_inherits(Obj, parent);
|
||||
_inherits(Obj, parent)
|
||||
|
||||
function Obj(data, server) {
|
||||
_classCallCheck(this, Obj);
|
||||
this.___omi_constructor_name = tagName;
|
||||
return _possibleConstructorReturn(this, (Obj.__proto__ || Object.getPrototypeOf(Obj)).call(this, data,server));
|
||||
_classCallCheck(this, Obj)
|
||||
this.___omi_constructor_name = tagName
|
||||
return _possibleConstructorReturn(this, (Obj.__proto__ || Object.getPrototypeOf(Obj)).call(this, data,server))
|
||||
}
|
||||
|
||||
_createClass(Obj, toArr(u_setting));
|
||||
_createClass(Obj, toArr(u_setting))
|
||||
|
||||
return Obj;
|
||||
}(u_parent);
|
||||
return Obj
|
||||
}(u_parent)
|
||||
|
||||
Omi.customTags.push(tagName);
|
||||
Omi.customTags.push(tagName)
|
||||
|
||||
return Omi[tagName];
|
||||
return Omi[tagName]
|
||||
}
|
||||
|
||||
Omi.mixIndex = function(array, key) {
|
||||
const len = array.length,
|
||||
indexName = key || "index";
|
||||
indexName = key || "index"
|
||||
for (let i = 0; i < len; i++) {
|
||||
var item = array[i];
|
||||
var item = array[i]
|
||||
if (typeof item === "object") {
|
||||
item[indexName] = i;
|
||||
item[indexName] = i
|
||||
} else {
|
||||
array[i] = {value: item};
|
||||
array[i][indexName] = i;
|
||||
array[i] = {value: item}
|
||||
array[i][indexName] = i
|
||||
}
|
||||
}
|
||||
return array;
|
||||
return array
|
||||
}
|
||||
|
||||
Omi.$ = function(selector,context){
|
||||
if(context){
|
||||
return context.querySelector(selector);
|
||||
return context.querySelector(selector)
|
||||
}else{
|
||||
return document.querySelector(selector);
|
||||
return document.querySelector(selector)
|
||||
}
|
||||
}
|
||||
|
||||
Omi.$$ = function(selector,context){
|
||||
if(context){
|
||||
return Array.prototype.slice.call(context.querySelectorAll(selector));
|
||||
return Array.prototype.slice.call(context.querySelectorAll(selector))
|
||||
}else{
|
||||
return Array.prototype.slice.call(document.querySelectorAll(selector));
|
||||
return Array.prototype.slice.call(document.querySelectorAll(selector))
|
||||
}
|
||||
}
|
||||
|
||||
Omi.getClassFromString = function(str) {
|
||||
if (str.indexOf('.') !== -1) { //root is window
|
||||
let arr = str.split('.');
|
||||
const len = arr.length;
|
||||
let current = window[arr[0]];
|
||||
let arr = str.split('.')
|
||||
const len = arr.length
|
||||
let current = window[arr[0]]
|
||||
for (let i = 1; i < len; i++) {
|
||||
current = current[arr[i]];
|
||||
current = current[arr[i]]
|
||||
}
|
||||
return current;
|
||||
return current
|
||||
} else {
|
||||
return Omi.componetConstructor[str];
|
||||
return Omi.componetConstructor[str]
|
||||
}
|
||||
}
|
||||
|
||||
Omi.componetConstructor = { };
|
||||
Omi.componetConstructor = { }
|
||||
//以前是Component的静态方法,移到omi下来,不然makehtml 在ie下child访问不到父亲的静态方法
|
||||
Omi.makeHTML= function(name, ctor) {
|
||||
Omi.componetConstructor[name] = ctor
|
||||
Omi.customTags.push(name);
|
||||
Omi.customTags.push(name)
|
||||
}
|
||||
|
||||
Omi.render = function(component , renderTo , increment){
|
||||
component.renderTo = typeof renderTo === "string" ? document.querySelector(renderTo) : renderTo;
|
||||
component._omi_increment = increment;
|
||||
component.install();
|
||||
component._render(true);
|
||||
component._childrenInstalled(component);
|
||||
component.installed();
|
||||
return component;
|
||||
component.renderTo = typeof renderTo === "string" ? document.querySelector(renderTo) : renderTo
|
||||
component._omi_increment = increment
|
||||
component.install()
|
||||
component._render(true)
|
||||
component._childrenInstalled(component)
|
||||
component.installed()
|
||||
return component
|
||||
}
|
||||
|
||||
Omi.get = function(name){
|
||||
return Omi.mapping[name];
|
||||
return Omi.mapping[name]
|
||||
}
|
||||
|
||||
Omi.plugins ={};
|
||||
Omi.plugins ={}
|
||||
|
||||
Omi.extendPlugin = function(name, handler) {
|
||||
Omi.plugins[name] = handler;
|
||||
Omi.plugins[name] = handler
|
||||
}
|
||||
|
||||
Omi.getParameters = function(dom, instance, types){
|
||||
let data = { };
|
||||
let noop = function(){ };
|
||||
let data = { }
|
||||
let noop = function(){ }
|
||||
let methodMapping = {
|
||||
stringType : value =>{
|
||||
return value;
|
||||
return value
|
||||
},
|
||||
numberType: value =>{
|
||||
return Number(value);
|
||||
return Number(value)
|
||||
},
|
||||
booleanType: value => {
|
||||
if (value === 'true') {
|
||||
return true;
|
||||
return true
|
||||
} else if (value === 'false') {
|
||||
return false;
|
||||
return false
|
||||
} else {
|
||||
return Boolean(value);
|
||||
return Boolean(value)
|
||||
}
|
||||
},
|
||||
functionType: value => {
|
||||
if (value) {
|
||||
let handler = instance[value.replace(/Omi.instances\[\d\]./, '')]
|
||||
if (handler) {
|
||||
return handler.bind(instance);
|
||||
return handler.bind(instance)
|
||||
} else {
|
||||
console.warn('You do not define [ '+value+' ] method in following component');
|
||||
console.warn(instance);
|
||||
console.warn('You do not define [ '+value+' ] method in following component')
|
||||
console.warn(instance)
|
||||
}
|
||||
} else {
|
||||
return noop;
|
||||
return noop
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
Object.keys(types).forEach(type => {
|
||||
types[type].forEach(name => {
|
||||
let attr = dom.getAttribute(name);
|
||||
let attr = dom.getAttribute(name)
|
||||
if(attr !== null) {
|
||||
data[name] = methodMapping[type](attr);
|
||||
data[name] = methodMapping[type](attr)
|
||||
}
|
||||
} )
|
||||
});
|
||||
})
|
||||
|
||||
return data;
|
||||
return data
|
||||
}
|
||||
|
||||
Omi.mixIndexToArray = function(arr ,indexName){
|
||||
arr.forEach((item , index)=>{
|
||||
item[indexName||'index'] = index;
|
||||
});
|
||||
item[indexName||'index'] = index
|
||||
})
|
||||
}
|
||||
|
||||
Omi.useStore = function(globalStore){
|
||||
Omi.globalStore = globalStore;
|
||||
Omi.dataFromGlobalStore = true;
|
||||
Omi.globalStore = globalStore
|
||||
Omi.dataFromGlobalStore = true
|
||||
}
|
||||
|
||||
module.exports = Omi;
|
||||
module.exports = Omi
|
100
src/style.js
100
src/style.js
|
@ -1,50 +1,50 @@
|
|||
import Omi from './omi.js';
|
||||
|
||||
//many thanks to https://github.com/thomaspark/scoper/
|
||||
function scoper(css, prefix) {
|
||||
let re = new RegExp("([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)", "g");
|
||||
css = css.replace(re, function(g0, g1, g2) {
|
||||
|
||||
if (g1.match(/^\s*(@media|@keyframes|to|from|@font-face)/)) {
|
||||
return g1 + g2;
|
||||
}
|
||||
|
||||
if (g1.match(/:scope/)) {
|
||||
g1 = g1.replace(/([^\s]*):scope/, function (h0, h1) {
|
||||
if (h1 === "") {
|
||||
return "> *";
|
||||
} else {
|
||||
return "> " + h1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
g1 = g1.replace(/^(\s*)/, g1.trim() + prefix + "," + "$1" + prefix + " ").replace(/\s+/g, ' ');
|
||||
return g1 + g2;
|
||||
});
|
||||
|
||||
return css;
|
||||
}
|
||||
|
||||
function addStyle(cssText, id) {
|
||||
let ele = document.getElementById(Omi.STYLEPREFIX + id),
|
||||
head = document.getElementsByTagName('head')[0];
|
||||
if (ele && ele.parentNode === head) {
|
||||
head.removeChild(ele);
|
||||
}
|
||||
|
||||
let someThingStyles = document.createElement('style');
|
||||
head.appendChild(someThingStyles);
|
||||
someThingStyles.setAttribute('type', 'text/css');
|
||||
someThingStyles.setAttribute('id',Omi.STYLEPREFIX + id);
|
||||
if (!!window.ActiveXObject) {
|
||||
someThingStyles.styleSheet.cssText = cssText;
|
||||
} else {
|
||||
someThingStyles.textContent = cssText;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
scoper:scoper,
|
||||
addStyle:addStyle
|
||||
};
|
||||
import Omi from './omi.js'
|
||||
|
||||
//many thanks to https://github.com/thomaspark/scoper/
|
||||
function scoper(css, prefix) {
|
||||
let re = new RegExp("([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)", "g")
|
||||
css = css.replace(re, function(g0, g1, g2) {
|
||||
|
||||
if (g1.match(/^\s*(@media|@keyframes|to|from|@font-face)/)) {
|
||||
return g1 + g2
|
||||
}
|
||||
|
||||
if (g1.match(/:scope/)) {
|
||||
g1 = g1.replace(/([^\s]*):scope/, function (h0, h1) {
|
||||
if (h1 === "") {
|
||||
return "> *"
|
||||
} else {
|
||||
return "> " + h1
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
g1 = g1.replace(/^(\s*)/, g1.trim() + prefix + "," + "$1" + prefix + " ").replace(/\s+/g, ' ')
|
||||
return g1 + g2
|
||||
})
|
||||
|
||||
return css
|
||||
}
|
||||
|
||||
function addStyle(cssText, id) {
|
||||
let ele = document.getElementById(Omi.STYLEPREFIX + id),
|
||||
head = document.getElementsByTagName('head')[0]
|
||||
if (ele && ele.parentNode === head) {
|
||||
head.removeChild(ele)
|
||||
}
|
||||
|
||||
let someThingStyles = document.createElement('style')
|
||||
head.appendChild(someThingStyles)
|
||||
someThingStyles.setAttribute('type', 'text/css')
|
||||
someThingStyles.setAttribute('id',Omi.STYLEPREFIX + id)
|
||||
if (!!window.ActiveXObject) {
|
||||
someThingStyles.styleSheet.cssText = cssText
|
||||
} else {
|
||||
someThingStyles.textContent = cssText
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
scoper:scoper,
|
||||
addStyle:addStyle
|
||||
}
|
Loading…
Reference in New Issue