javascript - Polymer 1.0 尝试制作一种类似于核心 split 器的 split 器，可以称为铁 split 器

Question

我正在尝试制作一个名为 core-splitter 的元素，该元素在 1.0 中已弃用，因为它在我们的项目中起着关键作用。

如果您不知道 core-splitter 的作用，我可以提供一个简短的描述。 core-splitter 提供了一个分割栏，拖动分割栏将调整同级元素的大小。通常您会希望将 core-splitter 与 flex 布局一起使用，以便其他同级元素可以灵活使用。不幸的是，这仅适用于 Polymer 0.5，但在 1.0 中已被弃用。这是 Polymer 0.5 版本的演示。 Demo for core-splitter in Polymer 0.5

我可以在普通的 javascript 中做到这一点，但无法使其在 Polymer 1.0 中工作。

这是一个fiddle

<link rel="import"       href="https://cdn.rawgit.com/Polymer/polymer/master/polymer.html">
    <dom-module id="splitter-element">
      <template>
        <div id="div1" class="split">Bacon ipsum dolor amet beef ribs         meatloaf picanha pork loin pork chop rump pig sausage bacon shank boudin beef fatback. Pork loin turducken t-bone chicken.</div>
        <div class="gutter" style="width: 10px;"></div>
        <div id="div2" class="split">Brisket andouille cow ball tip. Ham ground round short loin tri-tip ribeye t-bone boudin, pork loin turkey drumstick tongue pork chop. Kielbasa doner picanha turducken, swine bacon shank pastrami andouille.</div>
      </template>
     <style>
    .gutter {
       background-color: #eee;
       background-image: url('https://ssl.gstatic.com/ui/v1/icons/mail/grippy_large.png');
       background-repeat: no-repeat;
       background-position: 50%;
       cursor: move;
       cursor: grab;
       cursor: -moz-grab;
       cursor: -webkit-grab;
    }
  .split, .gutter {
      height: 100%;
      float: left;
  }
.gutter:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
 }
.split {
    box-sizing: border-box;
    padding: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
}
  </style>
  <script>
  Polymer({
    is: 'splitter-element',
    properties:{
      "dragging":{
       Value:false
     }
    },
    "split":function(ids, options){
    options = typeof options !== 'undefined' ?  options : {};

    if (!options.gutterWidth) options.gutterWidth = 10;
    if (!options.minWidth) options.minWidth = 100;
    if (!options.snapOffset) options.snapOffset = 30;

  // Event listeners for drag events, bound to a pair object.
  // Save the pair's left position and width when dragging starts.
  // Prevent selection on start and re-enable it when done.

    var startDragging = function (e) {
        console.log('start');
        e.preventDefault();

         this.dragging = true;

        this.width = this.left.clientWidth + this.right.clientWidth + options.gutterWidth;
        this.x = this.left.getBoundingClientRect().left;

        this.left.addEventListener('selectstart', preventSelection);
        this.left.addEventListener('dragstart', preventSelection);
        this.right.addEventListener('selectstart', preventSelection);
        this.right.addEventListener('dragstart', preventSelection);

        this.left.style.userSelect = 'none';
        this.left.style.webkitUserSelect = 'none';
        this.left.style.MozUserSelect = 'none';

        this.right.style.userSelect = 'none';
        this.right.style.webkitUserSelect = 'none';
        this.right.style.MozUserSelect = 'none';

        if (options.onDragStart) {
            options.onDragStart();
        }
    },

    stopDragging = function () {
        this.dragging = false;

        this.left.removeEventListener('selectstart', preventSelection);
        this.left.removeEventListener('dragstart', preventSelection);
        this.right.removeEventListener('selectstart', preventSelection);
        this.right.removeEventListener('dragstart', preventSelection);

        this.left.style.userSelect = '';
        this.left.style.webkitUserSelect = '';
        this.left.style.MozUserSelect = '';

        this.right.style.userSelect = '';
        this.right.style.webkitUserSelect = '';
        this.right.style.MozUserSelect = '';

        if (options.onDragEnd) {
            options.onDragEnd();
        }
    },

    drag = function (e) {
        if (!this.dragging) return;

        // Get the relative position of the event from the left side of the
        // pair.

        var offsetX = e.clientX - this.x;

        // If within snapOffset of min or max, set offset to min or max

        if (offsetX <=  this.leftMin + options.snapOffset) {
            offsetX = this.leftMin;
        } else if (offsetX >= this.width - this.rightMin - options.snapOffset) {
            offsetX = this.width - this.rightMin;
        }

        // Left width is the same as offset. Right width is total width - left width.

        this.left.style.width = 'calc(' + (offsetX / this.width * 100) + '% - ' + options.gutterWidth / 2 + 'px)';
        this.right.style.width = 'calc(' + (100 - (offsetX / this.width * 100)) + '% - ' + options.gutterWidth / 2 + 'px)';

        if (options.onDrag) {
            options.onDrag();
        }
    },

    preventSelection = function () { return false; },

    // Given a list of DOM element ids and a list of percentage widths,
    // assign each element a width allowing for a gutter between each
    // pair. The number of gutters is ids.length - 1, and the total gutter
    // width is gutterWidth * (ids.length - 1). Before calculating
    // each width, subtract the total gutter width for the parent width.

    parent = document.getElementById(ids[0]).parentNode;

if (!options.widths) {
    var percent = 100 / ids.length;

    options.widths = [];

    for (var i = 0; i < ids.length; i++) {
        options.widths.push(percent);
    };
}

if (!Array.isArray(options.minWidth)) {
    var minWidths = [];

    for (var i = 0; i < ids.length; i++) {
        minWidths.push(options.minWidth);
    };

    options.minWidth = minWidths;
}

for (var i = 0; i < ids.length; i++) {
    var el = document.getElementById(ids[i]);

    if (i > 0) {
        var pair = {
                left: document.getElementById(ids[i - 1]),
                right: el,
                leftMin: options.minWidth[i - 1],
                rightMin: options.minWidth[i],
                dragging: false,
                parent: parent
            },
            gutter = document.createElement('div');

        gutter.className = 'gutter';
        gutter.style.width = options.gutterWidth + 'px';

        gutter.addEventListener('mousedown', startDragging.bind(pair));

        parent.addEventListener('mouseup', stopDragging.bind(pair));
        parent.addEventListener('mousemove', drag.bind(pair));
        parent.addEventListener('mouseleave', stopDragging.bind(pair));

        parent.insertBefore(gutter, el);

        pair.gutter = gutter;
    }

    el.style.width = 'calc(' + options.widths[i] + '% - ' + options.gutterWidth / 2 + 'px)';
}
  },
  "ready":function(){
      this.split(['div1', 'div2'], {
        widths: [25, 75],
        minWidth: 200
    });
  }
});
</script>
</dom-module>
<splitter-element>
</splitter-element>

