Source:social-sidebar.directive.js

(function () {
	'use strict';
	// Social Sidebar directive
	angular
		.module('mohistory')
		.directive('socialSidebar', socialSidebar);
	socialSidebar.$inject = ['$rootScope', '$window', '$location'];
	/**
	 * Social sidebar that shows up on 'all' exhibit, event, blog post, and collection item.
	 * Links are open in new tab and on desktop bar can scroll with page.
	 * @memberof mohistory
     * @name socialSidebar
     * @ngdoc directive
	 */
	function socialSidebar($rootScope, $window, $location) {
		var directive = {
			templateUrl: 'app/components/social-sidebar/social-sidebar.directive.html',
			controller: socialSidebarCtrl,
			controllerAs: 'social',
			bindToController: true,
			scope: {
				url: '<',
				description: '<',
				image: '<',
				pageType: '<',
			},
			link: socialSidebarLink,
			restrict: 'E',
		};
		return directive;
		function socialSidebarCtrl() {
			var vm = this;
			/* ----- Variables ----- */
			vm.socialHREF = {
				'twitter': 'https://twitter.com/intent/tweet?text=' + '@mohistorymuseum' + '%20',
				'facebook': 'https://facebook.com/sharer.php?u=',
				'pintrest': 'http://pinterest.com/pin/create/button?url=',
				'print': 'javascript:window.print()',
				'email': 'mailto:?subject=',
			}
			vm.$onInit = onInit;
			/**
			 * Setup function, mainly used to set the url if it was not passed in.
			 * @function onInit
			 * @memberof socialSidebar
			 */
			function onInit() {
				if (!vm.url) {
					vm.url = $location.absUrl();
				}
				if (vm.pageType && vm.pageType === 'mhs:event') {
					vm.url = $location.absUrl();
				}
			}
		}
		/**
		 * Link function to allow social sidebar to scroll with the page.
		 * @param {String} scope an AngularJS scope object.
		 * @param {String} element the jqLite-wrapped element that this directive matches.
		 * @param {String} attrs a hash object with key-value pairs of normalized attribute 
		 * names their corresponding attribute values.
		 * @function socialSidebarLink
		 * @memberof socialSidebar
		 */
		function socialSidebarLink(scope, element, attrs) {
			/* ----- Variables ----- */
			// Select DOM elements
			var windowEl = $($window);
			var socialSidebarEl = $('#social-sidebar.fixed-bar');
			var mainArea = $('#main-content');
			var footer = $('#footer-primary');
			// Position on page
			var scrollTop = windowEl.scrollTop();
			var mainAreaScrollTop = scrollTop + mainAreaTop;
			var socialSidebarHeight = socialSidebarEl.outerHeight();
			var mainAreaTop = mainArea.offset().top;
			var footerTop = footer.offset().top;
			// Offset from the top of the page after scrolling
			var topMargin = 80;
			/* ----- Listeners ----- */
			/* ----- UNCOMMENT: To allow the social bar to scroll ----- */
			// Listen for changes in the window's width
			// scope.$watch(function () {
			// 	return $rootScope.viewport.scrollY;
			// }, scrollElement);
			/* ----- Function Definitions ----- */
			/**
			 * Use JQuery animate to move the social side bar as the user scrolls.
			 * @function scrollElement
			 * @memberof socialSidebarLink
			 */
			function scrollElement() {
				scrollTop = windowEl.scrollTop();
				mainAreaScrollTop = scrollTop + mainAreaTop;
				socialSidebarHeight = socialSidebarEl.outerHeight();
				mainAreaTop = mainArea.offset().top;
				footerTop = footer.offset().top;
				if ($rootScope.viewport.width > 768) {
					var newTop = 0;
					if (mainAreaTop < scrollTop) {
						if (scrollTop > (footerTop - socialSidebarHeight)) {
							newTop = 0;
						} else {
							newTop = scrollTop - mainAreaTop + topMargin;
						}
					}
					socialSidebarEl.stop(false, false).animate({
						top: newTop
					}, 400);
				}
			}
		}
	}
})();