vue-diagonal-screens - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/DiagonalScreens.esm.js

@@ -303,9 +303,97 @@ var script = {
       _vm._v(" "),
-      _vm.indexClick !== null
-        ? _c(
-            "button",
-            { staticClass: "reset", on: { click: _vm.resetClickIndex } },
-            [_vm._v("\n    이전으로\n  ")]
-          )
-        : _vm._e()
+      _c("transition", { attrs: { name: "fade" } }, [
+        _vm.indexClick !== null
+          ? _c(
+              "button",
+              { staticClass: "reset", on: { click: _vm.resetClickIndex } },
+              [
+                _c(
+                  "svg",
+                  {
+                    attrs: {
+                      width: "11px",
+                      height: "20px",
+                      viewBox: "0 0 11 20",
+                      version: "1.1",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      "xmlns:xlink": "http://www.w3.org/1999/xlink"
+                    }
+                  },
+                  [
+                    _c(
+                      "g",
+                      {
+                        attrs: {
+                          id: "Icons",
+                          stroke: "none",
+                          "stroke-width": "1",
+                          fill: "none",
+                          "fill-rule": "evenodd"
+                        }
+                      },
+                      [
+                        _c(
+                          "g",
+                          {
+                            attrs: {
+                              id: "Rounded",
+                              transform: "translate(-548.000000, -3434.000000)"
+                            }
+                          },
+                          [
+                            _c(
+                              "g",
+                              {
+                                attrs: {
+                                  id: "Navigation",
+                                  transform:
+                                    "translate(100.000000, 3378.000000)"
+                                }
+                              },
+                              [
+                                _c(
+                                  "g",
+                                  {
+                                    attrs: {
+                                      id:
+                                        "-Round-/-Navigation-/-arrow_back_ios",
+                                      transform:
+                                        "translate(442.000000, 54.000000)"
+                                    }
+                                  },
+                                  [
+                                    _c("g", [
+                                      _c("polygon", {
+                                        attrs: {
+                                          id: "Path",
+                                          opacity: "0.87",
+                                          points: "0 0 24 0 24 24 0 24"
+                                        }
+                                      }),
+                                      _vm._v(" "),
+                                      _c("path", {
+                                        attrs: {
+                                          d:
+                                            "M16.62,2.99 C16.13,2.5 15.34,2.5 14.85,2.99 L6.54,11.3 C6.15,11.69 6.15,12.32 6.54,12.71 L14.85,21.02 C15.34,21.51 16.13,21.51 16.62,21.02 C17.11,20.53 17.11,19.74 16.62,19.25 L9.38,12 L16.63,4.75 C17.11,4.27 17.11,3.47 16.62,2.99 Z",
+                                          id: "🔹-Icon-Color",
+                                          fill: "#FFFFFF"
+                                        }
+                                      })
+                                    ])
+                                  ]
+                                )
+                              ]
+                            )
+                          ]
+                        )
+                      ]
+                    )
+                  ]
+                ),
+                _vm._v(" "),
+                _c("span", [_vm._v("이전으로")])
+              ]
+            )
+          : _vm._e()
+      ])
     ],
@@ -321,3 +409,3 @@ 2
     if (!inject) { return }