Answer 1

更新:我升级了 core-splitter 的分支以与 Polymer 1.0 http://github.com/JC-Orozco/iron-splitter 兼容

答案:问题是 polymer 元件必须解决 Local DOM而不是常规的 DOM。这是使用 this.$[] 实现的而不是document.getElementById()还有Polymer.dom(this.root)而不是parent 。我能够通过相应地进行下一个更改来执行代码:

// parent = document.getElementById(ids[0]).parentNode;
parent = this.$[ids[0]].parentNode;

// var el = document.getElementById(ids[i]);
var el = this.$[ids[i]];

// left: document.getElementById(ids[i - 1]),
left: this.$[ids[i - 1]],

//parent.insertBefore(gutter, el);
Polymer.dom(this.root).insertBefore(gutter, el);

我还在模板部分中评论了装订线 div，因为当在 javascript 代码中创建装订线时，它会被重复:

<!-- <div id="gutter1" class="gutter" style="width: 10px;"></div> -->

我使用了从 _https://github.com/Polymer/polymer 安装了 Polymer 1.0 的本地服务器以及 splitter-element 目录中的接下来的两个文件。

演示.html:

<!DOCTYPE html>
<html>
<head>
  <title>splitter-element</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <script src="../webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="splitter-element.html">

  <style>
    .container {
      height: 240px;
      border: 4px solid #aaa;
    }
  </style>
</head>
<body>
  <div class="container" horizontal="" layout="">
    <splitter-element direction="left" minsize="128px"></core-splitter>
  </div>

</body>
</html>

和 splitter-element.html

