Commit 5a140b9c by Jose Antonio

Issue #939, added directive to change popover placement

parent a3c44826
...@@ -4,7 +4,7 @@ var dashboardDirectives = angular.module('dashboardDirectives', ['dashboardConfi ...@@ -4,7 +4,7 @@ var dashboardDirectives = angular.module('dashboardDirectives', ['dashboardConfi
/*------------------------------------------------------------------------------- /*-------------------------------------------------------------------------------
Pictogram follows a Hierarchical MVC pattern (the old PAC pattern) Pictogram follows a Hierarchical MVC pattern (the old PAC pattern)
We have a main controller (see main.js) and then others that are associated to We have a main controller (see main.js) and then others that are associated to
different headers (by means of AngularJS directives) different headers (by means of AngularJS directives)
Here we are just defining those directives Here we are just defining those directives
*/ */
...@@ -70,9 +70,9 @@ dashboardDirectives.directive('draggable', function() { ...@@ -70,9 +70,9 @@ dashboardDirectives.directive('draggable', function() {
return function(scope, element) { return function(scope, element) {
// this gives us the native JS object // this gives us the native JS object
var el = element[0]; var el = element[0];
el.draggable = true; el.draggable = true;
el.addEventListener( el.addEventListener(
'dragstart', 'dragstart',
function(e) { function(e) {
...@@ -83,7 +83,7 @@ dashboardDirectives.directive('draggable', function() { ...@@ -83,7 +83,7 @@ dashboardDirectives.directive('draggable', function() {
}, },
false false
); );
el.addEventListener( el.addEventListener(
'dragend', 'dragend',
function(e) { function(e) {
...@@ -104,7 +104,7 @@ dashboardDirectives.directive('droppable', function() { ...@@ -104,7 +104,7 @@ dashboardDirectives.directive('droppable', function() {
link: function(scope, element) { link: function(scope, element) {
// again we need the native object // again we need the native object
var el = element[0]; var el = element[0];
el.addEventListener( el.addEventListener(
'dragover', 'dragover',
function(e) { function(e) {
...@@ -116,7 +116,7 @@ dashboardDirectives.directive('droppable', function() { ...@@ -116,7 +116,7 @@ dashboardDirectives.directive('droppable', function() {
}, },
false false
); );
el.addEventListener( el.addEventListener(
'dragenter', 'dragenter',
function(e) { function(e) {
...@@ -125,7 +125,7 @@ dashboardDirectives.directive('droppable', function() { ...@@ -125,7 +125,7 @@ dashboardDirectives.directive('droppable', function() {
}, },
false false
); );
el.addEventListener( el.addEventListener(
'dragleave', 'dragleave',
function(e) { function(e) {
...@@ -134,20 +134,20 @@ dashboardDirectives.directive('droppable', function() { ...@@ -134,20 +134,20 @@ dashboardDirectives.directive('droppable', function() {
}, },
false false
); );
el.addEventListener( el.addEventListener(
'drop', 'drop',
function(e) { function(e) {
e.preventDefault(); // Added to avoid openning the picto image e.preventDefault(); // Added to avoid openning the picto image
// Stops some browsers from redirecting. // Stops some browsers from redirecting.
if (e.stopPropagation) e.stopPropagation(); if (e.stopPropagation) e.stopPropagation();
this.classList.remove('over'); this.classList.remove('over');
var destination = this.id; var destination = this.id;
var origin = e.dataTransfer.getData('Text'); var origin = e.dataTransfer.getData('Text');
// ERASE this 2 lines and move in other directive // ERASE this 2 lines and move in other directive
// One for drop in general view and other to drop in add pictos view // One for drop in general view and other to drop in add pictos view
//var item = document.getElementById(origin); //var item = document.getElementById(origin);
//this.appendChild(item); //this.appendChild(item);
...@@ -155,11 +155,11 @@ dashboardDirectives.directive('droppable', function() { ...@@ -155,11 +155,11 @@ dashboardDirectives.directive('droppable', function() {
// call the passed drop function // call the passed drop function
scope.$apply(function(scope) { scope.$apply(function(scope) {
var fn = scope.drop(); var fn = scope.drop();
if ('undefined' !== typeof fn) { if ('undefined' !== typeof fn) {
fn(origin, destination); fn(origin, destination);
} }
}); });
return false; return false;
}, },
false false
...@@ -178,7 +178,7 @@ dashboardDirectives.directive('droppableadd', function() { ...@@ -178,7 +178,7 @@ dashboardDirectives.directive('droppableadd', function() {
link: function(scope, element) { link: function(scope, element) {
// again we need the native object // again we need the native object
var el = element[0]; var el = element[0];
el.addEventListener( el.addEventListener(
'dragover', 'dragover',
function(e) { function(e) {
...@@ -190,7 +190,7 @@ dashboardDirectives.directive('droppableadd', function() { ...@@ -190,7 +190,7 @@ dashboardDirectives.directive('droppableadd', function() {
}, },
false false
); );
el.addEventListener( el.addEventListener(
'dragenter', 'dragenter',
function(e) { function(e) {
...@@ -199,7 +199,7 @@ dashboardDirectives.directive('droppableadd', function() { ...@@ -199,7 +199,7 @@ dashboardDirectives.directive('droppableadd', function() {
}, },
false false
); );
el.addEventListener( el.addEventListener(
'dragleave', 'dragleave',
function(e) { function(e) {
...@@ -208,31 +208,46 @@ dashboardDirectives.directive('droppableadd', function() { ...@@ -208,31 +208,46 @@ dashboardDirectives.directive('droppableadd', function() {
}, },
false false
); );
el.addEventListener( el.addEventListener(
'drop', 'drop',
function(e) { function(e) {
e.preventDefault(); // Added to avoid openning the picto image e.preventDefault(); // Added to avoid openning the picto image
// Stops some browsers from redirecting. // Stops some browsers from redirecting.
if (e.stopPropagation) e.stopPropagation(); if (e.stopPropagation) e.stopPropagation();
this.classList.remove('over'); this.classList.remove('over');
var destination = this.id; var destination = this.id;
var origin = e.dataTransfer.getData('Text'); var origin = e.dataTransfer.getData('Text');
// call the passed drop function // call the passed drop function
scope.$apply(function(scope) { scope.$apply(function(scope) {
var fn = scope.drop(); var fn = scope.drop();
if ('undefined' !== typeof fn) { if ('undefined' !== typeof fn) {
fn(origin, destination); fn(origin, destination);
} }
}); });
return false; return false;
}, },
false false
); );
} }
} }
}); });
\ No newline at end of file dashboardDirectives.directive('popoveraddpicto', function() {
var y=99999;
return {
restrict: 'A',
link: function (scope, element, attrs) {
if(element[0].y <= y){
y=element[0].y;
attrs.popoverPlacement="bottom";
}
console.log(element[0].y);
console.log(angular.element( document.querySelector( '#collections' ) ));
}
}
});
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
<div id="clearfix-infiniteScroll-parent" infinite-scroll="scroll()" infinite-scroll-container="'#collections'"> <div id="clearfix-infiniteScroll-parent" infinite-scroll="scroll()" infinite-scroll-container="'#collections'">
<div class="picto_peq pull-left" ng-repeat="p in pictos" > <div class="picto_peq pull-left" ng-repeat="p in pictos" >
<img ng-src="{{p.uri}}" popover="{{p.expressions[0].text}}" popover-trigger="mouseenter" style="z-index:9000"/> <img ng-src="{{p.uri}}" popover="{{p.expressions[0].text}}" popover-trigger="mouseenter" popover-placement="top" style="z-index:9000" popoveraddpicto/>
<!-- Options to remove picto (Only for own pictos) --> <!-- Options to remove picto (Only for own pictos) -->
<div class="picto_options"> <div class="picto_options">
<a ng-click="remove_own_picto(p.id)" class="picto_remove" title="{{ 'delete' | translate }}" ng-show="source == 'ownpictos'"> <a ng-click="remove_own_picto(p.id)" class="picto_remove" title="{{ 'delete' | translate }}" ng-show="source == 'ownpictos'">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment