[Common UI] Implement mct-scroll-* parent

Implement parent directive for mct-scroll-x, mct-scroll-y.
WTD-920.
This commit is contained in:
Victor Woeltjen
2015-02-25 16:01:38 -08:00
parent f11eced6b9
commit f8b352c4d8
2 changed files with 63 additions and 6 deletions

View File

@ -0,0 +1,57 @@
/*global define*/
define(
[],
function () {
'use strict';
/**
* Superclass of mct-scroll-x and mct-scroll-y directives. Listens
* for scroll events and publishes their results into scope; watches
* scope and updates scroll state to match. This varies for x- and y-
* directives only by the attribute name chosen to find the expression,
* and the property (scrollLeft or scrollTop) managed within the
* element.
* @constructor
* @param $parse Angular's $parse
* @param {string} property property to manage within the HTML element
* @param {string} attribute attribute to look at for the assignable
* Angular expression
*/
function MCTScroll($parse, property, attribute) {
function link(scope, element, attrs) {
var expr = attrs[attribute],
parsed = $parse(expr);
// Set the element's scroll to match the scope's state
function updateElement(value) {
element[0][property] = value;
}
// Handle event; assign to scroll state to scope
function updateScope() {
parsed.assign(element[0][property]);
}
// Initialize state in scope
updateScope();
// Update element state when value in scope changes
scope.$watch(expr, updateElement);
// Update state in scope when element is scrolled
element.on('scroll', updateScope);
}
return {
// Restrict to attributes
restrict: "A",
// Use this link function
link: link
};
}
return MCTScroll;
}
);