-    inject("data-v-49d8b5ba_0", { source: "#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */", map: {"version":3,"sources":["/Users/idist/Desktop/git/library/vue-diagonal-screens/src/components/DiagonalScreens.vue","DiagonalScreens.vue"],"names":[],"mappings":"AAuIA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;ACtIA;ADuIA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,cAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;ACrIA;ADsIA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EACA,gCAAA;ACpIA;ADsIA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,qBAAA;EACA,YAAA;EACA,kBAAA;EACA,4CAAA;ACpIA;ADqIA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnIA;ADqIA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnIA;ADwIA;EACA,mBAAA;EACA,oBAAA;EACA,UAAA;EACA,uDAAA;ACtIA;ADyIA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,UAAA;EACA,eAAA;EACA,YAAA;EACA,gBAAA;ACvIA;ADyIA;EAAA,YAAA;EAAA,aAAA;ACrIA;;AAEA,8CAA8C","file":"DiagonalScreens.vue","sourcesContent":["<script>\n  export default {\n    name: 'DiagnoalScreens',\n    props: {\n      screens: {},\n      sideWidth: { default: ()=> { return 5 } },\n    },\n    data: function () {\n      return {\n        indexHover: null,\n        indexClick: null,\n      }\n    },\n    methods: {\n      indexScreen (screen) {\n        if(!screen) { return }\n        return this.screens.indexOf(screen)\n      },\n      refScreen (screen) {\n        if(!screen) { return }\n        return 'screen' + this.indexScreen(screen)\n      },\n      playVideo(screenPlay) {\n        for (let i=0; i<this.screens.length; i++) {\n          const screenIth = this.screens[i]\n          if (this.refScreen(screenIth) === this.refScreen(screenPlay)) {\n            this.$refs[this.refScreen(screenIth)][0].play()\n          } else {\n            this.$refs[this.refScreen(screenIth)][0].pause()\n          }\n        }\n      },\n      setHoverIndex (screen) {\n        this.indexHover = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetHoverIndex () {\n        this.indexHover = null\n      },\n      setClickIndex (screen) {\n        this.indexClick = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetClickIndex () {\n        this.indexClick = null\n      },\n      leftTitle (screen) {\n        const index = this.indexScreen(screen)\n\n        // Check index\n        if (index === 0) {\n          return 2 * this.sideWidth\n        } else if (index === this.screens.length-1) {\n          return 100 - 2 * this.sideWidth\n        } else {\n          return index * this.widthScreen + this.sideWidth\n        }\n      },\n      zIndexScreen (screen) {\n        return this.indexScreen(screen) + 1\n      },\n      clipPathScreen (screen) {\n        let result\n        const index = this.indexScreen(screen)\n        if (index === 0) {\n          return 'polygon(0% 0, 100% 0, 100% 100%, 0% 100%)'\n        }\n        let top = ((index-1) * this.widthScreen + this.sideWidth)\n        let bottom = (index * this.widthScreen + this.sideWidth)\n\n        if (this.indexClick !== null && this.indexClick >= 0) {\n          if (index === this.indexHover) {\n            top = 0\n            bottom = 0\n          } else if (index > this.indexHover) {\n            top = 100\n            bottom = 100\n          }\n\n        }\n        if (this.indexHover !== null && this.indexHover >= 0) {\n          if (index === this.indexHover) {\n            top -= this.sideWidth\n            bottom -= this.sideWidth\n          } else if (index === this.indexHover+1) {\n            top += this.sideWidth\n            bottom += this.sideWidth\n          }\n        }\n        // eslint-disable-next-line prefer-const\n        result = 'polygon(' + top + '% 0, 100% 0, 100% 100%, ' + bottom +'% 100%)'\n        return result\n      },\n    },\n    computed: {\n      widthScreen () {\n        let sideWidth = 5\n        if( this.sideWidth>0 && this.sideWidth<100 ) {\n          sideWidth = this.sideWidth\n        }\n        return (100 - sideWidth*2) / (this.screens.length-1)\n      }\n    }\n  }\n</script>\n\n<template>\n  <div id=\"DiagnoalScreens\" :class=\"{ 'clicked': indexClick !== null }\" @mouseleave=\"resetHoverIndex\">\n    <div v-for=\"(screen, index) in screens\"\n         :key=\"index\" class=\"screen\"\n         @mouseover=\"setHoverIndex(screen)\"\n         @click=\"setClickIndex(screen)\"\n         :style=\"{\n                'clip-path': clipPathScreen(screen),\n                'z-index': zIndexScreen(screen),\n             }\">\n\n      <!--Video-->\n      <video :ref=\"refScreen(screen)\" loop muted><source :src=\"screen.url\" type=\"video/mp4\"></video>\n\n      <!--Title-->\n      <div class=\"title\" :style=\"{\n              'left': leftTitle(screen) + '%',\n            }\">\n        <div class=\"title1\">{{screen.subtitle}}</div><br/>\n        <div class=\"title2\">{{screen.title}}</div>\n      </div>\n    </div>\n    <button class=\"reset\" @click=\"resetClickIndex\" v-if=\"indexClick !== null\">\n      이전으로\n    </button>\n  </div>\n</template>\n\n<style lang=\"scss\">\n  #DiagnoalScreens {\n    position: relative;\n    display: block;\n    float: left;\n    .screen {\n      position: absolute;\n      top: 0;\n      left: 0;\n      display: block;\n      float: left;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      transition: all 1s;\n      video {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        z-index: 1;\n        display: block;\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: cover;\n        transform: translate(-50%, -50%);\n      }\n      .title {\n        position: absolute;\n        top: 50%;\n        z-index: 6;\n        display: inline-block;\n        color: white;\n        transition: all 2s;\n        transform: translateX(-50%) translateY(-50%);\n        .title1 {\n          font-size: 27px;\n          font-weight: 600;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n        .title2 {\n          font-size: 36px;\n          font-weight: 900;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n      }\n    }\n    &.clicked {\n      .title {\n        top:50% !important;\n        left: 50% !important;\n        opacity: 0;\n        transform: translateX(-50%) translateY(-50%) !important;\n      }\n    }\n    .reset {\n      position: absolute;\n      bottom: 5%;\n      left: 5%;\n      z-index: 6;\n      font-size: 18px;\n      color: white;\n      background: none;\n    }\n    button, button:focus { border:none; outline: none; }\n  }\n</style>","#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */"]}, media: undefined });
+    inject("data-v-5dab0863_0", { source: "#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n  line-height: 20px;\n  padding: 10px;\n}\n#DiagnoalScreens .reset * {\n  float: left;\n}\n#DiagnoalScreens .reset span {\n  line-height: 20px;\n  vertical-align: middle;\n  margin-left: 12px;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n#DiagnoalScreens .fade-enter-active, #DiagnoalScreens .fade-leave-active {\n  transition: opacity 1s;\n}\n#DiagnoalScreens .fade-enter, #DiagnoalScreens .fade-leave-to {\n  opacity: 0;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */", map: {"version":3,"sources":["/Users/idist/Desktop/git/library/vue-diagonal-screens/src/components/DiagonalScreens.vue","DiagonalScreens.vue"],"names":[],"mappings":"AAuJA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;ACtJA;ADuJA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,cAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;ACrJA;ADsJA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EACA,gCAAA;ACpJA;ADsJA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,qBAAA;EACA,YAAA;EACA,kBAAA;EACA,4CAAA;ACpJA;ADqJA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnJA;ADqJA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnJA;ADwJA;EACA,mBAAA;EACA,oBAAA;EACA,UAAA;EACA,uDAAA;ACtJA;ADyJA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,UAAA;EACA,eAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;EACA,aAAA;ACvJA;ADwJA;EAAA,WAAA;ACrJA;ADsJA;EACA,iBAAA;EACA,sBAAA;EACA,iBAAA;ACpJA;ADuJA;EACA,YAAA;EACA,aAAA;ACrJA;ADuJA;EACA,sBAAA;ACrJA;ADuJA;EACA,UAAA;ACrJA;;AAEA,8CAA8C","file":"DiagonalScreens.vue","sourcesContent":["<script>\n  export default {\n    name: 'DiagnoalScreens',\n    props: {\n      screens: {},\n      sideWidth: { default: ()=> { return 5 } },\n    },\n    data: function () {\n      return {\n        indexHover: null,\n        indexClick: null,\n      }\n    },\n    methods: {\n      indexScreen (screen) {\n        if(!screen) { return }\n        return this.screens.indexOf(screen)\n      },\n      refScreen (screen) {\n        if(!screen) { return }\n        return 'screen' + this.indexScreen(screen)\n      },\n      playVideo(screenPlay) {\n        for (let i=0; i<this.screens.length; i++) {\n          const screenIth = this.screens[i]\n          if (this.refScreen(screenIth) === this.refScreen(screenPlay)) {\n            this.$refs[this.refScreen(screenIth)][0].play()\n          } else {\n            this.$refs[this.refScreen(screenIth)][0].pause()\n          }\n        }\n      },\n      setHoverIndex (screen) {\n        this.indexHover = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetHoverIndex () {\n        this.indexHover = null\n      },\n      setClickIndex (screen) {\n        this.indexClick = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetClickIndex () {\n        this.indexClick = null\n      },\n      leftTitle (screen) {\n        const index = this.indexScreen(screen)\n\n        // Check index\n        if (index === 0) {\n          return 2 * this.sideWidth\n        } else if (index === this.screens.length-1) {\n          return 100 - 2 * this.sideWidth\n        } else {\n          return index * this.widthScreen + this.sideWidth\n        }\n      },\n      zIndexScreen (screen) {\n        return this.indexScreen(screen) + 1\n      },\n      clipPathScreen (screen) {\n        let result\n        const index = this.indexScreen(screen)\n        if (index === 0) {\n          return 'polygon(0% 0, 100% 0, 100% 100%, 0% 100%)'\n        }\n        let top = ((index-1) * this.widthScreen + this.sideWidth)\n        let bottom = (index * this.widthScreen + this.sideWidth)\n\n        if (this.indexClick !== null && this.indexClick >= 0) {\n          if (index === this.indexHover) {\n            top = 0\n            bottom = 0\n          } else if (index > this.indexHover) {\n            top = 100\n            bottom = 100\n          }\n\n        }\n        if (this.indexHover !== null && this.indexHover >= 0) {\n          if (index === this.indexHover) {\n            top -= this.sideWidth\n            bottom -= this.sideWidth\n          } else if (index === this.indexHover+1) {\n            top += this.sideWidth\n            bottom += this.sideWidth\n          }\n        }\n        // eslint-disable-next-line prefer-const\n        result = 'polygon(' + top + '% 0, 100% 0, 100% 100%, ' + bottom +'% 100%)'\n        return result\n      },\n    },\n    computed: {\n      widthScreen () {\n        let sideWidth = 5\n        if( this.sideWidth>0 && this.sideWidth<100 ) {\n          sideWidth = this.sideWidth\n        }\n        return (100 - sideWidth*2) / (this.screens.length-1)\n      }\n    }\n  }\n</script>\n\n<template>\n  <div id=\"DiagnoalScreens\" :class=\"{ 'clicked': indexClick !== null }\" @mouseleave=\"resetHoverIndex\">\n    <div v-for=\"(screen, index) in screens\"\n         :key=\"index\" class=\"screen\"\n         @mouseover=\"setHoverIndex(screen)\"\n         @click=\"setClickIndex(screen)\"\n         :style=\"{\n                'clip-path': clipPathScreen(screen),\n                'z-index': zIndexScreen(screen),\n             }\">\n\n      <!--Video-->\n      <video :ref=\"refScreen(screen)\" loop muted><source :src=\"screen.url\" type=\"video/mp4\"></video>\n\n      <!--Title-->\n      <div class=\"title\" :style=\"{\n              'left': leftTitle(screen) + '%',\n            }\">\n        <div class=\"title1\">{{screen.subtitle}}</div><br/>\n        <div class=\"title2\">{{screen.title}}</div>\n      </div>\n    </div>\n    <transition name=\"fade\">\n      <button class=\"reset\" @click=\"resetClickIndex\" v-if=\"indexClick !== null\">\n        <svg width=\"11px\" height=\"20px\" viewBox=\"0 0 11 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n          <g id=\"Icons\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <g id=\"Rounded\" transform=\"translate(-548.000000, -3434.000000)\">\n              <g id=\"Navigation\" transform=\"translate(100.000000, 3378.000000)\">\n                <g id=\"-Round-/-Navigation-/-arrow_back_ios\" transform=\"translate(442.000000, 54.000000)\">\n                  <g>\n                    <polygon id=\"Path\" opacity=\"0.87\" points=\"0 0 24 0 24 24 0 24\"></polygon>\n                    <path d=\"M16.62,2.99 C16.13,2.5 15.34,2.5 14.85,2.99 L6.54,11.3 C6.15,11.69 6.15,12.32 6.54,12.71 L14.85,21.02 C15.34,21.51 16.13,21.51 16.62,21.02 C17.11,20.53 17.11,19.74 16.62,19.25 L9.38,12 L16.63,4.75 C17.11,4.27 17.11,3.47 16.62,2.99 Z\" id=\"🔹-Icon-Color\" fill=\"#FFFFFF\"></path>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </svg>\n        <span>이전으로</span>\n      </button>\n    </transition>\n  </div>\n</template>\n\n<style lang=\"scss\">\n  #DiagnoalScreens {\n    position: relative;\n    display: block;\n    float: left;\n    .screen {\n      position: absolute;\n      top: 0;\n      left: 0;\n      display: block;\n      float: left;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      transition: all 1s;\n      video {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        z-index: 1;\n        display: block;\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: cover;\n        transform: translate(-50%, -50%);\n      }\n      .title {\n        position: absolute;\n        top: 50%;\n        z-index: 6;\n        display: inline-block;\n        color: white;\n        transition: all 2s;\n        transform: translateX(-50%) translateY(-50%);\n        .title1 {\n          font-size: 27px;\n          font-weight: 600;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n        .title2 {\n          font-size: 36px;\n          font-weight: 900;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n      }\n    }\n    &.clicked {\n      .title {\n        top:50% !important;\n        left: 50% !important;\n        opacity: 0;\n        transform: translateX(-50%) translateY(-50%) !important;\n      }\n    }\n    .reset {\n      position: absolute;\n      bottom: 5%;\n      left: 5%;\n      z-index: 6;\n      font-size: 18px;\n      color: white;\n      background: none;\n      line-height: 20px;\n      padding: 10px;\n      * { float: left; }\n      span {\n        line-height: 20px;\n        vertical-align: middle;\n        margin-left: 12px;\n      }\n    }\n    button, button:focus {\n      border:none;\n      outline: none;\n    }\n    .fade-enter-active, .fade-leave-active {\n      transition: opacity 1s;\n    }\n    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {\n      opacity: 0;\n    }\n  }\n</style>","#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n  line-height: 20px;\n  padding: 10px;\n}\n#DiagnoalScreens .reset * {\n  float: left;\n}\n#DiagnoalScreens .reset span {\n  line-height: 20px;\n  vertical-align: middle;\n  margin-left: 12px;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n#DiagnoalScreens .fade-enter-active, #DiagnoalScreens .fade-leave-active {\n  transition: opacity 1s;\n}\n#DiagnoalScreens .fade-enter, #DiagnoalScreens .fade-leave-to {\n  opacity: 0;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */"]}, media: undefined });
 
