Initial commit

This commit is contained in:
Senad Uka
2018-06-11 11:09:35 +02:00
commit ed7df7b11f
1954 changed files with 483354 additions and 0 deletions

View File

@@ -0,0 +1,4 @@
<div class="ui-notification">
<h3 ng-show="title" ng-bind-html="title"></h3>
<div class="message" ng-bind-html="message"></div>
</div>

View File

@@ -0,0 +1,233 @@
angular.module('ui-notification',[]);
angular.module('ui-notification').provider('Notification', function() {
this.options = {
delay: 5000,
startTop: 10,
startRight: 10,
verticalSpacing: 10,
horizontalSpacing: 10,
positionX: 'right',
positionY: 'top',
replaceMessage: false,
templateUrl: 'angular-ui-notification.html',
onClose: undefined,
closeOnClick: true,
maxCount: 0, // 0 - Infinite
container: 'body'
};
this.setOptions = function(options) {
if (!angular.isObject(options)) throw new Error("Options should be an object!");
this.options = angular.extend({}, this.options, options);
};
this.$get = function($timeout, $http, $compile, $templateCache, $rootScope, $injector, $sce, $q, $window) {
var options = this.options;
var startTop = options.startTop;
var startRight = options.startRight;
var verticalSpacing = options.verticalSpacing;
var horizontalSpacing = options.horizontalSpacing;
var delay = options.delay;
var messageElements = [];
var isResizeBound = false;
var notify = function(args, t){
var deferred = $q.defer();
if (typeof args !== 'object' || args === null) {
args = {message:args};
}
args.scope = args.scope ? args.scope : $rootScope;
args.template = args.templateUrl ? args.templateUrl : options.templateUrl;
args.delay = !angular.isUndefined(args.delay) ? args.delay : delay;
args.type = t || args.type || options.type || '';
args.positionY = args.positionY ? args.positionY : options.positionY;
args.positionX = args.positionX ? args.positionX : options.positionX;
args.replaceMessage = args.replaceMessage ? args.replaceMessage : options.replaceMessage;
args.onClose = args.onClose ? args.onClose : options.onClose;
args.closeOnClick = (args.closeOnClick !== null && args.closeOnClick !== undefined) ? args.closeOnClick : options.closeOnClick;
args.container = args.container ? args.container : options.container;
var template=$templateCache.get(args.template);
if(template){
processNotificationTemplate(template);
}else{
// load it via $http only if it isn't default template and template isn't exist in template cache
// cache:true means cache it for later access.
$http.get(args.template,{cache: true})
.then(processNotificationTemplate)
.catch(function(data){
throw new Error('Template ('+args.template+') could not be loaded. ' + data);
});
}
function processNotificationTemplate(template) {
var scope = args.scope.$new();
scope.message = $sce.trustAsHtml(args.message);
scope.title = $sce.trustAsHtml(args.title);
scope.t = args.type.substr(0,1);
scope.delay = args.delay;
scope.onClose = args.onClose;
var reposite = function() {
var j = 0;
var k = 0;
var lastTop = startTop;
var lastRight = startRight;
var lastPosition = [];
for(var i = messageElements.length - 1; i >= 0; i --) {
var element = messageElements[i];
if (args.replaceMessage && i < messageElements.length - 1) {
element.addClass('killed');
continue;
}
var elHeight = parseInt(element[0].offsetHeight);
var elWidth = parseInt(element[0].offsetWidth);
var position = lastPosition[element._positionY+element._positionX];
if ((top + elHeight) > window.innerHeight) {
position = startTop;
k ++;
j = 0;
}
var top = (lastTop = position ? (j === 0 ? position : position + verticalSpacing) : startTop);
var right = lastRight + (k * (horizontalSpacing + elWidth));
element.css(element._positionY, top + 'px');
if (element._positionX == 'center') {
element.css('left', parseInt(window.innerWidth / 2 - elWidth / 2) + 'px');
} else {
element.css(element._positionX, right + 'px');
}
lastPosition[element._positionY+element._positionX] = top + elHeight;
if (options.maxCount > 0 && messageElements.length > options.maxCount && i === 0) {
element.scope().kill(true);
}
j ++;
}
};
var templateElement = $compile(template)(scope);
templateElement._positionY = args.positionY;
templateElement._positionX = args.positionX;
templateElement.addClass(args.type);
var closeEvent = function(e) {
e = e.originalEvent || e;
if (e.type === 'click' || (e.propertyName === 'opacity' && e.elapsedTime >= 1)){
if (scope.onClose) {
scope.$apply(scope.onClose(templateElement));
}
templateElement.remove();
messageElements.splice(messageElements.indexOf(templateElement), 1);
scope.$destroy();
reposite();
}
};
if (args.closeOnClick) {
templateElement.addClass('clickable');
templateElement.bind('click', closeEvent);
}
templateElement.bind('webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd', closeEvent);
if (angular.isNumber(args.delay)) {
$timeout(function() {
templateElement.addClass('killed');
}, args.delay);
}
setCssTransitions('none');
angular.element(document.querySelector(args.container)).append(templateElement);
var offset = -(parseInt(templateElement[0].offsetHeight) + 50);
templateElement.css(templateElement._positionY, offset + "px");
messageElements.push(templateElement);
if(args.positionX == 'center'){
var elWidth = parseInt(templateElement[0].offsetWidth);
templateElement.css('left', parseInt(window.innerWidth / 2 - elWidth / 2) + 'px');
}
$timeout(function(){
setCssTransitions('');
});
function setCssTransitions(value){
['-webkit-transition', '-o-transition', 'transition'].forEach(function(prefix){
templateElement.css(prefix, value);
});
}
scope._templateElement = templateElement;
scope.kill = function(isHard) {
if (isHard) {
if (scope.onClose) {
scope.$apply(scope.onClose(scope._templateElement));
}
messageElements.splice(messageElements.indexOf(scope._templateElement), 1);
scope._templateElement.remove();
scope.$destroy();
$timeout(reposite);
} else {
scope._templateElement.addClass('killed');
}
};
$timeout(reposite);
if (!isResizeBound) {
angular.element($window).bind('resize', function(e) {
$timeout(reposite);
});
isResizeBound = true;
}
deferred.resolve(scope);
}
return deferred.promise;
};
notify.primary = function(args) {
return this(args, 'primary');
};
notify.error = function(args) {
return this(args, 'error');
};
notify.success = function(args) {
return this(args, 'success');
};
notify.info = function(args) {
return this(args, 'info');
};
notify.warning = function(args) {
return this(args, 'warning');
};
notify.clearAll = function() {
angular.forEach(messageElements, function(element) {
element.addClass('killed');
});
};
return notify;
};
});

