Issue #939, added directive to change popover placement

sails/src/assets/scripts/directives/directives.js

@@ -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() {
   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() {
       },
       },
       false
       false
     );
     );
-    
+
     el.addEventListener(
     el.addEventListener(
       'dragend',
       'dragend',
       function(e) {
       function(e) {
@@ -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() {
         },
         },
         false
         false
       );
       );
-      
+
       el.addEventListener(
       el.addEventListener(
         'dragenter',
         'dragenter',
         function(e) {
         function(e) {
@@ -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() {
         },
         },
         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() {
           // 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() {
     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() {
         },
         },
         false
         false
       );
       );
-      
+
       el.addEventListener(
       el.addEventListener(
         'dragenter',
         'dragenter',
         function(e) {
         function(e) {
@@ -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() {
         },
         },
         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' ) ));
+      }
+    }
+});

sails/src/assets/scripts/modules/student/views/addpicto.html

@@ -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'">