@@ -324,0 +412,0 @@ };

dist/DiagonalScreens.min.js

@@ -306,9 +306,97 @@ var DiagnoalScreens = (function (exports) {
         _vm._v(" "),
-        _vm.indexClick !== null
-          ? _c(
-              "button",
-              { staticClass: "reset", on: { click: _vm.resetClickIndex } },
-              [_vm._v("\n    이전으로\n  ")]
-            )
-          : _vm._e()
+        _c("transition", { attrs: { name: "fade" } }, [
+          _vm.indexClick !== null
+            ? _c(
+                "button",
+                { staticClass: "reset", on: { click: _vm.resetClickIndex } },
+                [
+                  _c(
+                    "svg",
+                    {
+                      attrs: {
+                        width: "11px",
+                        height: "20px",
+                        viewBox: "0 0 11 20",
+                        version: "1.1",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        "xmlns:xlink": "http://www.w3.org/1999/xlink"
+                      }
+                    },
+                    [
+                      _c(
+                        "g",
+                        {
+                          attrs: {
+                            id: "Icons",
+                            stroke: "none",
+                            "stroke-width": "1",
+                            fill: "none",
+                            "fill-rule": "evenodd"
+                          }
+                        },
+                        [
+                          _c(
+                            "g",
+                            {
+                              attrs: {
+                                id: "Rounded",
+                                transform: "translate(-548.000000, -3434.000000)"
+                              }
+                            },
+                            [
+                              _c(
+                                "g",
+                                {
+                                  attrs: {
+                                    id: "Navigation",
+                                    transform:
+                                      "translate(100.000000, 3378.000000)"
+                                  }
+                                },
+                                [
+                                  _c(
+                                    "g",
+                                    {
+                                      attrs: {
+                                        id:
+                                          "-Round-/-Navigation-/-arrow_back_ios",
+                                        transform:
+                                          "translate(442.000000, 54.000000)"
+                                      }
+                                    },
+                                    [
+                                      _c("g", [
+                                        _c("polygon", {
+                                          attrs: {
+                                            id: "Path",
+                                            opacity: "0.87",
+                                            points: "0 0 24 0 24 24 0 24"
+                                          }
+                                        }),
+                                        _vm._v(" "),
+                                        _c("path", {
+                                          attrs: {
+                                            d:
+                                              "M16.62,2.99 C16.13,2.5 15.34,2.5 14.85,2.99 L6.54,11.3 C6.15,11.69 6.15,12.32 6.54,12.71 L14.85,21.02 C15.34,21.51 16.13,21.51 16.62,21.02 C17.11,20.53 17.11,19.74 16.62,19.25 L9.38,12 L16.63,4.75 C17.11,4.27 17.11,3.47 16.62,2.99 Z",
+                                            id: "🔹-Icon-Color",
+                                            fill: "#FFFFFF"
+                                          }
+                                        })
+                                      ])
+                                    ]
+                                  )
+                                ]
+                              )
+                            ]
+                          )
+                        ]
+                      )
+                    ]
+                  ),
+                  _vm._v(" "),
+                  _c("span", [_vm._v("이전으로")])
+                ]
+              )
+            : _vm._e()
+        ])
       ],
@@ -324,3 +412,3 @@ 2
       if (!inject) { return }
-      inject("data-v-49d8b5ba_0", { source: "#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */", map: {"version":3,"sources":["/Users/idist/Desktop/git/library/vue-diagonal-screens/src/components/DiagonalScreens.vue","DiagonalScreens.vue"],"names":[],"mappings":"AAuIA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;ACtIA;ADuIA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,cAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;ACrIA;ADsIA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EACA,gCAAA;ACpIA;ADsIA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,qBAAA;EACA,YAAA;EACA,kBAAA;EACA,4CAAA;ACpIA;ADqIA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnIA;ADqIA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnIA;ADwIA;EACA,mBAAA;EACA,oBAAA;EACA,UAAA;EACA,uDAAA;ACtIA;ADyIA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,UAAA;EACA,eAAA;EACA,YAAA;EACA,gBAAA;ACvIA;ADyIA;EAAA,YAAA;EAAA,aAAA;ACrIA;;AAEA,8CAA8C","file":"DiagonalScreens.vue","sourcesContent":["<script>\n  export default {\n    name: 'DiagnoalScreens',\n    props: {\n      screens: {},\n      sideWidth: { default: ()=> { return 5 } },\n    },\n    data: function () {\n      return {\n        indexHover: null,\n        indexClick: null,\n      }\n    },\n    methods: {\n      indexScreen (screen) {\n        if(!screen) { return }\n        return this.screens.indexOf(screen)\n      },\n      refScreen (screen) {\n        if(!screen) { return }\n        return 'screen' + this.indexScreen(screen)\n      },\n      playVideo(screenPlay) {\n        for (let i=0; i<this.screens.length; i++) {\n          const screenIth = this.screens[i]\n          if (this.refScreen(screenIth) === this.refScreen(screenPlay)) {\n            this.$refs[this.refScreen(screenIth)][0].play()\n          } else {\n            this.$refs[this.refScreen(screenIth)][0].pause()\n          }\n        }\n      },\n      setHoverIndex (screen) {\n        this.indexHover = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetHoverIndex () {\n        this.indexHover = null\n      },\n      setClickIndex (screen) {\n        this.indexClick = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetClickIndex () {\n        this.indexClick = null\n      },\n      leftTitle (screen) {\n        const index = this.indexScreen(screen)\n\n        // Check index\n        if (index === 0) {\n          return 2 * this.sideWidth\n        } else if (index === this.screens.length-1) {\n          return 100 - 2 * this.sideWidth\n        } else {\n          return index * this.widthScreen + this.sideWidth\n        }\n      },\n      zIndexScreen (screen) {\n        return this.indexScreen(screen) + 1\n      },\n      clipPathScreen (screen) {\n        let result\n        const index = this.indexScreen(screen)\n        if (index === 0) {\n          return 'polygon(0% 0, 100% 0, 100% 100%, 0% 100%)'\n        }\n        let top = ((index-1) * this.widthScreen + this.sideWidth)\n        let bottom = (index * this.widthScreen + this.sideWidth)\n\n        if (this.indexClick !== null && this.indexClick >= 0) {\n          if (index === this.indexHover) {\n            top = 0\n            bottom = 0\n          } else if (index > this.indexHover) {\n            top = 100\n            bottom = 100\n          }\n\n        }\n        if (this.indexHover !== null && this.indexHover >= 0) {\n          if (index === this.indexHover) {\n            top -= this.sideWidth\n            bottom -= this.sideWidth\n          } else if (index === this.indexHover+1) {\n            top += this.sideWidth\n            bottom += this.sideWidth\n          }\n        }\n        // eslint-disable-next-line prefer-const\n        result = 'polygon(' + top + '% 0, 100% 0, 100% 100%, ' + bottom +'% 100%)'\n        return result\n      },\n    },\n    computed: {\n      widthScreen () {\n        let sideWidth = 5\n        if( this.sideWidth>0 && this.sideWidth<100 ) {\n          sideWidth = this.sideWidth\n        }\n        return (100 - sideWidth*2) / (this.screens.length-1)\n      }\n    }\n  }\n</script>\n\n<template>\n  <div id=\"DiagnoalScreens\" :class=\"{ 'clicked': indexClick !== null }\" @mouseleave=\"resetHoverIndex\">\n    <div v-for=\"(screen, index) in screens\"\n         :key=\"index\" class=\"screen\"\n         @mouseover=\"setHoverIndex(screen)\"\n         @click=\"setClickIndex(screen)\"\n         :style=\"{\n                'clip-path': clipPathScreen(screen),\n                'z-index': zIndexScreen(screen),\n             }\">\n\n      <!--Video-->\n      <video :ref=\"refScreen(screen)\" loop muted><source :src=\"screen.url\" type=\"video/mp4\"></video>\n\n      <!--Title-->\n      <div class=\"title\" :style=\"{\n              'left': leftTitle(screen) + '%',\n            }\">\n        <div class=\"title1\">{{screen.subtitle}}</div><br/>\n        <div class=\"title2\">{{screen.title}}</div>\n      </div>\n    </div>\n    <button class=\"reset\" @click=\"resetClickIndex\" v-if=\"indexClick !== null\">\n      이전으로\n    </button>\n  </div>\n</template>\n\n<style lang=\"scss\">\n  #DiagnoalScreens {\n    position: relative;\n    display: block;\n    float: left;\n    .screen {\n      position: absolute;\n      top: 0;\n      left: 0;\n      display: block;\n      float: left;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      transition: all 1s;\n      video {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        z-index: 1;\n        display: block;\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: cover;\n        transform: translate(-50%, -50%);\n      }\n      .title {\n        position: absolute;\n        top: 50%;\n        z-index: 6;\n        display: inline-block;\n        color: white;\n        transition: all 2s;\n        transform: translateX(-50%) translateY(-50%);\n        .title1 {\n          font-size: 27px;\n          font-weight: 600;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n        .title2 {\n          font-size: 36px;\n          font-weight: 900;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n      }\n    }\n    &.clicked {\n      .title {\n        top:50% !important;\n        left: 50% !important;\n        opacity: 0;\n        transform: translateX(-50%) translateY(-50%) !important;\n      }\n    }\n    .reset {\n      position: absolute;\n      bottom: 5%;\n      left: 5%;\n      z-index: 6;\n      font-size: 18px;\n      color: white;\n      background: none;\n    }\n    button, button:focus { border:none; outline: none; }\n  }\n</style>","#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */"]}, media: undefined });
+      inject("data-v-5dab0863_0", { source: "#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n  line-height: 20px;\n  padding: 10px;\n}\n#DiagnoalScreens .reset * {\n  float: left;\n}\n#DiagnoalScreens .reset span {\n  line-height: 20px;\n  vertical-align: middle;\n  margin-left: 12px;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n#DiagnoalScreens .fade-enter-active, #DiagnoalScreens .fade-leave-active {\n  transition: opacity 1s;\n}\n#DiagnoalScreens .fade-enter, #DiagnoalScreens .fade-leave-to {\n  opacity: 0;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */", map: {"version":3,"sources":["/Users/idist/Desktop/git/library/vue-diagonal-screens/src/components/DiagonalScreens.vue","DiagonalScreens.vue"],"names":[],"mappings":"AAuJA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;ACtJA;ADuJA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,cAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;ACrJA;ADsJA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EACA,gCAAA;ACpJA;ADsJA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,qBAAA;EACA,YAAA;EACA,kBAAA;EACA,4CAAA;ACpJA;ADqJA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnJA;ADqJA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnJA;ADwJA;EACA,mBAAA;EACA,oBAAA;EACA,UAAA;EACA,uDAAA;ACtJA;ADyJA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,UAAA;EACA,eAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;EACA,aAAA;ACvJA;ADwJA;EAAA,WAAA;ACrJA;ADsJA;EACA,iBAAA;EACA,sBAAA;EACA,iBAAA;ACpJA;ADuJA;EACA,YAAA;EACA,aAAA;ACrJA;ADuJA;EACA,sBAAA;ACrJA;ADuJA;EACA,UAAA;ACrJA;;AAEA,8CAA8C","file":"DiagonalScreens.vue","sourcesContent":["<script>\n  export default {\n    name: 'DiagnoalScreens',\n    props: {\n      screens: {},\n      sideWidth: { default: ()=> { return 5 } },\n    },\n    data: function () {\n      return {\n        indexHover: null,\n        indexClick: null,\n      }\n    },\n    methods: {\n      indexScreen (screen) {\n        if(!screen) { return }\n        return this.screens.indexOf(screen)\n      },\n      refScreen (screen) {\n        if(!screen) { return }\n        return 'screen' + this.indexScreen(screen)\n      },\n      playVideo(screenPlay) {\n        for (let i=0; i<this.screens.length; i++) {\n          const screenIth = this.screens[i]\n          if (this.refScreen(screenIth) === this.refScreen(screenPlay)) {\n            this.$refs[this.refScreen(screenIth)][0].play()\n          } else {\n            this.$refs[this.refScreen(screenIth)][0].pause()\n          }\n        }\n      },\n      setHoverIndex (screen) {\n        this.indexHover = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetHoverIndex () {\n        this.indexHover = null\n      },\n      setClickIndex (screen) {\n        this.indexClick = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetClickIndex () {\n        this.indexClick = null\n      },\n      leftTitle (screen) {\n        const index = this.indexScreen(screen)\n\n        // Check index\n        if (index === 0) {\n          return 2 * this.sideWidth\n        } else if (index === this.screens.length-1) {\n          return 100 - 2 * this.sideWidth\n        } else {\n          return index * this.widthScreen + this.sideWidth\n        }\n      },\n      zIndexScreen (screen) {\n        return this.indexScreen(screen) + 1\n      },\n      clipPathScreen (screen) {\n        let result\n        const index = this.indexScreen(screen)\n        if (index === 0) {\n          return 'polygon(0% 0, 100% 0, 100% 100%, 0% 100%)'\n        }\n        let top = ((index-1) * this.widthScreen + this.sideWidth)\n        let bottom = (index * this.widthScreen + this.sideWidth)\n\n        if (this.indexClick !== null && this.indexClick >= 0) {\n          if (index === this.indexHover) {\n            top = 0\n            bottom = 0\n          } else if (index > this.indexHover) {\n            top = 100\n            bottom = 100\n          }\n\n        }\n        if (this.indexHover !== null && this.indexHover >= 0) {\n          if (index === this.indexHover) {\n            top -= this.sideWidth\n            bottom -= this.sideWidth\n          } else if (index === this.indexHover+1) {\n            top += this.sideWidth\n            bottom += this.sideWidth\n          }\n        }\n        // eslint-disable-next-line prefer-const\n        result = 'polygon(' + top + '% 0, 100% 0, 100% 100%, ' + bottom +'% 100%)'\n        return result\n      },\n    },\n    computed: {\n      widthScreen () {\n        let sideWidth = 5\n        if( this.sideWidth>0 && this.sideWidth<100 ) {\n          sideWidth = this.sideWidth\n        }\n        return (100 - sideWidth*2) / (this.screens.length-1)\n      }\n    }\n  }\n</script>\n\n<template>\n  <div id=\"DiagnoalScreens\" :class=\"{ 'clicked': indexClick !== null }\" @mouseleave=\"resetHoverIndex\">\n    <div v-for=\"(screen, index) in screens\"\n         :key=\"index\" class=\"screen\"\n         @mouseover=\"setHoverIndex(screen)\"\n         @click=\"setClickIndex(screen)\"\n         :style=\"{\n                'clip-path': clipPathScreen(screen),\n                'z-index': zIndexScreen(screen),\n             }\">\n\n      <!--Video-->\n      <video :ref=\"refScreen(screen)\" loop muted><source :src=\"screen.url\" type=\"video/mp4\"></video>\n\n      <!--Title-->\n      <div class=\"title\" :style=\"{\n              'left': leftTitle(screen) + '%',\n            }\">\n        <div class=\"title1\">{{screen.subtitle}}</div><br/>\n        <div class=\"title2\">{{screen.title}}</div>\n      </div>\n    </div>\n    <transition name=\"fade\">\n      <button class=\"reset\" @click=\"resetClickIndex\" v-if=\"indexClick !== null\">\n        <svg width=\"11px\" height=\"20px\" viewBox=\"0 0 11 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n          <g id=\"Icons\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <g id=\"Rounded\" transform=\"translate(-548.000000, -3434.000000)\">\n              <g id=\"Navigation\" transform=\"translate(100.000000, 3378.000000)\">\n                <g id=\"-Round-/-Navigation-/-arrow_back_ios\" transform=\"translate(442.000000, 54.000000)\">\n                  <g>\n                    <polygon id=\"Path\" opacity=\"0.87\" points=\"0 0 24 0 24 24 0 24\"></polygon>\n                    <path d=\"M16.62,2.99 C16.13,2.5 15.34,2.5 14.85,2.99 L6.54,11.3 C6.15,11.69 6.15,12.32 6.54,12.71 L14.85,21.02 C15.34,21.51 16.13,21.51 16.62,21.02 C17.11,20.53 17.11,19.74 16.62,19.25 L9.38,12 L16.63,4.75 C17.11,4.27 17.11,3.47 16.62,2.99 Z\" id=\"🔹-Icon-Color\" fill=\"#FFFFFF\"></path>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </svg>\n        <span>이전으로</span>\n      </button>\n    </transition>\n  </div>\n</template>\n\n<style lang=\"scss\">\n  #DiagnoalScreens {\n    position: relative;\n    display: block;\n    float: left;\n    .screen {\n      position: absolute;\n      top: 0;\n      left: 0;\n      display: block;\n      float: left;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      transition: all 1s;\n      video {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        z-index: 1;\n        display: block;\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: cover;\n        transform: translate(-50%, -50%);\n      }\n      .title {\n        position: absolute;\n        top: 50%;\n        z-index: 6;\n        display: inline-block;\n        color: white;\n        transition: all 2s;\n        transform: translateX(-50%) translateY(-50%);\n        .title1 {\n          font-size: 27px;\n          font-weight: 600;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n        .title2 {\n          font-size: 36px;\n          font-weight: 900;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n      }\n    }\n    &.clicked {\n      .title {\n        top:50% !important;\n        left: 50% !important;\n        opacity: 0;\n        transform: translateX(-50%) translateY(-50%) !important;\n      }\n    }\n    .reset {\n      position: absolute;\n      bottom: 5%;\n      left: 5%;\n      z-index: 6;\n      font-size: 18px;\n      color: white;\n      background: none;\n      line-height: 20px;\n      padding: 10px;\n      * { float: left; }\n      span {\n        line-height: 20px;\n        vertical-align: middle;\n        margin-left: 12px;\n      }\n    }\n    button, button:focus {\n      border:none;\n      outline: none;\n    }\n    .fade-enter-active, .fade-leave-active {\n      transition: opacity 1s;\n    }\n    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {\n      opacity: 0;\n    }\n  }\n</style>","#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n  line-height: 20px;\n  padding: 10px;\n}\n#DiagnoalScreens .reset * {\n  float: left;\n}\n#DiagnoalScreens .reset span {\n  line-height: 20px;\n  vertical-align: middle;\n  margin-left: 12px;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n#DiagnoalScreens .fade-enter-active, #DiagnoalScreens .fade-leave-active {\n  transition: opacity 1s;\n}\n#DiagnoalScreens .fade-enter, #DiagnoalScreens .fade-leave-to {\n  opacity: 0;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */"]}, media: undefined });
 
@@ -327,0 +415,0 @@ };

