javascript - polymer - slider 前/后

Question

我正在尝试创建一个类似于 before-after.js 或 cocoen 的之前/之后图像 slider 作为 Rails 的自定义 polymer Web 组件。但是，我的实现遇到了一些 JavaScript 问题。在这个问题的过程中，有些已经得到了解决。剩下的主要问题是:

1. 只有页面上组件的第一个实例有效!
2. JS 无法找到 Web 组件的 DOM 元素，除非即使包含脚本，它们也位于 window.onload 内位于组件 .html 的最末尾。

以下是 slider 的 HTML、JS 和 CSS 文件:

image-slider.html:

<dom-module id="image-slider">
  <link rel="stylesheet" href="image-slider.css" />
  <template>
    <div id="dual-wrapper" style$="border: [[border]]; 
          border-radius: [[border_radius]]; width: [[width]]; 
          height: [[height]]; margin: [[margin]];">
      <div id="img-snd-wrap">
        <img src$="[[snd]]" class="img-snd">
      </div>
      <div id="img-fst-wrap">
        <img src$="[[fst]]" class="img-fst">
      </div>
      <div class="img-blind" style="width: [[width]]; height: [[height]]"></div>
      <div id="img-transition-slider" style$="height: [[height]];">
        <div id="img-transition-slider-handle" 
        style$="margin-top: calc([[height]]/2 - [[handle_height]]/2); 
        height: [[handle_height]];">
        </div>
      </div>
    </div>
  </template>

  <script src="image-slider.js"></script>
</dom-module>

image-slider.js:

Polymer({
    is: "image-slider",
    properties: {
        fst: {
            type: String
        },
        snd: {
            type: String
        },
        width: {
            type: String
        },
        height: {
            type: String
        },
        border: {
            type: String,
            value: "none"
        },
        border_radius: {
            type: String,
            value: "0px"
        },
        handle_height: {
            type: String,
            value: "80px"
        }
    },
    attached: function () {
        var slider, first, second, container, x, prev_x, containerWidth;

        slider = this.$['img-transition-slider'];
        console.log(slider);
        first = this.$['img-fst-wrap'];
        second = this.$['img-snd-wrap'];
        container = this.$['dual-wrapper'];
        slider.onmousedown = function(e) {
            document.body.style.cursor = "col-resize";
            containerWidth = container.clientWidth;
            prev_x = x - slider.offsetLeft;
            slider.querySelector("#img-transition-slider-handle").style["background-color"] = '#888';
        };
        document.onmousemove = function(e) {
            // X coordinate based on page, not viewport.
            if (e.pageX) { x = e.pageX; }
            // If the object specifically is selected, then move it to 
            // the X/Y coordinates that are always being tracked.
            if(slider) {
                var toReposition = (x - prev_x);
                var newPosition = ((toReposition > containerWidth) ? 
                                        containerWidth - 2
                                    : ((toReposition < 0) ? 
                                        0
                                    :
                                        toReposition
                                    ));
                slider.style["margin-left"] = newPosition + 'px';
                second.style["width"] = newPosition + "px";
                first.style["width"] = (containerWidth - newPosition) + "px";
                first.style["margin-left"] = newPosition + "px";
                first.getElementsByTagName("img")[0].style["margin-left"] = (-newPosition) + "px";
            }
        };
        document.onmouseup = function() {
            document.body.style.cursor = "default";
            slider.querySelector("#img-transition-slider-handle").style["background-color"] = '#555';
            slider = false;
        };
    }
});

image-slider.css:

:host {
  display: block;
}

#dual-wrapper {
    display: block;
    overflow: hidden;
    position: relative;

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#img-fst-wrap, #img-snd-wrap {
    display: block;
    position: absolute;
    overflow: hidden;
}

.img-blind {
    display: block;
    position: absolute;
}

#img-transition-slider {
    position: absolute;
    display: block;
    width: 0px;
    border: 1px solid #333;
    border-top: none;
    border-bottom: none;
}

#img-transition-slider:hover {
    cursor: col-resize;
}

#img-transition-slider-handle {
    width: 10px;
    margin-left: -5px;
    background-color: #555;
    border-radius: 2px;

    -webkit-transition: background-color .3s;
    transition: background-color .3s;
}

Answer 1

如果 Web 组件不可复制，那是因为您对本身重复的 id 使用了 document.getElementById()。因此，只有使用此 id 定义的第一个(或最后一个)元素将始终被返回。

您应该使用this.$.[sub-element's id]选择 Polymer 元素子树内的一个元素，并从 Polymer 元素内部添加鼠标事件监听器，位于 attached() callback 中方法:

var slider = this.$['image-transition-slider']  
//define the mouse event listeners inside the element

其中 this 是对自定义元素本身的引用。