Your IP : 3.147.47.202


Current Path : /usr/local/mgr5/skins/orion/src/
Upload File :
Current File : //usr/local/mgr5/skins/orion/src/App.DashboardDragAndDrop.js

/**
 * Dashboard block moving
 *  @param {object} window  global object
 *  @param {function} $ jQuery library
 *  @param {object} EventMgr EventMgr library
 *  @param {object} App Application
 */
App.DashboardDragAndDrop = function(window, $, EventMgr, App) {
  'use strict';
  var dashboardTabSel = '.b-form-page_view_dblock .i-form-page__title',
      dragObj = {},
      bPositions = [],
      bCount = {},
      pos = null,
      dragPos = null,
      after = false,
      lastMoveTime = 0;

  function init() {
    EventMgr.on($content(), dashboardTabSel, 'mousedown', drag);
    EventMgr.on($content(), dashboardTabSel, 'ontouchstart', drag);
  }

  function topBorder() {
    return $('#content').offset().top;
  }

  function $content() {
    return $('#content');
  }

  function $topCont() {
    return $('#dash-top');
  }

  function $leftCont() {
    return $('#dash-left');
  }

  function $rightCont() {
    return $('#dash-right');
  }

  function getDragPos(name) {
    var len = bPositions.length;
    for (var i = 0; i < len; i++) {
      if (bPositions[i].name === name) {
        return i;
      }
    }
  }

  function drag(e) {
    e = e || window.event;
    //get positions all blocks
    getPositions();
    if (dragObj.shadow !== undefined) { dragObj.shadow.remove();}
    var self = $(this).parent();
    dragObj.obj = self.parent();
    document.onmouseup = drop;
    if (document.captureEvents) { document.captureEvents(Event.MOUSEUP); }
    document.onmousemove = move;
    if (document.captureEvents) { document.captureEvents(Event.MOUSEMOVE); }
    document.ontouchend = drop;
    document.ontouchmove = move;
    if (e.touches) {
      dragObj.y = e.touches[0].pageY;
      dragObj.x = e.touches[0].pageX;
    } else {
      dragObj.y = e.clientY;
      dragObj.x = e.clientX;
    }

    var width = dragObj.obj[0].offsetWidth,
        height = dragObj.obj[0].offsetHeight,
        widthHeader = self.find('.i-form-page__title').width(),
        heightHeader = this.offsetHeight,
        heightBody = height - heightHeader,
        $shadow = $('<div class="dash-block-bg" style="width: ' +
            width + 'px; height: ' + height +
            'px;"><div class="dash-block-bg-header" style="width: ' +
            widthHeader + 'px; height: ' + heightHeader +
            'px;"></div><div class="dash-block-bg-body" style=" height: ' +
            heightBody + 'px;"></div></div>');

    if (dragObj.obj.hasClass('b-form-page_st_collapsed')) {
      $shadow.addClass('b-form-page_st_collapsed');
    }
    dragObj.obj.after($shadow);

    dragObj.shadow = $shadow;
    dragObj.name = dragObj.obj[0].getAttribute('data-tabid');
    dragPos = getDragPos(dragObj.name);
    var top = this.parentNode.parentNode.offsetTop,
        left = this.parentNode.parentNode.offsetLeft;

    dragObj.obj[0].style.left = left + 'px';
    dragObj.obj[0].style.top = top + 'px';
    dragObj.obj[0].style.width = width + 'px';
    dragObj.obj[0].style.height = height + 'px';
    dragObj.obj[0].style.position = 'absolute';
    dragObj.obj.addClass('movingBlock');
    if (e.preventDefault) {e.preventDefault();}

    blockEvent(e);
  }

  function move(e) {
    if (lastMoveTime - 0 === 0) {
      lastMoveTime = new Date().getTime();
    } else {
      var currentTime = new Date().getTime();
      if (currentTime - lastMoveTime < 50) {
        return;
      } else {
        lastMoveTime = currentTime;
      }
    }
    e = e || window.event;
    var x = null,
        y = null;
    if (e.touches !== undefined) {
      y = e.touches[0].pageY;
      x = e.touches[0].pageX;
    } else {
      y = e.clientY;
      x = e.clientX;
    }
    //moving block
    var curX = x - dragObj.x,
        curY = y - dragObj.y;
    if (Math.abs(curX) < 10 && Math.abs(curY) < 10) {
      return;
    }
    pos = null;
    dragObj.x = x;
    dragObj.y = y;
    var top = parseInt(dragObj.obj[0].style.top, 10),
        left = parseInt(dragObj.obj[0].style.left, 10);
    dragObj.obj[0].style.left = left + curX + 'px';
    dragObj.obj[0].style.top = top + curY + 'px';
    var len = bPositions.length;
    //moving shadow
    for (var i = 0; i < len; i++) {
      if (bPositions[i].x1 <= x && bPositions[i].x2 >= x &&
          bPositions[i].y1 <= y && bPositions[i].y2 >= y) {
        //insert before
        // dragObj.shadow[0].style.width = bPositions[i].width;
        // bPositions[i].self.before(dragObj.shadow);
        pos = i;
        after = false;
        break;
      } else if (bPositions[i].x1 <= x && bPositions[i].x2 >= x &&
                 bPositions[i].y1 <= y && bPositions[i].y2 + 37 >= y) {
        //insert after
        //dragObj.shadow[0].style.width = bPositions[i].width;
        //bPositions[i].self.after(dragObj.shadow);
        pos = i;
        after = true;
        break;
      } else if (topBorder() >= y && bCount.top === 0) {
        //insert into TOP
        pos = 'TOP';
      } else if ($rightCont().offset().left <= x &&
          $rightCont().offset().top <= y) {
        //insert into RIGHT
        pos = 'RIGHT';
      } else if ($rightCont().offset().left >= x &&
          $rightCont().offset().top <= y) {
        //insert into LEFT
        pos = 'LEFT';
      }
    }
    if (pos !== null) {
      var content = App.Dom.byId('content');
      if (content === null) { return; }
      if (pos === 'TOP') {
        $topCont().append(dragObj.shadow);
        dragObj.shadow[0].style.width = content.offsetWidth - 36 + 'px';
      } else if (pos === 'LEFT') {
        $leftCont().append(dragObj.shadow);
        dragObj.shadow[0].style.width = ((content.offsetWidth - 36) / 2) + 'px';
      } else if (pos === 'RIGHT') {
        $rightCont().append(dragObj.shadow);
        dragObj.shadow[0].style.width = ((content.offsetWidth - 36) / 2) + 'px';
      } else {
        dragObj.shadow[0].style.width = bPositions[pos].width + 'px';
        if (after) {
          bPositions[pos].self.after(dragObj.shadow);
        } else {
          bPositions[pos].self.before(dragObj.shadow);
        }
      }
    }
    if (e.preventDefault) { e.preventDefault(); }
    //for remove collapsed block handler
    App.Global.HeaderMoving = true;
    blockEvent(e);
  }

  function drop(e) {
    var rPos = false;
    e = e || window.event;
    document.onmousemove = null;
    document.onmouseup = null;
    document.ontouchmove = null;
    document.ontouchend = null;
    dragObj.obj.css('left', '')
      .css('top', '')
      .css('position', '')
      .width('')
      .height('')
      .removeClass('movingBlock');
    if (pos !== null) {
      if (pos === 'TOP') {
        $topCont().append(dragObj.obj);
        dragObj.order = 9;
      } else if (pos === 'LEFT') {
        $leftCont().append(dragObj.obj);
        dragObj.order = 9;
      } else if (pos === 'RIGHT') {
        $rightCont().append(dragObj.obj);
        dragObj.order = 9;
      } else if (dragObj.name !== bPositions[pos].name) {
        rPos = true;
        if (after) {
          bPositions[pos].self.after(dragObj.obj);
          dragObj.order = bPositions[pos].order;
        } else {
          bPositions[pos].self.before(dragObj.obj);
          dragObj.order = bPositions[pos].order;
        }
      }
      //don't save if after or before self
      if (rPos) {
        if (pos !== dragPos) {
          if (after) {
            //check for next
            if (bPositions[dragPos + 1] !== undefined &&
                bPositions[dragPos].pos === bPositions[pos].pos &&
                bPositions[pos].order === (bPositions[dragPos].order + 1)) {

            } else {
              dragObj.order += 1;
            }
          }
          saveBlock(dragObj);
        }
      } else {
        saveBlock(dragObj);
      }

      setTimeout(function() {
        EventMgr.trigger('updateScroll', {});
      }, 100);

    }
    if (e.preventDefault) { e.preventDefault(); }
    dragObj.shadow.remove();
    pos = null;
    //reload block after moved
    if (dragObj.obj.children('h3').attr('data-block-type') === 'report') {
      dragObj.obj.find('.dashblock-reload').trigger('click');
    }
  }
  //send position to server
  function saveBlock(dragObj) {
    var position = dragObj.obj.parents('.b-dashboard_cell').attr('data-pos'),
        order = dragObj.order,
        display = 'max',
        block = dragObj.name;
    if (dragObj.shadow.hasClass('collapsed')) { display = 'min';}
    var param = {
      func: 'dashboard.save', order: order,
      block: block, display: display, position: position },
        url = pageInfo.url;
    EventMgr.trigger('ajaxRequest', {
      url: url, param: param, trfunc: 'DoNothing', queue: 'noqueue' });
  }
  //get position each block in dashboard
  function getPositions() {

    bPositions = [];
    var leftCount = 0,
        rightCount = 0,
        topCount = 0,
        self,
        offset,
        posObj;

    $('#dash-top .b-form-page').each(function() {
      self = $(this);
      offset = self.offset();
      posObj = {
        x1: offset.left,
        x2: offset.left + self.width(),
        y1: offset.top,
        y2: offset.top + self.height(),
        width: self.width(),
        self: self,
        name: self.attr('data-tabid'),
        order: topCount++,
        pos: 'TOP'
      };
      bPositions.push(posObj);
    });
    $('#dash-left .b-form-page').each(function() {
      self = $(this);
      offset = self.offset();
      posObj = {
        x1: offset.left,
        x2: offset.left + self.width(),
        y1: offset.top,
        y2: offset.top + self.height(),
        width: self.width(),
        self: self,
        name: self.attr('data-tabid'),
        order: leftCount++,
        pos: 'LEFT'
      };
      bPositions.push(posObj);
    });
    $('#dash-right .b-form-page').each(function() {
      self = $(this);
      offset = self.offset();
      posObj = {
        x1: offset.left,
        x2: offset.left + self.width(),
        y1: offset.top,
        y2: offset.top + self.height(),
        width: self.width(),
        self: self,
        name: self.attr('data-tabid'),
        order: rightCount++,
        pos: 'RIGHT'
      };
      bPositions.push(posObj);
    });
    self = null;
    offset = null;
    posObj = null;
    bCount = {
      top: topCount,
      left: leftCount,
      right: rightCount
    };
  }

  return {
    init: init,
    bPositions: bPositions
  };
}(window, $, EventMgr, App);