dist/DiagonalScreens.umd.js

@@ -309,9 +309,97 @@ (function (global, factory) {
         _vm._v(" "),
-        _vm.indexClick !== null
-          ? _c(
-              "button",
-              { staticClass: "reset", on: { click: _vm.resetClickIndex } },
-              [_vm._v("\n    이전으로\n  ")]
-            )
-          : _vm._e()
+        _c("transition", { attrs: { name: "fade" } }, [
+          _vm.indexClick !== null
+            ? _c(
+                "button",
+                { staticClass: "reset", on: { click: _vm.resetClickIndex } },
+                [
+                  _c(
+                    "svg",
+                    {
+                      attrs: {
+                        width: "11px",
+                        height: "20px",
+                        viewBox: "0 0 11 20",
+                        version: "1.1",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        "xmlns:xlink": "http://www.w3.org/1999/xlink"
+                      }
+                    },
+                    [
+                      _c(
+                        "g",
+                        {
+                          attrs: {
+                            id: "Icons",
+                            stroke: "none",
+                            "stroke-width": "1",
+                            fill: "none",
+                            "fill-rule": "evenodd"
+                          }
+                        },
+                        [
+                          _c(
+                            "g",
+                            {
+                              attrs: {
+                                id: "Rounded",
+                                transform: "translate(-548.000000, -3434.000000)"
+                              }
+                            },
+                            [
+                              _c(
+                                "g",
+                                {
+                                  attrs: {
+                                    id: "Navigation",
+                                    transform:
+                                      "translate(100.000000, 3378.000000)"
+                                  }
+                                },
+                                [
+                                  _c(
+                                    "g",
+                                    {
+                                      attrs: {
+                                        id:
+                                          "-Round-/-Navigation-/-arrow_back_ios",
+                                        transform:
+                                          "translate(442.000000, 54.000000)"
+                                      }
+                                    },
+                                    [
+                                      _c("g", [
+                                        _c("polygon", {
+                                          attrs: {
+                                            id: "Path",
+                                            opacity: "0.87",
+                                            points: "0 0 24 0 24 24 0 24"
+                                          }
+                                        }),
+                                        _vm._v(" "),
+                                        _c("path", {
+                                          attrs: {
+                                            d:
+                                              "M16.62,2.99 C16.13,2.5 15.34,2.5 14.85,2.99 L6.54,11.3 C6.15,11.69 6.15,12.32 6.54,12.71 L14.85,21.02 C15.34,21.51 16.13,21.51 16.62,21.02 C17.11,20.53 17.11,19.74 16.62,19.25 L9.38,12 L16.63,4.75 C17.11,4.27 17.11,3.47 16.62,2.99 Z",
+                                            id: "🔹-Icon-Color",
+                                            fill: "#FFFFFF"
+                                          }
+                                        })
+                                      ])
+                                    ]
+                                  )
+                                ]
+                              )
+                            ]
+                          )
+                        ]
+                      )
+                    ]
+                  ),
+                  _vm._v(" "),
+                  _c("span", [_vm._v("이전으로")])
+                ]
+              )
+            : _vm._e()
+        ])
       ],
@@ -327,3 +415,3 @@ 2
       if (!inject) { return }
-      inject("data-v-49d8b5ba_0", { source: "#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */", map: {"version":3,"sources":["/Users/idist/Desktop/git/library/vue-diagonal-screens/src/components/DiagonalScreens.vue","DiagonalScreens.vue"],"names":[],"mappings":"AAuIA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;ACtIA;ADuIA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,cAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;ACrIA;ADsIA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EACA,gCAAA;ACpIA;ADsIA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,qBAAA;EACA,YAAA;EACA,kBAAA;EACA,4CAAA;ACpIA;ADqIA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnIA;ADqIA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnIA;ADwIA;EACA,mBAAA;EACA,oBAAA;EACA,UAAA;EACA,uDAAA;ACtIA;ADyIA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,UAAA;EACA,eAAA;EACA,YAAA;EACA,gBAAA;ACvIA;ADyIA;EAAA,YAAA;EAAA,aAAA;ACrIA;;AAEA,8CAA8C","file":"DiagonalScreens.vue","sourcesContent":["<script>\n  export default {\n    name: 'DiagnoalScreens',\n    props: {\n      screens: {},\n      sideWidth: { default: ()=> { return 5 } },\n    },\n    data: function () {\n      return {\n        indexHover: null,\n        indexClick: null,\n      }\n    },\n    methods: {\n      indexScreen (screen) {\n        if(!screen) { return }\n        return this.screens.indexOf(screen)\n      },\n      refScreen (screen) {\n        if(!screen) { return }\n        return 'screen' + this.indexScreen(screen)\n      },\n      playVideo(screenPlay) {\n        for (let i=0; i<this.screens.length; i++) {\n          const screenIth = this.screens[i]\n          if (this.refScreen(screenIth) === this.refScreen(screenPlay)) {\n            this.$refs[this.refScreen(screenIth)][0].play()\n          } else {\n            this.$refs[this.refScreen(screenIth)][0].pause()\n          }\n        }\n      },\n      setHoverIndex (screen) {\n        this.indexHover = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetHoverIndex () {\n        this.indexHover = null\n      },\n      setClickIndex (screen) {\n        this.indexClick = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetClickIndex () {\n        this.indexClick = null\n      },\n      leftTitle (screen) {\n        const index = this.indexScreen(screen)\n\n        // Check index\n        if (index === 0) {\n          return 2 * this.sideWidth\n        } else if (index === this.screens.length-1) {\n          return 100 - 2 * this.sideWidth\n        } else {\n          return index * this.widthScreen + this.sideWidth\n        }\n      },\n      zIndexScreen (screen) {\n        return this.indexScreen(screen) + 1\n      },\n      clipPathScreen (screen) {\n        let result\n        const index = this.indexScreen(screen)\n        if (index === 0) {\n          return 'polygon(0% 0, 100% 0, 100% 100%, 0% 100%)'\n        }\n        let top = ((index-1) * this.widthScreen + this.sideWidth)\n        let bottom = (index * this.widthScreen + this.sideWidth)\n\n        if (this.indexClick !== null && this.indexClick >= 0) {\n          if (index === this.indexHover) {\n            top = 0\n            bottom = 0\n          } else if (index > this.indexHover) {\n            top = 100\n            bottom = 100\n          }\n\n        }\n        if (this.indexHover !== null && this.indexHover >= 0) {\n          if (index === this.indexHover) {\n            top -= this.sideWidth\n            bottom -= this.sideWidth\n          } else if (index === this.indexHover+1) {\n            top += this.sideWidth\n            bottom += this.sideWidth\n          }\n        }\n        // eslint-disable-next-line prefer-const\n        result = 'polygon(' + top + '% 0, 100% 0, 100% 100%, ' + bottom +'% 100%)'\n        return result\n      },\n    },\n    computed: {\n      widthScreen () {\n        let sideWidth = 5\n        if( this.sideWidth>0 && this.sideWidth<100 ) {\n          sideWidth = this.sideWidth\n        }\n        return (100 - sideWidth*2) / (this.screens.length-1)\n      }\n    }\n  }\n</script>\n\n<template>\n  <div id=\"DiagnoalScreens\" :class=\"{ 'clicked': indexClick !== null }\" @mouseleave=\"resetHoverIndex\">\n    <div v-for=\"(screen, index) in screens\"\n         :key=\"index\" class=\"screen\"\n         @mouseover=\"setHoverIndex(screen)\"\n         @click=\"setClickIndex(screen)\"\n         :style=\"{\n                'clip-path': clipPathScreen(screen),\n                'z-index': zIndexScreen(screen),\n             }\">\n\n      <!--Video-->\n      <video :ref=\"refScreen(screen)\" loop muted><source :src=\"screen.url\" type=\"video/mp4\"></video>\n\n      <!--Title-->\n      <div class=\"title\" :style=\"{\n              'left': leftTitle(screen) + '%',\n            }\">\n        <div class=\"title1\">{{screen.subtitle}}</div><br/>\n        <div class=\"title2\">{{screen.title}}</div>\n      </div>\n    </div>\n    <button class=\"reset\" @click=\"resetClickIndex\" v-if=\"indexClick !== null\">\n      이전으로\n    </button>\n  </div>\n</template>\n\n<style lang=\"scss\">\n  #DiagnoalScreens {\n    position: relative;\n    display: block;\n    float: left;\n    .screen {\n      position: absolute;\n      top: 0;\n      left: 0;\n      display: block;\n      float: left;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      transition: all 1s;\n      video {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        z-index: 1;\n        display: block;\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: cover;\n        transform: translate(-50%, -50%);\n      }\n      .title {\n        position: absolute;\n        top: 50%;\n        z-index: 6;\n        display: inline-block;\n        color: white;\n        transition: all 2s;\n        transform: translateX(-50%) translateY(-50%);\n        .title1 {\n          font-size: 27px;\n          font-weight: 600;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n        .title2 {\n          font-size: 36px;\n          font-weight: 900;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n      }\n    }\n    &.clicked {\n      .title {\n        top:50% !important;\n        left: 50% !important;\n        opacity: 0;\n        transform: translateX(-50%) translateY(-50%) !important;\n      }\n    }\n    .reset {\n      position: absolute;\n      bottom: 5%;\n      left: 5%;\n      z-index: 6;\n      font-size: 18px;\n      color: white;\n      background: none;\n    }\n    button, button:focus { border:none; outline: none; }\n  }\n</style>","#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */"]}, media: undefined });
+      inject("data-v-5dab0863_0", { source: "#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n  line-height: 20px;\n  padding: 10px;\n}\n#DiagnoalScreens .reset * {\n  float: left;\n}\n#DiagnoalScreens .reset span {\n  line-height: 20px;\n  vertical-align: middle;\n  margin-left: 12px;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n#DiagnoalScreens .fade-enter-active, #DiagnoalScreens .fade-leave-active {\n  transition: opacity 1s;\n}\n#DiagnoalScreens .fade-enter, #DiagnoalScreens .fade-leave-to {\n  opacity: 0;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */", map: {"version":3,"sources":["/Users/idist/Desktop/git/library/vue-diagonal-screens/src/components/DiagonalScreens.vue","DiagonalScreens.vue"],"names":[],"mappings":"AAuJA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;ACtJA;ADuJA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,cAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;ACrJA;ADsJA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EACA,gCAAA;ACpJA;ADsJA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,qBAAA;EACA,YAAA;EACA,kBAAA;EACA,4CAAA;ACpJA;ADqJA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnJA;ADqJA;EACA,eAAA;EACA,gBAAA;EACA,yCAAA;ACnJA;ADwJA;EACA,mBAAA;EACA,oBAAA;EACA,UAAA;EACA,uDAAA;ACtJA;ADyJA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,UAAA;EACA,eAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;EACA,aAAA;ACvJA;ADwJA;EAAA,WAAA;ACrJA;ADsJA;EACA,iBAAA;EACA,sBAAA;EACA,iBAAA;ACpJA;ADuJA;EACA,YAAA;EACA,aAAA;ACrJA;ADuJA;EACA,sBAAA;ACrJA;ADuJA;EACA,UAAA;ACrJA;;AAEA,8CAA8C","file":"DiagonalScreens.vue","sourcesContent":["<script>\n  export default {\n    name: 'DiagnoalScreens',\n    props: {\n      screens: {},\n      sideWidth: { default: ()=> { return 5 } },\n    },\n    data: function () {\n      return {\n        indexHover: null,\n        indexClick: null,\n      }\n    },\n    methods: {\n      indexScreen (screen) {\n        if(!screen) { return }\n        return this.screens.indexOf(screen)\n      },\n      refScreen (screen) {\n        if(!screen) { return }\n        return 'screen' + this.indexScreen(screen)\n      },\n      playVideo(screenPlay) {\n        for (let i=0; i<this.screens.length; i++) {\n          const screenIth = this.screens[i]\n          if (this.refScreen(screenIth) === this.refScreen(screenPlay)) {\n            this.$refs[this.refScreen(screenIth)][0].play()\n          } else {\n            this.$refs[this.refScreen(screenIth)][0].pause()\n          }\n        }\n      },\n      setHoverIndex (screen) {\n        this.indexHover = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetHoverIndex () {\n        this.indexHover = null\n      },\n      setClickIndex (screen) {\n        this.indexClick = this.indexScreen(screen)\n        this.playVideo(screen)\n      },\n      resetClickIndex () {\n        this.indexClick = null\n      },\n      leftTitle (screen) {\n        const index = this.indexScreen(screen)\n\n        // Check index\n        if (index === 0) {\n          return 2 * this.sideWidth\n        } else if (index === this.screens.length-1) {\n          return 100 - 2 * this.sideWidth\n        } else {\n          return index * this.widthScreen + this.sideWidth\n        }\n      },\n      zIndexScreen (screen) {\n        return this.indexScreen(screen) + 1\n      },\n      clipPathScreen (screen) {\n        let result\n        const index = this.indexScreen(screen)\n        if (index === 0) {\n          return 'polygon(0% 0, 100% 0, 100% 100%, 0% 100%)'\n        }\n        let top = ((index-1) * this.widthScreen + this.sideWidth)\n        let bottom = (index * this.widthScreen + this.sideWidth)\n\n        if (this.indexClick !== null && this.indexClick >= 0) {\n          if (index === this.indexHover) {\n            top = 0\n            bottom = 0\n          } else if (index > this.indexHover) {\n            top = 100\n            bottom = 100\n          }\n\n        }\n        if (this.indexHover !== null && this.indexHover >= 0) {\n          if (index === this.indexHover) {\n            top -= this.sideWidth\n            bottom -= this.sideWidth\n          } else if (index === this.indexHover+1) {\n            top += this.sideWidth\n            bottom += this.sideWidth\n          }\n        }\n        // eslint-disable-next-line prefer-const\n        result = 'polygon(' + top + '% 0, 100% 0, 100% 100%, ' + bottom +'% 100%)'\n        return result\n      },\n    },\n    computed: {\n      widthScreen () {\n        let sideWidth = 5\n        if( this.sideWidth>0 && this.sideWidth<100 ) {\n          sideWidth = this.sideWidth\n        }\n        return (100 - sideWidth*2) / (this.screens.length-1)\n      }\n    }\n  }\n</script>\n\n<template>\n  <div id=\"DiagnoalScreens\" :class=\"{ 'clicked': indexClick !== null }\" @mouseleave=\"resetHoverIndex\">\n    <div v-for=\"(screen, index) in screens\"\n         :key=\"index\" class=\"screen\"\n         @mouseover=\"setHoverIndex(screen)\"\n         @click=\"setClickIndex(screen)\"\n         :style=\"{\n                'clip-path': clipPathScreen(screen),\n                'z-index': zIndexScreen(screen),\n             }\">\n\n      <!--Video-->\n      <video :ref=\"refScreen(screen)\" loop muted><source :src=\"screen.url\" type=\"video/mp4\"></video>\n\n      <!--Title-->\n      <div class=\"title\" :style=\"{\n              'left': leftTitle(screen) + '%',\n            }\">\n        <div class=\"title1\">{{screen.subtitle}}</div><br/>\n        <div class=\"title2\">{{screen.title}}</div>\n      </div>\n    </div>\n    <transition name=\"fade\">\n      <button class=\"reset\" @click=\"resetClickIndex\" v-if=\"indexClick !== null\">\n        <svg width=\"11px\" height=\"20px\" viewBox=\"0 0 11 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n          <g id=\"Icons\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <g id=\"Rounded\" transform=\"translate(-548.000000, -3434.000000)\">\n              <g id=\"Navigation\" transform=\"translate(100.000000, 3378.000000)\">\n                <g id=\"-Round-/-Navigation-/-arrow_back_ios\" transform=\"translate(442.000000, 54.000000)\">\n                  <g>\n                    <polygon id=\"Path\" opacity=\"0.87\" points=\"0 0 24 0 24 24 0 24\"></polygon>\n                    <path d=\"M16.62,2.99 C16.13,2.5 15.34,2.5 14.85,2.99 L6.54,11.3 C6.15,11.69 6.15,12.32 6.54,12.71 L14.85,21.02 C15.34,21.51 16.13,21.51 16.62,21.02 C17.11,20.53 17.11,19.74 16.62,19.25 L9.38,12 L16.63,4.75 C17.11,4.27 17.11,3.47 16.62,2.99 Z\" id=\"🔹-Icon-Color\" fill=\"#FFFFFF\"></path>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </svg>\n        <span>이전으로</span>\n      </button>\n    </transition>\n  </div>\n</template>\n\n<style lang=\"scss\">\n  #DiagnoalScreens {\n    position: relative;\n    display: block;\n    float: left;\n    .screen {\n      position: absolute;\n      top: 0;\n      left: 0;\n      display: block;\n      float: left;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      transition: all 1s;\n      video {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        z-index: 1;\n        display: block;\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: cover;\n        transform: translate(-50%, -50%);\n      }\n      .title {\n        position: absolute;\n        top: 50%;\n        z-index: 6;\n        display: inline-block;\n        color: white;\n        transition: all 2s;\n        transform: translateX(-50%) translateY(-50%);\n        .title1 {\n          font-size: 27px;\n          font-weight: 600;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n        .title2 {\n          font-size: 36px;\n          font-weight: 900;\n          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n      }\n    }\n    &.clicked {\n      .title {\n        top:50% !important;\n        left: 50% !important;\n        opacity: 0;\n        transform: translateX(-50%) translateY(-50%) !important;\n      }\n    }\n    .reset {\n      position: absolute;\n      bottom: 5%;\n      left: 5%;\n      z-index: 6;\n      font-size: 18px;\n      color: white;\n      background: none;\n      line-height: 20px;\n      padding: 10px;\n      * { float: left; }\n      span {\n        line-height: 20px;\n        vertical-align: middle;\n        margin-left: 12px;\n      }\n    }\n    button, button:focus {\n      border:none;\n      outline: none;\n    }\n    .fade-enter-active, .fade-leave-active {\n      transition: opacity 1s;\n    }\n    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {\n      opacity: 0;\n    }\n  }\n</style>","#DiagnoalScreens {\n  position: relative;\n  display: block;\n  float: left;\n}\n#DiagnoalScreens .screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  float: left;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transition: all 1s;\n}\n#DiagnoalScreens .screen video {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 1;\n  display: block;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n}\n#DiagnoalScreens .screen .title {\n  position: absolute;\n  top: 50%;\n  z-index: 6;\n  display: inline-block;\n  color: white;\n  transition: all 2s;\n  transform: translateX(-50%) translateY(-50%);\n}\n#DiagnoalScreens .screen .title .title1 {\n  font-size: 27px;\n  font-weight: 600;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens .screen .title .title2 {\n  font-size: 36px;\n  font-weight: 900;\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n#DiagnoalScreens.clicked .title {\n  top: 50% !important;\n  left: 50% !important;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreens .reset {\n  position: absolute;\n  bottom: 5%;\n  left: 5%;\n  z-index: 6;\n  font-size: 18px;\n  color: white;\n  background: none;\n  line-height: 20px;\n  padding: 10px;\n}\n#DiagnoalScreens .reset * {\n  float: left;\n}\n#DiagnoalScreens .reset span {\n  line-height: 20px;\n  vertical-align: middle;\n  margin-left: 12px;\n}\n#DiagnoalScreens button, #DiagnoalScreens button:focus {\n  border: none;\n  outline: none;\n}\n#DiagnoalScreens .fade-enter-active, #DiagnoalScreens .fade-leave-active {\n  transition: opacity 1s;\n}\n#DiagnoalScreens .fade-enter, #DiagnoalScreens .fade-leave-to {\n  opacity: 0;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */"]}, media: undefined });
 
@@ -330,0 +418,0 @@ };