View File

@@ -0,0 +1,57 @@
@ui-notification-border-radius: 0px;
.ui-notification {
border-radius: @ui-notification-border-radius;
position: fixed;
z-index: 9999;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
width: 300px;
color: @btn-primary-color;
background: @brand-primary;
.transition(all ease 0.5s);
&.clickable {
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
&.killed {
opacity: 0;
.transition(opacity ease 1s);
}
& > h3 {
display: block;
margin: 10px 10px 0 10px;
padding: 0 0 5px 0;
text-align: left;
font-size: @font-size-base;
font-weight: bold;
border-bottom: 1px solid fadeout(@btn-primary-color, 70%);
}
& a {
color: @btn-primary-color;
&:hover {
text-decoration: underline;
}
}
& > .message {
margin: 10px 10px 10px 10px;
}
&.warning {
color: @btn-warning-color;
background: @brand-warning;
}
&.error {
color: @btn-danger-color;
background: @brand-danger;
}
&.success {
color: @btn-success-color;
background: @brand-success;
}
&.info {
color: @btn-info-color;
background: @brand-info;
}
}

View File

@@ -0,0 +1,3 @@
@import "../bower_components/bootstrap/less/variables.less";
@import "../bower_components/bootstrap/less/mixins.less";
@import "angular-ui-notification.less";