<link rel="import"       href="../polymer/polymer.html">
<dom-module id="splitter-element">
  <template>
     <div id="div1" class="split">Bacon ipsum dolor amet beef ribs         meatloaf picanha pork loin pork chop rump pig sausage bacon shank boudin beef fatback. Pork loin turducken t-bone chicken.</div>
     <!-- <div id="gutter1" class="gutter" style="width: 10px;"></div> -->
     <div id="div2" class="split">Brisket andouille cow ball tip. Ham ground round short loin tri-tip ribeye t-bone boudin, pork loin turkey drumstick tongue pork chop. Kielbasa doner picanha turducken, swine bacon shank pastrami andouille.</div>
  </template>
  <style>
    .gutter {
      background-color: #eee;
      background-image: url(handle.svg);
      background-repeat: no-repeat;
      background-position: 50%;
      cursor: move;
      cursor: grab;
      cursor: -moz-grab;
      cursor: -webkit-grab;
    }
    .split, .gutter {
      height: 100%;
      float: left;
    }
    .gutter:active {
      cursor: grabbing;
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
    }
    .split {
      box-sizing: border-box;
      padding: 20px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
  </style>
  <script>
    Polymer({
      is: 'splitter-element',
      properties:{
        "dragging":{
         Value:false
        }
      },
      "split":function(ids, options){
        options = typeof options !== 'undefined' ?  options : {};

        if (!options.gutterWidth) options.gutterWidth = 10;
        if (!options.minWidth) options.minWidth = 100;
        if (!options.snapOffset) options.snapOffset = 30;

        // Event listeners for drag events, bound to a pair object.
        // Save the pair's left position and width when dragging starts.
        // Prevent selection on start and re-enable it when done.

        var startDragging = function (e) {
        console.log('start');
        e.preventDefault();

        this.dragging = true;

        this.width = this.left.clientWidth + this.right.clientWidth + options.gutterWidth;
        this.x = this.left.getBoundingClientRect().left;

        this.left.addEventListener('selectstart', preventSelection);
        this.left.addEventListener('dragstart', preventSelection);
        this.right.addEventListener('selectstart', preventSelection);
        this.right.addEventListener('dragstart', preventSelection);

        this.left.style.userSelect = 'none';
        this.left.style.webkitUserSelect = 'none';
        this.left.style.MozUserSelect = 'none';

        this.right.style.userSelect = 'none';
        this.right.style.webkitUserSelect = 'none';
        this.right.style.MozUserSelect = 'none';

        if (options.onDragStart) {
        options.onDragStart();
        }
      },

      stopDragging = function () {
        this.dragging = false;

        this.left.removeEventListener('selectstart', preventSelection);
        this.left.removeEventListener('dragstart', preventSelection);
        this.right.removeEventListener('selectstart', preventSelection);
        this.right.removeEventListener('dragstart', preventSelection);

        this.left.style.userSelect = '';
        this.left.style.webkitUserSelect = '';
        this.left.style.MozUserSelect = '';

        this.right.style.userSelect = '';
        this.right.style.webkitUserSelect = '';
        this.right.style.MozUserSelect = '';

        if (options.onDragEnd) {
        options.onDragEnd();
        }
      },

      drag = function (e) {
        if (!this.dragging) return;

        // Get the relative position of the event from the left side of the
        // pair.

        var offsetX = e.clientX - this.x;

        // If within snapOffset of min or max, set offset to min or max

        if (offsetX <=  this.leftMin + options.snapOffset) {
        offsetX = this.leftMin;
        } else if (offsetX >= this.width - this.rightMin - options.snapOffset) {
        offsetX = this.width - this.rightMin;
        }

        // Left width is the same as offset. Right width is total width - left width.

        this.left.style.width = 'calc(' + (offsetX / this.width * 100) + '% - ' + options.gutterWidth / 2 + 'px)';
        this.right.style.width = 'calc(' + (100 - (offsetX / this.width * 100)) + '% - ' + options.gutterWidth / 2 + 'px)';

        if (options.onDrag) {
        options.onDrag();
        }
      },

      preventSelection = function () { return false; },

      // Given a list of DOM element ids and a list of percentage widths,
      // assign each element a width allowing for a gutter between each
      // pair. The number of gutters is ids.length - 1, and the total gutter
      // width is gutterWidth * (ids.length - 1). Before calculating
      // each width, subtract the total gutter width for the parent width.

      // parent = document.getElementById(ids[0]).parentNode;
      parent = this.$[ids[0]].parentNode;

      if (!options.widths) {
        var percent = 100 / ids.length;

        options.widths = [];

        for (var i = 0; i < ids.length; i++) {
        options.widths.push(percent);
        };
      }

      if (!Array.isArray(options.minWidth)) {
        var minWidths = [];

        for (var i = 0; i < ids.length; i++) {
        minWidths.push(options.minWidth);
        };

        options.minWidth = minWidths;
      }

      for (var i = 0; i < ids.length; i++) {
        // var el = document.getElementById(ids[i]);
        var el = this.$[ids[i]];

        if (i > 0) {
        var pair = {
          // left: document.getElementById(ids[i - 1]),
          left: this.$[ids[i - 1]],
          right: el,
          leftMin: options.minWidth[i - 1],
          rightMin: options.minWidth[i],
          dragging: false,
          parent: parent
        },
        gutter = document.createElement('div');
        //gutter = this.$['gutter1']; 
        // This is the only case in this polymer element where 
        // using the normal DOM is appropriate.

        gutter.className = 'gutter';
        gutter.style.width = options.gutterWidth + 'px';

        gutter.addEventListener('mousedown', startDragging.bind(pair));

        parent.addEventListener('mouseup', stopDragging.bind(pair));
        parent.addEventListener('mousemove', drag.bind(pair));
        parent.addEventListener('mouseleave', stopDragging.bind(pair));

        // https://www.polymer-project.org/1.0/docs/devguide/local-dom.html
        //parent.insertBefore(gutter, el);
        Polymer.dom(this.root).insertBefore(gutter, el);

        pair.gutter = gutter;
      }

      el.style.width = 'calc(' + options.widths[i] + '% - ' + options.gutterWidth / 2 + 'px)';
      }
    },
    "ready":function(){
      this.split(['div1', 'div2'], {
      widths: [25, 75],
      minWidth: 200
      });
    }
    });
  </script>
</dom-module>