+++ /dev/null
-//
-// Copyright Kamil Pękala http://github.com/kamilkp
-// Angular Virtual Scroll Repeat v1.0.0-rc5 2014/08/01
-//
-
-(function(window, angular){
- 'use strict';
- /* jshint eqnull:true */
- /* jshint -W038 */
-
- // DESCRIPTION:
- // vsRepeat directive stands for Virtual Scroll Repeat. It turns a standard ngRepeated set of elements in a scrollable container
- // into a component, where the user thinks he has all the elements rendered and all he needs to do is scroll (without any kind of
- // pagination - which most users loath) and at the same time the browser isn't overloaded by that many elements/angular bindings etc.
- // The directive renders only so many elements that can fit into current container's clientHeight/clientWidth.
-
- // LIMITATIONS:
- // - current version only supports an Array as a right-hand-side object for ngRepeat
- // - all rendered elements must have the same height/width or the sizes of the elements must be known up front
-
- // USAGE:
- // In order to use the vsRepeat directive you need to place a vs-repeat attribute on a direct parent of an element with ng-repeat
- // example:
- // <div vs-repeat>
- // <div ng-repeat="item in someArray">
- // <!-- content -->
- // </div>
- // </div>
- //
- // You can also measure the single element's height/width (including all paddings and margins), and then speficy it as a value
- // of the attribute 'vs-repeat'. This can be used if one wants to override the automatically computed element size.
- // example:
- // <div vs-repeat="50"> <!-- the specified element height is 50px -->
- // <div ng-repeat="item in someArray">
- // <!-- content -->
- // </div>
- // </div>
- //
- // IMPORTANT!
- //
- // - the vsRepeat directive must be applied to a direct parent of an element with ngRepeat
- // - the value of vsRepeat attribute is the single element's height/width measured in pixels. If none provided, the directive
- // will compute it automatically
-
- // OPTIONAL PARAMETERS (attributes):
- // vs-scroll-parent="selector" - selector to the scrollable container. The directive will look for a closest parent matching
- // he given selector (defaults to the current element)
- // vs-horizontal - stack repeated elements horizontally instead of vertically
- // vs-offset-before="value" - top/left offset in pixels (defaults to 0)
- // vs-offset-after="value" - bottom/right offset in pixels (defaults to 0)
- // vs-excess="value" - an integer number representing the number of elements to be rendered outside of the current container's viewport
- // (defaults to 2)
- // vs-size-property - a property name of the items in collection that is a number denoting the element size (in pixels)
- // vs-autoresize - use this attribute without vs-size-property and without specifying element's size. The automatically computed element style will
- // readjust upon window resize if the size is dependable on the viewport size
-
- // EVENTS:
- // - 'vsRepeatTrigger' - an event the directive listens for to manually trigger reinitialization
- // - 'vsRepeatReinitialized' - an event the directive emits upon reinitialization done
-
- var isMacOS = navigator.appVersion.indexOf('Mac') != -1,
- wheelEventName = typeof window.onwheel !== 'undefined' ? 'wheel' : typeof window.onmousewheel !== 'undefined' ? 'mousewheel' : 'DOMMouseScroll',
- dde = document.documentElement,
- matchingFunction = dde.matches ? 'matches' :
- dde.matchesSelector ? 'matchesSelector' :
- dde.webkitMatches ? 'webkitMatches' :
- dde.webkitMatchesSelector ? 'webkitMatchesSelector' :
- dde.msMatches ? 'msMatches' :
- dde.msMatchesSelector ? 'msMatchesSelector' :
- dde.mozMatches ? 'mozMatches' :
- dde.mozMatchesSelector ? 'mozMatchesSelector' : null;
-
- var closestElement = angular.element.prototype.closest || function (selector){
- var el = this[0].parentNode;
- while(el !== document.documentElement && el != null && !el[matchingFunction](selector)){
- el = el.parentNode;
- }
-
- if(el && el[matchingFunction](selector))
- return angular.element(el);
- else
- return angular.element();
- };
-
- angular.module('vs-repeat', []).directive('vsRepeat', ['$compile', function($compile){
- return {
- restrict: 'A',
- scope: true,
- require: '?^vsRepeat',
- controller: ['$scope', function($scope){
- this.$scrollParent = $scope.$scrollParent;
- this.$fillElement = $scope.$fillElement;
- }],
- compile: function($element, $attrs){
- var ngRepeatChild = $element.children().eq(0),
- ngRepeatExpression = ngRepeatChild.attr('ng-repeat'),
- childCloneHtml = ngRepeatChild[0].outerHTML,
- expressionMatches = /^\s*(\S+)\s+in\s+([\S\s]+?)(track\s+by\s+\S+)?$/.exec(ngRepeatExpression),
- lhs = expressionMatches[1],
- rhs = expressionMatches[2],
- rhsSuffix = expressionMatches[3],
- collectionName = '$vs_collection',
- attributesDictionary = {
- 'vsRepeat': 'elementSize',
- 'vsOffsetBefore': 'offsetBefore',
- 'vsOffsetAfter': 'offsetAfter',
- 'vsExcess': 'excess'
- };
-
- $element.empty();
- if(!window.getComputedStyle || window.getComputedStyle($element[0]).position !== 'absolute')
- $element.css('position', 'relative');
- return {
- pre: function($scope, $element, $attrs, $ctrl){
- var childClone = angular.element(childCloneHtml),
- originalCollection = [],
- originalLength,
- $$horizontal = typeof $attrs.vsHorizontal !== "undefined",
- $wheelHelper,
- $fillElement,
- autoSize = !$attrs.vsRepeat,
- sizesPropertyExists = !!$attrs.vsSizeProperty,
- $scrollParent = $attrs.vsScrollParent ? closestElement.call($element, $attrs.vsScrollParent) : $element,
- positioningPropertyTransform = $$horizontal ? 'translateX' : 'translateY',
- positioningProperty = $$horizontal ? 'left' : 'top',
-
- clientSize = $$horizontal ? 'clientWidth' : 'clientHeight',
- offsetSize = $$horizontal ? 'offsetWidth' : 'offsetHeight',
- scrollPos = $$horizontal ? 'scrollLeft' : 'scrollTop';
-
- if($scrollParent.length === 0) throw 'Specified scroll parent selector did not match any element';
- $scope.$scrollParent = $scrollParent;
-
- if(sizesPropertyExists) $scope.sizesCumulative = [];
-
- //initial defaults
- $scope.elementSize = $scrollParent[0][clientSize] || 50;
- $scope.offsetBefore = 0;
- $scope.offsetAfter = 0;
- $scope.excess = 2;
-
- Object.keys(attributesDictionary).forEach(function(key){
- if($attrs[key]){
- $attrs.$observe(key, function(value){
- $scope[attributesDictionary[key]] = +value;
- reinitialize();
- });
- }
- });
-
-
- $scope.$watchCollection(rhs, function(coll){
- originalCollection = coll || [];
- refresh();
- });
-
- function refresh(){
- if(!originalCollection || originalCollection.length < 1){
- $scope[collectionName] = [];
- originalLength = 0;
- resizeFillElement(0);
- $scope.sizesCumulative = [0];
- return;
- }
- else{
- originalLength = originalCollection.length;
- if(sizesPropertyExists){
- $scope.sizes = originalCollection.map(function(item){
- return item[$attrs.vsSizeProperty];
- });
- var sum = 0;
- $scope.sizesCumulative = $scope.sizes.map(function(size){
- var res = sum;
- sum += size;
- return res;
- });
- $scope.sizesCumulative.push(sum);
- }
- setAutoSize();
- }
-
- reinitialize();
- }
-
- function setAutoSize(){
- if(autoSize){
- $scope.$$postDigest(function(){
- if($element[0].offsetHeight || $element[0].offsetWidth){ // element is visible
- var children = $element.children(),
- i = 0;
- while(i < children.length){
- if(children[i].attributes['ng-repeat'] != null){
- if(children[i][offsetSize]){
- $scope.elementSize = children[i][offsetSize];
- reinitialize();
- autoSize = false;
- if($scope.$root && !$scope.$root.$$phase)
- $scope.$apply();
- }
- break;
- }
- i++;
- }
- }
- else{
- var dereg = $scope.$watch(function(){
- if($element[0].offsetHeight || $element[0].offsetWidth){
- dereg();
- setAutoSize();
- }
- });
- }
- });
- }
- }
-
- childClone.attr('ng-repeat', lhs + ' in ' + collectionName + (rhsSuffix ? ' ' + rhsSuffix : ''))
- .addClass('vs-repeat-repeated-element');
-
- var offsetCalculationString = sizesPropertyExists ?
- '(sizesCumulative[$index + startIndex] + offsetBefore)' :
- '(($index + startIndex) * elementSize + offsetBefore)';
-
- if(typeof document.documentElement.style.transform !== "undefined"){ // browser supports transform css property
- childClone.attr('ng-style', '{ "transform": "' + positioningPropertyTransform + '(" + ' + offsetCalculationString + ' + "px)"}');
- }
- else if(typeof document.documentElement.style.webkitTransform !== "undefined"){ // browser supports -webkit-transform css property
- childClone.attr('ng-style', '{ "-webkit-transform": "' + positioningPropertyTransform + '(" + ' + offsetCalculationString + ' + "px)"}');
- }
- else{
- childClone.attr('ng-style', '{' + positioningProperty + ': ' + offsetCalculationString + ' + "px"}');
- }
-
- $compile(childClone)($scope);
- $element.append(childClone);
-
- $fillElement = angular.element('<div class="vs-repeat-fill-element"></div>')
- .css({
- 'position':'relative',
- 'min-height': '100%',
- 'min-width': '100%'
- });
- $element.append($fillElement);
- $compile($fillElement)($scope);
- $scope.$fillElement = $fillElement;
-
- var _prevMouse = {};
- if(isMacOS){
- $wheelHelper = angular.element('<div class="vs-repeat-wheel-helper"></div>')
- .on(wheelEventName, function(e){
- e.preventDefault();
- e.stopPropagation();
- if(e.originalEvent) e = e.originalEvent;
- $scrollParent[0].scrollLeft += (e.deltaX || -e.wheelDeltaX);
- $scrollParent[0].scrollTop += (e.deltaY || -e.wheelDeltaY);
- }).on('mousemove', function(e){
- if(_prevMouse.x !== e.clientX || _prevMouse.y !== e.clientY)
- angular.element(this).css('display', 'none');
- _prevMouse = {
- x: e.clientX,
- y: e.clientY
- };
- }).css('display', 'none');
- $fillElement.append($wheelHelper);
- }
-
- $scope.startIndex = 0;
- $scope.endIndex = 0;
-
- $scrollParent.on('scroll', function scrollHandler(e){
- if(updateInnerCollection())
- $scope.$apply();
- });
-
- if(isMacOS){
- $scrollParent.on(wheelEventName, wheelHandler);
- }
- function wheelHandler(e){
- var elem = e.currentTarget;
- if(elem.scrollWidth > elem.clientWidth || elem.scrollHeight > elem.clientHeight)
- $wheelHelper.css('display', 'block');
- }
-
- function onWindowResize(){
- if(typeof $attrs.vsAutoresize !== 'undefined'){
- autoSize = true;
- setAutoSize();
- if($scope.$root && !$scope.$root.$$phase)
- $scope.$apply();
- }
- if(updateInnerCollection())
- $scope.$apply();
- }
-
- angular.element(window).on('resize', onWindowResize);
- $scope.$on('$destroy', function(){
- angular.element(window).off('resize', onWindowResize);
- });
-
- $scope.$on('vsRepeatTrigger', refresh);
- $scope.$on('vsRepeatResize', function(){
- autoSize = true;
- setAutoSize();
- });
-
- var _prevStartIndex,
- _prevEndIndex;
- function reinitialize(){
- _prevStartIndex = void 0;
- _prevEndIndex = void 0;
- updateInnerCollection();
- resizeFillElement(sizesPropertyExists ?
- $scope.sizesCumulative[originalLength] :
- $scope.elementSize*originalLength
- );
- $scope.$emit('vsRepeatReinitialized');
- }
-
- function resizeFillElement(size){
- if($$horizontal){
- $fillElement.css({
- 'width': $scope.offsetBefore + size + $scope.offsetAfter + 'px',
- 'height': '100%'
- });
- if($ctrl && $ctrl.$fillElement){
- var referenceElement = $ctrl.$fillElement[0].parentNode.querySelector('[ng-repeat]');
- if(referenceElement)
- $ctrl.$fillElement.css({
- 'width': referenceElement.scrollWidth + 'px'
- });
- }
- }
- else{
- $fillElement.css({
- 'height': $scope.offsetBefore + size + $scope.offsetAfter + 'px',
- 'width': '100%'
- });
- if($ctrl && $ctrl.$fillElement){
- referenceElement = $ctrl.$fillElement[0].parentNode.querySelector('[ng-repeat]');
- if(referenceElement)
- $ctrl.$fillElement.css({
- 'height': referenceElement.scrollHeight + 'px'
- });
- }
- }
- }
-
- var _prevClientSize;
- function reinitOnClientHeightChange(){
- var ch = $scrollParent[0][clientSize];
- if(ch !== _prevClientSize){
- reinitialize();
- if($scope.$root && !$scope.$root.$$phase)
- $scope.$apply();
- }
- _prevClientSize = ch;
- }
-
- $scope.$watch(function(){
- if(typeof window.requestAnimationFrame === "function")
- window.requestAnimationFrame(reinitOnClientHeightChange);
- else
- reinitOnClientHeightChange();
- });
-
- function updateInnerCollection(){
- if(sizesPropertyExists){
- $scope.startIndex = 0;
- while($scope.sizesCumulative[$scope.startIndex] < $scrollParent[0][scrollPos] - $scope.offsetBefore)
- $scope.startIndex++;
- if($scope.startIndex > 0) $scope.startIndex--;
-
- $scope.endIndex = $scope.startIndex;
- while($scope.sizesCumulative[$scope.endIndex] < $scrollParent[0][scrollPos] - $scope.offsetBefore + $scrollParent[0][clientSize])
- $scope.endIndex++;
- }
- else{
- $scope.startIndex = Math.max(
- Math.floor(
- ($scrollParent[0][scrollPos] - $scope.offsetBefore) / $scope.elementSize + $scope.excess/2
- ) - $scope.excess,
- 0
- );
-
- $scope.endIndex = Math.min(
- $scope.startIndex + Math.ceil(
- $scrollParent[0][clientSize] / $scope.elementSize
- ) + $scope.excess,
- originalLength
- );
- }
-
-
- var digestRequired = $scope.startIndex !== _prevStartIndex || $scope.endIndex !== _prevEndIndex;
-
- if(digestRequired)
- $scope[collectionName] = originalCollection.slice($scope.startIndex, $scope.endIndex);
-
- _prevStartIndex = $scope.startIndex;
- _prevEndIndex = $scope.endIndex;
-
- return digestRequired;
- }
- }
- };
- }
- };
- }]);
-
- angular.element(document.head).append([
- '<style>' +
- '.vs-repeat-wheel-helper{' +
- 'position: absolute;' +
- 'top: 0;' +
- 'bottom: 0;' +
- 'left: 0;' +
- 'right: 0;' +
- 'z-index: 99999;' +
- 'background: rgba(0, 0, 0, 0);' +
- '}' +
- '.vs-repeat-repeated-element{' +
- 'position: absolute;' +
- 'z-index: 1;' +
- '}' +
- '</style>'
- ].join(''));
-})(window, window.angular);
\ No newline at end of file
+++ /dev/null
-!function(a,b){"use strict";var c=-1!=navigator.appVersion.indexOf("Mac"),d="undefined"!=typeof a.onwheel?"wheel":"undefined"!=typeof a.onmousewheel?"mousewheel":"DOMMouseScroll",e=document.documentElement,f=e.matches?"matches":e.matchesSelector?"matchesSelector":e.webkitMatches?"webkitMatches":e.webkitMatchesSelector?"webkitMatchesSelector":e.msMatches?"msMatches":e.msMatchesSelector?"msMatchesSelector":e.mozMatches?"mozMatches":e.mozMatchesSelector?"mozMatchesSelector":null,g=b.element.prototype.closest||function(a){for(var c=this[0].parentNode;c!==document.documentElement&&null!=c&&!c[f](a);)c=c.parentNode;return c&&c[f](a)?b.element(c):b.element()};b.module("vs-repeat",[]).directive("vsRepeat",["$compile",function(e){return{restrict:"A",scope:!0,require:"?^vsRepeat",controller:["$scope",function(a){this.$scrollParent=a.$scrollParent,this.$fillElement=a.$fillElement}],compile:function(f){var h=f.children().eq(0),i=h.attr("ng-repeat"),j=h[0].outerHTML,k=/^\s*(\S+)\s+in\s+([\S\s]+?)(track\s+by\s+\S+)?$/.exec(i),l=k[1],m=k[2],n=k[3],o="$vs_collection",p={vsRepeat:"elementSize",vsOffsetBefore:"offsetBefore",vsOffsetAfter:"offsetAfter",vsExcess:"excess"};return f.empty(),a.getComputedStyle&&"absolute"===a.getComputedStyle(f[0]).position||f.css("position","relative"),{pre:function(f,h,i,k){function q(){if(!C||C.length<1)return f[o]=[],y=0,v(0),void(f.sizesCumulative=[0]);if(y=C.length,F){f.sizes=C.map(function(a){return a[i.vsSizeProperty]});var a=0;f.sizesCumulative=f.sizes.map(function(b){var c=a;return a+=b,c}),f.sizesCumulative.push(a)}r(),u()}function r(){E&&f.$$postDigest(function(){if(h[0].offsetHeight||h[0].offsetWidth)for(var a=h.children(),b=0;b<a.length;){if(null!=a[b].attributes["ng-repeat"]){a[b][K]&&(f.elementSize=a[b][K],u(),E=!1,f.$root&&!f.$root.$$phase&&f.$apply());break}b++}else var c=f.$watch(function(){(h[0].offsetHeight||h[0].offsetWidth)&&(c(),r())})})}function s(a){var b=a.currentTarget;(b.scrollWidth>b.clientWidth||b.scrollHeight>b.clientHeight)&&z.css("display","block")}function t(){"undefined"!=typeof i.vsAutoresize&&(E=!0,r(),f.$root&&!f.$root.$$phase&&f.$apply()),x()&&f.$apply()}function u(){O=void 0,P=void 0,x(),v(F?f.sizesCumulative[y]:f.elementSize*y),f.$emit("vsRepeatReinitialized")}function v(a){if(D){if(A.css({width:f.offsetBefore+a+f.offsetAfter+"px",height:"100%"}),k&&k.$fillElement){var b=k.$fillElement[0].parentNode.querySelector("[ng-repeat]");b&&k.$fillElement.css({width:b.scrollWidth+"px"})}}else A.css({height:f.offsetBefore+a+f.offsetAfter+"px",width:"100%"}),k&&k.$fillElement&&(b=k.$fillElement[0].parentNode.querySelector("[ng-repeat]"),b&&k.$fillElement.css({height:b.scrollHeight+"px"}))}function w(){var a=G[0][J];a!==Q&&(u(),f.$root&&!f.$root.$$phase&&f.$apply()),Q=a}function x(){if(F){for(f.startIndex=0;f.sizesCumulative[f.startIndex]<G[0][L]-f.offsetBefore;)f.startIndex++;for(f.startIndex>0&&f.startIndex--,f.endIndex=f.startIndex;f.sizesCumulative[f.endIndex]<G[0][L]-f.offsetBefore+G[0][J];)f.endIndex++}else f.startIndex=Math.max(Math.floor((G[0][L]-f.offsetBefore)/f.elementSize+f.excess/2)-f.excess,0),f.endIndex=Math.min(f.startIndex+Math.ceil(G[0][J]/f.elementSize)+f.excess,y);var a=f.startIndex!==O||f.endIndex!==P;return a&&(f[o]=C.slice(f.startIndex,f.endIndex)),O=f.startIndex,P=f.endIndex,a}var y,z,A,B=b.element(j),C=[],D="undefined"!=typeof i.vsHorizontal,E=!i.vsRepeat,F=!!i.vsSizeProperty,G=i.vsScrollParent?g.call(h,i.vsScrollParent):h,H=D?"translateX":"translateY",I=D?"left":"top",J=D?"clientWidth":"clientHeight",K=D?"offsetWidth":"offsetHeight",L=D?"scrollLeft":"scrollTop";if(0===G.length)throw"Specified scroll parent selector did not match any element";f.$scrollParent=G,F&&(f.sizesCumulative=[]),f.elementSize=G[0][J]||50,f.offsetBefore=0,f.offsetAfter=0,f.excess=2,Object.keys(p).forEach(function(a){i[a]&&i.$observe(a,function(b){f[p[a]]=+b,u()})}),f.$watchCollection(m,function(a){C=a||[],q()}),B.attr("ng-repeat",l+" in "+o+(n?" "+n:"")).addClass("vs-repeat-repeated-element");var M=F?"(sizesCumulative[$index + startIndex] + offsetBefore)":"(($index + startIndex) * elementSize + offsetBefore)";"undefined"!=typeof document.documentElement.style.transform?B.attr("ng-style",'{ "transform": "'+H+'(" + '+M+' + "px)"}'):"undefined"!=typeof document.documentElement.style.webkitTransform?B.attr("ng-style",'{ "-webkit-transform": "'+H+'(" + '+M+' + "px)"}'):B.attr("ng-style","{"+I+": "+M+' + "px"}'),e(B)(f),h.append(B),A=b.element('<div class="vs-repeat-fill-element"></div>').css({position:"relative","min-height":"100%","min-width":"100%"}),h.append(A),e(A)(f),f.$fillElement=A;var N={};c&&(z=b.element('<div class="vs-repeat-wheel-helper"></div>').on(d,function(a){a.preventDefault(),a.stopPropagation(),a.originalEvent&&(a=a.originalEvent),G[0].scrollLeft+=a.deltaX||-a.wheelDeltaX,G[0].scrollTop+=a.deltaY||-a.wheelDeltaY}).on("mousemove",function(a){(N.x!==a.clientX||N.y!==a.clientY)&&b.element(this).css("display","none"),N={x:a.clientX,y:a.clientY}}).css("display","none"),A.append(z)),f.startIndex=0,f.endIndex=0,G.on("scroll",function(){x()&&f.$apply()}),c&&G.on(d,s),b.element(a).on("resize",t),f.$on("$destroy",function(){b.element(a).off("resize",t)}),f.$on("vsRepeatTrigger",q),f.$on("vsRepeatResize",function(){E=!0,r()});var O,P,Q;f.$watch(function(){"function"==typeof a.requestAnimationFrame?a.requestAnimationFrame(w):w()})}}}}}]),b.element(document.head).append(["<style>.vs-repeat-wheel-helper{position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 99999;background: rgba(0, 0, 0, 0);}.vs-repeat-repeated-element{position: absolute;z-index: 1;}</style>"].join(""))}(window,window.angular);
\ No newline at end of file
Code Review / clamp.git / commitdiff