remove semicolon

This commit is contained in:
dntzhang 2017-03-18 08:00:01 +08:00
parent 4f4a1790db
commit a8d38dcef9
6 changed files with 360 additions and 362 deletions

View File

@ -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

View File

@ -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

View File

@ -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
}

View File

@ -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
}

View File

@ -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

View File

@ -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
}