DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

omi v0.1.6 - plugin system

This commit is contained in:
kmdjs 2017-02-12 21:11:25 +08:00
parent bf2fc6c4f9
commit d69aaa4746
14 changed files with 2846 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
dist/omi.js vendored
View File

@ -1,5 +1,5 @@
/*!
* Omi v0.1.5 By dntzhang
* Omi v0.1.6 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
@ -324,6 +324,12 @@ return /******/ (function(modules) { // webpackBootstrap
return Omi.mapping[name];
};
Omi.plugins = {};
Omi.extendPlugin = function (name, handler) {
Omi.plugins[name] = handler;
};
module.exports = Omi;
/***/ },
@ -1001,6 +1007,7 @@ return /******/ (function(modules) { // webpackBootstrap
this._omi_order = [];
_omi2['default'].instances[this.id] = this;
this.dataFirst = true;
this._omi_scoped_attr = _omi2['default'].STYLESCOPEDPREFIX + this.id;
//this.BODY_ELEMENT = document.createElement('body');
this._preCSS = null;
if (this._omi_server_rendering || isReRendering) {
@ -1183,7 +1190,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
//get node prop from parent node
if (this.renderTo) {
this.node = document.querySelector("[" + _omi2['default'].STYLESCOPEDPREFIX + this.id + "]");
this.node = document.querySelector("[" + this._omi_scoped_attr + "]");
this._queryElements(this);
this._fixForm();
}
@ -1216,6 +1223,7 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_queryElements',
value: function _queryElements(current) {
current._mixRefs();
current._execPlugins();
current.children.forEach(function (item) {
item.node = current.node.querySelector("[" + _omi2['default'].STYLESCOPEDPREFIX + item.id + "]");
//recursion get node prop from parent node
@ -1225,23 +1233,37 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_mixRefs',
value: function _mixRefs() {
var nodes = this.node.querySelectorAll('*[ref]');
var len = nodes.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
var node = nodes[i];
this.refs[node.getAttribute("ref")] = node;
var _this5 = this;
var nodes = _omi2['default'].$$('*[ref]', this.node);
nodes.forEach(function (node) {
if (node.hasAttribute(_this5._omi_scoped_attr)) {
_this5.refs[node.getAttribute('ref')] = node;
}
}
});
}
}, {
key: '_execPlugins',
value: function _execPlugins() {
var _this6 = this;
Object.keys(_omi2['default'].plugins).forEach(function (item) {
var nodes = _omi2['default'].$$('*[' + item + ']', _this6.node);
nodes.forEach(function (node) {
if (node.hasAttribute(_this6._omi_scoped_attr)) {
_omi2['default'].plugins[item](node, _this6);
}
});
});
}
}, {
key: '_childrenInstalled',
value: function _childrenInstalled(root) {
var _this5 = this;
var _this7 = this;
root.children.forEach(function (child) {
child.installed();
_this5._childrenInstalled(child);
_this7._childrenInstalled(child);
});
}
}, {
@ -1295,7 +1317,7 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _createHiddenNode() {
var hdNode = document.createElement("input");
hdNode.setAttribute("type", "hidden");
hdNode.setAttribute(_omi2['default'].STYLESCOPEDPREFIX + this.id, "");
hdNode.setAttribute(this._omi_scoped_attr, '');
return hdNode;
}
}, {
@ -1318,14 +1340,14 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _generateHTMLCSS() {
this.CSS = this.style() || '';
if (this.CSS) {
this.CSS = _style2['default'].scoper(this.CSS, "[" + _omi2['default'].STYLESCOPEDPREFIX + this.id + "]");
this.CSS = _style2['default'].scoper(this.CSS, "[" + this._omi_scoped_attr + "]");
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
_style2['default'].addStyle(this.CSS, this.id);
this._preCSS = this.CSS;
}
}
var tpl = this.render();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), _omi2['default'].STYLESCOPEDPREFIX + this.id).trim();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), this._omi_scoped_attr).trim();
if (this._omi_server_rendering) {
this.HTML = '\r\n<style id="' + _omi2['default'].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="' + _omi2['default'].STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n';
@ -1342,7 +1364,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_getDataset',
value: function _getDataset(str) {
var _this6 = this;
var _this8 = this;
var arr = str.match(/data-(\S*)=['|"](\S*)['|"]/g);
if (arr) {
@ -1350,7 +1372,7 @@ return /******/ (function(modules) { // webpackBootstrap
var obj = {};
arr.forEach(function (item) {
var arr = item.split('=');
obj[_this6._capitalize(arr[0].replace('data-', ''))] = arr[1].replace(/['|"]/g, '');
obj[_this8._capitalize(arr[0].replace('data-', ''))] = arr[1].replace(/['|"]/g, '');
arr = null;
});
return {

54
dist/omi.lite.js vendored
View File

@ -1,5 +1,5 @@
/*!
* Omi v0.1.5 By dntzhang
* Omi v0.1.6 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
@ -322,6 +322,12 @@ return /******/ (function(modules) { // webpackBootstrap
return Omi.mapping[name];
};
Omi.plugins = {};
Omi.extendPlugin = function (name, handler) {
Omi.plugins[name] = handler;
};
module.exports = Omi;
/***/ },
@ -384,6 +390,7 @@ return /******/ (function(modules) { // webpackBootstrap
this._omi_order = [];
_omi2['default'].instances[this.id] = this;
this.dataFirst = true;
this._omi_scoped_attr = _omi2['default'].STYLESCOPEDPREFIX + this.id;
//this.BODY_ELEMENT = document.createElement('body');
this._preCSS = null;
if (this._omi_server_rendering || isReRendering) {
@ -566,7 +573,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
//get node prop from parent node
if (this.renderTo) {
this.node = document.querySelector("[" + _omi2['default'].STYLESCOPEDPREFIX + this.id + "]");
this.node = document.querySelector("[" + this._omi_scoped_attr + "]");
this._queryElements(this);
this._fixForm();
}
@ -599,6 +606,7 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_queryElements',
value: function _queryElements(current) {
current._mixRefs();
current._execPlugins();
current.children.forEach(function (item) {
item.node = current.node.querySelector("[" + _omi2['default'].STYLESCOPEDPREFIX + item.id + "]");
//recursion get node prop from parent node
@ -608,23 +616,37 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_mixRefs',
value: function _mixRefs() {
var nodes = this.node.querySelectorAll('*[ref]');
var len = nodes.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
var node = nodes[i];
this.refs[node.getAttribute("ref")] = node;
var _this5 = this;
var nodes = _omi2['default'].$$('*[ref]', this.node);
nodes.forEach(function (node) {
if (node.hasAttribute(_this5._omi_scoped_attr)) {
_this5.refs[node.getAttribute('ref')] = node;
}
}
});
}
}, {
key: '_execPlugins',
value: function _execPlugins() {
var _this6 = this;
Object.keys(_omi2['default'].plugins).forEach(function (item) {
var nodes = _omi2['default'].$$('*[' + item + ']', _this6.node);
nodes.forEach(function (node) {
if (node.hasAttribute(_this6._omi_scoped_attr)) {
_omi2['default'].plugins[item](node, _this6);
}
});
});
}
}, {
key: '_childrenInstalled',
value: function _childrenInstalled(root) {
var _this5 = this;
var _this7 = this;
root.children.forEach(function (child) {
child.installed();
_this5._childrenInstalled(child);
_this7._childrenInstalled(child);
});
}
}, {
@ -678,7 +700,7 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _createHiddenNode() {
var hdNode = document.createElement("input");
hdNode.setAttribute("type", "hidden");
hdNode.setAttribute(_omi2['default'].STYLESCOPEDPREFIX + this.id, "");
hdNode.setAttribute(this._omi_scoped_attr, '');
return hdNode;
}
}, {
@ -701,14 +723,14 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _generateHTMLCSS() {
this.CSS = this.style() || '';
if (this.CSS) {
this.CSS = _style2['default'].scoper(this.CSS, "[" + _omi2['default'].STYLESCOPEDPREFIX + this.id + "]");
this.CSS = _style2['default'].scoper(this.CSS, "[" + this._omi_scoped_attr + "]");
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
_style2['default'].addStyle(this.CSS, this.id);
this._preCSS = this.CSS;
}
}
var tpl = this.render();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), _omi2['default'].STYLESCOPEDPREFIX + this.id).trim();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), this._omi_scoped_attr).trim();
if (this._omi_server_rendering) {
this.HTML = '\r\n<style id="' + _omi2['default'].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="' + _omi2['default'].STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n';
@ -725,7 +747,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_getDataset',
value: function _getDataset(str) {
var _this6 = this;
var _this8 = this;
var arr = str.match(/data-(\S*)=['|"](\S*)['|"]/g);
if (arr) {
@ -733,7 +755,7 @@ return /******/ (function(modules) { // webpackBootstrap
var obj = {};
arr.forEach(function (item) {
var arr = item.split('=');
obj[_this6._capitalize(arr[0].replace('data-', ''))] = arr[1].replace(/['|"]/g, '');
obj[_this8._capitalize(arr[0].replace('data-', ''))] = arr[1].replace(/['|"]/g, '');
arr = null;
});
return {

52
dist/omi.server.js vendored
View File

@ -332,6 +332,12 @@
return Omi.mapping[name];
};
Omi.plugins = {};
Omi.extendPlugin = function (name, handler) {
Omi.plugins[name] = handler;
};
module.exports = Omi;
/***/ },
@ -1009,6 +1015,7 @@
this._omi_order = [];
_omi2['default'].instances[this.id] = this;
this.dataFirst = true;
this._omi_scoped_attr = _omi2['default'].STYLESCOPEDPREFIX + this.id;
//this.BODY_ELEMENT = document.createElement('body');
this._preCSS = null;
if (this._omi_server_rendering || isReRendering) {
@ -1191,7 +1198,7 @@
}
//get node prop from parent node
if (this.renderTo) {
this.node = document.querySelector("[" + _omi2['default'].STYLESCOPEDPREFIX + this.id + "]");
this.node = document.querySelector("[" + this._omi_scoped_attr + "]");
this._queryElements(this);
this._fixForm();
}
@ -1224,6 +1231,7 @@
key: '_queryElements',
value: function _queryElements(current) {
current._mixRefs();
current._execPlugins();
current.children.forEach(function (item) {
item.node = current.node.querySelector("[" + _omi2['default'].STYLESCOPEDPREFIX + item.id + "]");
//recursion get node prop from parent node
@ -1233,23 +1241,37 @@
}, {
key: '_mixRefs',
value: function _mixRefs() {
var nodes = this.node.querySelectorAll('*[ref]');
var len = nodes.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
var node = nodes[i];
this.refs[node.getAttribute("ref")] = node;
var _this5 = this;
var nodes = _omi2['default'].$$('*[ref]', this.node);
nodes.forEach(function (node) {
if (node.hasAttribute(_this5._omi_scoped_attr)) {
_this5.refs[node.getAttribute('ref')] = node;
}
}
});
}
}, {
key: '_execPlugins',
value: function _execPlugins() {
var _this6 = this;
Object.keys(_omi2['default'].plugins).forEach(function (item) {
var nodes = _omi2['default'].$$('*[' + item + ']', _this6.node);
nodes.forEach(function (node) {
if (node.hasAttribute(_this6._omi_scoped_attr)) {
_omi2['default'].plugins[item](node, _this6);
}
});
});
}
}, {
key: '_childrenInstalled',
value: function _childrenInstalled(root) {
var _this5 = this;
var _this7 = this;
root.children.forEach(function (child) {
child.installed();
_this5._childrenInstalled(child);
_this7._childrenInstalled(child);
});
}
}, {
@ -1303,7 +1325,7 @@
value: function _createHiddenNode() {
var hdNode = document.createElement("input");
hdNode.setAttribute("type", "hidden");
hdNode.setAttribute(_omi2['default'].STYLESCOPEDPREFIX + this.id, "");
hdNode.setAttribute(this._omi_scoped_attr, '');
return hdNode;
}
}, {
@ -1326,14 +1348,14 @@
value: function _generateHTMLCSS() {
this.CSS = this.style() || '';
if (this.CSS) {
this.CSS = _style2['default'].scoper(this.CSS, "[" + _omi2['default'].STYLESCOPEDPREFIX + this.id + "]");
this.CSS = _style2['default'].scoper(this.CSS, "[" + this._omi_scoped_attr + "]");
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
_style2['default'].addStyle(this.CSS, this.id);
this._preCSS = this.CSS;
}
}
var tpl = this.render();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), _omi2['default'].STYLESCOPEDPREFIX + this.id).trim();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), this._omi_scoped_attr).trim();
if (this._omi_server_rendering) {
this.HTML = '\r\n<style id="' + _omi2['default'].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="' + _omi2['default'].STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n';
@ -1350,7 +1372,7 @@
}, {
key: '_getDataset',
value: function _getDataset(str) {
var _this6 = this;
var _this8 = this;
var arr = str.match(/data-(\S*)=['|"](\S*)['|"]/g);
if (arr) {
@ -1358,7 +1380,7 @@
var obj = {};
arr.forEach(function (item) {
var arr = item.split('=');
obj[_this6._capitalize(arr[0].replace('data-', ''))] = arr[1].replace(/['|"]/g, '');
obj[_this8._capitalize(arr[0].replace('data-', ''))] = arr[1].replace(/['|"]/g, '');
arr = null;
});
return {

289
example/finger/alloy-finger.js Normal file
View File

@ -0,0 +1,289 @@
/* AlloyFinger v0.1.4
* By dntzhang
* Github: https://github.com/AlloyTeam/AlloyFinger
*/
; (function () {
function getLen(v) {
return Math.sqrt(v.x * v.x + v.y * v.y);
}
function dot(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
function getAngle(v1, v2) {
var mr = getLen(v1) * getLen(v2);
if (mr === 0) return 0;
var r = dot(v1, v2) / mr;
if (r > 1) r = 1;
return Math.acos(r);
}
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}
function getRotateAngle(v1, v2) {
var angle = getAngle(v1, v2);
if (cross(v1, v2) > 0) {
angle *= -1;
}
return angle * 180 / Math.PI;
}
var HandlerAdmin = function(el) {
this.handlers = [];
this.el = el;
};
HandlerAdmin.prototype.add = function(handler) {
this.handlers.push(handler);
}
HandlerAdmin.prototype.del = function(handler) {
if(!handler) this.handlers = [];
for(var i=this.handlers.length; i>=0; i--) {
if(this.handlers[i] === handler) {
this.handlers.splice(i, 1);
}
}
}
HandlerAdmin.prototype.dispatch = function() {
for(var i=0,len=this.handlers.length; i<len; i++) {
var handler = this.handlers[i];
if(typeof handler === 'function') handler.apply(this.el, arguments);
}
}
function wrapFunc(el, handler) {
var handlerAdmin = new HandlerAdmin(el);
handlerAdmin.add(handler);
return handlerAdmin;
}
var AlloyFinger = function (el, option) {
this.element = typeof el == 'string' ? document.querySelector(el) : el;
this.start = this.start.bind(this);
this.move = this.move.bind(this);
this.end = this.end.bind(this);
this.cancel = this.cancel.bind(this);
this.element.addEventListener("touchstart", this.start, false);
this.element.addEventListener("touchmove", this.move, false);
this.element.addEventListener("touchend", this.end, false);
this.element.addEventListener("touchcancel", this.cancel, false);
this.preV = { x: null, y: null };
this.pinchStartLen = null;
this.scale = 1;
this.isDoubleTap = false;
var noop = function () { };
this.rotate = wrapFunc(this.element, option.rotate || noop);
this.touchStart = wrapFunc(this.element, option.touchStart || noop);
this.multipointStart = wrapFunc(this.element, option.multipointStart || noop);
this.multipointEnd = wrapFunc(this.element, option.multipointEnd || noop);
this.pinch = wrapFunc(this.element, option.pinch || noop);
this.swipe = wrapFunc(this.element, option.swipe || noop);
this.tap = wrapFunc(this.element, option.tap || noop);
this.doubleTap = wrapFunc(this.element, option.doubleTap || noop);
this.longTap = wrapFunc(this.element, option.longTap || noop);
this.singleTap = wrapFunc(this.element, option.singleTap || noop);
this.pressMove = wrapFunc(this.element, option.pressMove || noop);
this.touchMove = wrapFunc(this.element, option.touchMove || noop);
this.touchEnd = wrapFunc(this.element, option.touchEnd || noop);
this.touchCancel = wrapFunc(this.element, option.touchCancel || noop);
this.delta = null;
this.last = null;
this.now = null;
this.tapTimeout = null;
this.singleTapTimeout = null;
this.longTapTimeout = null;
this.swipeTimeout = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
this.preTapPosition = { x: null, y: null };
};
AlloyFinger.prototype = {
start: function (evt) {
if (!evt.touches) return;
this.now = Date.now();
this.x1 = evt.touches[0].pageX;
this.y1 = evt.touches[0].pageY;
this.delta = this.now - (this.last || this.now);
this.touchStart.dispatch(evt);
if (this.preTapPosition.x !== null) {
this.isDoubleTap = (this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30);
}
this.preTapPosition.x = this.x1;
this.preTapPosition.y = this.y1;
this.last = this.now;
var preV = this.preV,
len = evt.touches.length;
if (len > 1) {
this._cancelLongTap();
this._cancelSingleTap();
var v = { x: evt.touches[1].pageX - this.x1, y: evt.touches[1].pageY - this.y1 };
preV.x = v.x;
preV.y = v.y;
this.pinchStartLen = getLen(preV);
this.multipointStart.dispatch(evt);
}
this.longTapTimeout = setTimeout(function () {
this.longTap.dispatch(evt);
}.bind(this), 750);
},
move: function (evt) {
if (!evt.touches) return;
var preV = this.preV,
len = evt.touches.length,
currentX = evt.touches[0].pageX,
currentY = evt.touches[0].pageY;
this.isDoubleTap = false;
if (len > 1) {
var v = { x: evt.touches[1].pageX - currentX, y: evt.touches[1].pageY - currentY };
if (preV.x !== null) {
if (this.pinchStartLen > 0) {
evt.scale = getLen(v) / this.pinchStartLen;
this.pinch.dispatch(evt);
}
evt.angle = getRotateAngle(v, preV);
this.rotate.dispatch(evt);
}
preV.x = v.x;
preV.y = v.y;
} else {
if (this.x2 !== null) {
evt.deltaX = currentX - this.x2;
evt.deltaY = currentY - this.y2;
} else {
evt.deltaX = 0;
evt.deltaY = 0;
}
this.pressMove.dispatch(evt);
}
this.touchMove.dispatch(evt);
this._cancelLongTap();
this.x2 = currentX;
this.y2 = currentY;
if (len > 1) {
evt.preventDefault();
}
},
end: function (evt) {
if (!evt.changedTouches) return;
this._cancelLongTap();
var self = this;
if (evt.touches.length < 2) {
this.multipointEnd.dispatch(evt);
}
this.touchEnd.dispatch(evt);
//swipe
if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) ||
(this.y2 && Math.abs(this.preV.y - this.y2) > 30)) {
evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
this.swipeTimeout = setTimeout(function () {
self.swipe.dispatch(evt);
}, 0)
} else {
this.tapTimeout = setTimeout(function () {
self.tap.dispatch(evt);
// trigger double tap immediately
if (self.isDoubleTap) {
self.doubleTap.dispatch(evt);
clearTimeout(self.singleTapTimeout);
self.isDoubleTap = false;
} else {
self.singleTapTimeout = setTimeout(function () {
self.singleTap.dispatch(evt);
}, 250);
}
}, 0)
}
this.preV.x = 0;
this.preV.y = 0;
this.scale = 1;
this.pinchStartLen = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
},
cancel: function (evt) {
clearTimeout(this.singleTapTimeout);
clearTimeout(this.tapTimeout);
clearTimeout(this.longTapTimeout);
clearTimeout(this.swipeTimeout);
this.touchCancel.dispatch(evt);
},
_cancelLongTap: function () {
clearTimeout(this.longTapTimeout);
},
_cancelSingleTap: function () {
clearTimeout(this.singleTapTimeout);
},
_swipeDirection: function (x1, x2, y1, y2) {
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
},
on: function(evt, handler) {
if(this[evt]) {
this[evt].add(handler);
}
},
off: function(evt, handler) {
if(this[evt]) {
this[evt].del(handler);
}
},
destroy: function() {
if(this.singleTapTimeout) clearTimeout(this.singleTapTimeout);
if(this.tapTimeout) clearTimeout(this.tapTimeout);
if(this.longTapTimeout) clearTimeout(this.longTapTimeout);
if(this.swipeTimeout) clearTimeout(this.swipeTimeout);
this.element.removeEventListener("touchstart", this.start);
this.element.removeEventListener("touchmove", this.move);
this.element.removeEventListener("touchend", this.end);
this.element.removeEventListener("touchcancel", this.cancel);
this.rotate.del();
this.touchStart.del();
this.multipointStart.del();
this.multipointEnd.del();
this.pinch.del();
this.swipe.del();
this.tap.del();
this.doubleTap.del();
this.longTap.del();
this.singleTap.del();
this.pressMove.del();
this.touchMove.del();
this.touchEnd.del();
this.touchCancel.del();
this.preV = this.pinchStartLen = this.scale = this.isDoubleTap = this.delta = this.last = this.now = this.tapTimeout = this.singleTapTimeout = this.longTapTimeout = this.swipeTimeout = this.x1 = this.x2 = this.y1 = this.y2 = this.preTapPosition = this.rotate = this.touchStart = this.multipointStart = this.multipointEnd = this.pinch = this.swipe = this.tap = this.doubleTap = this.longTap = this.singleTap = this.pressMove = this.touchMove = this.touchEnd = this.touchCancel = null;
return null;
}
};
if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = AlloyFinger;
} else {
window.AlloyFinger = AlloyFinger;
}
})();

2141
example/finger/bundler.js Normal file
View File

File diff suppressed because it is too large Load Diff

15
example/finger/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title></title>
</head>
<body>
<div id="container"></div>
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="../../asset/github.png" alt="" />
</a>
<script src="bundler.js"></script>
</body>
</html>

27
example/finger/main.js Normal file
View File

@ -0,0 +1,27 @@
import Omi from '../../src/index.js';
import OmiFinger from './omi-finger.js';
OmiFinger.init();
class App extends Omi.Component {
constructor(data) {
super(data);
}
handleTap(evt){
alert(11)
}
render() {
return `
<div>
<div omi-finger onTap="handleTap" >ABCD</div>
</div>
`;
}
}
Omi.render(new App(),"#container");

20
example/finger/omi-finger.js Normal file
View File

@ -0,0 +1,20 @@
import Omi from '../../src/index.js';
import AlloyFinger from './alloy-finger.js';
let OmiFinger = {};
OmiFinger.init = function(){
Omi.extendPlugin('omi-finger',function(dom, instance){
let finger = new AlloyFinger(dom,{
tap: instance[dom.getAttribute('onTap')]
});
})
}
OmiFinger.destroy = function(){
Omi.plugins['omi-finger'] = null;
delete Omi.plugins['omi-finger'];
};
export default OmiFinger;

281
example/nest/bundler.js
View File

@ -50,9 +50,9 @@
var _hello2 = _interopRequireDefault(_hello);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
Omi.render(new _hello2.default({ name: 'Omi' }), 'body');
Omi.render(new _hello2['default']({ name: 'Omi' }), 'body');
setTimeout(function () {
Omi.get("world").data.list = "aa";
@ -83,7 +83,7 @@
var _world2 = _interopRequireDefault(_world);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -118,11 +118,11 @@
}]);
return Hello;
}(_index2.default.Component);
}(_index2['default'].Component);
_index2.default.makeHTML('Hello', Hello);
_index2['default'].makeHTML('Hello', Hello);
exports.default = Hello;
exports['default'] = Hello;
/***/ },
/* 2 */
@ -142,14 +142,14 @@
var _component2 = _interopRequireDefault(_component);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
_omi2.default.template = _mustache2.default.render;
_omi2['default'].template = _mustache2['default'].render;
_omi2.default.Component = _component2.default;
_omi2['default'].Component = _component2['default'];
window.Omi = _omi2.default;
module.exports = _omi2.default;
window.Omi = _omi2['default'];
module.exports = _omi2['default'];
/***/ },
/* 3 */
@ -195,6 +195,75 @@
};
}
/**
* Shim for "fixing" IE's lack of support (IE < 9) for applying slice
* on host objects like NamedNodeMap, NodeList, and HTMLCollection
* (technically, since host objects have been implementation-dependent,
* at least before ES6, IE hasn't needed to work this way).
* Also works on strings, fixes IE < 9 to allow an explicit undefined
* for the 2nd argument (as in Firefox), and prevents errors when
* called on other DOM objects.
*/
(function () {
'use strict';
var _slice = Array.prototype.slice;
try {
// Can't be used with DOM elements in IE < 9
_slice.call(document.documentElement);
} catch (e) {
// Fails in IE < 9
// This will work for genuine arrays, array-like objects,
// NamedNodeMap (attributes, entities, notations),
// NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
// and will not fail on other DOM objects (as do DOM elements in IE < 9)
Array.prototype.slice = function (begin, end) {
// IE < 9 gets unhappy with an undefined end argument
end = typeof end !== 'undefined' ? end : this.length;
// For native Array objects, we use the native slice function
if (Object.prototype.toString.call(this) === '[object Array]') {
return _slice.call(this, begin, end);
}
// For array like object we handle it ourselves.
var i,
cloned = [],
size,
len = this.length;
// Handle negative value for "begin"
var start = begin || 0;
start = start >= 0 ? start : len + start;
// Handle negative value for "end"
var upTo = end ? end : len;
if (end < 0) {
upTo = len + end;
}
// Actual expected size of the slice
size = upTo - start;
if (size > 0) {
cloned = new Array(size);
if (this.charAt) {
for (i = 0; i < size; i++) {
cloned[i] = this.charAt(start + i);
}
} else {
for (i = 0; i < size; i++) {
cloned[i] = this[start + i];
}
}
}
return cloned;
};
}
})();
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
@ -324,6 +393,12 @@
return Omi.mapping[name];
};
Omi.plugins = {};
Omi.extendPlugin = function (name, handler) {
Omi.plugins[name] = handler;
};
module.exports = Omi;
/***/ },
@ -952,6 +1027,8 @@
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _omi = __webpack_require__(3);
@ -970,7 +1047,7 @@
var _diff2 = _interopRequireDefault(_diff);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -989,16 +1066,18 @@
} else {
this.data = data || {};
this._omi_server_rendering = server;
this.id = _omi2.default.getInstanceId();
this.refs = {};
this.id = this._omi_server_rendering ? 1000000 + _omi2['default'].getInstanceId() : _omi2['default'].getInstanceId();
}
this.refs = {};
this.children = [];
this.childrenData = [];
this.HTML = null;
this._addedItems = [];
this._omi_order = [];
_omi2.default.instances[this.id] = this;
this.BODY_ELEMENT = document.createElement('body');
_omi2['default'].instances[this.id] = this;
this.dataFirst = true;
this._omi_scoped_attr = _omi2['default'].STYLESCOPEDPREFIX + this.id;
//this.BODY_ELEMENT = document.createElement('body');
this._preCSS = null;
if (this._omi_server_rendering || isReRendering) {
this.install();
@ -1042,7 +1121,7 @@
this.node.parentNode.replaceChild(hdNode, this.node);
this.node = hdNode;
} else {
(0, _diff2.default)(this.node, (0, _event2.default)(this._childRender(this._omiChildStr), this.id));
(0, _diff2['default'])(this.node, (0, _event2['default'])(this._childRender(this._omiChildStr), this.id));
}
}
//update added components
@ -1162,7 +1241,7 @@
this.children.forEach(function (item, index) {
_this3.HTML = _this3.HTML.replace(item._omiChildStr, _this3.children[_this3._omi_order[index]].HTML);
});
this.HTML = (0, _event2.default)(this.HTML, this.id);
this.HTML = (0, _event2['default'])(this.HTML, this.id);
if (isFirst) {
if (this.renderTo) {
if (this._omi_increment) {
@ -1173,14 +1252,14 @@
}
} else {
if (this.HTML !== "") {
(0, _diff2.default)(this.node, this.HTML);
(0, _diff2['default'])(this.node, this.HTML);
} else {
(0, _diff2.default)(this.node, this._createHiddenNode());
(0, _diff2['default'])(this.node, this._createHiddenNode());
}
}
//get node prop from parent node
if (this.renderTo) {
this.node = document.querySelector("[" + _omi2.default.STYLESCOPEDPREFIX + this.id + "]");
this.node = document.querySelector("[" + this._omi_scoped_attr + "]");
this._queryElements(this);
this._fixForm();
}
@ -1206,15 +1285,16 @@
this.children.forEach(function (item, index) {
_this4.HTML = _this4.HTML.replace(item._omiChildStr, _this4.children[_this4._omi_order[index]].HTML);
});
this.HTML = (0, _event2.default)(this.HTML, this.id);
this.HTML = (0, _event2['default'])(this.HTML, this.id);
return this.HTML;
}
}, {
key: '_queryElements',
value: function _queryElements(current) {
current._mixRefs();
current._execPlugins();
current.children.forEach(function (item) {
item.node = current.node.querySelector("[" + _omi2.default.STYLESCOPEDPREFIX + item.id + "]");
item.node = current.node.querySelector("[" + _omi2['default'].STYLESCOPEDPREFIX + item.id + "]");
//recursion get node prop from parent node
current._queryElements(item);
});
@ -1222,23 +1302,37 @@
}, {
key: '_mixRefs',
value: function _mixRefs() {
var nodes = this.node.querySelectorAll('*[ref]');
var len = nodes.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
var node = nodes[i];
this.refs[node.getAttribute("ref")] = node;
var _this5 = this;
var nodes = _omi2['default'].$$('*[ref]', this.node);
nodes.forEach(function (node) {
if (node.hasAttribute(_this5._omi_scoped_attr)) {
_this5.refs[node.getAttribute('ref')] = node;
}
}
});
}
}, {
key: '_execPlugins',
value: function _execPlugins() {
var _this6 = this;
Object.keys(_omi2['default'].plugins).forEach(function (item) {
var nodes = _omi2['default'].$$('*[' + item + ']', _this6.node);
nodes.forEach(function (node) {
if (node.hasAttribute(_this6._omi_scoped_attr)) {
_omi2['default'].plugins[item](node, _this6);
}
});
});
}
}, {
key: '_childrenInstalled',
value: function _childrenInstalled(root) {
var _this5 = this;
var _this7 = this;
root.children.forEach(function (child) {
child.installed();
_this5._childrenInstalled(child);
_this7._childrenInstalled(child);
});
}
}, {
@ -1250,7 +1344,7 @@
key: '_fixForm',
value: function _fixForm() {
_omi2.default.$$('input', this.node).forEach(function (element) {
_omi2['default'].$$('input', this.node).forEach(function (element) {
var type = element.type.toLowerCase();
if (element.getAttribute('value') === '') {
element.value = '';
@ -1264,16 +1358,16 @@
}
});
_omi2.default.$$('select', this.node).forEach(function (select) {
_omi2['default'].$$('select', this.node).forEach(function (select) {
var value = select.getAttribute('value');
if (value) {
_omi2.default.$$('option', select).forEach(function (option) {
_omi2['default'].$$('option', select).forEach(function (option) {
if (value === option.getAttribute('value')) {
option.setAttribute('selected', 'selected');
}
});
} else {
var firstOption = _omi2.default.$$('option', select)[0];
var firstOption = _omi2['default'].$$('option', select)[0];
firstOption && firstOption.setAttribute('selected', 'selected');
}
});
@ -1292,14 +1386,22 @@
value: function _createHiddenNode() {
var hdNode = document.createElement("input");
hdNode.setAttribute("type", "hidden");
hdNode.setAttribute(_omi2.default.STYLESCOPEDPREFIX + this.id, "");
hdNode.setAttribute(this._omi_scoped_attr, '');
return hdNode;
}
}, {
key: '_mergeData',
value: function _mergeData(childStr, isFirst) {
var arr = childStr.match(/\s*data=['|"](\S*)['|"]/);
this.data = Object.assign({}, this._getDataset(childStr), arr ? this.parent[RegExp.$1] : null, this.data);
if (isFirst) {
this.data = Object.assign(this.data, this._getDataset(childStr), arr ? this.parent[RegExp.$1] : null);
} else {
if (this.dataFirst) {
this.data = Object.assign({}, this._getDataset(childStr), this.data);
} else {
this.data = Object.assign({}, this.data, this._getDataset(childStr));
}
}
isFirst && this.install();
}
}, {
@ -1307,17 +1409,17 @@
value: function _generateHTMLCSS() {
this.CSS = this.style() || '';
if (this.CSS) {
this.CSS = _style2.default.scoper(this.CSS, "[" + _omi2.default.STYLESCOPEDPREFIX + this.id + "]");
this.CSS = _style2['default'].scoper(this.CSS, "[" + this._omi_scoped_attr + "]");
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
_style2.default.addStyle(this.CSS, this.id);
_style2['default'].addStyle(this.CSS, this.id);
this._preCSS = this.CSS;
}
}
var tpl = this.render();
this.HTML = this._scopedAttr(_omi2.default.template(tpl ? tpl : "", this.data), _omi2.default.STYLESCOPEDPREFIX + this.id).trim();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), this._omi_scoped_attr).trim();
if (this._omi_server_rendering) {
this.HTML = '\r\n<style id="' + _omi2.default.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="' + _omi2.default.STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n';
this.HTML = '\r\n<style id="' + _omi2['default'].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="' + _omi2['default'].STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n';
}
}
}, {
@ -1331,14 +1433,41 @@
}, {
key: '_getDataset',
value: function _getDataset(str) {
this.BODY_ELEMENT.innerHTML = str;
return this.BODY_ELEMENT.firstChild.dataset;
var _this8 = this;
var arr = str.match(/data-(\S*)=['|"](\S*)['|"]/g);
if (arr) {
var _ret = function () {
var obj = {};
arr.forEach(function (item) {
var arr = item.split('=');
obj[_this8._capitalize(arr[0].replace('data-', ''))] = arr[1].replace(/['|"]/g, '');
arr = null;
});
return {
v: obj
};
}();
if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
}
//this.BODY_ELEMENT.innerHTML = str ;
//return this.BODY_ELEMENT.firstChild.dataset;
}
}, {
key: '_capitalize',
value: function _capitalize(str) {
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);
}
}, {
key: '_extractChildren',
value: function _extractChildren(child) {
if (_omi2.default.customTags.length > 0) {
child.HTML = this._replaceTags(_omi2.default.customTags, child.HTML);
if (_omi2['default'].customTags.length > 0) {
child.HTML = this._replaceTags(_omi2['default'].customTags, child.HTML);
}
var arr = child.HTML.match(/<child[^>][\s\S]*?tag=['|"](\S*)['|"][\s\S]*?\/>/g);
@ -1358,9 +1487,9 @@
continue;
} else {
(function () {
var ChildClass = _omi2.default.getClassFromString(name);
var ChildClass = _omi2['default'].getClassFromString(name);
if (!ChildClass) throw "Can't find Class called [" + name + "]";
var sub_child = new ChildClass(child.childrenData[i] || {}, false);
var sub_child = new ChildClass(Object.assign({}, child.childrenData[i]), false);
sub_child._omiChildStr = childStr;
sub_child.parent = child;
@ -1379,7 +1508,7 @@
var mo_ids = childStr.match(/omi-id=['|"](\S*)['|"]/);
if (mo_ids) {
_omi2.default.mapping[RegExp.$1] = sub_child;
_omi2['default'].mapping[RegExp.$1] = sub_child;
}
if (!cmi) {
child.children.push(sub_child);
@ -1402,7 +1531,7 @@
return Component;
}();
exports.default = Component;
exports['default'] = Component;
/***/ },
/* 6 */
@ -1418,7 +1547,7 @@
var _omi2 = _interopRequireDefault(_omi);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
//many thanks to https://github.com/thomaspark/scoper/
function scoper(css, prefix) {
@ -1447,7 +1576,7 @@
}
function addStyle(cssText, id) {
var ele = document.getElementById(_omi2.default.STYLEPREFIX + id),
var ele = document.getElementById(_omi2["default"].STYLEPREFIX + id),
head = document.getElementsByTagName('head')[0];
if (ele && ele.parentNode === head) {
head.removeChild(ele);
@ -1456,7 +1585,7 @@
var someThingStyles = document.createElement('style');
head.appendChild(someThingStyles);
someThingStyles.setAttribute('type', 'text/css');
someThingStyles.setAttribute('id', _omi2.default.STYLEPREFIX + id);
someThingStyles.setAttribute('id', _omi2["default"].STYLEPREFIX + id);
if (!!window.ActiveXObject) {
someThingStyles.styleSheet.cssText = cssText;
} else {
@ -1464,7 +1593,7 @@
}
}
exports.default = {
exports["default"] = {
scoper: scoper,
addStyle: addStyle
};
@ -1480,14 +1609,14 @@
});
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)=('|")/g, function (eventStr, b, c, d, e) {
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)=('|")/g, function (eventStr, b, c, d, e) {
if (e.substr(eventStr.length + d, 14) === "Omi.instances[") return eventStr;
return eventStr += "Omi.instances[" + id + "].";
});
});
};
exports.default = scopedEvent;
exports["default"] = scopedEvent;
/***/ },
/* 8 */
@ -1504,6 +1633,12 @@
var HTML_ELEMENT = document.createElement('html');
var BODY_ELEMENT = document.createElement('body');
var isIE = function isIE(ver) {
var b = document.createElement('b');
b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->';
return b.getElementsByTagName('i').length === 1;
};
/**
* @description
* Updates existing dom to match a new dom.
@ -1529,6 +1664,10 @@
}
}
if (isIE(8)) {
prev.parentNode.replaceChild(next, prev);
return;
}
// Update the node.
setNode(prev, next);
}
@ -1696,7 +1835,7 @@
if (!val) throw new Error('set-dom: ' + msg);
}
exports.default = setDOM;
exports['default'] = setDOM;
/***/ },
/* 9 */
@ -1718,7 +1857,7 @@
var _sub_sub_hello2 = _interopRequireDefault(_sub_sub_hello);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -1748,11 +1887,11 @@
}]);
return SubHello;
}(_index2.default.Component);
}(_index2['default'].Component);
_index2.default.makeHTML('SubHello', SubHello);
_index2['default'].makeHTML('SubHello', SubHello);
exports.default = SubHello;
exports['default'] = SubHello;
/***/ },
/* 10 */
@ -1770,7 +1909,7 @@
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -1790,16 +1929,16 @@
_createClass(SubSubHello, [{
key: 'render',
value: function render() {
return '\n <div>\n i am SubSubHello\'s instance{{name}}!\n </div>\n ';
return '\n <div>\n <div ref="abcd"></div>\n i am SubSubHello\'s instance{{name}}!\n </div>\n ';
}
}]);
return SubSubHello;
}(_index2.default.Component);
}(_index2['default'].Component);
_index2.default.makeHTML('SubSubHello', SubSubHello);
_index2['default'].makeHTML('SubSubHello', SubSubHello);
exports.default = SubSubHello;
exports['default'] = SubSubHello;
/***/ },
/* 11 */
@ -1817,7 +1956,7 @@
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -1842,11 +1981,11 @@
}]);
return World;
}(_index2.default.Component);
}(_index2['default'].Component);
_index2.default.makeHTML('World', World);
_index2['default'].makeHTML('World', World);
exports.default = World;
exports['default'] = World;
/***/ }
/******/ ]);

1
example/nest/js/sub_sub_hello.js
View File

@ -7,6 +7,7 @@ class SubSubHello extends Omi.Component {
render() {
return `
<div>
<div ref="abcd"></div>
i am SubSubHello's instance{{name}}!
</div>
`;

3
package.json
View File

@ -1,6 +1,6 @@
{
"name": "omi",
"version": "0.1.5",
"version": "0.1.6",
"description": "Open and modern framework for building user interfaces.",
"main": "dist/omi.js",
"scripts": {
@ -10,6 +10,7 @@
"curd": "webpack -w",
"hello": "webpack -w",
"loop": "webpack -w",
"finger": "webpack -w",
"order": "webpack -w",
"timer": "webpack -w",
"communication": "webpack -w",

32
src/component.js
View File

@ -26,6 +26,7 @@ class Component {
this._omi_order = [];
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;
if (this._omi_server_rendering || isReRendering) {
@ -192,7 +193,7 @@ class Component {
}
//get node prop from parent node
if (this.renderTo) {
this.node = document.querySelector("[" + Omi.STYLESCOPEDPREFIX + this.id + "]");
this.node = document.querySelector("[" + this._omi_scoped_attr + "]");
this._queryElements(this);
this._fixForm();
}
@ -221,6 +222,7 @@ class Component {
_queryElements(current) {
current._mixRefs();
current._execPlugins();
current.children.forEach((item)=>{
item.node = current.node.querySelector("[" + Omi.STYLESCOPEDPREFIX + item.id + "]");
//recursion get node prop from parent node
@ -229,15 +231,23 @@ class Component {
}
_mixRefs() {
let nodes = this.node.querySelectorAll('*[ref]');
const len = nodes.length;
if (len > 0) {
for (let i = 0; i < len; i++) {
let node = nodes[i];
this.refs[node.getAttribute("ref")] = node;
let nodes = Omi.$$('*[ref]',this.node);
nodes.forEach(node => {
if(node.hasAttribute(this._omi_scoped_attr) ) {
this.refs[node.getAttribute('ref')] = node;
}
}
});
}
_execPlugins(){
Object.keys(Omi.plugins).forEach(item => {
let nodes = Omi.$$('*['+item+']',this.node);
nodes.forEach(node => {
if(node.hasAttribute(this._omi_scoped_attr) ) {
Omi.plugins[item](node,this);
}
})
});
}
_childrenInstalled(root){
@ -294,7 +304,7 @@ class Component {
_createHiddenNode(){
let hdNode = document.createElement("input");
hdNode.setAttribute("type","hidden");
hdNode.setAttribute( Omi.STYLESCOPEDPREFIX+this.id,"");
hdNode.setAttribute( this._omi_scoped_attr, '');
return hdNode;
}
@ -315,14 +325,14 @@ class Component {
_generateHTMLCSS() {
this.CSS = this.style() || '';
if (this.CSS) {
this.CSS = style.scoper(this.CSS, "[" + Omi.STYLESCOPEDPREFIX + this.id + "]");
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;
}
}
let tpl = this.render();
this.HTML = this._scopedAttr(Omi.template(tpl ? tpl : "", this.data), Omi.STYLESCOPEDPREFIX + this.id).trim();
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<input type="hidden" data-omi-id="' + this.id + '" class="' + Omi.STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n'

6
src/omi.js
View File

@ -208,4 +208,10 @@ Omi.get = function(name){
return Omi.mapping[name];
}
Omi.plugins ={};
Omi.extendPlugin = function(name, handler) {
Omi.plugins[name] = handler;
}
module.exports = Omi;

2
webpack.config.js
View File

@ -72,7 +72,7 @@ if(ENV === 'build'){
},
plugins: [
// Avoid publishing files when compilation fails
new webpack.BannerPlugin(" Omi v0.1.5 By dntzhang \r\n Github: https://github.com/AlloyTeam/omi\r\n MIT Licensed."),
new webpack.BannerPlugin(" Omi v0.1.6 By dntzhang \r\n Github: https://github.com/AlloyTeam/omi\r\n MIT Licensed."),
new webpack.NoErrorsPlugin()
],
stats: {