acha-framework
Version:
is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...
237 lines • 9.05 kB
JavaScript
(function ($, angular, underscore, window, document, undefined) {
'use strict';
angular.module('frontend.directives').factory('ribbonService', [function () {
var getOption = function (step, name, def) {
if (step.hasAttribute(name))
return step.getAttribute(name);
return def;
};
var extractButtons = function (node) {
var result = [];
$(node).find('button').each(function (idx, button) {
var btn = {
title: getOption(button, 'title', ''),
titleTranslate: getOption(button, 'title-translate', null),
icon: getOption(button, 'icon', null),
inline: getOption(button, 'inline', false),
toggle: getOption(button, 'toggle', false),
enabled: getOption(button, 'enabled', true),
buttons: [],
key: getOption(button, 'key', '')
};
$(button).find('sub-button').each(function (idx2, subBtn) {
var sub = {
title: getOption(subBtn, 'title', ''),
titleTranslate: getOption(subBtn, 'title-translate', null),
icon: getOption(subBtn, 'icon', null),
enabled: getOption(button, 'enabled', true)
};
btn.buttons.push(sub);
});
result.push(btn);
});
return result;
};
return {
parse: function (html) {
var buttons = [];
var result = [];
var $html = $(html);
$html.each(function (index, step) {
var tab = {
title: getOption(step, 'title', ''),
titleTranslate: getOption(step, 'title-translate', null),
icon: getOption(step, 'icon', null),
sections: []
};
$(step).find('section').each(function (index2, section) {
var sec = {
title: getOption(section, 'title', ''),
titleTranslate: getOption(section, 'title-translate', null),
name: getOption(section, 'name', ''),
columns: [],
buttons: []
};
var columns = $(section).find('column');
if (columns.size() > 0) {
columns.each(function (index3, column) {
var btns = extractButtons(column);
buttons.addRange(btns);
sec.columns.push({ buttons: btns });
});
} else {
sec.buttons = extractButtons(section);
buttons.addRange(sec.buttons);
}
tab.sections.push(sec);
});
result.push(tab);
});
return {
steps: result,
buttons: buttons
};
}
};
}]).directive('ribbon', [
'$templateCache',
'$compile',
'ribbonService',
'cultureService',
function ($templateCache, $compile, ribbonService, cultureService) {
return {
restrict: 'E',
replace: true,
scope: {
tag: '<?',
disabled: '=?',
visible: '=?',
cssClass: '=?',
onAction: '=?',
buttons: '=?',
model: '=?'
},
compile: function ($$element) {
var templateUrl = '/templates/framework/directives/ribbon/template.html';
var template = $templateCache.get(templateUrl);
var given = $$element.html();
$$element.empty();
return {
pre: function (scope, element, attr) {
scope.vm = { selectedStep: null };
scope.vm.init = function () {
if (angular.isUndefined(scope.disabled)) {
scope.disabled = false;
}
if (angular.isUndefined(scope.visible)) {
scope.visible = true;
}
if (angular.isUndefined(scope.cssClass)) {
scope.cssClass = '';
}
if (angular.isUndefined(scope.buttons)) {
scope.buttons = [];
}
if (angular.isUndefined(scope.steps)) {
var parsed = ribbonService.parse(given);
scope.steps = parsed.steps;
scope.buttons = parsed.buttons;
if (scope.steps.length) {
scope.vm.onPick(scope.steps[0]);
}
}
scope.vm.compile();
scope.vm.bind();
};
scope.vm.getButtonClass = function (button) {
var result = ['button'];
var enabled = scope.$eval(button.enabled.toString());
if (!enabled)
result.push('disabled');
var inline = scope.$eval(button.inline);
if (inline)
result.push('inline');
var toggle = scope.$eval(button.toggle);
if (toggle)
result.push('toggle-button');
if (button.toggleState)
result.push('active');
var cssClass = scope.$eval(button.cssClass);
if (cssClass)
result.push(cssClass);
return result.join(' ');
};
scope.vm.onExpandButton = function (button, $event) {
var enabled = scope.$eval(button.enabled.toString());
if (!enabled)
return;
button.expand = !button.expand;
};
scope.vm.onPick = function (step) {
if (scope.disabled)
return;
scope.vm.selectedStep = step;
scope.vm.calculateWidth();
};
scope.vm.calculateWidth = underscore.debounce(function () {
var totalWidth = 0;
var sections = element.find('.section');
sections.each(function (idx, elem) {
totalWidth += $(elem).width();
totalWidth += 10;
});
var container = element.find('.tabs-content');
if (container.width() >= totalWidth) {
container.removeClass('slide');
scope.vm.currentPosition = 0;
element.find('.tab-content').css({
left: scope.vm.currentPosition,
width: 'auto'
});
} else {
container.addClass('slide');
scope.vm.currentPosition = 25;
element.find('.tab-content').css({
width: totalWidth,
left: scope.vm.currentPosition
});
}
scope.vm.available = container.width();
scope.vm.totalWidth = totalWidth;
scope.vm.gap = scope.vm.totalWidth - scope.vm.available;
}, 300);
scope.vm.scrollLeft = function () {
if (scope.vm.currentPosition - 100 >= 0) {
scope.vm.currentPosition -= 100;
} else {
scope.vm.currentPosition = 0;
}
var css = {};
if (cultureService.rtl) {
css.left = scope.vm.currentPosition;
} else {
css.left = -scope.vm.currentPosition;
}
element.find('.tab-content').css(css);
};
scope.vm.scrollRight = function () {
if (scope.vm.currentPosition + 100 <= scope.vm.gap) {
scope.vm.currentPosition += 100;
} else {
scope.vm.currentPosition = scope.vm.gap;
}
var css = {};
if (cultureService.rtl) {
css.left = scope.vm.currentPosition;
} else {
css.left = -scope.vm.currentPosition;
}
element.find('.tab-content').css(css);
};
scope.vm.compile = function () {
var $template = $(template);
element.append($template);
$compile($template)(scope);
};
scope.vm.bind = function () {
scope.$on('$destroy', function () {
$(window).off('resize', scope.vm.calculateWidth);
});
scope.$watch('steps', function () {
scope.vm.calculateWidth();
});
$(window).on('resize', scope.vm.calculateWidth);
};
scope.vm.onAction = function (button) {
if (angular.isFunction(scope.onAction)) {
scope.onAction(button);
}
};
scope.vm.init();
}
};
}
};
}
]);
}(jQuery, angular, _, window, document));