update es5 demos

This commit is contained in:
dntzhang 2017-03-09 09:00:00 +08:00
parent 7a51af6b70
commit ccce73c886
8 changed files with 109 additions and 85 deletions

2
dist/omi.js vendored
View File

@ -307,7 +307,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
};
//<EFBFBD><EFBFBD>ǰ<EFBFBD><EFBFBD>Component<EFBFBD>ľ<EFBFBD>̬<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƶ<EFBFBD>omi<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ȼmakehtml <20><>ie<69><65>child<6C><64><EFBFBD>ʲ<EFBFBD><CAB2><EFBFBD><EFBFBD><EFBFBD><EFBFBD>׵ľ<D7B5>̬<EFBFBD><CCAC><EFBFBD><EFBFBD>
//以前是Component的静态方法移到omi下来不然makehtml 在ie下child访问不到父亲的静态方法
Omi.makeHTML = function (name, ctor) {
Omi[name] = ctor;
Omi.customTags.push(name);

2
dist/omi.lite.js vendored
View File

@ -306,7 +306,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
};
//<EFBFBD><EFBFBD>ǰ<EFBFBD><EFBFBD>Component<EFBFBD>ľ<EFBFBD>̬<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƶ<EFBFBD>omi<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ȼmakehtml <20><>ie<69><65>child<6C><64><EFBFBD>ʲ<EFBFBD><CAB2><EFBFBD><EFBFBD><EFBFBD><EFBFBD>׵ľ<D7B5>̬<EFBFBD><CCAC><EFBFBD><EFBFBD>
//以前是Component的静态方法移到omi下来不然makehtml 在ie下child访问不到父亲的静态方法
Omi.makeHTML = function (name, ctor) {
Omi[name] = ctor;
Omi.customTags.push(name);

2
dist/omi.server.js vendored
View File

@ -315,7 +315,7 @@
}
};
//<EFBFBD><EFBFBD>ǰ<EFBFBD><EFBFBD>Component<EFBFBD>ľ<EFBFBD>̬<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƶ<EFBFBD>omi<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ȼmakehtml <20><>ie<69><65>child<6C><64><EFBFBD>ʲ<EFBFBD><CAB2><EFBFBD><EFBFBD><EFBFBD><EFBFBD>׵ľ<D7B5>̬<EFBFBD><CCAC><EFBFBD><EFBFBD>
//以前是Component的静态方法移到omi下来不然makehtml 在ie下child访问不到父亲的静态方法
Omi.makeHTML = function (name, ctor) {
Omi[name] = ctor;
Omi.customTags.push(name);

View File

@ -68,13 +68,13 @@
if(!this.data.visible) return;
this.data.w = window.innerWidth;
this.data.h = window.innerHeight;
return `<div>
<div class="mask" style="width:{{w}}px;height:{{h}}px;"></div>
<div class="msg">
<div>{{msg}}</div>
<button onclick="close()">close</button>
</div>
</div>`;
return '<div>\
<div class="mask" style="width:{{w}}px;height:{{h}}px;"></div>\
<div class="msg">\
<div>{{msg}}</div>\
<button onclick="close()">close</button>\
</div>\
</div>';
}
});

View File

@ -17,16 +17,16 @@
var List = Omi.create("List",{
style:function () {
return `h3 { color:red; }
button{ color:green;}`;
return 'h3 { color:red; }\
button{ color:green;}';
},
render:function(){
return `<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引2 {{i + 1}} {{value}}</li>
{{/each}}
</ul>`;
return '<h1>{{title}}</h1>\
<ul>\
{{each list as value i}}\
<li>索引2 {{i + 1}} {{value}}</li>\
{{/each}}\
</ul>';
}
})

View File

