Question

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

只有页面上组件的第一个实例才有效！
JS除非找到Web组件的DOM元素它们在window.onload内，即使包含脚本在组件的.html的最后。

以下是滑块的HTML，JS和CSS文件：

图片-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>

图片-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;
        };
    }
});

图片-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组件不可复制，那是因为您在document.getElementById()上使用了自己重复的id。因此，只会返回使用此id定义的第一个（或最后一个）元素。

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

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

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

聚合物 - 滑块之前/之后

1 个答案: