mirror of
https://github.com/atlanticbiomedical/biomedjs.git
synced 2025-07-02 00:47:26 -04:00
424 lines
12 KiB
JavaScript
424 lines
12 KiB
JavaScript
angular.module('biomed.directives', [])
|
|
.directive("bioNavbar", function($location) {
|
|
return {
|
|
restrict: 'A',
|
|
link: function($scope, element, attrs, controller) {
|
|
$scope.$watch(function() {
|
|
return $location.path();
|
|
}, function(newValue, oldValue) {
|
|
element.find('li[data-match-route]').each(function(k, li) {
|
|
var $li = angular.element(li);
|
|
var pattern = $li.attr('data-match-route');
|
|
var regex = new RegExp('^' + pattern + '$', ['i']);
|
|
|
|
if (regex.test(newValue)) {
|
|
$li.addClass('active');
|
|
} else {
|
|
$li.removeClass('active');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.directive('infiniteScroll', function ($window) {
|
|
return {
|
|
link:function (scope, element, attrs) {
|
|
var offset = parseInt(attrs.threshold) || 0;
|
|
var e = angular.element($window);
|
|
|
|
e.bind("scroll", function() {
|
|
if (scope.canLoad && e.height() + e.scrollTop() >= $(document).height() - offset) {
|
|
scope.$apply(attrs.infiniteScroll);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.directive('tabbable', function() {
|
|
return {
|
|
restrict: 'C',
|
|
compile: function(element) {
|
|
var navTabs = angular.element('<ul class="nav nav-tabs"></ul>'),
|
|
tabContent = angular.element('<div class="tab-content"></div>');
|
|
|
|
tabContent.append(element.contents());
|
|
element.append(navTabs).append(tabContent);
|
|
},
|
|
controller: ['$scope', '$element', function($scope, $element) {
|
|
var navTabs = $element.contents().eq(0),
|
|
ngModel = $element.controller('ngModel') || {},
|
|
tabs = [],
|
|
selectedTab;
|
|
|
|
ngModel.$render = function() {
|
|
var $viewValue = this.$viewValue;
|
|
|
|
if (selectedTab ? (selectedTab.value != $viewValue) : $viewValue) {
|
|
if(selectedTab) {
|
|
selectedTab.paneElement.removeClass('active');
|
|
selectedTab.tabElement.removeClass('active');
|
|
selectedTab = null;
|
|
}
|
|
if($viewValue) {
|
|
for(var i = 0, ii = tabs.length; i < ii; i++) {
|
|
if ($viewValue == tabs[i].value) {
|
|
selectedTab = tabs[i];
|
|
break;
|
|
}
|
|
}
|
|
if (selectedTab) {
|
|
selectedTab.paneElement.addClass('active');
|
|
selectedTab.tabElement.addClass('active');
|
|
}
|
|
}
|
|
|
|
}
|
|
};
|
|
|
|
this.addPane = function(element, attr) {
|
|
var li = angular.element('<li><a href></a></li>'),
|
|
a = li.find('a'),
|
|
tab = {
|
|
paneElement: element,
|
|
paneAttrs: attr,
|
|
tabElement: li
|
|
};
|
|
|
|
tabs.push(tab);
|
|
|
|
attr.$observe('value', update)();
|
|
attr.$observe('title', function(){ update(); a.text(tab.title); })();
|
|
|
|
function update() {
|
|
tab.title = attr.title;
|
|
tab.value = attr.value || attr.title;
|
|
if (!ngModel.$setViewValue && (!ngModel.$viewValue || tab == selectedTab)) {
|
|
// we are not part of angular
|
|
ngModel.$viewValue = tab.value;
|
|
}
|
|
ngModel.$render();
|
|
}
|
|
|
|
navTabs.append(li);
|
|
li.bind('click', function(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
if (ngModel.$setViewValue) {
|
|
$scope.$apply(function() {
|
|
ngModel.$setViewValue(tab.value);
|
|
ngModel.$render();
|
|
});
|
|
} else {
|
|
// we are not part of angular
|
|
ngModel.$viewValue = tab.value;
|
|
ngModel.$render();
|
|
}
|
|
});
|
|
|
|
return function() {
|
|
tab.tabElement.remove();
|
|
for(var i = 0, ii = tabs.length; i < ii; i++ ) {
|
|
if (tab == tabs[i]) {
|
|
tabs.splice(i, 1);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
}]
|
|
};
|
|
})
|
|
.directive('tabPane', function() {
|
|
return {
|
|
require: '^tabbable',
|
|
restrict: 'C',
|
|
link: function(scope, element, attrs, tabsCtrl) {
|
|
element.bind('$remove', tabsCtrl.addPane(element, attrs));
|
|
}
|
|
};
|
|
})
|
|
.directive('datepicker', function($timeout) {
|
|
var isTouch = 'ontouchstart' in window && !window.navigator.userAgent.match(/PhantomJS/i);
|
|
|
|
return {
|
|
restrict: 'AC',
|
|
require: '?ngModel',
|
|
link: function postLink(scope, element, attrs, controller) {
|
|
|
|
var format = 'MM-DD-YYYY';
|
|
|
|
// Handle date validity according to dateFormat
|
|
if(controller) {
|
|
controller.$formatters.unshift(function(value) {
|
|
return moment(value).format(format);
|
|
});
|
|
|
|
controller.$parsers.unshift(function(viewValue) {
|
|
if (angular.isDate(viewValue)) {
|
|
return viewValue;
|
|
} else {
|
|
var date = moment(viewValue);
|
|
if (date.isValid()) {
|
|
return date;
|
|
} else {
|
|
return undefined;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Use native interface for touch devices
|
|
if(isTouch && element.prop('type') === 'text') {
|
|
|
|
element.prop('type', 'date');
|
|
element.on('change', function(ev) {
|
|
scope.$apply(function () {
|
|
controller.$setViewValue(moment(element.val()).toDate());
|
|
});
|
|
});
|
|
|
|
} else {
|
|
|
|
// If we have a controller (i.e. ngModelController) then wire it up
|
|
if(controller) {
|
|
element.on('changeDate', function(ev) {
|
|
scope.$apply(function () {
|
|
controller.$setViewValue(moment(element.val()).toDate());
|
|
});
|
|
});
|
|
}
|
|
|
|
// Popover GarbageCollection
|
|
var $popover = element.closest('.popover');
|
|
if($popover) {
|
|
$popover.on('hide', function(e) {
|
|
var datepicker = element.data('datepicker');
|
|
if(datepicker) {
|
|
datepicker.picker.remove();
|
|
element.data('datepicker', null);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Create datepicker
|
|
element.attr('data-toggle', 'datepicker');
|
|
element.datepicker({
|
|
autoclose: true,
|
|
format: 'mm-dd-yyyy',
|
|
forceParse: attrs.forceParse || false
|
|
});
|
|
|
|
}
|
|
|
|
// Support add-on
|
|
var component = element.siblings('[data-toggle="datepicker"]');
|
|
if(component.length) {
|
|
component.on('click', function() { element.trigger('focus'); });
|
|
}
|
|
|
|
}
|
|
};
|
|
})
|
|
.directive('techpicker', function() {
|
|
|
|
return {
|
|
restrict: 'E',
|
|
scope: {
|
|
users: '=',
|
|
schedule: '=',
|
|
date: '=',
|
|
onEntryClick: '&'
|
|
},
|
|
templateUrl: '/partials/techPicker.html',
|
|
replace: true,
|
|
link: function($scope, element, attrs) {
|
|
var timePickerParser = d3.time.format('%I:%M%p');
|
|
|
|
var rangeStart = timePickerParser.parse('7:00am');
|
|
var rangeEnd = timePickerParser.parse('10:00pm');
|
|
|
|
var x = d3.time.scale()
|
|
.range([0, 100])
|
|
.domain([rangeStart, rangeEnd]);
|
|
|
|
var color = d3.scale.category20();
|
|
|
|
var totalHours = moment.duration(moment(rangeEnd) - moment(rangeStart)).hours();
|
|
var hourWidth = 100 / totalHours;
|
|
|
|
$scope.hourMarkers = [];
|
|
for (var i = 0; i < totalHours; i++) {
|
|
var date = moment(rangeStart).add('hours', i).toDate();
|
|
|
|
$scope.hourMarkers.push({
|
|
date: date,
|
|
style: {
|
|
left: x(date) + "%",
|
|
width: hourWidth + "%"
|
|
}
|
|
});
|
|
}
|
|
|
|
$scope.$watch('users', function(newVal, oldVal) {
|
|
generateDate();
|
|
});
|
|
|
|
$scope.$watch('schedule', function(newVal, oldVal) {
|
|
generateDate();
|
|
});
|
|
|
|
function generateDate() {
|
|
var data = {};
|
|
|
|
var labels = [];
|
|
|
|
angular.forEach($scope.users, function(user) {
|
|
var key = user.name.first + ' ' + user.name.last;
|
|
labels.push(key);
|
|
data[key] = [];
|
|
});
|
|
|
|
labels.sort();
|
|
color.domain(labels);
|
|
|
|
angular.forEach($scope.schedule, function(workorder) {
|
|
angular.forEach(workorder.techs, function(tech) {
|
|
var key = tech.name.first + ' ' + tech.name.last;
|
|
|
|
if (!data[key])
|
|
return;
|
|
|
|
var start = moment(workorder.scheduling.start).year(1900).month(0).date(1).toDate();
|
|
var end = moment(workorder.scheduling.end).year(1900).month(0).date(1).toDate();
|
|
|
|
data[key].push({
|
|
style: {
|
|
backgroundColor: color(key),
|
|
left: x(start) + "%",
|
|
width: (x(end) - x(start)) + "%"
|
|
},
|
|
workorder: workorder
|
|
});
|
|
})
|
|
});
|
|
$scope.data = data;
|
|
}
|
|
}
|
|
};
|
|
})
|
|
.directive('uiSelect2', function ($timeout) {
|
|
var options = {};
|
|
|
|
return {
|
|
restrict: 'AC',
|
|
require: '?ngModel',
|
|
compile: function (tElm, tAttrs) {
|
|
var watch,
|
|
repeatOption,
|
|
repeatAttr,
|
|
isSelect = tElm.is('select'),
|
|
isMultiple = (tAttrs.multiple !== undefined);
|
|
|
|
// Enable watching of the options dataset if in use
|
|
if (tElm.is('select')) {
|
|
repeatOption = tElm.find('option[ng-repeat], option[data-ng-repeat]');
|
|
|
|
if (repeatOption.length) {
|
|
repeatAttr = repeatOption.attr('ng-repeat') || repeatOption.attr('data-ng-repeat');
|
|
watch = jQuery.trim(repeatAttr.split('|')[0]).split(' ').pop();
|
|
}
|
|
}
|
|
|
|
return function (scope, elm, attrs, controller) {
|
|
// instance-specific options
|
|
var opts = angular.extend({}, options, scope.$eval(attrs.uiSelect2));
|
|
|
|
if (isSelect) {
|
|
// Use <select multiple> instead
|
|
delete opts.multiple;
|
|
delete opts.initSelection;
|
|
} else if (isMultiple) {
|
|
opts.multiple = true;
|
|
}
|
|
|
|
if (controller) {
|
|
// Watch the model for programmatic changes
|
|
controller.$render = function () {
|
|
if (isSelect) {
|
|
elm.select2('val', controller.$modelValue);
|
|
} else {
|
|
if (isMultiple) {
|
|
if (!controller.$modelValue) {
|
|
elm.select2('data', []);
|
|
} else if (angular.isArray(controller.$modelValue)) {
|
|
elm.select2('data', controller.$modelValue);
|
|
} else {
|
|
elm.select2('val', controller.$modelValue);
|
|
}
|
|
} else {
|
|
if (angular.isObject(controller.$modelValue)) {
|
|
elm.select2('data', controller.$modelValue);
|
|
} else {
|
|
elm.select2('val', controller.$modelValue);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Watch the options dataset for changes
|
|
if (watch) {
|
|
scope.$watch(watch, function (newVal, oldVal, scope) {
|
|
if (!newVal) return;
|
|
// Delayed so that the options have time to be rendered
|
|
$timeout(function () {
|
|
elm.select2('val', controller.$viewValue);
|
|
// Refresh angular to remove the superfluous option
|
|
elm.trigger('change');
|
|
});
|
|
});
|
|
}
|
|
|
|
if (!isSelect) {
|
|
// Set the view and model value and update the angular template manually for the ajax/multiple select2.
|
|
elm.bind("change", function () {
|
|
scope.$apply(function () {
|
|
controller.$setViewValue(elm.select2('data'));
|
|
});
|
|
});
|
|
|
|
if (opts.initSelection) {
|
|
var initSelection = opts.initSelection;
|
|
opts.initSelection = function (element, callback) {
|
|
initSelection(element, function (value) {
|
|
controller.$setViewValue(value);
|
|
callback(value);
|
|
});
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
attrs.$observe('disabled', function (value) {
|
|
elm.select2(value && 'disable' || 'enable');
|
|
});
|
|
|
|
if (attrs.ngMultiple) {
|
|
scope.$watch(attrs.ngMultiple, function(newVal) {
|
|
elm.select2(opts);
|
|
});
|
|
}
|
|
|
|
// Set initial value since Angular doesn't
|
|
elm.val(scope.$eval(attrs.ngModel));
|
|
|
|
// Initialize the plugin late so that the injected DOM does not disrupt the template compiler
|
|
$timeout(function () {
|
|
elm.select2(opts);
|
|
// Not sure if I should just check for !isSelect OR if I should check for 'tags' key
|
|
if (!opts.initSelection && !isSelect)
|
|
controller.$setViewValue(elm.select2('data'));
|
|
});
|
|
};
|
|
}
|
|
};
|
|
}); |