Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@RubyLouvre
RubyLouvre committed May 14, 2013
1 parent 2d11e20 commit 6bf46ee
Show file tree
Hide file tree
Showing 7 changed files with 200 additions and 49 deletions.
22 changes: 14 additions & 8 deletions avalon.button.js
View file
Expand Up @@ -26,7 +26,6 @@
var activeClass = !toggleButton ? "ui-state-active" : "";
if (toggleButton) { //偷天换日，用label代替原来的input[type=checkbox]，input[type=checkbox]
var label = document.createElement("label");
label.htmlFor = element.id;
checkbox = element;
label.innerHTML = options.label || checkbox.value;
checkbox.parentNode.insertBefore(label, checkbox.nextSibling);
Expand All @@ -38,8 +37,7 @@
fragment.appendChild(el);
}
$element.addClass("ui-button ui-widget ui-state-default");
$element.attr("ms-hover", "ui-state-hover");
$element.attr("ms-class-ui-state-disabled", "disabled");

element.title = title;

//如果使用了buttonset
Expand Down Expand Up @@ -82,21 +80,20 @@
}

$element.bind("mousedown", function(e) {
if (model.disbaled) {
if (model.disabled) {
return false;
}
$element.addClass(activeClass);
});
$element.bind("mouseup", function(e) {
if (model.disbaled) {
if (model.disabled) {
return false;
}
$element.removeClass(activeClass);
});
if (isCheckbox) {
$element.toggleClass("ui-state-active", checkbox.checked);
$element.bind("click", function() {
$element.toggleClass("ui-state-active", checkbox.checked);
model.checked = !model.checked
});
}
if (isRadio) {
Expand All @@ -108,10 +105,10 @@
model = avalon.define(id, function(vm) {
vm.disabled = options.disabled;
vm.radioActived = 0;
vm.checked = !! (checkbox || {}).checked;
vm.$radios = [];
});
}

if (isRadio) {
element.parentNode.$radio = model;
model.$radios.push(element);
Expand All @@ -120,10 +117,19 @@
if (element.tagName !== "INPUT") {
element.appendChild(fragment);
}
element.setAttribute("ms-hover", "ui-state-hover");
element.setAttribute("ms-class-ui-state-disabled", "disabled");
if (isCheckbox) {
element.setAttribute("ms-class-ui-state-active", "checked");
checkbox.setAttribute("ms-checked", "checked");
}
if (isRadio) {
element.setAttribute("ms-class-ui-state-active", "radioActived == " + radioIndex);
element.setAttribute("ms-checked", "radioActived == " + radioIndex);
}
if (toggleButton) {
avalon.scan(checkbox, model);
}
avalon.scan(element, model);
});
};
Expand Down
194 changes: 168 additions & 26 deletions avalon.drag.js
View file
@@ -1,10 +1,10 @@
(function(avalon) {
var root = avalon(document.documentElement),
//支持触模设备
supportTouch = "createTouch" in document || 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch,
onstart = supportTouch ? "touchstart" : "mousedown",
ondrag = supportTouch ? "touchmove" : "mousemove",
onend = supportTouch ? "touchend" : "mouseup";
//支持触模设备
supportTouch = "createTouch" in document || 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch,
onstart = supportTouch ? "touchstart" : "mousedown",
ondrag = supportTouch ? "touchmove" : "mousemove",
onend = supportTouch ? "touchend" : "mouseup";
//在元素标签上添加ms-drag="dragcallback" 就能用了，dragcallback为你在VM在定义的函数，它会在拖动时执行它
//更在制定请在同一元素上设置data-*来制定，其中
//data-axis="x" //值可以为x, y, xy，"", 没有设置值默认为xy, x为水平移移动，y为垂直移动, xy任意移动，""不给移
Expand All @@ -13,6 +13,31 @@
//data-dragstart="callback", 开始拖动时执行的回调 callback为VM的某个函数
//data-dragend="callback", 结束拖动时执行的回调
//所有回调都有两个参数，event与data，data包含你所有data=*属性，与top, left, range, el, $el等属性

scrollParent = function(node) {
var pos = node.css("position"), parent;
if ((window.VBArray && (/(static|relative)/).test(pos)) || (/absolute/).test(pos)) {
parent = node[0];
while (parent = parent.parentNode) {
var temp = avalon(parent);
var overflow = temp.css("overflow") + temp.css("overflow-y") + temp.css("overflow-x");
if (/(relative|absolute|fixed)/.test(temp.css("position")) && /(auto|scroll)/.test(overflow)) {
break;
}
}
} else {
parent = node[0];
while (parent = parent.parentNode) {
var temp = avalon(parent);
var overflow = temp.css("overflow") + temp.css("overflow-y") + temp.css("overflow-x");
if (/(auto|scroll)/.test(overflow)) {
break;
}
}
}
parent = parent !== node[0] ? parent : null;
return(/fixed/).test(pos) || !parent ? document : parent;
};
var draggable = avalon.bindingHandlers.drag = function(meta, scopes) {
var el = meta.element;
var $el = avalon(el);
Expand All @@ -25,7 +50,7 @@

function get(name) {
var ret;
for (var i = 0, scope; scope = scopes[i++];) {
for (var i = 0, scope; scope = scopes[i++]; ) {
if (scope.hasOwnProperty(name)) {
ret = scope[name];
break;
Expand All @@ -39,13 +64,28 @@
data.movable = data.movable !== false;
data.el = el;
data.$el = $el;
function toFloat(a) {
return parseFloat(a) || 0;
}
$el.bind(onstart, function(event) {
setDragRange(data);
var offset = $el.offset();
data.startX = event.pageX;
data.startY = event.pageY;
data.originalX = offset.left;
data.originalY = offset.top;
data.startX = event.clientX;
data.startY = event.clientY;
if (/window|document/i.test(data.containment)) {
var offset = $el.offset();
$el.css("top", offset.top);
$el.css("left", offset.left);
}
data.originalX = toFloat($el.css("left"));
data.originalY = toFloat($el.css("top"));
data.scroll = data.scroll === false ? false : true
if (data.scroll) {

data.scrollSensitivity = data.scrollSensitivity >= 0 ? data.scrollSensitivity : 20;
data.scrollSpeed = data.scrollSensitivity >= 0 ? data.scrollSpeed : 20;
data.scrollParent = scrollParent(data.$el);
data.overflowOffset = avalon(data.scrollParent).offset();
}
if (el.setCapture) { //设置鼠标捕获
el.setCapture();
} else if (window.captureEvents) {
Expand All @@ -62,24 +102,25 @@
function drag(event) {
draggable.queue.forEach(function(data) {
//当前元素移动了多少距离
data.deltaX = event.pageX - data.startX;
data.deltaY = event.pageY - data.startY;
data.deltaX = event.clientX - data.startX;
data.deltaY = event.clientY - data.startY;
//现在的坐标
data.offsetX = data.deltaX + data.originalX;
data.offsetY = data.deltaY + data.originalY;
if (data.axis.indexOf("x") !== -1) { //如果没有锁定X轴left,top,right,bottom
var left = data.range ? Math.min(data.range[2], Math.max(data.range[0], data.offsetX)) : data.offsetX;
if (data.movable) data.el.style.left = left + "px";
if (data.movable)
data.el.style.left = left + "px";
data.left = left;
}
if (data.axis.indexOf("y") !== -1) { //如果没有锁定Y轴
var top = data.range ? Math.min(data.range[3], Math.max(data.range[1], data.offsetY)) : data.offsetY;
if (data.movable) {
console.log("xxxxxxx")
data.el.style.top = top + "px";
}
data.top = top;
}
// setDragScroll(event, data)
data.drag.call(data.el, event, data);
});
}
Expand All @@ -98,7 +139,34 @@
}
draggable.underway.push(drag);
draggable.dropscene.push(dragEnd);

function toFloat(a) {
return parseFloat(a) || 0;
}
avalon.fn.position = function() { //取得元素相对于其offsetParent的坐标，实现拖动的关键
var node = this[0], parentOffset = {//默认的offsetParent相对于视窗的距离
top: 0,
left: 0
};
if (!node || node.nodeType !== 1) {
return offsetParent;
}
//fixed 元素是相对于window
if (this.css("position") === "fixed") {
var offset = node.getBoundingClientRect();
} else {
offset = this.offset(); //得到元素相对于视窗的距离（我们只有它的top与left）
var offsetParent = avalon(node.offsetParent);
if (/body|html/i.test(node.offsetParent.tagName)) {
parentOffset = offsetParent.offset(); //得到它的offsetParent相对于视窗的距离
}
parentOffset.top += toFloat(offsetParent.css("borderTopWidth"));
parentOffset.left += toFloat(offsetParent.css("borderLeftWidth"));
}
return {
top: offset.top - parentOffset.top - toFloat(this.css("marginTop")),
left: offset.left - parentOffset.left - toFloat(this.css("marginLeft"))
};
};
function setDragRange(data) {
var range = data.containment; //处理区域鬼拽,确认可活动的范围
var node = data.el;
Expand All @@ -114,34 +182,108 @@
if (isDoc) {
data.range = [0, 0];
} else {
data.range = "pageXOffset" in window ? [window.pageXOffset, window.pageXOffset] : [root.scrollLeft, root.scrollTop];
data.range = "pageXOffset" in window ? [window.pageXOffset, window.pageYOffset] :
[root.scrollLeft || document.body.scrollLeft, root.scrollTop || document.body.scrollTop];
}
data.range[2] = data.range[0] + avalon(isDoc ? document : window).width();
data.range[3] = data.range[1] + avalon(isDoc ? document : window).height();
} else { //如果是元素节点(比如从parent参数转换地来),或者是CSS表达式,或者是mass对象
var c = avalon(range);
var offset = c.offset();
data.range = [offset.left + parseFloat(c.css("borderLeftWidth")), offset.top + parseFloat(c.css("borderTopWidth"))];
data.range[2] = data.range[0] + range.offsetWidth;
data.range[3] = data.range[1] + range.offsetHeight;
data.range = [0, 0, range.clientWidth, range.clientHeight]
if (range == node.offsetParent) {
return data.range;
} else {
var p = avalon(range).offset();//parentNode
var o = avalon(node.offsetParent).offset();//offsetParent
var fixX = p.left - o.left;
var fixY = p.top - o.top;
data.range[0] += fixX;
data.range[2] += fixX;
data.range[1] += fixY;
data.range[3] += fixY;
}
}
}
if (Array.isArray(data.range)) {
data.range[2] = data.range[2] - node.clientWidth;
data.range[3] = data.range[3] - node.clientHeight;
}

}
}
// function setDragScroll(event, data, docLeft, docTop) {
// if (data.scroll) {
// if (data.scrollParent != document && data.scrollParent.tagName != 'HTML') {
// if (data.axis.indexOf("x") !== -1) {
// if ((data.overflowOffset.left + data.scrollParent.offsetWidth) - event.pageX < data.scrollSensitivity) {
// data.scrollParent.scrollLeft = data.scrollParent.scrollLeft + data.scrollSpeed;
// } else if (event.pageX - data.overflowOffset.left < data.scrollSensitivity) {
// data.scrollParent.scrollLeft = data.scrollParent.scrollLeft - data.scrollSpeed;
// }
// }
// if (data.axis.indexOf("y") !== -1) {
// if ((data.overflowOffset.top + data.scrollParent.offsetHeight) - event.pageY < data.scrollSensitivity) {
// data.scrollParent.scrollTop = data.scrollParent.scrollTop + data.scrollSpeed;
// } else if (event.pageY - data.overflowOffset.top < data.scrollSensitivity) {
// data.scrollParent.scrollTop = data.scrollParent.scrollTop - data.scrollSpeed;
// }
// }
//
// } else {
// docLeft = docLeft || root.scrollTop();
// docTop = docTop || root.scrollTop();
// if (data.axis.indexOf("x") !== -1) {
// if (event.pageX - docLeft < data.scrollSensitivity) {
// root.scrollLeft(docLeft - data.scrollSpeed);
// } else if (avalon(window).width() - event.pageX + docLeft < data.scrollSensitivity) {
// root.scrollLeft(docLeft + data.scrollSpeed);
// }
// }
// if (data.axis.indexOf("y") !== -1) {
// if (event.pageY - docTop < data.scrollSensitivity) {
// root.scrollTop(docTop - data.scrollSpeed);
// } else if (avalon(window).height() - event.pageY + docTop < data.scrollSensitivity) {
// root.scrollTop(docTop + data.scrollSpeed);
// }
// }
// }
// }
// }
function getWindow(elem) {//只对window与document取值
return elem.window && elem.document ?
elem :
elem.nodeType === 9 ?
elem.defaultView || elem.parentWindow :
false;
}
"scrollLeft_pageXOffset,scrollTop_pageYOffset".replace(/(\w+)_(\w+)/g, function(_, method, prop) {
avalon.fn[method] = function(val) {
var node = this[0] || {}, win = getWindow(node), top = method === "scrollTop";
if (!arguments.length) {
return win ? (prop in win) ? win[prop] : document.documentElement[method] : node[method];
} else {
if (win) {
win.scrollTo(!top ? val : avalon(win).scrollLeft(), top ? val : avalon(win).scrollTop());
} else {
node[method] = val;
}
}
};
});

//使用事件代理提高性能
root.bind(ondrag, function(e) {
if(window.getSelection){
if (window.getSelection) {
window.getSelection().removeAllRanges();
}else{
} else {
document.selection.empty();
}
for (var i = 0, fn; fn = draggable.underway[i++];) {
for (var i = 0, fn; fn = draggable.underway[i++]; ) {
var ret = fn(e);
}
return ret;
});
root.bind(onend, function(e) {
for (var i = 0, fn; fn = draggable.dropscene[i++];) {
for (var i = 0, fn; fn = draggable.dropscene[i++]; ) {
var ret = fn(e);
}
return ret;
Expand Down
6 changes: 3 additions & 3 deletions avalon.slider.js
View file
Expand Up @@ -63,7 +63,7 @@
'</div>';
domParser.innerHTML = sliderHTML;
var slider = domParser.firstChild;
var $slider = avalon(slider)
var $slider = avalon(slider);
var a = slider.getElementsByTagName("a"), handlers = [];
for (var i = 0, el; el = a[i++]; ) {
handlers.push(el);
Expand Down Expand Up @@ -107,8 +107,8 @@
data.$el.removeClass("ui-state-active");
};
vm.drag = function(event, data) {
var prop = isHorizontal ? "left" : "top"
var pixelMouse = Math.abs($slider.offset()[prop] - data[prop])
var prop = isHorizontal ? "left" : "top";
var pixelMouse = data[prop]
//如果是垂直时,往上拖,值就越大
var percent = (pixelMouse / pixelTotal); //求出当前handler在slider的位置

Expand Down
6 changes: 3 additions & 3 deletions avalon.tabs.js
View file
Expand Up @@ -38,11 +38,11 @@
' ms-class-ui-tabs-active="active == $index"' +
' ms-class-ui-state-active="active == $index"' +
' ms-' + options.event + '="activate"' +
' ms-hover="ui-state-hover"' +
' >{{tab|html}}<span class="ui-icon ui-icon-close" ms-if="true" ms-click="remove"></span></li></ul>';
' ms-hover="ui-state-hover"' +// float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;这样jquery ui没有封装进去
' >{{tab|html}}<span class="ui-icon ui-icon-close" style="float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;" ms-if="true" ms-click="remove"></span></li></ul>';
var panels = '<div ms-each-panel="tabpanels" ><div class="ui-tabs-panel ui-widget-content"' +
' ms-class-ui-corner-bottom="!bottom"' +
' ms-visible="active == $index" >{{panel|html}}</div></div>'
' ms-visible="active == $index" >{{panel|html}}</div></div>';
var model = avalon.define(id, function(vm) {
vm.active = options.active;
vm.collapsible = options.collapsible;
Expand Down

0 comments on commit 6bf46ee

Please sign in to comment.