CeramicProject/newyt/Framework_File/ui-layout-0.0.0/ui-layout.js

139 lines
5.4 KiB
JavaScript

'use strict';
angular.module('ui.layout', []).controller('uiLayoutCtrl', [
'$scope',
'$attrs',
'$element',
function uiLayoutCtrl($scope, $attrs, $element) {
return {
opts: angular.extend({}, $scope.$eval($attrs.uiLayout), $scope.$eval($attrs.options)),
element: $element
};
}
]).directive('uiLayout', [
'$parse',
function ($parse) {
var splitBarElem_htmlTemplate = '<div class="stretch ui-splitbar"></div>';
return {
restrict: 'AE',
compile: function compile(tElement, tAttrs) {
var _i, _childens = tElement.children(), _child_len = _childens.length;
var opts = angular.extend({}, $parse(tAttrs.uiLayout)(), $parse(tAttrs.options)());
var isUsingColumnFlow = opts.flow === 'column';
tElement.addClass('stretch').addClass('ui-layout-' + (opts.flow || 'row'));
for (_i = 0; _i < _child_len; ++_i) {
angular.element(_childens[_i]).addClass('stretch');
}
if (_child_len > 1) {
var flowProperty = isUsingColumnFlow ? 'left' : 'top';
var oppositeFlowProperty = isUsingColumnFlow ? 'right' : 'bottom';
var step = 100 / _child_len;
for (_i = 0; _i < _child_len; ++_i) {
if(_i==0)
{
/*var area = angular.element(_childens[_i]).css(flowProperty, step * _i + '%').css(oppositeFlowProperty, 100 - step * (_i + 1) + '%');
if (_i < _child_len - 1) {
var bar = angular.element(splitBarElem_htmlTemplate).css(flowProperty, step * (_i + 1) + '%');
area.after(bar);
}*/
var area = angular.element(_childens[_i]).css(flowProperty, '0%').css(oppositeFlowProperty, '90%');
if (_i < _child_len - 1) {
var bar = angular.element(splitBarElem_htmlTemplate).css(flowProperty, '10%');
area.after(bar);
}
}
else
{
var area = angular.element(_childens[_i]).css(flowProperty, '10%').css(oppositeFlowProperty, '0%');
if (_i < _child_len - 1) {
var bar = angular.element(splitBarElem_htmlTemplate).css(flowProperty, '100%');
area.after(bar);
}
}
}
}
},
controller: 'uiLayoutCtrl'
};
}
]).directive('uiSplitbar', function () {
var htmlElement = angular.element(document.body.parentElement);
return {
require: '^uiLayout',
restrict: 'EAC',
link: function (scope, iElement, iAttrs, parentLayout) {
var animationFrameRequested, lastX;
var _cache = {};
var isUsingColumnFlow = parentLayout.opts.flow === 'column';
var mouseProperty = isUsingColumnFlow ? 'clientX' : 'clientY';
var flowProperty = isUsingColumnFlow ? 'left' : 'top';
var oppositeFlowProperty = isUsingColumnFlow ? 'right' : 'bottom';
var sizeProperty = isUsingColumnFlow ? 'width' : 'height';
var barElm = iElement[0];
function _cached_layout_values() {
var layout_bb = parentLayout.element[0].getBoundingClientRect();
var bar_bb = barElm.getBoundingClientRect();
_cache.time = +new Date();
_cache.barSize = bar_bb[sizeProperty];
_cache.layoutSize = layout_bb[sizeProperty];
_cache.layoutOrigine = layout_bb[flowProperty];
}
function _draw() {
var the_pos = (lastX - _cache.layoutOrigine) / _cache.layoutSize * 100;
the_pos = Math.min(the_pos, 100 - _cache.barSize / _cache.layoutSize * 100);
the_pos = Math.max(the_pos, parseInt(barElm.previousElementSibling.style[flowProperty], 10));
if (barElm.nextElementSibling.nextElementSibling) {
the_pos = Math.min(the_pos, parseInt(barElm.nextElementSibling.nextElementSibling.style[flowProperty], 10));
}
barElm.style[flowProperty] = barElm.nextElementSibling.style[flowProperty] = the_pos + '%';
barElm.previousElementSibling.style[oppositeFlowProperty] = 100 - the_pos + '%';
animationFrameRequested = null;
}
function _resize(mouseEvent) {
lastX = mouseEvent[mouseProperty] || mouseEvent.originalEvent[mouseProperty];
if (animationFrameRequested) {
window.cancelAnimationFrame(animationFrameRequested);
}
if (!_cache.time || +new Date() > _cache.time + 1000) {
_cached_layout_values();
}
animationFrameRequested = window.requestAnimationFrame(_draw);
}
iElement.on('mousedown touchstart', function (e) {
e.preventDefault();
e.stopPropagation();
htmlElement.on('mousemove touchmove', _resize);
return false;
});
htmlElement.on('mouseup touchend', function () {
htmlElement.off('mousemove touchmove');
});
}
};
});
var lastTime = 0;
var vendors = [
'ms',
'moz',
'webkit',
'o'
];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}