layui-v2.4.5 compatibility tuning

It has been written in the community of layui, but the community editor is really not good. Write it again here, just to consolidate it

table.js

  1. Description: the [all browsers] loading icon is static and wants to be animated.

    Solution: find each layer UI icon loading, add class layer UI anim layer anim rotate layer UI anim loop.

  2. Description: if the cell of [Firefox and IE10 +] is plain text, then the number of omitted words after it needs to be more than 3 characters to trigger the layer.tips pop-up window.

    Solution: because scrollWidth is used internally, its performance in these two models is different from that of Google. Now calculate the pixels by calculating the length of the text inside.

// Source code table.js 1600 or so
var othis = $(this)
,elemCell = othis.children(ELEM_CELL);
// m
var computedFontWidth = function() {
  var fontSize = parseFloat(elemCell.css('font-size'))
  var text = elemCell.text()
  var width = 0, i = 0, len = text.length
  while ( i < len) {
    // Basic pixel, my is 14px, I don't know if I can see the font size setting in html or body.
    // The length of fonts in Firefox and IE is that double byte text is calculated based on basic pixels, and single byte text contacts pixels / 2.
    // Google's comparison is different. Double byte text is calculated by the basic pixel, and single byte is the difference between the basic pixel / 2 and 16 / 2,
    // I don't know if I think it's complicated, so use + 1 to fine tune the differences between browsers
    width += text.charAt(i).match(/[^\x00-\xff]/ig) != null ? fontSize : (fontSize / 2 + 1)
    i++
   }
  return width
}

var computedScrollWidth = function() {
  var hasChildren = elemCell.children().length > 0
  var originScrollWidth = elemCell.prop('scrollWidth')
  var realScrollWidth = hasChildren 
    ? 0
    : (computedFontWidth() + parseFloat(elemCell.css('padding-left')) + parseFloat(elemCell.css('padding-right')))
  // The size value is compared here. For the original non-pure text, the original way of layui is used
  return Math.max(originScrollWidth, realScrollWidth)
}

if(hide){
  othis.find('.layui-table-grid-down').remove();
// }Else if (elemcell. Prop ('scrollwidth ') > elemcell. Outerwidth()) {/ / comment out the original code
} else if(computedScrollWidth() > elemCell.outerWidth()){
  if(elemCell.find('.'+ ELEM_GRID_DOWN)[0]) return;
  othis.append('<div class="'+ ELEM_GRID_DOWN +'"><i class="layui-icon layui-icon-down"></i></div>');
}

form.js

  1. Description: the location of [all browsers] Select. If select is on the far right and the bottom right corner of the project, click to make the scroll bar appear on the page without scroll.

    Solve:

// Modify partial positioning writing
var showDown = function(){
  // Reset style
  dl.css({
    top: '',
    left: '',
    right: ''
  })
  var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop()
  ,dlHeight = dl.outerHeight(), dlWidth = dl.outerWidth(), winWidth = $(window).width();
 
  index = select[0].selectedIndex; //Get the latest selectedIndex

   // Determine whether it is at the rightmost critical point
  if (dlWidth + reElem.offset().left > winWidth) {
    dl.css({
      left: 'auto',
      right: 0
    })
  }
  reElem.addClass(CLASS+'ed');
  dds.removeClass(HIDE);
  nearElem = null;
  
  //Initially selected style
  dds.eq(index).addClass(THIS).siblings().removeClass(THIS);

  //Up and down positioning recognition
  if(top + dlHeight > $win.height() && top >= dlHeight){
    reElem.addClass(CLASS + 'up');
  } else {
    // Location override definition
  
    // The distance required for animation and the interval between pop ups are based on the style of the layui, which should be calculated theoretically
    var ANIM_UP = 30, SPACE = 5; 
    var reElemBottom = reElem.get(0).getBoundingClientRect().bottom;
    var dlTop = parseInt(dl.css('top'));
    var winHeight = $win.height();
    if (reElemBottom + dlHeight + ANIM_UP > winHeight ) {
      var computeValue = dlTop - (reElemBottom + SPACE - (winHeight - dlHeight - ANIM_UP))
      dl.css('top', computeValue)
    }
  }
  followScroll();
}

tree.js

  1. Description: I use the version 2.4.5 of layui. The internal tree function has been satisfied, but because of the icon problem, I simply hide it here.

    Solve:

// First amendment
Tree.prototype.tree = function() {
   // About line 48
   var li = $(['<li '+ (hasChild ? " is-branch " : " is-leaf ") + (item.spread ? 'data-spread="'+ item.spread +'"' : '') +'>'
}

// The second change, probably in 72 - 76 notes out

/*+ ('<i class="layui-icon layui-tree-'+ (hasChild ? "branch" : "leaf") +'">'+ (
         hasChild ? ( item.spread ? icon.branch[1] : icon.branch[0]) : icon.leaf) +'</i>') */ //Node icon

TODO

Updating continuously

Please indicate the reprint, Address of this article

Tags: Javascript Firefox Google IE

Posted on Mon, 02 Dec 2019 15:51:44 -0500 by javawizkid