vxdroppable.js

'use strict';

/**
 * @ngdoc directive
 * @name veraxWebUiApp.directive:vxDroppable
 * @description Directiva para el elemento que va a recibir los otros componentes
 * @attributes
 * # vxDroppable
 */
angular.module('veraxWebUiApp')
  .directive('vxDroppable', ['formGenerator', '$rootScope', function (formGenerator, $rootScope) {
    var moved = false;
    var initialPosition;
    var linker = function (scope, element, attrs) {
      // Elemento destinado a recibir elementos, usa jQueryUI, notar que se
      // adiciona la funcionalidad de "sortable"
      jQuery(element).droppable({
        greedy: true,
        accept: function (draggable) {
          return jQuery(draggable).hasClass(attrs.vxAttrAccept);
        },
        //hoverClass: 'portlet-placeholder ui-corner-all',
        scope: attrs.vxAttrAccept,
        drop: function (event, ui) {
          if (jQuery(ui.draggable).hasClass(attrs.vxAttrAccept)) {
            // Se prueba el tipo para generar el componente adecuado
            switch (jQuery(ui.draggable).attr('vx-type')) {
              case 'textbox':
                formGenerator.createControl(scope.parent, 'textbox');
                break;
              case 'seccion':
                formGenerator.createSection(scope.parent);
                break;
            }
            scope.$apply();
          }
        }
      }).sortable({
        handle: '.portlet-header',
        cancel: '.portlet-toggle',
        placeholder: 'portlet-placeholder ui-corner-all',
        sort: function () {
          // gets added unintentionally by droppable interacting with
          // sortable
          // using connectWithSortable fixes this, but doesn't allow
          // you to customize active/hoverClass options
          jQuery(this).removeClass('ui-state-default');
        },
        start:function(event, ui){
          initialPosition = ui.item.index() + 1;
        },
        stop: function(event, ui){
          if(moved) {
            moved = false;
            return;
          }

          if($(ui.item).data('type') === 'secciones'){
            formGenerator.moveSection(scope.parent, initialPosition, ui.item.index() + 1);
          }else{
            formGenerator.moveControl(scope.parent, initialPosition, ui.item.index() + 1);
          }

          scope.$apply();

          console.log('ordered');

        },
        receive: function (event, ui) {
          var senderColumn = angular.element(ui.sender).scope().content;
          formGenerator.moveControl(senderColumn, initialPosition, ui.item.index() + 1, scope.parent);
          moved = true;
          scope.$apply();
          console.log('received');
        }
      });

      // Se garantiza que se puedan desplazar elementos agregados al formulario de forma adecuada
      // clasificando las listas para que solo permitan el elemento adecuado
      if (attrs.vxAttrAccept === 'controles') {
        jQuery(element).sortable('option', 'connectWith', '[vx-attr-accept=' + attrs.vxAttrAccept + ']');
      }
    };

    return {
      restrict: 'A',
      link: linker,
      scope: {
        parent: '='
      }
    };
  } ]);