@ -28,24 +28,24 @@
this.refs.textBox.value = "";
},
style:function () {
return `h3 { color:red; }
button{ color:green;}`;
return 'h3 { color:red; }\
button{ color:green;}';
},
render:function(){
return `<div>
<h3>TODO</h3>
<List omi-id="list" name="list" />
<form onsubmit="add(event)" >
<input ref="textBox" type="text" />
<button>Add #{{length}}</button>
</form>
</div>`;
return '<div>\
<h3>TODO</h3>\
<List omi-id="list" name="list" />\
<form onsubmit="add(event)" >\
<input ref="textBox" type="text" />\
<button>Add #{{length}}</button>\
</form>\
</div>';
}
})
var List = Omi.create("List",{
render :function() {
return ` <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;
return '<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>';
}
})

View File

@ -167,9 +167,12 @@
_omi2['default'].template = _mustache2['default'].render;
_omi2['default'].Component = _component2['default'];
window.Omi = _omi2['default'];
module.exports = _omi2['default'];
if (window.Omi) {
module.exports = window.Omi;
} else {
window.Omi = _omi2['default'];
module.exports = _omi2['default'];
}
/***/ },
/* 3 */
@ -393,7 +396,7 @@
}
};
//<EFBFBD><EFBFBD>ǰ<EFBFBD><EFBFBD>Component<EFBFBD>ľ<EFBFBD>̬<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƶ<EFBFBD>omi<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ȼmakehtml <20><>ie<69><65>child<6C><64><EFBFBD>ʲ<EFBFBD><CAB2><EFBFBD><EFBFBD><EFBFBD><EFBFBD>׵ľ<D7B5>̬<EFBFBD><CCAC><EFBFBD><EFBFBD>
//以前是Component的静态方法移到omi下来不然makehtml 在ie下child访问不到父亲的静态方法
Omi.makeHTML = function (name, ctor) {
Omi[name] = ctor;
Omi.customTags.push(name);
@ -1146,7 +1149,6 @@
this.childrenData = [];
this.HTML = null;
this._addedItems = [];
this._omi_order = [];
_omi2['default'].instances[this.id] = this;
this.dataFirst = true;
this._omi_scoped_attr = _omi2['default'].STYLESCOPEDPREFIX + this.id;
@ -1256,16 +1258,7 @@
child.restore();
}
}, {
key: 'setComponentOrder',
value: function setComponentOrder(arr) {
var _this3 = this;
arr.forEach(function (item, index) {
_this3._omi_order[index] = item;
});
this.update();
}
//beforeBegin,beforeEnd,afterBegin,afterEnd
}, {
@ -1302,10 +1295,10 @@
}, {
key: '_renderAddedChildren',
value: function _renderAddedChildren() {
var _this4 = this;
var _this3 = this;
this._addedItems.forEach(function (item) {
var target = typeof item.el === "string" ? _this4.node.querySelector(item.el) : item.el;
var target = typeof item.el === "string" ? _this3.node.querySelector(item.el) : item.el;
item.component.install();
item.component._render(true);
item.component.installed();
@ -1319,7 +1312,7 @@
}, {
key: '_render',
value: function _render(isFirst) {
var _this5 = this;
var _this4 = this;
if (this._omi_removed) {
var node = this._createHiddenNode();
@ -1333,13 +1326,9 @@
}
this._generateHTMLCSS();
this._extractChildren(this);
if (isFirst) {
this.children.forEach(function (item, index) {
_this5._omi_order[index] = index;
});
}
this.children.forEach(function (item, index) {
_this5.HTML = _this5.HTML.replace(item._omiChildStr, _this5.children[_this5._omi_order[index]].HTML);
_this4.HTML = _this4.HTML.replace(item._omiChildStr, _this4.children[index].HTML);
});
this.HTML = (0, _event2['default'])(this.HTML, this.id);
if (isFirst) {
@ -1367,7 +1356,7 @@
}, {
key: '_childRender',
value: function _childRender(childStr, isFirst) {
var _this6 = this;
var _this5 = this;
if (this._omi_removed) {
this.HTML = '<input type="hidden" omi_scoped_' + this.id + ' >';
@ -1377,13 +1366,9 @@
this._mergeData(childStr);
this._generateHTMLCSS();
this._extractChildren(this);
if (isFirst) {
this.children.forEach(function (item, index) {
_this6._omi_order[index] = index;
});
}
this.children.forEach(function (item, index) {
_this6.HTML = _this6.HTML.replace(item._omiChildStr, _this6.children[_this6._omi_order[index]].HTML);
_this5.HTML = _this5.HTML.replace(item._omiChildStr, _this5.children[index].HTML);
});
this.HTML = (0, _event2['default'])(this.HTML, this.id);
return this.HTML;
@ -1396,18 +1381,18 @@
current.children.forEach(function (item) {
item.node = current.node.querySelector("[" + _omi2['default'].STYLESCOPEDPREFIX + item.id + "]");
//recursion get node prop from parent node
current._queryElements(item);
item.node && current._queryElements(item);
});
}
}, {
key: '_mixRefs',
value: function _mixRefs() {
var _this7 = this;
var _this6 = this;
var nodes = _omi2['default'].$$('*[ref]', this.node);
nodes.forEach(function (node) {
if (node.hasAttribute(_this7._omi_scoped_attr)) {
_this7.refs[node.getAttribute('ref')] = node;
if (node.hasAttribute(_this6._omi_scoped_attr)) {
_this6.refs[node.getAttribute('ref')] = node;
}
});
var attr = this.node.getAttribute('ref');
@ -1418,27 +1403,27 @@
}, {
key: '_execPlugins',
value: function _execPlugins() {
var _this8 = this;
var _this7 = this;
Object.keys(_omi2['default'].plugins).forEach(function (item) {
var nodes = _omi2['default'].$$('*[' + item + ']', _this8.node);
var nodes = _omi2['default'].$$('*[' + item + ']', _this7.node);
nodes.forEach(function (node) {
if (node.hasAttribute(_this8._omi_scoped_attr)) {
_omi2['default'].plugins[item](node, _this8);
if (node.hasAttribute(_this7._omi_scoped_attr)) {
_omi2['default'].plugins[item](node, _this7);
}
});
if (_this8.node.hasAttribute(item)) {
_omi2['default'].plugins[item](_this8.node, _this8);
if (_this7.node.hasAttribute(item)) {
_omi2['default'].plugins[item](_this7.node, _this7);
}
});
}
}, {
key: '_childrenInstalled',
value: function _childrenInstalled(root) {
var _this9 = this;
var _this8 = this;
root.children.forEach(function (child) {
_this9._childrenInstalled(child);
_this8._childrenInstalled(child);
child.installed();
});
}
@ -1538,13 +1523,13 @@
}, {
key: '_getDataset',
value: function _getDataset(childStr) {
var _this10 = this;
var _this9 = this;
var json = (0, _html2json2['default'])(childStr);
var attr = json.child[0].attr;
Object.keys(attr).forEach(function (key) {
if (key.indexOf('data-') === 0) {
_this10._dataset[_this10._capitalize(key.replace('data-', ''))] = attr[key];
_this9._dataset[_this9._capitalize(key.replace('data-', ''))] = attr[key];
}
});
return this._dataset;
@ -1572,7 +1557,7 @@
}, {
key: '_extractChildren',
value: function _extractChildren(child) {
var _this11 = this;
var _this10 = this;
if (_omi2['default'].customTags.length > 0) {
child.HTML = this._replaceTags(_omi2['default'].customTags, child.HTML);
@ -1585,7 +1570,7 @@
var attr = json.child[0].attr;
var name = attr.tag;
delete attr.tag;
var cmi = _this11.children[i];
var cmi = _this10.children[i];
//if not first time to invoke _extractChildren method
if (cmi && cmi.___omi_constructor_name === name) {
cmi._childRender(childStr);
@ -1614,11 +1599,11 @@
} else {
child._omiGroupDataCounter[value] = 0;
}
groupData = _this11._extractPropertyFromString(value, child)[child._omiGroupDataCounter[value]];
groupData = _this10._extractPropertyFromString(value, child)[child._omiGroupDataCounter[value]];
} else if (key.indexOf('data-') === 0) {
dataset[_this11._capitalize(key.replace('data-', ''))] = value;
dataset[_this10._capitalize(key.replace('data-', ''))] = value;
} else if (key === 'data') {
dataFromParent = _this11._extractPropertyFromString(value, child);
dataFromParent = _this10._extractPropertyFromString(value, child);
}
});
@ -1727,14 +1712,53 @@
Object.defineProperty(exports, "__esModule", {
value: true
});
function exchange(str, a, b) {
return str.split(a).map(function (item) {
return item.replace(new RegExp(b, 'g'), a);
}).join(b);
}
function safeDoubleQuote(str) {
return JSON.stringify(str).replace(/(^"|"$)/g, '');
}
function safeSingleQuote(str) {
str = exchange(str, "'", '"');
return exchange(safeDoubleQuote(str), "'", '"');
}
function escapeHtml(unsafe) {
return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
}
function endsWith(str, end) {
if (String.prototype.endsWith) {
return String.prototype.endsWith.call(str, end);
} else {
return str.substr(str.length - 1, 1) === end;
}
}
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 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]*)('|"|})/g, function (eventStr, eventName, open, str, close) {
if (str.indexOf('Omi.instances[') === 0 || str.indexOf('new Function(') === 0) {
return eventStr;
} else {
return eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].');
}
if (open === '{') {
// JSX-like event bind
var funcBody = '(' + str + ').bind(Omi.instances[' + id + '])(event)';
var result = 'on' + eventName + '="new Function(\'event\', \'' + escapeHtml(safeSingleQuote(funcBody)) + '\')(event)"';
return result.split('\n').map(function (line) {
return endsWith(line, ';') ? line : line + ';';
}).join('');
} else {
if (!str.match(/.*?\(.*?\)/)) {
// if is not JSX-like event and is not a function call (func(xxx, ttt))
return eventStr;
}
}
return eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].');
});
});
};

View File

@ -1,4 +1,4 @@
var Omi = {};
var Omi = {};
Omi.instances = {};
Omi._instanceId = 0;
Omi.getInstanceId = function () {
@ -188,7 +188,7 @@ Omi.getClassFromString = function(str) {
}
}
//以前是Component的静态方法移到omi下来不然makehtml 在ie下child访问不到父亲的静态方法
//以前是Component的静态方法移到omi下来不然makehtml 在ie下child访问不到父亲的静态方法
Omi.makeHTML= function(name , ctor) {
Omi[name] = ctor;
Omi.customTags.push(name);