B2G/gecko/browser/components/tabview/ui.js
// creates a new groupItem based on the user's drag.
creates a new groupItem based on the user's drag.
creates a new groupItem based on the user ' s drag .
function UI__createGroupItemOnDrag(e) {
    const minSize = 60;
    const minMinSize = 15;
    let lastActiveGroupItem = GroupItems.getActiveGroupItem();
    var startPos = { x: e.clientX, y: e.clientY };
    var phantom = iQ("<div>")
      .addClass("groupItem phantom activeGroupItem dragRegion")
      .css({
        position: "absolute",
        zIndex: -1,
        cursor: "default"
      })
      .appendTo("body");
    var item = { 
      container: phantom,
      isAFauxItem: true,
      bounds: {},
      getBounds: function FauxItem_getBounds() {
        return this.container.bounds();
      },
      setBounds: function FauxItem_setBounds(bounds) {
        this.container.css(bounds);
      },
      setZ: function FauxItem_setZ(z) {
      },
      setOpacity: function FauxItem_setOpacity(opacity) {
        this.container.css("opacity", opacity);
      },
      pushAway: function () {},
    };
    item.setBounds(new Rect(startPos.y, startPos.x, 0, 0));
    var dragOutInfo = new Drag(item, e);
    function updateSize(e) {
      var box = new Rect();
      box.left = Math.min(startPos.x, e.clientX);
      box.right = Math.max(startPos.x, e.clientX);
      box.top = Math.min(startPos.y, e.clientY);
      box.bottom = Math.max(startPos.y, e.clientY);
      item.setBounds(box);
      var stationaryCorner = "";
      if (startPos.y == box.top)
        stationaryCorner += "top";
      else
        stationaryCorner += "bottom";
      if (startPos.x == box.left)
        stationaryCorner += "left";
      else
        stationaryCorner += "right";
      dragOutInfo.snap(stationaryCorner, false, false); 
      box = item.getBounds();
      if (box.width > minMinSize && box.height > minMinSize &&
         (box.width > minSize || box.height > minSize))
        item.setOpacity(1);
      else
        item.setOpacity(0.7);
      e.preventDefault();
    }
    let self = this;
    function collapse() {
      let center = phantom.bounds().center();
      phantom.animate({
        width: 0,
        height: 0,
        top: center.y,
        left: center.x
      }, {
        duration: 300,
        complete: function() {
          phantom.remove();
        }
      });
      self.setActive(lastActiveGroupItem);
    }
    function finalize(e) {
      iQ(window).unbind("mousemove", updateSize);
      item.container.removeClass("dragRegion");
      dragOutInfo.stop();
      let box = item.getBounds();
      if (box.width > minMinSize && box.height > minMinSize &&
         (box.width > minSize || box.height > minSize)) {
        let opts = {bounds: item.getBounds(), focusTitle: true};
        let groupItem = new GroupItem([], opts);
        self.setActive(groupItem);
        phantom.remove();
        dragOutInfo = null;
        gTabView.firstUseExperienced = true;
      } else {
        collapse();
      }
    }
    iQ(window).mousemove(updateSize)
    iQ(gWindow).one("mouseup", finalize);
    e.preventDefault();
    return false;
  }
function UI__createGroupItemOnDrag ( e ) { const minSize = 60 ; const minMinSize = 15 ; let lastActiveGroupItem = GroupItems . getActiveGroupItem ( ) ; var startPos = { x : e . clientX , y : e . clientY } ; var phantom = iQ ( "<div>" ) . addClass ( "groupItem phantom activeGroupItem dragRegion" ) . css ( { position : "absolute" , zIndex : - 1 , cursor : "default" } ) . appendTo ( "body" ) ; var item = { container : phantom , isAFauxItem : true , bounds : { } , getBounds : function FauxItem_getBounds ( ) { return this . container . bounds ( ) ; } , setBounds : function FauxItem_setBounds ( bounds ) { this . container . css ( bounds ) ; } , setZ : function FauxItem_setZ ( z ) { } , setOpacity : function FauxItem_setOpacity ( opacity ) { this . container . css ( "opacity" , opacity ) ; } , pushAway : function ( ) { } , } ; item . setBounds ( new Rect ( startPos . y , startPos . x , 0 , 0 ) ) ; var dragOutInfo = new Drag ( item , e ) ; function updateSize ( e ) { var box = new Rect ( ) ; box . left = Math . min ( startPos . x , e . clientX ) ; box . right = Math . max ( startPos . x , e . clientX ) ; box . top = Math . min ( startPos . y , e . clientY ) ; box . bottom = Math . max ( startPos . y , e . clientY ) ; item . setBounds ( box ) ; var stationaryCorner = "" ; if ( startPos . y == box . top ) stationaryCorner += "top" ; else stationaryCorner += "bottom" ; if ( startPos . x == box . left ) stationaryCorner += "left" ; else stationaryCorner += "right" ; dragOutInfo . snap ( stationaryCorner , false , false ) ; box = item . getBounds ( ) ; if ( box . width > minMinSize && box . height > minMinSize && ( box . width > minSize || box . height > minSize ) ) item . setOpacity ( 1 ) ; else item . setOpacity ( 0.7 ) ; e . preventDefault ( ) ; } let self = this ; function collapse ( ) { let center = phantom . bounds ( ) . center ( ) ; phantom . animate ( { width : 0 , height : 0 , top : center . y , left : center . x } , { duration : 300 , complete : function ( ) { phantom . remove ( ) ; } } ) ; self . setActive ( lastActiveGroupItem ) ; } function finalize ( e ) { iQ ( window ) . unbind ( "mousemove" , updateSize ) ; item . container . removeClass ( "dragRegion" ) ; dragOutInfo . stop ( ) ; let box = item . getBounds ( ) ; if ( box . width > minMinSize && box . height > minMinSize && ( box . width > minSize || box . height > minSize ) ) { let opts = { bounds : item . getBounds ( ) , focusTitle : true } ; let groupItem = new GroupItem ( [ ] , opts ) ; self . setActive ( groupItem ) ; phantom . remove ( ) ; dragOutInfo = null ; gTabView . firstUseExperienced = true ; } else { collapse ( ) ; } } iQ ( window ) . mousemove ( updateSize ) iQ ( gWindow ) . one ( "mouseup" , finalize ) ; e . preventDefault ( ) ; return false ; }
creates a new groupItem based on the user's drag.
creates a new groupItem based on the user ' s drag .
// a faux-Item // don't set a z-index because we want to force it to be low. // we don't need to pushAway the phantom item at the end, because // when we create a new GroupItem, it'll do the actual pushAway. // compute the stationaryCorner // null for ui, which we don't use anyway.