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

omi v1.0.0 - support javascript expression by :data-*

This commit is contained in:
dntzhang 2017-03-21 08:26:08 +08:00
parent f0db85929b
commit 428cb2d235
11 changed files with 112 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dist/omi.js vendored
View File

@ -1,5 +1,5 @@
/*!
* Omi v0.4.5 By dntzhang
* Omi v1.0.0 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
@ -1539,6 +1539,7 @@ return /******/ (function(modules) { // webpackBootstrap
var cmi = _this11.children[i];
//if not first time to invoke _extractChildren method
if (cmi && cmi.___omi_constructor_name === name) {
cmi._omiChildStr = childStr;
cmi._childRender(childStr);
} else {
(function () {
@ -1568,6 +1569,8 @@ return /******/ (function(modules) { // webpackBootstrap
groupData = _this11._extractPropertyFromString(value, child)[child._omiGroupDataCounter[value]];
} else if (key.indexOf('data-') === 0) {
dataset[_this11._capitalize(key.replace('data-', ''))] = value;
} else if (key.indexOf(':data-') === 0) {
dataset[_this11._capitalize(key.replace(':data-', ''))] = eval(value);
} else if (key === 'data') {
dataFromParent = _this11._extractPropertyFromString(value, child);
}

5
dist/omi.lite.js vendored
View File

@ -1,5 +1,5 @@
/*!
* Omi v0.4.5 By dntzhang
* Omi v1.0.0 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
@ -923,6 +923,7 @@ return /******/ (function(modules) { // webpackBootstrap
var cmi = _this11.children[i];
//if not first time to invoke _extractChildren method
if (cmi && cmi.___omi_constructor_name === name) {
cmi._omiChildStr = childStr;
cmi._childRender(childStr);
} else {
(function () {
@ -952,6 +953,8 @@ return /******/ (function(modules) { // webpackBootstrap
groupData = _this11._extractPropertyFromString(value, child)[child._omiGroupDataCounter[value]];
} else if (key.indexOf('data-') === 0) {
dataset[_this11._capitalize(key.replace('data-', ''))] = value;
} else if (key.indexOf(':data-') === 0) {
dataset[_this11._capitalize(key.replace(':data-', ''))] = eval(value);
} else if (key === 'data') {
dataFromParent = _this11._extractPropertyFromString(value, child);
}

4
dist/omi.lite.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
dist/omi.min.js vendored
View File

File diff suppressed because one or more lines are too long

31
example/pagination-store/bundler.js
View File

@ -85,9 +85,14 @@
}
_createClass(Main, [{
key: 'handlePageChange',
value: function handlePageChange(index) {
this.$store.goto(index);
}
}, {
key: 'render',
value: function render() {
return '<div>\n <h1>' + this.$store.data.title + '</h1>\n <Content name="content" />\n <Pagination\n data-num-edge="1"\n data-num-display="4"\uFFFD\uFFFD\n />\n </div>';
return '<div>\n <h1>' + this.$store.data.title + '</h1>\n <Content name="content" />\n <Pagination\n name="pagination"\n :data-total="' + this.$store.data.total + '"\n :data-current-page="' + this.$store.data.currentPage + '"\n :data-page-size="10"\n :data-num-edge="1"\n :data-num-display="4"\uFFFD\uFFFD\n onPageChange="handlePageChange" />\n </div>';
}
}]);
@ -1330,8 +1335,12 @@
this._extractChildren(this);
this.children.forEach(function (item, index) {
console.log(item._omiChildStr);
console.warn(_this5.children[index].HTML);
console.warn(_this5.HTML);
_this5.HTML = _this5.HTML.replace(item._omiChildStr, _this5.children[index].HTML);
});
console.warn(this.HTML);
this.HTML = (0, _event2['default'])(this.HTML, this.id);
if (isFirst) {
if (this.renderTo) {
@ -1572,7 +1581,7 @@
child.HTML = this._replaceTags(_omi2['default'].customTags, child.HTML);
}
var arr = child.HTML.match(/<child[^>][\s\S]*?tag=['|"](\S*)['|"][\s\S]*?><\/child>/g);
console.log(arr);
if (arr) {
arr.forEach(function (childStr, i) {
var json = (0, _html2json2['default'])(childStr);
@ -1582,6 +1591,7 @@
var cmi = _this11.children[i];
//if not first time to invoke _extractChildren method
if (cmi && cmi.___omi_constructor_name === name) {
cmi._omiChildStr = childStr;
cmi._childRender(childStr);
} else {
(function () {
@ -1611,6 +1621,8 @@
groupData = _this11._extractPropertyFromString(value, child)[child._omiGroupDataCounter[value]];
} else if (key.indexOf('data-') === 0) {
dataset[_this11._capitalize(key.replace('data-', ''))] = value;
} else if (key.indexOf(':data-') === 0) {
dataset[_this11._capitalize(key.replace(':data-', ''))] = eval(value);
} else if (key === 'data') {
dataFromParent = _this11._extractPropertyFromString(value, child);
}
@ -2804,23 +2816,16 @@
_createClass(Pagination, [{
key: "install",
value: function install() {
this.pageNum = Math.ceil(this.data.total / this.data.pageSize);
}
}, {
key: "storeToData",
value: function storeToData() {
this.data.currentPage = this.$store.data.currentPage;
this.data.total = this.$store.data.total;
this.pageNum = Math.ceil(this.data.total / this.data.pageSize);
}
}, {
key: "goto",
value: function goto(index, evt) {
evt.preventDefault();
this.$store.goto(index);
//this.data.currentPage=index;
//this.update();
//this.data.onPageChange(index);
this.data.currentPage = index;
this.update();
this.data.onPageChange(index);
}
}, {
key: "style",

17
example/pagination-store/main.js
View File

@ -11,15 +11,24 @@ class Main extends Omi.Component {
super(data)
}
handlePageChange(index){
this.$store.goto(index)
}
render () {
return `<div>
<h1>${this.$store.data.title}</h1>
<Content name="content" />
<Pagination
data-num-edge="1"
data-num-display="4"¡¡
/>
</div>`
name="pagination"
:data-total="${this.$store.data.total}"
:data-current-page="${this.$store.data.currentPage}"
:data-page-size="10"
:data-num-edge="1"
:data-num-display="4"¡¡
onPageChange="handlePageChange" />
</div>`;
}
}

12
example/pagination-store/pagination.js
View File

@ -20,21 +20,15 @@ class Pagination extends Omi.Component {
}
install () {
this.pageNum = Math.ceil(this.data.total / this.data.pageSize);
}
storeToData(){
this.data.currentPage = this.$store.data.currentPage;
this.data.total = this.$store.data.total;
this.pageNum = Math.ceil(this.data.total / this.data.pageSize);
}
goto (index,evt) {
evt.preventDefault();
this.$store.goto(index);
//this.data.currentPage=index;
//this.update();
//this.data.onPageChange(index);
this.data.currentPage = index;
this.update();
this.data.onPageChange(index);
}
style(){

83
example/pagination/bundler.js
View File

@ -93,7 +93,7 @@
}, {
key: 'render',
value: function render() {
return '<div>\n <h1>Pagination Example</h1>\n <Content name="content" />\n <Pagination\n name="pagination"\n data-total="100"\n data-page-size="10"\n data-num-edge="1"\n data-num-display="4"\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\n onPageChange="handlePageChange" />\n </div>';
return '<div>\n <h1>Pagination Example</h1>\n <Content name="content" />\n <Pagination\n name="pagination"\n :data-total="100"\n :data-page-size="10"\n :data-num-edge="1"\n :data-num-display="4"\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\n onPageChange="handlePageChange" />\n </div>';
}
}]);
@ -368,9 +368,18 @@
Omi.customTags.push(name);
};
Omi.render = function (component, renderTo, increment) {
Omi.render = function (component, renderTo, incrementOrOption) {
component.renderTo = typeof renderTo === "string" ? document.querySelector(renderTo) : renderTo;
component._omi_increment = increment;
if (typeof incrementOrOption === 'boolean') {
component._omi_increment = incrementOrOption;
} else if (incrementOrOption) {
component._omi_increment = incrementOrOption.increment;
component.$store = incrementOrOption.store;
if (component.$store) {
component.$store.instances.push(component);
}
component._omi_autoStoreToData = incrementOrOption.autoStoreToData;
}
component.install();
component._render(true);
component._childrenInstalled(component);
@ -439,12 +448,6 @@
});
};
Omi.useStore = function (store, autoUse) {
Omi.store = store;
Omi.dataFromGlobalStore = true;
Omi._autoUseGlobalStore = autoUse;
};
module.exports = Omi;
/***/ },
@ -1100,9 +1103,14 @@
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Component = function () {
function Component(data, server) {
function Component(data, option) {
_classCallCheck(this, Component);
var componentOption = Object.assign({
server: false,
ignoreStoreData: false
}, option);
this._omi_ignoreStoreData = componentOption.ignoreStoreData;
//re render the server-side rendering html on the client-side
var type = Object.prototype.toString.call(data);
var isReRendering = type !== '[object Object]' && type !== '[object Undefined]';
@ -1113,7 +1121,7 @@
this.data = JSON.parse(this._hidden.value);
} else {
this.data = data || {};
this._omi_server_rendering = server;
this._omi_server_rendering = componentOption.server;
this.id = this._omi_server_rendering ? 1000000 + _omi2['default'].getInstanceId() : _omi2['default'].getInstanceId();
}
this.refs = {};
@ -1128,14 +1136,6 @@
//this.BODY_ELEMENT = document.createElement('body')
this._preCSS = null;
this._omiGroupDataCounter = {};
if (_omi2['default'].dataFromGlobalStore) {
this.dataFromStore = true;
if (_omi2['default']._autoUseGlobalStore) {
this.useStore(_omi2['default'].store);
}
} else {
this.dataFromStore = false;
}
if (this._omi_server_rendering || isReRendering) {
this.install();
this._render(true);
@ -1165,15 +1165,16 @@
}, {
key: 'style',
value: function style() {}
}, {
key: 'storeToData',
value: function storeToData() {}
}, {
key: 'useStore',
value: function useStore(store) {
var _this = this;
this.store = store;
this.data = store.data;
this.$$store = store;
var isInclude = false;
this.dataFromStore = true;
store.instances.forEach(function (instance) {
if (instance.id === _this.id) {
isInclude = true;
@ -1323,12 +1324,22 @@
}
return;
}
if (this._omi_autoStoreToData) {
if (!this._omi_ignoreStoreData) {
this.data = this.$store.data;
}
}
this.storeToData();
this._generateHTMLCSS();
this._extractChildren(this);
this.children.forEach(function (item, index) {
console.log(item._omiChildStr);
console.warn(_this5.children[index].HTML);
console.warn(_this5.HTML);
_this5.HTML = _this5.HTML.replace(item._omiChildStr, _this5.children[index].HTML);
});
console.warn(this.HTML);
this.HTML = (0, _event2['default'])(this.HTML, this.id);
if (isFirst) {
if (this.renderTo) {
@ -1363,10 +1374,19 @@
}
//childStr = childStr.replace("<child", "<div").replace("/>", "></div>")
this._mergeData(childStr);
if (this.parent._omi_autoStoreToData) {
this._omi_autoStoreToData = true;
if (!this._omi_ignoreStoreData) {
this.data = this.$store.data;
}
}
this.storeToData();
this._generateHTMLCSS();
this._extractChildren(this);
this.children.forEach(function (item, index) {
console.log(item._omiChildStr);
console.warn(_this6.children[index].HTML);
_this6.HTML = _this6.HTML.replace(item._omiChildStr, _this6.children[index].HTML);
});
this.HTML = (0, _event2['default'])(this.HTML, this.id);
@ -1487,7 +1507,6 @@
}, {
key: '_mergeData',
value: function _mergeData(childStr) {
if (this.dataFromStore) return;
if (this.dataFirst) {
this.data = Object.assign({}, this._getDataset(childStr), this.data);
} else {
@ -1563,7 +1582,7 @@
child.HTML = this._replaceTags(_omi2['default'].customTags, child.HTML);
}
var arr = child.HTML.match(/<child[^>][\s\S]*?tag=['|"](\S*)['|"][\s\S]*?><\/child>/g);
console.log(arr);
if (arr) {
arr.forEach(function (childStr, i) {
var json = (0, _html2json2['default'])(childStr);
@ -1574,6 +1593,7 @@
//if not first time to invoke _extractChildren method
if (cmi && cmi.___omi_constructor_name === name) {
cmi._childRender(childStr);
console.log(childStr);
} else {
(function () {
var baseData = {};
@ -1602,6 +1622,8 @@
groupData = _this11._extractPropertyFromString(value, child)[child._omiGroupDataCounter[value]];
} else if (key.indexOf('data-') === 0) {
dataset[_this11._capitalize(key.replace('data-', ''))] = value;
} else if (key.indexOf(':data-') === 0) {
dataset[_this11._capitalize(key.replace(':data-', ''))] = eval(value);
} else if (key === 'data') {
dataFromParent = _this11._extractPropertyFromString(value, child);
}
@ -1612,6 +1634,10 @@
var sub_child = new ChildClass(Object.assign(baseData, child.childrenData[i], dataset, dataFromParent, groupData), false);
sub_child._omiChildStr = childStr;
sub_child.parent = child;
sub_child.$store = child.$store;
if (sub_child.$store) {
sub_child.$store.instances.push(sub_child);
}
sub_child.___omi_constructor_name = name;
sub_child._dataset = {};
sub_child.install();
@ -1714,11 +1740,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)=('|")([\s\S]*?)\([\s\S]*?\)/g, function (eventStr, b, c, d) {
if (d.indexOf('Omi.instances[') === 0) {
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) {
if (c.indexOf('Omi.instances[') === 1) {
return eventStr;
} else {
} else if (c.lastIndexOf(')') === c.length - 2) {
return eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].');
} else {
var str = eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].');
return str.substr(0, str.length - 1) + "(event)" + str.substr(str.length - 1, 1);
}
});
});

8
example/pagination/main.js
View File

@ -23,10 +23,10 @@ class Main extends Omi.Component {
<Content name="content" />
<Pagination
name="pagination"
data-total="100"
data-page-size="10"
data-num-edge="1"
data-num-display="4"　　　　　
:data-total="100"
:data-page-size="10"
:data-num-edge="1"
:data-num-display="4"　　　　　
onPageChange="handlePageChange" />
</div>`;
}

3
src/component.js
View File

@ -440,6 +440,7 @@ class Component {
let cmi = this.children[i]
//if not first time to invoke _extractChildren method
if (cmi && cmi.___omi_constructor_name === name) {
cmi._omiChildStr = childStr
cmi._childRender(childStr)
} else {
let baseData = {}
@ -469,6 +470,8 @@ class Component {
} else if(key.indexOf('data-') === 0){
dataset[this._capitalize(key.replace('data-', ''))] = value
}else if(key.indexOf(':data-') === 0){
dataset[this._capitalize(key.replace(':data-', ''))] = eval(value)
}else if(key === 'data'){
dataFromParent = this._extractPropertyFromString(value,child)
}

4
webpack.config.js
View File

@ -1,6 +1,6 @@
var path = require('path');
var webpack = require('webpack');
var packageJSON = require('./package.json');
/**
* Env
* Get npm lifecycle event to identify the environment
@ -72,7 +72,7 @@ if(ENV === 'build'||ENV === 'build-min'){
},
plugins: [
// Avoid publishing files when compilation fails
new webpack.BannerPlugin(" Omi v0.4.5 By dntzhang \r\n Github: https://github.com/AlloyTeam/omi\r\n MIT Licensed."),
new webpack.BannerPlugin(" Omi v"+packageJSON.version+" By dntzhang \r\n Github: https://github.com/AlloyTeam/omi\r\n MIT Licensed."),
new webpack.NoErrorsPlugin()
],
stats: {