verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 59 Releases Wiki Activity

Cambios popover

This commit is contained in:
Juan Ferrer Toribio 2017-01-10 13:46:38 +01:00
parent 51ef2d3ef4
commit 51bc27ea30
4 changed files with 106 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
@salix/core/src/popover/popover.js
View File

@ -1,81 +1,88 @@
import {module} from '../module';
import * as resolveFactory from '../resolveDefaultComponents';
require('./style.css');
const _NAME = 'popover';
export const NAME = 'vnPopover';
export function directive(resolver) {
return {
restrict: 'E',
transclude: true,
controllerAs: 'popover',
template: function(_, attrs) {
return resolver.getTemplate(_NAME, attrs);
},
controller: function($element) {
var self = this;
var doc = angular.element(document);
function docMouseDownHandler (event) {
if (event != self.lastEvent)
self.hide();
}
this.onMouseDown = function(event) {
this.lastEvent = event;
};
this.hide = function ()
{
$element[0].style.display = 'none';
doc.off('mousedown', docMouseDownHandler);
}
this.show = function(parent) {
var node = $element[0];
var style = node.style;
var spacing = 4;
var margin = 20;
var dblMargin = margin * 2;
var width = node.offsetWidth;
var height = node.offsetHeight;
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;
if(width + dblMargin > innerWidth) {
width = innerWidth - dblMargin;
style.width = width +'px';
}
if(height + dblMargin > innerHeight) {
height = innerHeight - dblMargin;
style.height = height +'px';
}
if(parent) {
var parentNode = parent[0];
var rect = parentNode.getBoundingClientRect();
var left = rect.left;
var top = rect.top + spacing + parentNode.offsetHeight;
if(left + width > innerWidth)
left -= (left + width) - window.innerWidth + margin;
if(top + height > innerHeight)
top -= height + parentNode.offsetHeight + spacing * 2;
if(left < 0)
left = margin;
if(top < 0)
top = margin;
style.top = (top) +'px';
style.left = (left) +'px';
}
style.display = 'block';
doc.on('mousedown', docMouseDownHandler);
};
}
}
}
directive.$inject = [resolveFactory.NAME];
module.directive(NAME, directive);
import {module} from '../module';
import * as resolveFactory from '../resolveDefaultComponents';
require('./style.css');
const _NAME = 'popover';
export const NAME = 'vnPopover';
export function directive(resolver) {
return {
restrict: 'E',
transclude: true,
controllerAs: 'popover',
template: function(_, attrs) {
return resolver.getTemplate(_NAME, attrs);
},
/* link: function(scope, element, attrs, ctrl) {
var nativeElement = element[0];
nativeElement.addEventListener('click', function(ev) {
ev.preventDefault();
ctrl.show();
});
},
*/ controller: function($element) {
var self = this;
var doc = angular.element(document);
function docMouseDownHandler(event) {
if (event != self.lastEvent)
self.hide();
}
this.onMouseDown = function(event) {
this.lastEvent = event;
};
this.hide = function ()
{
$element[0].style.display = 'none';
doc.off('mousedown', docMouseDownHandler);
}
this.show = function(parent) {
var node = $element[0];
var style = node.style;
var spacing = 0;
var margin = 20;
var dblMargin = margin * 2;
var width = node.offsetWidth;
var height = node.offsetHeight;
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;
if(width + dblMargin > innerWidth) {
width = innerWidth - dblMargin;
style.width = width +'px';
}
if(height + dblMargin > innerHeight) {
height = innerHeight - dblMargin;
style.height = height +'px';
}
if(parent) {
var parentNode = parent[0];
var rect = parentNode.getBoundingClientRect();
var left = rect.left;
var top = rect.top + spacing + parentNode.offsetHeight;
if(left + width > innerWidth)
left -= (left + width) - innerWidth + margin;
if(top + height > innerHeight)
top -= height + parentNode.offsetHeight + spacing * 2;
if(left < 0)
left = margin;
if(top < 0)
top = margin;
style.top = (top) +'px';
style.left = (left) +'px';
}
style.display = 'block';
doc.on('mousedown', docMouseDownHandler);
};
}
}
}
directive.$inject = [resolveFactory.NAME];
module.directive(NAME, directive);

8
@salix/core/src/popover/popover.mdl.html
View File

@ -1,5 +1,5 @@
<div
ng-mousedown="popover.onMouseDown($event)"
ng-transclude
*[foo]*>
<div
ng-mousedown="popover.onMouseDown($event)"
ng-transclude
*[foo]*>
</div>

24
@salix/core/src/popover/popover.mdl.js
View File

@ -1,12 +1,12 @@
import {module} from '../module';
import template from './popover.mdl.html';
export const NAME = 'vnPopoverMdlFactory';
export function factory() {
return {
template: template,
default: {}
}
}
module.factory(NAME, factory);
import {module} from '../module';
import template from './popover.mdl.html';
export const NAME = 'vnPopoverMdlFactory';
export function factory() {
return {
template: template,
default: {}
}
}
module.factory(NAME, factory);

3
@salix/core/src/popover/style.css
View File

@ -1,9 +1,10 @@
vn-popover {
display: none;
position: fixed;
box-shadow: 0 0 .2em rgba(1,1,1,.4);
box-shadow: 0 0 .4em rgba(1,1,1,.4);
background-color: white;
z-index: 100;
border-radius: .1em;
top: 0;
left: 0;
}