define('app/views/coms/tree',['magix'],function(require){
/*Magix */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
return Magix.View.extend({
tmpl: "<div id=\"tree_<%=id%>\"></div><div id=\"code_<%=id%>\"></div>",
render: function() {
var me = this;
me.data.set({
id: me.id
}).digest();
me.request().all(['list', 'code'], function(err, bag, code) {
me.tree('tree_' + me.id, {
list: bag.get('data', [])
});
me.tree('code_' + me.id, {
list: code.get('data', []),
id: 'keyCode',
pId: 'parentCode',
text: 'keyName'
});
});
}
});
});
define('app/views/coms/inputmask',['magix'],function(require){
/*Magix */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
return Magix.View.extend({
tmpl: "<div style=\"margin:50px\"><input class=\"input\" mx-view=\"coms/inputmask/index?mask=9999-aaaa-w*ww99\"/> <input class=\"input\" mx-view=\"coms/inputmask/index?mask=999.999.999.999\" placeholder=\"IPV4\"/></div>",
render: function() {
var me = this;
me.data.digest();
}
});
});
define('app/views/home/abc',['magix'],function(require){
/*Magix*/
/*
author:xinglie.lkf@taobao.com
*/
var Magix=require('magix');
return Magix.View.extend({
tmpl:'../../../abc',
css:'@abc',
render:function(){
var me=this;
}
});
});
define('app/views/demos/partials/view-subs-banner',['magix'],function(require){
/*Magix */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
return Magix.View.extend({
tmpl: "<div class=\"mp-514-form-item\"><div class=\"mp-514-title\">创意尺寸</div><div class=\"mp-514-content\"><input class=\"input mp-514-w88\"/> X <input class=\"input mp-514-w88\"/></div></div>",
render: function() {
var me = this;
setTimeout(me.wrapAsync(function() {
me.data.digest();
}), 10000);
}
});
});
define("exts",['magix','zepto'],function(require){
/*Magix ,Zepto */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
var TmplCache = new Magix.Cache();
var Zepto = require('zepto');
Magix.View.merge({
toHTML: function(tmpl, data) {
var fn = TmplCache.get(tmpl);
if (!fn) {
fn = Zepto.tmpl(tmpl);
TmplCache.set(tmpl, fn);
}
return fn(data);
}
});
});
define('app/views/demos/partials/view-subs-float',['magix'],function(require){
/*Magix */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
var Types = [{
id: 'left',
text: '左边'
}, {
id: 'top',
text: '上边'
}, {
id: 'right',
text: '右边'
}, {
id: 'bottom',
text: '下边'
}];
return Magix.View.extend({
tmpl: "<div class=\"mp-514-form-item\"><div class=\"mp-514-title\">弹出位置</div><div class=\"mp-514-content\" id=\"pos_<%=id%>\"></div></div>",
render: function() {
var me = this;
me.data.set({
id: me.id
}).digest();
me.dropdown('pos_' + me.id, {
list: Types,
width: 210,
picked: function(e) {
console.log(e);
me.renderByType(e.id);
}
});
}
});
});
define('coms/menu/index',['magix','$'],function(require){
/*Magix ,$ */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
var $ = require('$');
var Vframe = Magix.Vframe;
Magix.applyStyle('mp-e65',".mp-e65-items li{height:30px;line-height:30px;padding:0 8px;cursor:default;border-radius:4px}.mp-e65-items li.mp-e65-over{background-color:#197de1;background-image:-webkit-linear-gradient(top,#1b87e3 2%,#166ed5 98%);background-image:linear-gradient(180deg,#1b87e3 2%,#166ed5 98%);color:#ecf2f8;text-shadow:0 -1px 0 rgba(0,0,0,.05)}.mp-e65-container{transition:margin-left .25s;-moz-transition:margin-left .25s;-webkit-transition:margin-left .25s;-o-transition:margin-left .25s}.mp-e65-items li .mp-e65-more{float:right}.mp-e65-items{padding:4px;border-radius:4px;background-color:#fff;color:#474747;box-shadow:0 4px 10px 0 rgba(0,0,0,.1),0 3px 5px 0 rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.09098);-webkit-backface-visibility:hidden;backface-visibility:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;cursor:default}.mp-e65-toright{margin-left:10px}.mp-e65-toleft{margin-left:-10px}");
var CSSNames = {"over":"mp-e65-over","toleft":"mp-e65-toleft","toright":"mp-e65-toright"};
var Instance;
var Menu = Magix.View.extend({
tmpl: "<div style=\"width:<%=width%>px;<%if(isChild){%>position:absolute;left:-1000000px<%}%>\" mx-mouseover=\"over();\" class=\"mp-e65-container<%if(isChild){%> away<%}%>\" mx-contextmenu=\"prevent()\" mx-guid=\"x35f1-\u001f\">@1-\u001f</div>",
tmplData:[{"guid":1,"keys":["width"],"tmpl":"<ul class=\"mp-e65-items\" mx-guid=\"x35f2-\u001f\">@2-\u001f</ul>","selector":"div[mx-guid=\"x35f1-\u001f\"]","attrs":[{"n":"style","v":"width:<%=width%>px;<%if(isChild){%>position:absolute;left:-1000000px<%}%>"}],"mask":"2"},{"guid":2,"keys":["list","viewId"],"tmpl":"<%for(var i=0,one;i<list.length;i++){one=list[i]%><li mx-mouseover=\"hover({id:'<%=one.id%>'})\" mx-mouseout=\"hover({id:'<%=one.id%>'});\" <%if(!one.children){%> mx-click=\"select({id:'<%=one.id%>'})\" <%}%> class=\"ellipsis\" title=\"<%=one.text%>\" id=\"<%=viewId%>_<%=one.id%>\"><i class=\"iconfont\"></i><%=one.text%> <%if(one.children){%><span class=\"mp-e65-more\">➤</span><%}%></li><%}%>","selector":"ul[mx-guid=\"x35f2-\u001f\"]","pKeys":["width"]}],
ctor: function() {
var me = this;
// me.data.on('changed', function(e) {
// if (e.keys.width) {
// var cnt = $('#' + me.id + '>div');
// cnt.css({
// width: this.get('width')
// });
// }
// });
me.on('destroy', function() {
if (me.data.get('isChild'))
$('#' + me.id).remove();
});
},
inside: function(node) {
var me = this;
var inside = Magix.inside(node, me.id);
if (!inside) {
var children = me.owner.children();
for (var i = children.length - 1; i >= 0; i--) {
var child = Vframe.get(children[i]);
if (child) {
inside = child.invoke('inside', node);
if (inside) break;
}
}
}
return inside;
},
update: function(ops) {
var me = this;
var info = ops;
if (!ops.map) {
info = me.listToTree(ops.list);
}
me.$map = info.map;
me.$list = info.list;
if (ops.picked)
me.$picked = ops.picked;
if (ops.root)
me.$root = ops.root;
me.$pId = ops.pId;
me.$pNode = ops.pNode;
me.data.set({
viewId: me.id,
isChild: ops.isChild || ops.pNode,
list: info.list,
width: ops.width || 200
}).digest();
if (!me.$pNode) {
me.$shown = true;
var hideWatch = function(e) {
if (me.$shown) {
if (e.type == 'resize' || !me.inside(e.target)) {
Magix.toTry(me.hide, [], me);
}
}
};
var doc = $(document);
var win = $(window);
win.on('resize', hideWatch);
doc.on('mousedown', hideWatch);
me.on('destroy', function() {
win.off('resize', hideWatch);
doc.off('mousedown', hideWatch);
});
}
},
render: function() {
var me = this;
me.endUpdate();
},
show: function(e, refNode) {
var me = this;
if (!me.$shown) {
me.$shown = true;
var node = $('#' + me.id + ' div');
var doc = $(document);
var left = -1,
top = -1,
dock = 'right';
var width = node.outerWidth();
var height = node.outerHeight(),
refWidth = 0,
refHeight = 0;
if (refNode) {
var offset = refNode.offset();
refWidth = refNode.outerWidth();
refHeight = refNode.outerHeight();
left = offset.left + refWidth;
top = offset.top;
} else {
left = e.pageX;
top = e.pageY;
}
if ((left + width) > doc.width()) {
left = left - width - refWidth;
dock = 'left';
if (left < 0) left = 0;
}
if ((top + height) > doc.height()) {
top -= height;
top += refHeight;
if (top < 0) top = 0;
}
if (refNode) {
if (dock == 'right') {
left -= 10;
} else {
left += 10;
}
}
var root = me.$root || me;
if (Instance != root) Instance = root;
if (me.$pNode) {
node.css({
left: left,
top: top
}).addClass(CSSNames['to' + dock]);
} else {
node.css({
left: left,
top: top
});
}
}
},
hide: function() {
var me = this;
var children = me.owner.children();
for (var i = children.length - 1; i >= 0; i--) {
var child = Vframe.get(children[i]);
if (child) child.invoke('hide');
}
if (me.$shown && me.$pNode) {
me.$shown = false;
var node = $('#' + me.id + ' div');
node.removeClass(CSSNames.toleft).removeClass(CSSNames.toright);
node.css({
left: -100000
});
$(me.$pNode).removeClass(CSSNames.over);
}
},
stopHideChild: function(id) {
clearTimeout(this['timer_' + id]);
},
showChild: function(node, id, children) {
var me = this;
me['stimer_' + id] = setTimeout(me.wrapAsync(function() {
var nid = me.id + '_menu_' + id;
var vf = Magix.Vframe.get(nid);
if (!vf) {
$('body').append('<div id="' + nid + '" />');
vf = me.owner.mountVframe(nid, 'coms/menu/index');
}
vf.invoke('update', [{
pNode: '#' + me.id + '_' + id,
pId: id,
map: me.$map,
list: children,
root: me.$root || me,
width: me.data.get('width')
}], true);
vf.invoke('show', [null, node], true);
}), 250);
},
hideChild: function(id) {
var me = this;
var nid = me.id + '_menu_' + id;
var vf = Magix.Vframe.get(nid);
if (vf) {
me['timer_' + id] = setTimeout(me.wrapAsync(function() {
vf.invoke('hide');
}), 50);
}
},
'hover<mouseout,mouseover>': function(e) {
var me = this;
var flag = !Magix.inside(e.relatedTarget, e.current);
if (flag) {
var node = $(e.current);
node[e.type == 'mouseout' ? 'removeClass' : 'addClass'](CSSNames.over);
var id = e.params.id;
me.hideChild(me.$lastId);
if (e.type == 'mouseover') {
var map = me.$map;
var children = map[id].children;
if (children) {
me.stopHideChild(id);
me.showChild(node, id, children);
me.$lastId = id;
}
} else {
clearTimeout(me['stimer_' + id]);
}
}
},
'over<mouseover>': function(e) {
var me = this;
var flag = !Magix.inside(e.relatedTarget, e.current);
if (flag) {
if (!me.$pNode && Instance != me) {
if (Instance) Instance.hide();
//Instance = me;
}
if (me.$pNode) {
$(me.$pNode).addClass(CSSNames.over);
me.owner.parent().invoke('stopHideChild', [me.$pId]);
}
}
},
'select<click>': function(e) {
var me = this;
var root = me.$root || me;
if (root.$picked) {
var info = me.$map[e.params.id];
Magix.toTry(root.$picked, [info]);
}
root.hide();
},
'prevent<contextmenu>': function(e) {
e.preventDefault();
}
});
return Menu;
});
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
module.exports = Magix.View.extend({
tmpl: '@colorpicker.html',
render: function() {
var me = this;
me.data.digest();
},
'showPicker<click>': function(e) {
e.preventDefault();
var ipt = e.current;
this.colorpicker({
ownerNodeId: ipt.id || (ipt.id = Magix.guid('cp_')),
dock: e.params.dock,
color: ipt.innerHTML,
picked: function(e) {
ipt.innerHTML = e.color;
}
});
}
});
var Magix = require('magix')
Magix.applyStyle('@index.css')
module.exports = Magix.View.extend({
tmpl: '@index.html',
render: function() {
// render view
}
})
var Magix = require('magix');
var Types = [{
id: 'left',
text: '左边'
}, {
id: 'top',
text: '上边'
}, {
id: 'right',
text: '右边'
}, {
id: 'bottom',
text: '下边'
}];
module.exports = Magix.View.extend({
tmpl: '@view-subs-float.html',
render: function() {
var me = this;
me.data.set({
id: me.id
}).digest();
me.dropdown('pos_' + me.id, {
list: Types,
width: 210,
picked: function(e) {
console.log(e);
me.renderByType(e.id);
}
});
}
});
define('coms/uploader/index',['magix','$'],function(require){
/*Magix ,$ */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
var $ = require('$');
Magix.applyStyle('mp-ce9',".mp-ce9-pr{position:relative}.mp-ce9-file{left:0;top:0;bottom:0;right:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:100px;filter:alpha(opacity=0)}.mp-ce9-cnt,.mp-ce9-file{position:absolute}.mp-ce9-cnt{left:-999999px}");
var Uploader = Magix.Base.extend({
destroy: function() {
var me = this;
me.$oust = 1;
}
});
var Iframe = Uploader.extend({
send: function(input) {
var id = Magix.guid('up');
$('body').append('<div id="' + id + '_temp" class="mp-ce9-cnt"><form target="' + id + '" enctype="multipart/form-data" method="post" action="test"></form><iframe name="' + id + '" id="' + id + '"></iframe></div>');
var cnt = $('#' + id + '_temp');
var form = cnt.find('form');
form.append(input);
var ifm = cnt.find('iframe');
ifm.on('load', function() {
setTimeout(function() {
cnt.remove();
}, 0);
});
form.submit();
}
});
var XHR = Uploader.extend({
send: function(input) {
var data = new FormData();
for (var i = 0; i < input.files.length; i++) {
data.append(input.files[i].name, input.files[i]);
}
var xhr = new XMLHttpRequest();
xhr.overrideMimeType('application/json');
xhr.open('post', 'test', true);
xhr.upload.onprogress = function(e) {
// var percent = Math.round((event.loaded / event.total) * 100)
// console.log('[uploader]', file.name, event.loaded, event.total, percent + '%')
};
xhr.onerror = function(err) {
console.log(err);
};
xhr.onload = function() {
console.log(xhr.status);
$(input).remove();
};
xhr.send(data);
}
});
return Magix.View.extend({
ctor: function() {
var me = this;
me.$uploader = new XHR();
me.on('destroy', function() {
me.$uploader.destroy();
});
},
add: function() {
var me = this;
$('#' + me.id).append('<input type="file" class="mp-ce9-file" mx-change="upload()" name="file" />').addClass('mp-ce9-pr');
},
render: function() {
var me = this;
me.add();
me.endUpdate();
},
'upload<change>': function(e) {
this.$uploader.send(e.target);
this.add();
}
});
});
define('app/views/demos/autocomplete',['magix','../../../coms/bases/monitor','$'],function(require){
/*Magix ,Monitor ,$ */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
var Monitor = require('../../../coms/bases/monitor');
var $ = require('$');
Magix.applyStyle('mp-de4',".mp-de4-wrapper{margin:80px}.mp-de4-search{width:300px}.mp-de4-list{width:318px;overflow:auto;position:absolute;background:#eee}.mp-de4-none{display:none}.mp-de4-item{height:21px;line-height:21px;padding:2px 8px;border-radius:2px;user-select:none;-webkit-user-select:none;-moz-user-select:none;cursor:default}.mp-de4-over{background-color:#6363e6;background-image:-webkit-linear-gradient(top,#1b87e3 2%,#6363e6 98%);background-image:linear-gradient(180deg,#1b87e3 2%,#6363e6 98%);color:#ecf2f8;text-shadow:0 -1px 0 rgba(0,0,0,.05)}");
var CSSNames = {"wrapper":"mp-de4-wrapper","search":"mp-de4-search","list":"mp-de4-list","none":"mp-de4-none","item":"mp-de4-item","over":"mp-de4-over"};
return Magix.View.extend({
tmpl: "<div class=\"mp-de4-wrapper\"><div class=\"autocomplete\"><input class=\"input mp-de4-search\" mx-click=\"showList()\" id=\"ipt_<%=id%>\" mx-keyup=\"search()\" mx-paste=\"search()\" mx-keydown=\"select()\"/></div><div class=\"mp-de4-list mp-de4-none\" id=\"list_<%=id%>\" mx-mouseout=\"leave()\"><ul mx-guid=\"x2251-\u001f\">@1-\u001f</ul></div></div>",
tmplData:[{"guid":1,"keys":["list"],"tmpl":"<%for(var i=0;i<list.length;i++){%><li id=\"idx_<%=i%>\" class=\"mp-de4-item ellipsis\" mx-mouseover=\"hover({index:<%=i%>})\" mx-click=\"fill()\" data-text=\"<%=list[i].text%>\"><%=list[i].text%></li><%}%>","selector":"ul[mx-guid=\"x2251-\u001f\"]"}],
ctor: function() {
Monitor.setup();
var me = this;
me.on('destroy', Monitor.teardown);
me.$sIndex = -1;
me.data.on('changed', function(e) {
if (e.keys.list) {
me.$sIndex = -1;
}
});
},
render: function() {
var me = this;
me.request().all('list', function(err, bag) {
me.data.set({
id: me.id,
list: me.$src = bag.get('data', [])
}).digest();
});
},
inside: function(node) {
var me = this;
return Magix.inside(node, 'list_' + me.id) ||
Magix.inside(node, 'ipt_' + me.id);
},
hide: function() {
var me = this;
if (me.$shown) {
me.$shown = false;
Monitor.remove(me);
$('#list_' + me.id).addClass(CSSNames.none);
}
},
normalPre: function() {
var me = this;
if (me.$sIndex != -1) {
$('#idx_' + me.$sIndex).removeClass(CSSNames.over);
}
},
highlight: function() {
var me = this;
if (me.$sIndex != -1) {
$('#idx_' + me.$sIndex).addClass(CSSNames.over);
}
},
fillText: function() {
var me = this;
var item = $('#idx_' + me.$sIndex);
var text = item.data('text');
$('#ipt_' + me.id).val(text);
me.search(text);
},
show: function() {
var me = this;
if (!me.$shown) {
me.$shown = true;
Monitor.add(me);
$('#list_' + me.id).removeClass(CSSNames.none);
}
},
search: function(value, show) {
var me = this;
clearTimeout(me.$timer);
me.$timer = setTimeout(me.wrapAsync(function() {
if (value != me.data.get('iptValue')) {
var newList = [];
for (var i = 0; i < me.$src.length; i++) {
if (me.$src[i].text.indexOf(value) >= 0) {
newList.push(me.$src[i]);
}
}
me.data.set({
iptValue: value,
list: newList
}).digest();
console.log(show, value);
if (show) {
me.show();
}
}
}), 150);
},
'showList<click>': function() {
this.show();
},
'hover<mouseover>': function(e) {
var me = this;
me.normalPre();
if (e.type == 'mouseover') {
me.$sIndex = e.params.index;
me.highlight();
}
},
'fill<click>': function() {
var me = this;
me.fillText();
me.hide();
},
'search<keyup,paste>': function(e) {
var me = this;
setTimeout(me.wrapAsync(function() {
if (e.keyCode != 38 && e.keyCode != 40 && e.keyCode != 13) {
me.search(e.current.value, true);
}
}), 0);
},
'select<keydown>': function(e) {
var me = this;
var max = me.data.get('list').length - 1;
if (max < 0) return;
if (e.keyCode == 38) { //UP
if (!me.$shown) me['showList<click>']();
e.preventDefault();
me.normalPre();
me.$sIndex--;
if (me.$sIndex < 0) {
me.$sIndex = max;
}
me.highlight();
} else if (e.keyCode == 40) { //DOWN
if (!me.$shown) me['showList<click>']();
e.preventDefault();
me.normalPre();
me.$sIndex++;
if (me.$sIndex > max) {
me.$sIndex = 0;
}
me.highlight();
} else if (e.keyCode == 13) {
if (me.$sIndex != -1) {
me.fillText();
me.hide();
}
}
},
'leave<mouseout>': function(e) {
var me = this;
if (!Magix.inside(e.relatedTarget, e.current)) {
me.normalPre();
me.$sIndex = -1;
}
}
});
});
var ToDegree = function(angle) {
var degree = angle * 180 / Math.PI;
degree = Math.round(degree * 100) / 100;
return degree;
};
module.exports = Magix.View.extend({
tmpl: '@drag-rotate.html',
render: function() {
var me = this;
me.data.digest();
},
'startDrag<mousedown>': function(e) {
var me = this;
var cx = 329,
cy = 187;
var node = e.current;
var start = Math.atan2(e.pageY - cy, e.pageX - cx);
console.log(start, ToDegree(start));
start = ToDegree(start);
me.beginDrag(e, node, function(e) {
var ox = e.pageX - cx,
oy = e.pageY - cy;
var angle = Math.atan2(oy, ox);
var degree = ToDegree(angle) - start;
//var angle1 = Math.atan(ox / oy) / (2 * Math.PI) * 360;
node.style.transform = 'rotate(' + degree + 'deg)';
//console.log(angle, degree, angle1);
});
}
});
'#snippets';
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
Magix.applyStyle('@default.css');
module.exports = Magix.View.extend({
tmpl: '@default.html',
render: function() {
var me = this;
me.updater.digest();
},
'toTop<click>': function(e) {
e.preventDefault();
window.scrollTo(0, 0);
}
});
var BigImg = Magix.View.extend({
tmpl: '@sdk-bigimg.html',
ctor: function(extra) {
var me = this;
me.$img = extra.img;
me.$anchor = extra.anchor;
},
render: function() {
var me = this;
me.data.set({
img: me.$img
}).digest();
var anchor = $(me.$anchor);
var offset = anchor.offset();
var width = anchor.outerWidth();
$('#' + me.id).offset({
left: offset.left + width,
top: offset.top
});
},
'hover<mouseover,mouseout>': function(e) {
if (e.type == 'mouseout') {
BigImg.start();
} else {
BigImg.stop();
}
}
}, {
show: function(view, img, anchor) {
var node = $('#' + BigImgId);
var me = this;
me.stop();
node.show();
if (!node.size()) {
$(document.body).append('<div id="' + BigImgId + '" class="' + CSSNames.bigimg + '" />');
}
view.owner.mountVframe(BigImgId, '@moduleId', {
img: img,
anchor: anchor
});
},
stop: function() {
clearTimeout(this.$timer);
},
start: function() {
this.$timer = setTimeout(function() {
$('#' + BigImgId).hide();
}, 150);
},
hide: function() {
var me = this;
me.stop();
me.start();
},
destroy: function() {
var me = this;
me.stop();
$('#' + BigImgId).remove();
}
});
module.exports = Magix.View.extend({
tmpl: '@index.html',
ctor: function(extra) {
var me = this;
if (!extra.dock) extra.dock = 'bottom';
extra.cssdock = CSSNames[extra.dock];
extra.id = me.id;
me.data.set(extra).digest();
},
hide: function() {
var me = this;
me.$timer = setTimeout(me.wrapAsync(function() {
var content = $('#content_' + me.id);
content.hide();
}), 150);
},
'over<mouseover>': function(e) {
var me = this;
clearTimeout(me.$timer);
var content = $('#content_' + me.id);
var anchor = $(e.current);
content.show();
var pos = Position[me.data.get('dock')](anchor, content);
content.offset(pos);
},
'out<mouseout>': function(e) {
var me = this;
var flag = Magix.inside(e.relatedTarget, e.current);
if (!flag) {
me.hide();
}
},
'cover<mouseover>': function(e) {
var flag = Magix.inside(e.relatedTarget, e.current);
if (!flag) {
clearTimeout(this.$timer);
}
},
'cout<mouseout>': function() {
this.hide();
}
});
module.exports = Magix.View.extend({
ctor: function(extra) {
var me = this;
Monitor.setup();
me.on('destroy', function() {
Monitor.teardown();
$('#' + me.id).remove();
});
me.$ownerNodeId = extra.ownerNodeId;
me.$dock = extra.dock || 'left';
$('#' + me.id).addClass('@picker.css:picker' + ' ' + '@picker.css:$prefix' + me.$dock);
},
inside: function(node) {
var me = this;
var inside = Magix.inside(node, me.id) || Magix.inside(node, me.$ownerNodeId);
return inside;
},
show: function() {
var me = this;
if (!me.$shown) {
var node = $('#' + me.id),
ref = $('#' + me.$ownerNodeId);
me.$shown = true;
Monitor.add(me);
node.show();
var offset = ref.offset();
var left, top = offset.top + ref.outerHeight() + ArrowHeight;
if (me.$dock == 'left') {
left = offset.left;
} else {
left = offset.left + ref.outerWidth() - node.outerWidth();
}
node.css({
left: left,
top: top
});
}
},
hide: function() {
var me = this;
if (me.$shown) {
var node = $('#' + me.id);
me.$shown = false;
node.hide();
Monitor.remove(me);
}
}
});
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
var $ = require('$');
Magix.applyStyle('@more-links.css');
var CSSNames = '*****@*****.**';
var MoreLinks = require('./partials/more-links');
module.exports = Magix.View.extend({
tmpl: '@more-links.html',
ctor: function() {
MoreLinks.setup();
this.on('destroy', MoreLinks.teardown);
},
render: function() {
var me = this;
me.data.set({
id: me.id
}).digest();
},
'hover<mouseout,mouseover>': function(e) {
$(e.current)[e.type == 'mouseover' ? 'addClass' : 'removeClass'](CSSNames.over);
},
'showBatch<click>': function(e) {
MoreLinks.show(e.current, $('#batch_' + this.id));
},
'showMore<click>': function(e) {
MoreLinks.show(e.current, $('#more_' + this.id));
}
});
id: 'ic1',
text: 'IC1'
}];
module.exports = Magix.View.extend({
tmpl: '@table-settings.html',
ctor: function() {
var me = this;
me.$checkedFields = ['ctr', 'uv', 'ic1', 'pv1'];
},
render: function() {
var me = this;
me.data.set({
fieldsMap: Magix.toMap(Fields, 'id'),
checkedFields: me.$checkedFields
}).digest();
},
'showSettings<click>': function(e) {
var current = e.current;
var me = this;
FieldsSettings.show(me, {
dock: e.params.dock,
fields: Fields,
checkedFields: me.$checkedFields,
ownerNodeId: current.id || (current.id = Magix.guid('ts_')),
picked: function(fields) {
me.$checkedFields = fields;
me.render();
}
});
}
});
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
Magix.applyStyle('@index.css');
module.exports = Magix.View.extend({
tmpl: '@index.html',
render: function() {
var me = this;
me.data.set({
id: me.id
}).digest();
},
update: function(ops) {
var me = this;
var info = me.listToTree(ops.list, ops.id, ops.pId);
me.$info = info;
me.owner.mountVframe('tree_' + me.id, '@./branch', {
id: ops.id || 'id',
pId: ops.pId || 'pId',
text: (ops.text || 'text')
});
//aa
//bb
},
getList: function() {
return this.$info.list;
}
});
/*
author:xinglie.lkf@taobao.com
*/
'ref@../view-subs.css';
var Magix = require('magix');
module.exports = Magix.View.extend({
tmpl: '@view-subs-banner.html',
render: function() {
var me = this;
setTimeout(me.wrapAsync(function() {
me.data.digest();
}), 10000);
}
});
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
Magix.applyStyle('@../demos/editable.css');
var Clipboard = require('@coms/clipboard/index');
var Dialog = require('@coms/dialog/index');
module.exports = Magix.View.extend({
tmpl: '@clipboard.html',
render: function() {
var me = this;
me.data.set({
id: me.id
}).digest();
},
'copy<click>': function(e) {
var me = this;
var r = Clipboard.copy('cb' + e.params.id + '_' + me.id);
Dialog.alert(me, r ? '成功' : '失败');
me.clearSelection();
}
});
module.exports = Magix.View.merge({
/**
* 适配图片
* @param {String} url 图片地址
* @param {String} size 类似'320x320'形式的字符串，支持'320x320xc'裁切
* @param {Integer} q 质量
* @return {String} 适配后的图片地址
*/
adaptImg: function(url, size, q) {
//url=url.replace(/_\d+x\d+/g,'');
//(_(\d+x\d+)(q\d+).jpg)?(_.webp)?
var tail = '';
if (size || q) {
tail += '_';
if (size) tail += size;
if (q) tail += 'q' + q;
//tail += '.jpg';
}
if (Webp) {
tail += '_.webp';
}
return url + tail;
},
/**
* 添加延迟加载的图片
* @param {String} zoneId 区域
* @param {Integer} [threshold]
*/
addLazyImg: function(zoneId, threshold) {
var zone = Zepto('#' + zoneId);
var imgs = zone.find('img[data-src]');
Lazyload.add(zoneId, imgs, threshold, ProcessImage);
},
/**
* 添加延迟运行
* @param {String} zoneId
* @param {Function} callback
* @param {Integer} threshold
*/
addLazyRun: function(zoneId, callback, threshold) {
Lazyload.add(zoneId, LazyRunFlag, threshold, callback);
},
/**
* 执行某个区域
* @param {String} zone
*/
loadLazy: function(zone) {
Lazyload.load(zone);
}
});
module.exports = Magix.View.extend({
tmpl: '@api-monitor.html',
render: function() {
var me = this;
me.data.digest();
},
'request<click>': function(e) {
var type = e.params.type;
var name = '';
if (type == 1) {
name = 'list';
}
if (type == 2) {
name = 'list1';
}
if (type == 404) {
name = 'list404';
}
this.request().all(name, function(err, bag) {
console.log(err, bag);
});
},
'clear<click>': function(e) {
var type = e.params.type;
var name = '';
if (type == 1) {
name = 'list';
}
if (type == 2) {
name = 'list1';
}
Service.clear(name);
}
});
define('app/views/demos/table-settings',['magix','./partials/table-settings-fields'],function(require){
/*Magix ,FieldsSettings */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
var FieldsSettings = require('./partials/table-settings-fields');
Magix.applyStyle('mp-197',".mp-197-wrapper{margin:20px}.mp-197-fr{float:right}");
var Fields = [{
id: 'click',
text: '点击量'
}, {
id: 'ctr',
text: '点击率'
}, {
id: 'uv',
text: 'UV'
}, {
id: 'pv',
text: 'PV'
}, {
id: 'ip',
text: 'IP'
}, {
id: 'iq',
text: 'IQ'
}, {
id: 'ic',
text: 'IC'
}, {
id: 'click1',
text: '点击量1'
}, {
id: 'ctr1',
text: '点击率1'
}, {
id: 'uv1',
text: 'UV1'
}, {
id: 'pv1',
text: 'PV1'
}, {
id: 'ip1',
text: 'IP1'
}, {
id: 'iq1',
text: 'IQ1'
}, {
id: 'ic1',
text: 'IC1'
}];
return Magix.View.extend({
tmpl: "<div class=\"mp-197-wrapper\"><button class=\"btn\" mx-click=\"showSettings()\">设置</button> <button class=\"btn mp-197-fr\" mx-click=\"showSettings({dock:'right'})\">设置</button><table class=\"table\"><thead><tr mx-guid=\"x2411-\u001f\">@1-\u001f</tr></thead><tbody mx-guid=\"x2412-\u001f\">@2-\u001f</tbody><tfoot><tr><td mx-guid=\"x2413-\u001f\" colspan=\"<%=checkedFields.length+1%>\">xxx</td></tr></tfoot></table></div>",
tmplData:[{"guid":1,"keys":["checkedFields"],"tmpl":"<th>名称</th><%for(var i=0;i<checkedFields.length;i++){%><th><%=fieldsMap[checkedFields[i]].text%></th><%}%>","selector":"tr[mx-guid=\"x2411-\u001f\"]"},{"guid":2,"keys":["checkedFields"],"tmpl":"<%for(var i=0;i<200;i++){%><tr><td>测试<%=Math.random()%></td><%for(var j=0;j<checkedFields.length;j++){%><td><%=fieldsMap[checkedFields[j]].text+Math.random()%></td><%}%></tr><%}%>","selector":"tbody[mx-guid=\"x2412-\u001f\"]"},{"keys":["checkedFields"],"selector":"td[mx-guid=\"x2413-\u001f\"]","attrs":[{"n":"colspan","v":"<%=checkedFields.length+1%>"}]}],
ctor: function() {
var me = this;
me.$checkedFields = ['ctr', 'uv', 'ic1', 'pv1'];
},
render: function() {
var me = this;
me.data.set({
fieldsMap: Magix.toMap(Fields, 'id'),
checkedFields: me.$checkedFields
}).digest();
},
'showSettings<click>': function(e) {
var current = e.current;
var me = this;
FieldsSettings.show(me, {
dock: e.params.dock,
fields: Fields,
checkedFields: me.$checkedFields,
ownerNodeId: current.id || (current.id = Magix.guid('ts_')),
picked: function(fields) {
me.$checkedFields = fields;
me.render();
}
});
}
});
});
define('coms/popover/index',['magix','$'],function(require){
/*Magix ,$ */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
var $ = require('$');
Magix.applyStyle('mp-fa3',".mp-fa3-help{cursor:help}.mp-fa3-content{position:absolute;padding:4px;border-radius:4px;background-color:#fff;color:#474747;box-shadow:0 4px 10px 0 rgba(0,0,0,.1),0 3px 5px 0 rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.09098)}.mp-fa3-left:after,.mp-fa3-left:before{border:8px solid transparent;border-left:8px solid #fff;width:0;height:0;position:absolute;top:8px;right:-16px;content:' '}.mp-fa3-left:before{border-width:8px;border-left-color:#888}.mp-fa3-right:after,.mp-fa3-right:before{border:8px solid transparent;border-right:8px solid #fff;width:0;height:0;position:absolute;top:8px;left:-16px;content:' '}.mp-fa3-right:before{border-width:8px;border-right-color:#888}.mp-fa3-top:after,.mp-fa3-top:before{border:8px solid transparent;border-top:8px solid #fff;width:0;height:0;position:absolute;bottom:-16px;left:8px;content:' '}.mp-fa3-top:before{border-width:8px;border-top-color:#888}.mp-fa3-bottom:after,.mp-fa3-bottom:before{border:8px solid transparent;border-bottom:8px solid #fff;width:0;height:0;position:absolute;top:-16px;left:8px;content:' '}.mp-fa3-bottom:before{border-width:8px;border-bottom-color:#888}");
var CSSNames = {"left":"mp-fa3-left","top":"mp-fa3-top","right":"mp-fa3-right","bottom":"mp-fa3-bottom"};
var ArrowBorder = 8;
var Space = 2;
var Position = {
left: function(anchor, content) {
var x = 0;
var y = 0;
var offset = anchor.offset();
x = offset.left - content.outerWidth() - ArrowBorder - Space;
y = offset.top - ArrowBorder;
return {
left: x,
top: y
};
},
right: function(anchor) {
var x = 0;
var y = 0;
var offset = anchor.offset();
x = offset.left + anchor.outerWidth() + ArrowBorder + Space;
y = offset.top - ArrowBorder;
return {
left: x,
top: y
};
},
top: function(anchor, content) {
var x = 0;
var y = 0;
var offset = anchor.offset();
x = offset.left - ArrowBorder;
y = offset.top - content.outerHeight() - ArrowBorder - Space;
return {
left: x,
top: y
};
},
bottom: function(anchor) {
var x = 0;
var y = 0;
var offset = anchor.offset();
x = offset.left - ArrowBorder;
y = offset.top + anchor.outerHeight() + ArrowBorder + Space;
return {
left: x,
top: y
};
}
};
return Magix.View.extend({
tmpl: "<span mx-mouseover=\"over();\" mx-mouseout=\"out()\" class=\"mp-fa3-help\"><%=icon%></span><div class=\"mp-fa3-content <%=cssdock%>\" style=\"width:200px;min-height:50px;display:none\" id=\"content_<%=id%>\" mx-mouseover=\"cover()\" mx-mouseout=\"cout()\"><%=content%></div>",
ctor: function(extra) {
var me = this;
if (!extra.dock) extra.dock = 'bottom';
extra.cssdock = CSSNames[extra.dock];
extra.id = me.id;
me.data.set(extra).digest();
},
hide: function() {
var me = this;
me.$timer = setTimeout(me.wrapAsync(function() {
var content = $('#content_' + me.id);
content.hide();
}), 150);
},
'over<mouseover>': function(e) {
var me = this;
clearTimeout(me.$timer);
var content = $('#content_' + me.id);
var anchor = $(e.current);
content.show();
var pos = Position[me.data.get('dock')](anchor, content);
content.offset(pos);
},
'out<mouseout>': function(e) {
var me = this;
var flag = Magix.inside(e.relatedTarget, e.current);
if (!flag) {
me.hide();
}
},
'cover<mouseover>': function(e) {
var flag = Magix.inside(e.relatedTarget, e.current);
if (!flag) {
clearTimeout(this.$timer);
}
},
'cout<mouseout>': function() {
this.hide();
}
});
});
var Magix = require('magix');
var Data = require('data');
var Zepto = require('zepto');
module.exports = Magix.View.extend({
tmpl: '@menu.html',
ctor: function(extra) {
this.$name = extra.name;
},
render: function() {
var me = this;
var data = Data[me.$name];
var html = me.toHTML(me.tmpl, {
data: data
});
me.setHTML(me.id, html);
},
'to<click>': function(e) {
var node = Zepto('#' + e.params.to);
e.preventDefault();
if (node) {
Zepto(window).scrollTop(node.offset().top - 50);
console.log(node,node.parent());
var cnt = node.parents('.list');
cnt.addClass('twinkling');
console.log(cnt,cnt.hasClass('twinkling'));
setTimeout(function() {
cnt.removeClass('twinkling');
}, 1200);
}
}
});
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
module.exports = Magix.View.extend({
tmpl: '@table.html',
render: function() {
var me = this;
me.data.digest();
},
'drag<mousedown>': function(e) {
var me = this;
me.beginDrag(e, e.current, function(event, pos) {
console.log(event.pageX - pos.pageX, event.pageY - pos.pageY);
var node = me.nodeFromPoint(event.clientX, event.clientY);
console.log(node);
if (node != me.$lastNode) {
me.$lastNode = node;
console.log(node);
}
}, function() {
console.log(arguments);
});
}
});
define('app/views/coms/dialog',['magix','../../../coms/dialog/index'],function(require){
/*Magix ,Dialog */
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
var Dialog = require('../../../coms/dialog/index');
return Magix.View.extend({
tmpl: "<div style=\"margin:50px\"><button mx-click=\"alert()\" class=\"btn btn-size30\" style=\"margin-left:20px\">alert</button> <button mx-click=\"confirm()\" class=\"btn btn-size30\" style=\"margin-left:20px\">confirm</button> <button mx-click=\"view()\" class=\"btn btn-size30\" style=\"margin-left:20px\">view</button></div>",
render: function() {
var me = this;
me.data.digest();
},
'alert<click>':function(){
Dialog.alert(this,'test');
},
'confirm<click>':function(){
Dialog.confirm(this,'test');
},
'view<click>':function(){
Dialog.msgbox(this, {
title:'提示信息view',
view: 'app/views/coms/popover',
dock: 'left',
left: 200,
top: 200,
height: 400,
width: 600
});
}
});
});
/*
author:xinglie.lkf@taobao.com
*/
var Magix = require('magix');
module.exports = Magix.View.extend({
tmpl: '@pagination.html',
render: function() {
var me = this;
me.data.set({
id: me.id
}).digest();
me.pagination('p1_' + me.id, {
size: 10,
total: 300,
index: 9,
step:11,
picked:function(e){
console.log(e);
}
});
}
});