window_onscroll组件

src/window_onscroll/README.md

@@ -0,0 +1,32 @@
+qt-angular-ui/src/window_onscroll
+---
+
+# 功能介绍
+window onScroll 事件
+
+---
+
+# 引入
+
+```javascript
+import angular from 'angular';
+import windowOnscroll from 'qt-angulat-ui/src/window_onscroll';
+
+let app = angular.module('app', [
+  windowOnscroll,
+]);
+export default app.name;
+```
+---
+
+# service 使用方式
+- $windowOnscroll.bind($scope, fn); fn return true 可以结束bind
+- $windowOnscroll.startScroll(); 开启全部已暂停的bind
+- $windowOnscroll.stopScroll(); 暂停全部已开启的bind
+- $windowOnscroll.removeAll(); 清空全部bind
+
+---
+
+# directive 使用方式
+- restrict: A
+- ( $window.scrollX范围：$attrs.startX, $attrs.endX ) && ( $window.scrollY范围：$attrs.startY, $attrs.endY ) 范围内$element增加class“ $attrs.activeClass || 'active' ”

src/window_onscroll/component.js

@@ -0,0 +1,49 @@
+export default function ($windowOnscroll) {
+  'ngInject';
+
+  return {
+    restrict : 'A',
+    replace  : false,
+    link ($scope, $element, $attrs) {
+      let startX    = $attrs.startX * 1 || 0;
+      let endX      = $attrs.endX * 1 || 0;
+      let startY    = $attrs.startY * 1 || 0;
+      let endY      = $attrs.endY * 1 || 0;
+      let className = $attrs.activeClass || 'active';
+
+      let _scrollHandle = function () {
+        let x = false;
+        let y = false;
+
+        if (0 === endX && startX <= window.scrollX) {
+          x = true;
+        }
+        else if (0 < endX && startX < endX && startX <= window.scrollX && endX >= window.scrollX) {
+          x = true;
+        }
+        else if (0 < endX && startX > endX && (startX <= window.scrollX || endX >= window.scrollX)) {
+          x = true;
+        }
+
+        if (0 === endY && startY <= window.scrollY) {
+          y = true;
+        }
+        else if (0 < endY && startY < endY && startY <= window.scrollY && endY >= window.scrollY) {
+          y = true;
+        }
+        else if (0 < endY && startY > endY && (startY <= window.scrollY || endY >= window.scrollY)) {
+          y = true;
+        }
+
+        if (true === x && true === y) {
+          $element.addClass(className);
+        }
+        else {
+          $element.removeClass(className);
+        }
+      };
+
+      $windowOnscroll.bind($scope, _scrollHandle);
+    },
+  };
+}

src/window_onscroll/index.js

@@ -0,0 +1,8 @@
+import angular   from 'angular';
+import Component from './component';
+import Service   from './service';
+
+export default angular.module('qtAngularUi.windowOnscroll', [])
+.directive('windowOnscroll', Component)
+.factory('$windowOnscroll', Service)
+.name;

src/window_onscroll/service.js

@@ -0,0 +1,80 @@
+import _       from 'lodash';
+import angular from 'angular';
+
+export default function ($window) {
+  let _scrollHandles     = [];
+  let _stopScrollHandles = [];
+
+  let startScroll = function () {
+    _scrollHandles     = _.concat(_scrollHandles, _stopScrollHandles);
+    _stopScrollHandles = [];
+  };
+
+  let stopScroll = function () {
+    _stopScrollHandles = _.concat(_scrollHandles, _stopScrollHandles);
+    _scrollHandles     = [];
+  };
+
+  let remove = function (scrollHandle) {
+    _.remove(_scrollHandles, function (n) {
+      return scrollHandle === n;
+    });
+    _.remove(_stopScrollHandles, function (n) {
+      return scrollHandle === n;
+    });
+  };
+
+  let removeAll = function () {
+    _scrollHandles     = [];
+    _stopScrollHandles = [];
+  };
+
+  let onDestroy = function ($scope, scrollHandle) {
+    $scope.$on('$destroy', () => {
+      remove(scrollHandle);
+    });
+  };
+
+  let _scrollHandle = function () {
+    if (_.isEmpty(_scrollHandles)) {
+      angular.element($window).off('scroll', _scrollHandle);
+      return;
+    }
+
+    for (let i = 0, l = _scrollHandles.length; i < l; i ++) {
+      let scrollHandle = _scrollHandles[i];
+
+      if (_.isFunction(scrollHandle)) {
+        let finished = scrollHandle();
+
+        if (finished) {
+          _scrollHandles.splice(i, 1);
+          i --;
+          l --;
+        }
+      }
+    }
+  };
+
+  return {
+    bind ($scope, scrollHandle) {
+      if (!_.isFunction(scrollHandle)) {
+        throw new Error('$windowOnscroll.bind($scope, scrollHandle); -> scrollHandle is not function');
+      }
+
+      _scrollHandles.push(scrollHandle);
+      onDestroy($scope, scrollHandle);
+
+      if (1 === _scrollHandles.length) {
+        angular
+        .element($window)
+        .on('scroll', _scrollHandle)
+        .triggerHandler('scroll');
+      }
+    },
+    startScroll,
+    stopScroll,
+    remove,
+    removeAll,
+  };
+}

src/window_onscroll/window_onscroll.spec.js

@@ -0,0 +1,60 @@
+/* eslint max-nested-callbacks: off */
+/* eslint-env mocha */
+/* global expect */
+
+// import _              from 'lodash';
+// import angular        from 'angular';
+// import 'angular-mocks';
+
+// import $              from 'jquery';
+// import WindowOnScroll from './index';
+
+// describe('WindowOnScroll 组件', function () {
+//   const { module, inject } = angular.mock;
+
+//   beforeEach(function () {
+//     // 初始化WindowOnScroll组件
+//     module(WindowOnScroll);
+
+//     // 清场
+//     document.body.innerHTML = '';
+//   });
+
+//   describe('结构规范', function () {
+//     it('会返回组件名称', function () {
+//       expect(WindowOnScroll).to.be.a('string');
+//     });
+
+//     it('能进行初始化', function () {
+//       inject(function ($rootScope, $compile) {
+//         let $element = $compile('<div window-onscroll><div>')($rootScope.$new());
+//         angular.element(document.body).append($element);
+//         let $jqWindowOnscroll = $('[window-onscroll]');
+
+//         expect($jqWindowOnscroll.hasClass('active')).to.be.true;
+//       });
+//     });
+//   });
+
+//   describe('触发流程', function () {
+//     it('滚动窗口更改class', function (done) {
+//       inject(function ($rootScope, $compile) {
+//         let $element = $compile('<div window-onscroll start-y="40" style="height: 20000px;">test<div>')($rootScope.$new());
+//         angular.element(document.body).append($element);
+//         let $jqWindowOnscroll = $('[window-onscroll]');
+
+//         expect($jqWindowOnscroll.hasClass('active')).to.be.false;
+
+//         window.scroll(0, 1000);
+//         $(window).trigger('scroll');
+//         setTimeout(function () {
+//           console.log(window.scrollY);
+//           console.log(window.innerHeight);
+//           console.log($(document.body).height());
+//           expect($jqWindowOnscroll.hasClass('active')).to.be.true;
+//           done();
+//         }, 10);
+//       });
+//     });
+//   });
+// });