package.json

 {
   "name": "vue-diagonal-screens",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/DiagonalScreens.umd.js",
@@ -5,0 +5,0 @@ "module": "dist/DiagonalScreens.esm.js",

README.md

@@ -29,1 +29,37 @@ # vue-diagonal-screens
 ```
+
+
+### Usage
+
+```
+<template>
+  <div id="app">
+    <DiagonalScreens :screens="screens" style="width: 100vw; height: 100vh;"/>
+  </div>
+</template>
+
+<script>
+  import DiagonalScreens from 'vue-diagonal-screens'
+  
+  export default {
+    name: 'App',
+    components: {
+      DiagonalScreens
+    },
+    data: function() {
+      return {
+        screens: [
+          { url: require('./assets/web/1.mp4'), subtitle: 'Transparent', title: 'OLED' },
+          { url: require('./assets/web/2.mp4'), subtitle: 'Cinematic Sound', title: 'OLED' },
+          { url: require('./assets/web/3.mp4'), subtitle: 'Wallpaper', title: 'OLED' },
+          { url: require('./assets/web/4.mp4'), subtitle: 'Rollable', title: 'OLED' },
+        ],
+      }
+    },
+  }
+</script>
+```
+
+### Demo
+
+http://lg-demo1.surge.sh/

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 5 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35572647

increased by5951.93%

Number of package files

17

increased by183.33%

Lines of code

15043

increased by4.65%

Number of lines in readme file

64

increased by120.69%

Worsened metrics

Number of medium supply chain risk alerts

5

increased byInfinity%

No dependency changes