omi-canvas v0.0.0
This commit is contained in:
dntzhang
parent
7dd5929316
commit
069d1f5e67
|
|
@ -0,0 +1,166 @@
|
|||
/*!
|
||||
* omi-canvas v0.0.0 By dntzhang
|
||||
* Github: https://github.com/AlloyTeam/omi
|
||||
* MIT Licensed.
|
||||
*/
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory(require("omi"), require("cax"));
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define(["omi", "cax"], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["OmiCanvas"] = factory(require("omi"), require("cax"));
|
||||
else
|
||||
root["OmiCanvas"] = factory(root["omi"], root["cax"]);
|
||||
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
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 _class, _temp;
|
||||
|
||||
var _omi = __webpack_require__(1);
|
||||
|
||||
var _cax = __webpack_require__(2);
|
||||
|
||||
var _cax2 = _interopRequireDefault(_cax);
|
||||
|
||||
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"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
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; }
|
||||
|
||||
(0, _omi.define)('omi-canvas', (_temp = _class = function (_WeElement) {
|
||||
_inherits(_class, _WeElement);
|
||||
|
||||
function _class() {
|
||||
_classCallCheck(this, _class);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class, [{
|
||||
key: 'install',
|
||||
value: function install() {}
|
||||
}, {
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.stage = new _cax2['default'].Stage(this.canvas);
|
||||
var text = new _cax2['default'].Text('Hello omi-canvas', {
|
||||
font: '20px Arial',
|
||||
color: '#ff7700',
|
||||
baseline: 'top'
|
||||
});
|
||||
this.stage.add(text);
|
||||
this.stage.update();
|
||||
}
|
||||
}, {
|
||||
key: 'css',
|
||||
value: function css() {
|
||||
return 'canvas{ border: 1px solid #ccc; }';
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render(props) {
|
||||
var _this2 = this;
|
||||
|
||||
return Omi.h('canvas', {
|
||||
ref: function ref(e) {
|
||||
_this2.canvas = e;
|
||||
},
|
||||
width: props.width,
|
||||
height: props.height });
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class;
|
||||
}(_omi.WeElement), _class.noSlot = true, _temp));
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/*!
|
||||
* omi-canvas v0.0.0 By dntzhang
|
||||
* Github: https://github.com/AlloyTeam/omi
|
||||
* MIT Licensed.
|
||||
*/
|
||||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("omi"),require("cax")):"function"==typeof define&&define.amd?define(["omi","cax"],t):"object"==typeof exports?exports.OmiCanvas=t(require("omi"),require("cax")):e.OmiCanvas=t(e.omi,e.cax)}("undefined"!=typeof self?self:this,function(e,t){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var u,a,c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),f=n(1),s=n(2),l=function(e){return e&&e.__esModule?e:{default:e}}(s);(0,f.define)("omi-canvas",(a=u=function(e){function t(){return o(this,t),r(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),c(t,[{key:"install",value:function(){}},{key:"installed",value:function(){this.stage=new l.default.Stage(this.canvas);var e=new l.default.Text("Hello omi-canvas",{font:"20px Arial",color:"#ff7700",baseline:"top"});this.stage.add(e),this.stage.update()}},{key:"css",value:function(){return"canvas{ border: 1px solid #ccc; }"}},{key:"render",value:function(e){var t=this;return Omi.h("canvas",{ref:function(e){t.canvas=e},width:e.width,height:e.height})}}]),t}(f.WeElement),u.noSlot=!0,a))},function(t,n){t.exports=e},function(e,n){e.exports=t}])});
|
||||
|
|
@ -1,748 +0,0 @@
|
|||
/*!
|
||||
* OmiRouter v1.0.0 By dntzhang
|
||||
* Github: https://github.com/AlloyTeam/omi
|
||||
* MIT Licensed.
|
||||
*/
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory();
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define([], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["OmiRouter"] = factory();
|
||||
else
|
||||
root["OmiRouter"] = factory();
|
||||
})(this, function() {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
/*!
|
||||
* omi-router v0.3.0 by dntzhang
|
||||
* Router for Omi.
|
||||
* Github: https://github.com/AlloyTeam/omi
|
||||
* MIT Licensed.
|
||||
*/
|
||||
|
||||
;(function () {
|
||||
|
||||
if(typeof Omi === 'undefined') return
|
||||
|
||||
var OmiRouter = { }
|
||||
|
||||
var parser = __webpack_require__(1),
|
||||
renderTo = null,
|
||||
params = { },
|
||||
Component = null,
|
||||
store = null,
|
||||
routerOption = { },
|
||||
preRenderTo = null,
|
||||
preInstance = null,
|
||||
currentRoute = null,
|
||||
preRoute = null,
|
||||
instanceList = [],
|
||||
$route = {}
|
||||
|
||||
OmiRouter.init = function (option) {
|
||||
routerOption = option
|
||||
option.routes.forEach(function (route) {
|
||||
route.reg = parser(route.path)
|
||||
})
|
||||
|
||||
|
||||
var hash = window.location.hash.replace('#', '')
|
||||
hashMapping(hash ? hash : routerOption.defaultRoute, renderTo)
|
||||
if(hash) {
|
||||
render()
|
||||
// option.root.onInstalled(function(){
|
||||
// render()
|
||||
// })
|
||||
}
|
||||
}
|
||||
|
||||
function getParams(toArr, pathArr) {
|
||||
var params = {}
|
||||
toArr.forEach(function (item, index) {
|
||||
if (index > 0) {
|
||||
params[pathArr[index].replace(':','')] = item
|
||||
}
|
||||
})
|
||||
return params
|
||||
}
|
||||
|
||||
function hashMapping(to) {
|
||||
routerOption.routes.every(function (route) {
|
||||
var toArr = to.match(route.reg);
|
||||
if (toArr) {
|
||||
var pathArr = route.path.match(route.reg)
|
||||
params = getParams(toArr, pathArr)
|
||||
renderTo = route.renderTo || routerOption.renderTo
|
||||
store = route.store || routerOption.store
|
||||
Component = route.component
|
||||
currentRoute = route
|
||||
renderTo = typeof renderTo === 'string' ? document.querySelector(renderTo) : renderTo
|
||||
|
||||
pushState(to)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
|
||||
function pushState(route){
|
||||
window.location.hash = route
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', function() {
|
||||
hashMapping(window.location.hash.replace('#',''), renderTo)
|
||||
render()
|
||||
}, false)
|
||||
|
||||
function render() {
|
||||
$route.params = params
|
||||
|
||||
if (preRenderTo === renderTo && preInstance && !routerOption.increment) {
|
||||
deleteInstance(preInstance)
|
||||
}
|
||||
|
||||
var instance
|
||||
|
||||
if (routerOption.increment) {
|
||||
var i = 0,
|
||||
len = instanceList.length
|
||||
for (; i < len; i++) {
|
||||
if (instanceList[i] instanceof Component) {
|
||||
instance = instanceList[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var doRouter = true
|
||||
|
||||
if (routerOption.beforeRoute) {
|
||||
doRouter = routerOption.beforeRoute({
|
||||
preRoute: preRoute,
|
||||
route: currentRoute,
|
||||
preComponent: preInstance
|
||||
})
|
||||
}
|
||||
|
||||
if (doRouter === false) return
|
||||
|
||||
if (!instance) {
|
||||
if (currentRoute.component.prototype.render) {
|
||||
initComponent(instance, Component)
|
||||
}else{
|
||||
currentRoute.component().then(function(Component){
|
||||
initComponent(instance, Component.default)
|
||||
change(instance)
|
||||
})
|
||||
return
|
||||
}
|
||||
} else {
|
||||
instance.$route = $route
|
||||
}
|
||||
change(instance)
|
||||
}
|
||||
|
||||
function initComponent(instance, Component){
|
||||
instance = new Component()
|
||||
if (routerOption.increment) {
|
||||
instanceList.push(instance)
|
||||
}
|
||||
instance.$route = $route
|
||||
|
||||
if(!routerOption.increment){
|
||||
while (renderTo.firstChild) {
|
||||
renderTo.removeChild(renderTo.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(instance, renderTo, store)
|
||||
if (routerOption.init) {
|
||||
routerOption.init({
|
||||
component: instance,
|
||||
preComponent: preInstance,
|
||||
preRoute: preRoute,
|
||||
route: currentRoute
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function deleteInstance(instance){
|
||||
for(var key in Omi.instances){
|
||||
if(Omi.instances.hasOwnProperty(key)){
|
||||
if(Omi.instances[key].id === instance.id){
|
||||
delete Omi.instances[key]
|
||||
instance = null
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function change(instance){
|
||||
if (routerOption.change) {
|
||||
routerOption.change({
|
||||
component: instance,
|
||||
preComponent: preInstance,
|
||||
preRoute: preRoute,
|
||||
route: currentRoute
|
||||
})
|
||||
}
|
||||
|
||||
preRoute = currentRoute
|
||||
preInstance = instance
|
||||
preRenderTo = renderTo
|
||||
}
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
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; }
|
||||
|
||||
var Link = function (_Component) {
|
||||
_inherits(Link, _Component);
|
||||
|
||||
function Link() {
|
||||
_classCallCheck(this, Link);
|
||||
|
||||
return _possibleConstructorReturn(this, _Component.apply(this, arguments));
|
||||
}
|
||||
|
||||
Link.prototype.render = function render$$1() {
|
||||
return Omi.h(
|
||||
'a',
|
||||
{ href: '#' + this.props.to },
|
||||
this.props.children[0]
|
||||
);
|
||||
};
|
||||
|
||||
return Link;
|
||||
}(Omi.Component);
|
||||
|
||||
OmiRouter.Link = Link
|
||||
|
||||
if (true) {
|
||||
module.exports = OmiRouter
|
||||
} else if (typeof define == "function" && define.amd) {
|
||||
define([], function () {
|
||||
return OmiRouter
|
||||
})
|
||||
} else {
|
||||
window.OmiRouter = OmiRouter
|
||||
}
|
||||
|
||||
})()
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var isarray = __webpack_require__(2)
|
||||
|
||||
/**
|
||||
* Expose `pathToRegexp`.
|
||||
*/
|
||||
module.exports = pathToRegexp
|
||||
module.exports.parse = parse
|
||||
module.exports.compile = compile
|
||||
module.exports.tokensToFunction = tokensToFunction
|
||||
module.exports.tokensToRegExp = tokensToRegExp
|
||||
|
||||
/**
|
||||
* The main path matching regexp utility.
|
||||
*
|
||||
* @type {RegExp}
|
||||
*/
|
||||
var PATH_REGEXP = new RegExp([
|
||||
// Match escaped characters that would otherwise appear in future matches.
|
||||
// This allows the user to escape special characters that won't transform.
|
||||
'(\\\\.)',
|
||||
// Match Express-style parameters and un-named parameters with a prefix
|
||||
// and optional suffixes. Matches appear as:
|
||||
//
|
||||
// "/:test(\\d+)?" => ["/", "test", "\d+", undefined, "?", undefined]
|
||||
// "/route(\\d+)" => [undefined, undefined, undefined, "\d+", undefined, undefined]
|
||||
// "/*" => ["/", undefined, undefined, undefined, undefined, "*"]
|
||||
'([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))'
|
||||
].join('|'), 'g')
|
||||
|
||||
/**
|
||||
* Parse a string for the raw tokens.
|
||||
*
|
||||
* @param {string} str
|
||||
* @param {Object=} options
|
||||
* @return {!Array}
|
||||
*/
|
||||
function parse (str, options) {
|
||||
var tokens = []
|
||||
var key = 0
|
||||
var index = 0
|
||||
var path = ''
|
||||
var defaultDelimiter = options && options.delimiter || '/'
|
||||
var res
|
||||
|
||||
while ((res = PATH_REGEXP.exec(str)) != null) {
|
||||
var m = res[0]
|
||||
var escaped = res[1]
|
||||
var offset = res.index
|
||||
path += str.slice(index, offset)
|
||||
index = offset + m.length
|
||||
|
||||
// Ignore already escaped sequences.
|
||||
if (escaped) {
|
||||
path += escaped[1]
|
||||
continue
|
||||
}
|
||||
|
||||
var next = str[index]
|
||||
var prefix = res[2]
|
||||
var name = res[3]
|
||||
var capture = res[4]
|
||||
var group = res[5]
|
||||
var modifier = res[6]
|
||||
var asterisk = res[7]
|
||||
|
||||
// Push the current path onto the tokens.
|
||||
if (path) {
|
||||
tokens.push(path)
|
||||
path = ''
|
||||
}
|
||||
|
||||
var partial = prefix != null && next != null && next !== prefix
|
||||
var repeat = modifier === '+' || modifier === '*'
|
||||
var optional = modifier === '?' || modifier === '*'
|
||||
var delimiter = res[2] || defaultDelimiter
|
||||
var pattern = capture || group
|
||||
|
||||
tokens.push({
|
||||
name: name || key++,
|
||||
prefix: prefix || '',
|
||||
delimiter: delimiter,
|
||||
optional: optional,
|
||||
repeat: repeat,
|
||||
partial: partial,
|
||||
asterisk: !!asterisk,
|
||||
pattern: pattern ? escapeGroup(pattern) : (asterisk ? '.*' : '[^' + escapeString(delimiter) + ']+?')
|
||||
})
|
||||
}
|
||||
|
||||
// Match any characters still remaining.
|
||||
if (index < str.length) {
|
||||
path += str.substr(index)
|
||||
}
|
||||
|
||||
// If the path exists, push it onto the end.
|
||||
if (path) {
|
||||
tokens.push(path)
|
||||
}
|
||||
|
||||
return tokens
|
||||
}
|
||||
|
||||
/**
|
||||
* Compile a string to a template function for the path.
|
||||
*
|
||||
* @param {string} str
|
||||
* @param {Object=} options
|
||||
* @return {!function(Object=, Object=)}
|
||||
*/
|
||||
function compile (str, options) {
|
||||
return tokensToFunction(parse(str, options))
|
||||
}
|
||||
|
||||
/**
|
||||
* Prettier encoding of URI path segments.
|
||||
*
|
||||
* @param {string}
|
||||
* @return {string}
|
||||
*/
|
||||
function encodeURIComponentPretty (str) {
|
||||
return encodeURI(str).replace(/[\/?#]/g, function (c) {
|
||||
return '%' + c.charCodeAt(0).toString(16).toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Encode the asterisk parameter. Similar to `pretty`, but allows slashes.
|
||||
*
|
||||
* @param {string}
|
||||
* @return {string}
|
||||
*/
|
||||
function encodeAsterisk (str) {
|
||||
return encodeURI(str).replace(/[?#]/g, function (c) {
|
||||
return '%' + c.charCodeAt(0).toString(16).toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Expose a method for transforming tokens into the path function.
|
||||
*/
|
||||
function tokensToFunction (tokens) {
|
||||
// Compile all the tokens into regexps.
|
||||
var matches = new Array(tokens.length)
|
||||
|
||||
// Compile all the patterns before compilation.
|
||||
for (var i = 0; i < tokens.length; i++) {
|
||||
if (typeof tokens[i] === 'object') {
|
||||
matches[i] = new RegExp('^(?:' + tokens[i].pattern + ')$')
|
||||
}
|
||||
}
|
||||
|
||||
return function (obj, opts) {
|
||||
var path = ''
|
||||
var data = obj || {}
|
||||
var options = opts || {}
|
||||
var encode = options.pretty ? encodeURIComponentPretty : encodeURIComponent
|
||||
|
||||
for (var i = 0; i < tokens.length; i++) {
|
||||
var token = tokens[i]
|
||||
|
||||
if (typeof token === 'string') {
|
||||
path += token
|
||||
|
||||
continue
|
||||
}
|
||||
|
||||
var value = data[token.name]
|
||||
var segment
|
||||
|
||||
if (value == null) {
|
||||
if (token.optional) {
|
||||
// Prepend partial segment prefixes.
|
||||
if (token.partial) {
|
||||
path += token.prefix
|
||||
}
|
||||
|
||||
continue
|
||||
} else {
|
||||
throw new TypeError('Expected "' + token.name + '" to be defined')
|
||||
}
|
||||
}
|
||||
|
||||
if (isarray(value)) {
|
||||
if (!token.repeat) {
|
||||
throw new TypeError('Expected "' + token.name + '" to not repeat, but received `' + JSON.stringify(value) + '`')
|
||||
}
|
||||
|
||||
if (value.length === 0) {
|
||||
if (token.optional) {
|
||||
continue
|
||||
} else {
|
||||
throw new TypeError('Expected "' + token.name + '" to not be empty')
|
||||
}
|
||||
}
|
||||
|
||||
for (var j = 0; j < value.length; j++) {
|
||||
segment = encode(value[j])
|
||||
|
||||
if (!matches[i].test(segment)) {
|
||||
throw new TypeError('Expected all "' + token.name + '" to match "' + token.pattern + '", but received `' + JSON.stringify(segment) + '`')
|
||||
}
|
||||
|
||||
path += (j === 0 ? token.prefix : token.delimiter) + segment
|
||||
}
|
||||
|
||||
continue
|
||||
}
|
||||
|
||||
segment = token.asterisk ? encodeAsterisk(value) : encode(value)
|
||||
|
||||
if (!matches[i].test(segment)) {
|
||||
throw new TypeError('Expected "' + token.name + '" to match "' + token.pattern + '", but received "' + segment + '"')
|
||||
}
|
||||
|
||||
path += token.prefix + segment
|
||||
}
|
||||
|
||||
return path
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape a regular expression string.
|
||||
*
|
||||
* @param {string} str
|
||||
* @return {string}
|
||||
*/
|
||||
function escapeString (str) {
|
||||
return str.replace(/([.+*?=^!:${}()[\]|\/\\])/g, '\\$1')
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape the capturing group by escaping special characters and meaning.
|
||||
*
|
||||
* @param {string} group
|
||||
* @return {string}
|
||||
*/
|
||||
function escapeGroup (group) {
|
||||
return group.replace(/([=!:$\/()])/g, '\\$1')
|
||||
}
|
||||
|
||||
/**
|
||||
* Attach the keys as a property of the regexp.
|
||||
*
|
||||
* @param {!RegExp} re
|
||||
* @param {Array} keys
|
||||
* @return {!RegExp}
|
||||
*/
|
||||
function attachKeys (re, keys) {
|
||||
re.keys = keys
|
||||
return re
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the flags for a regexp from the options.
|
||||
*
|
||||
* @param {Object} options
|
||||
* @return {string}
|
||||
*/
|
||||
function flags (options) {
|
||||
return options.sensitive ? '' : 'i'
|
||||
}
|
||||
|
||||
/**
|
||||
* Pull out keys from a regexp.
|
||||
*
|
||||
* @param {!RegExp} path
|
||||
* @param {!Array} keys
|
||||
* @return {!RegExp}
|
||||
*/
|
||||
function regexpToRegexp (path, keys) {
|
||||
// Use a negative lookahead to match only capturing groups.
|
||||
var groups = path.source.match(/\((?!\?)/g)
|
||||
|
||||
if (groups) {
|
||||
for (var i = 0; i < groups.length; i++) {
|
||||
keys.push({
|
||||
name: i,
|
||||
prefix: null,
|
||||
delimiter: null,
|
||||
optional: false,
|
||||
repeat: false,
|
||||
partial: false,
|
||||
asterisk: false,
|
||||
pattern: null
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return attachKeys(path, keys)
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform an array into a regexp.
|
||||
*
|
||||
* @param {!Array} path
|
||||
* @param {Array} keys
|
||||
* @param {!Object} options
|
||||
* @return {!RegExp}
|
||||
*/
|
||||
function arrayToRegexp (path, keys, options) {
|
||||
var parts = []
|
||||
|
||||
for (var i = 0; i < path.length; i++) {
|
||||
parts.push(pathToRegexp(path[i], keys, options).source)
|
||||
}
|
||||
|
||||
var regexp = new RegExp('(?:' + parts.join('|') + ')', flags(options))
|
||||
|
||||
return attachKeys(regexp, keys)
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a path regexp from string input.
|
||||
*
|
||||
* @param {string} path
|
||||
* @param {!Array} keys
|
||||
* @param {!Object} options
|
||||
* @return {!RegExp}
|
||||
*/
|
||||
function stringToRegexp (path, keys, options) {
|
||||
return tokensToRegExp(parse(path, options), keys, options)
|
||||
}
|
||||
|
||||
/**
|
||||
* Expose a function for taking tokens and returning a RegExp.
|
||||
*
|
||||
* @param {!Array} tokens
|
||||
* @param {(Array|Object)=} keys
|
||||
* @param {Object=} options
|
||||
* @return {!RegExp}
|
||||
*/
|
||||
function tokensToRegExp (tokens, keys, options) {
|
||||
if (!isarray(keys)) {
|
||||
options = /** @type {!Object} */ (keys || options)
|
||||
keys = []
|
||||
}
|
||||
|
||||
options = options || {}
|
||||
|
||||
var strict = options.strict
|
||||
var end = options.end !== false
|
||||
var route = ''
|
||||
|
||||
// Iterate over the tokens and create our regexp string.
|
||||
for (var i = 0; i < tokens.length; i++) {
|
||||
var token = tokens[i]
|
||||
|
||||
if (typeof token === 'string') {
|
||||
route += escapeString(token)
|
||||
} else {
|
||||
var prefix = escapeString(token.prefix)
|
||||
var capture = '(?:' + token.pattern + ')'
|
||||
|
||||
keys.push(token)
|
||||
|
||||
if (token.repeat) {
|
||||
capture += '(?:' + prefix + capture + ')*'
|
||||
}
|
||||
|
||||
if (token.optional) {
|
||||
if (!token.partial) {
|
||||
capture = '(?:' + prefix + '(' + capture + '))?'
|
||||
} else {
|
||||
capture = prefix + '(' + capture + ')?'
|
||||
}
|
||||
} else {
|
||||
capture = prefix + '(' + capture + ')'
|
||||
}
|
||||
|
||||
route += capture
|
||||
}
|
||||
}
|
||||
|
||||
var delimiter = escapeString(options.delimiter || '/')
|
||||
var endsWithDelimiter = route.slice(-delimiter.length) === delimiter
|
||||
|
||||
// In non-strict mode we allow a slash at the end of match. If the path to
|
||||
// match already ends with a slash, we remove it for consistency. The slash
|
||||
// is valid at the end of a path match, not in the middle. This is important
|
||||
// in non-ending mode, where "/test/" shouldn't match "/test//route".
|
||||
if (!strict) {
|
||||
route = (endsWithDelimiter ? route.slice(0, -delimiter.length) : route) + '(?:' + delimiter + '(?=$))?'
|
||||
}
|
||||
|
||||
if (end) {
|
||||
route += '$'
|
||||
} else {
|
||||
// In non-ending mode, we need the capturing groups to match as much as
|
||||
// possible by using a positive lookahead to the end or next path segment.
|
||||
route += strict && endsWithDelimiter ? '' : '(?=' + delimiter + '|$)'
|
||||
}
|
||||
|
||||
return attachKeys(new RegExp('^' + route, flags(options)), keys)
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize the given path string, returning a regular expression.
|
||||
*
|
||||
* An empty array can be passed in for the keys, which will hold the
|
||||
* placeholder key descriptions. For example, using `/user/:id`, `keys` will
|
||||
* contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
|
||||
*
|
||||
* @param {(string|RegExp|Array)} path
|
||||
* @param {(Array|Object)=} keys
|
||||
* @param {Object=} options
|
||||
* @return {!RegExp}
|
||||
*/
|
||||
function pathToRegexp (path, keys, options) {
|
||||
if (!isarray(keys)) {
|
||||
options = /** @type {!Object} */ (keys || options)
|
||||
keys = []
|
||||
}
|
||||
|
||||
options = options || {}
|
||||
|
||||
if (path instanceof RegExp) {
|
||||
return regexpToRegexp(path, /** @type {!Array} */ (keys))
|
||||
}
|
||||
|
||||
if (isarray(path)) {
|
||||
return arrayToRegexp(/** @type {!Array} */ (path), /** @type {!Array} */ (keys), options)
|
||||
}
|
||||
|
||||
return stringToRegexp(/** @type {string} */ (path), /** @type {!Array} */ (keys), options)
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = Array.isArray || function (arr) {
|
||||
return Object.prototype.toString.call(arr) == '[object Array]';
|
||||
};
|
||||
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -1,11 +0,0 @@
|
|||
import Omi from '../../../../dist/omi'
|
||||
|
||||
class About extends Omi.Component {
|
||||
render() {
|
||||
return <div >About</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default About
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,14 +0,0 @@
|
|||
|
||||
import Omi from '../../../../dist/omi'
|
||||
|
||||
class Home extends Omi.Component {
|
||||
render() {
|
||||
|
||||
return <div>Home</div>
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default Home
|
||||
|
|
@ -3,15 +3,11 @@
|
|||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
|
||||
<title></title>
|
||||
<title>omi-canvas</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>omi-router演示</h2>
|
||||
<div id="container">
|
||||
|
||||
</div>
|
||||
|
||||
<a href="https://github.com/Tencent/omi/tree/master/plugins/omi-router" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/Tencent/omi/tree/master/packages/omi-canvas" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a>
|
||||
<script src="bundler.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,26 @@
|
|||
|
||||
import Omi from '../../../../dist/omi'
|
||||
import OmiRouter,{Link} from '../../dist/omi-router'
|
||||
import {render, define, WeElement} from 'omi'
|
||||
import '../../src/index'
|
||||
|
||||
import Home from './home.js'
|
||||
import About from './about.js'
|
||||
import User from './user.js'
|
||||
import UserList from './user-list.js'
|
||||
import omiUrl from './omi.jpg'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
class App extends Omi.Component {
|
||||
install() {
|
||||
|
||||
installed() {
|
||||
}
|
||||
|
||||
OmiRouter.init({
|
||||
routes: [
|
||||
{path: '/', component: Home},
|
||||
{path: '/about', component: About},
|
||||
{path: '/user-list', component: UserList},
|
||||
{path: '/user/:name/category/:category', component: User}
|
||||
],
|
||||
renderTo: "#view",
|
||||
defaultRoute: '/',
|
||||
root: this
|
||||
})
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Omi</h1>
|
||||
<omi-canvas width={400} height={400}>
|
||||
<text text='Hello omi' />
|
||||
<bitmap src={omiUrl} />
|
||||
</omi-canvas>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
style(){
|
||||
return `
|
||||
ul{
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom:5px;
|
||||
}
|
||||
li{
|
||||
display:inline-block;
|
||||
margin-left:4px;
|
||||
}
|
||||
#view li{
|
||||
display:block;
|
||||
}
|
||||
#view ul{
|
||||
border-width: 0px;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<ul>
|
||||
<li><Link to="/" >Home</Link></li>
|
||||
<li><Link to="/about" >About</Link></li>
|
||||
<li><Link to="/user-list" >UserList</Link></li>
|
||||
</ul>
|
||||
<div id="view">
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Omi.render(<App />,"#container")
|
||||
render(<my-app />, "body")
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -1,18 +0,0 @@
|
|||
import Omi from '../../../../dist/omi'
|
||||
import {Link} from '../../dist/omi-router'
|
||||
|
||||
class UserList extends Omi.Component {
|
||||
|
||||
render() {
|
||||
return <ul>
|
||||
<li><Link to="/user/yanagao/category/js" >yanagao</Link></li>
|
||||
<li><Link to="/user/vorshen/category/html" >vorshen</Link></li>
|
||||
<li><Link to="/user/dntzhang/category/css" >dntzhang</Link></li>
|
||||
</ul>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export default UserList
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
|
||||
|
||||
import Omi from '../../../../dist/omi'
|
||||
|
||||
|
||||
class User extends Omi.Component {
|
||||
|
||||
install(){
|
||||
let params = this.$route.params
|
||||
this.name = params.name
|
||||
|
||||
this.category = params.category
|
||||
this.info = this.queryInfo(this.name)
|
||||
this.age = this.info.age
|
||||
this.sex = this.info.sex
|
||||
}
|
||||
|
||||
queryInfo(name) {
|
||||
this.mockData = {
|
||||
'yanagao': {age: 18, sex: 'female'},
|
||||
'vorshen': {age: 20, sex: 'male'},
|
||||
'dntzhang': {age: 22, sex: 'male'}
|
||||
}
|
||||
return this.mockData[name]
|
||||
}
|
||||
|
||||
back(){
|
||||
history.back()
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div >
|
||||
<button onclick={this.back.bind(this)}>back</button>
|
||||
<ul>
|
||||
<li>name:{this.name}</li>
|
||||
<li>age:{this.age}</li>
|
||||
<li>sex:{this.sex}</li>
|
||||
<li>category:{this.category}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export default User
|
||||
|
|
@ -19,20 +19,23 @@
|
|||
"cax"
|
||||
],
|
||||
"dependencies": {
|
||||
"omi": "latest",
|
||||
"cax": "latest"
|
||||
"file-loader": "^2.0.0",
|
||||
"omi": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
|
||||
"babel-plugin-transform-es3-property-literals": "^6.22.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.23.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-omi": "^0.1.1",
|
||||
"cax": "^1.2.10",
|
||||
"esprima-fb": "^15001.1001.0-dev-harmony-fb",
|
||||
"omi": "latest",
|
||||
"cax": "latest",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^3.4.1"
|
||||
},
|
||||
"author": "dntzhang <dntzhang@qq.com>",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
import { WeElement, define } from 'omi'
|
||||
import cax from 'cax'
|
||||
|
||||
define('omi-canvas', class extends WeElement {
|
||||
static noSlot = true
|
||||
|
||||
install() {
|
||||
|
||||
}
|
||||
|
||||
installed() {
|
||||
this.stage = new cax.Stage(this.canvas)
|
||||
const text = new cax.Text('Hello omi-canvas', {
|
||||
font: '20px Arial',
|
||||
color: '#ff7700',
|
||||
baseline: 'top'
|
||||
})
|
||||
this.stage.add(text)
|
||||
this.stage.update()
|
||||
}
|
||||
|
||||
css() {
|
||||
return `canvas{ border: 1px solid #ccc; }`
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<canvas
|
||||
ref={e => { this.canvas = e }}
|
||||
width={props.width}
|
||||
height={props.height}>
|
||||
</canvas>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
@ -20,8 +20,25 @@ var config = {
|
|||
loader: 'babel-loader',
|
||||
test: /\.js$/,
|
||||
query: {
|
||||
presets: 'env'
|
||||
presets: ['env','omi'],
|
||||
plugins : [
|
||||
"transform-es3-property-literals",
|
||||
"transform-es3-member-expression-literals",
|
||||
"transform-class-properties",
|
||||
"transform-object-rest-spread"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 8192
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -60,10 +77,12 @@ if(ENV === 'build'||ENV === 'build-min'){
|
|||
loader: 'babel-loader',
|
||||
test: path.join(__dirname, 'src'),
|
||||
query: {
|
||||
presets: 'env',
|
||||
presets: ['env','omi'],
|
||||
plugins : [
|
||||
"transform-es3-property-literals",
|
||||
"transform-es3-member-expression-literals"
|
||||
"transform-es3-member-expression-literals",
|
||||
"transform-class-properties",
|
||||
"transform-object-rest-spread"
|
||||
]
|
||||
},
|
||||
}
|
||||
|
|
@ -85,7 +104,7 @@ if(ENV === 'build'||ENV === 'build-min'){
|
|||
if(ENV === 'build-min'){
|
||||
config.plugins.push(new webpack.optimize.UglifyJsPlugin());
|
||||
config.entry = {
|
||||
'omi-canvas.min': './index.js'
|
||||
'omi-canvas.min': './src/index.js'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue