Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-diagonal-screens
Advanced tools
vue-diagonal-screens - npm Package Compare versions
Comparing version 0.1.1 to 0.1.2
@@ -320,3 +320,3 @@ var script = { | ||
| if (!inject) { return } | ||
| inject("data-v-ee5cb3ae_0", { source: "#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen button:focus {\n border: none;\n outline: none;\n}\n\n/*# sourceMappingURL=DiagnoalScreen.vue.map */", map: {"version":3,"sources":["/Users/idist/Desktop/git/library/vue-diagonal-screens/src/components/DiagnoalScreen.vue","DiagnoalScreen.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,6CAA6C","file":"DiagnoalScreen.vue","sourcesContent":["<script>\n export default {\n name: 'DiagnoalScreen',\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=\"DiagnoalScreen\" :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 #DiagnoalScreen {\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>","#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen button:focus {\n border: none;\n outline: none;\n}\n\n/*# sourceMappingURL=DiagnoalScreen.vue.map */"]}, media: undefined }); | ||
| inject("data-v-ee5cb3ae_0", { source: "#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen 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,6CAA6C","file":"DiagonalScreens.vue","sourcesContent":["<script>\n export default {\n name: 'DiagnoalScreen',\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=\"DiagnoalScreen\" :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 #DiagnoalScreen {\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>","#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen button:focus {\n border: none;\n outline: none;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */"]}, media: undefined }); | ||
@@ -323,0 +323,0 @@ }; |
@@ -323,3 +323,3 @@ var DiagnoalScreen = (function (exports) { | ||
| if (!inject) { return } | ||
| inject("data-v-ee5cb3ae_0", { source: "#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen button:focus {\n border: none;\n outline: none;\n}\n\n/*# sourceMappingURL=DiagnoalScreen.vue.map */", map: {"version":3,"sources":["/Users/idist/Desktop/git/library/vue-diagonal-screens/src/components/DiagnoalScreen.vue","DiagnoalScreen.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,6CAA6C","file":"DiagnoalScreen.vue","sourcesContent":["<script>\n export default {\n name: 'DiagnoalScreen',\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=\"DiagnoalScreen\" :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 #DiagnoalScreen {\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>","#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen button:focus {\n border: none;\n outline: none;\n}\n\n/*# sourceMappingURL=DiagnoalScreen.vue.map */"]}, media: undefined }); | ||
| inject("data-v-ee5cb3ae_0", { source: "#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen 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,6CAA6C","file":"DiagonalScreens.vue","sourcesContent":["<script>\n export default {\n name: 'DiagnoalScreen',\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=\"DiagnoalScreen\" :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 #DiagnoalScreen {\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>","#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen button:focus {\n border: none;\n outline: none;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */"]}, media: undefined }); | ||
@@ -326,0 +326,0 @@ }; |
@@ -326,3 +326,3 @@ (function (global, factory) { | ||
| if (!inject) { return } | ||
| inject("data-v-ee5cb3ae_0", { source: "#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen button:focus {\n border: none;\n outline: none;\n}\n\n/*# sourceMappingURL=DiagnoalScreen.vue.map */", map: {"version":3,"sources":["/Users/idist/Desktop/git/library/vue-diagonal-screens/src/components/DiagnoalScreen.vue","DiagnoalScreen.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,6CAA6C","file":"DiagnoalScreen.vue","sourcesContent":["<script>\n export default {\n name: 'DiagnoalScreen',\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=\"DiagnoalScreen\" :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 #DiagnoalScreen {\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>","#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen button:focus {\n border: none;\n outline: none;\n}\n\n/*# sourceMappingURL=DiagnoalScreen.vue.map */"]}, media: undefined }); | ||
| inject("data-v-ee5cb3ae_0", { source: "#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen 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,6CAA6C","file":"DiagonalScreens.vue","sourcesContent":["<script>\n export default {\n name: 'DiagnoalScreen',\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=\"DiagnoalScreen\" :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 #DiagnoalScreen {\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>","#DiagnoalScreen {\n position: relative;\n display: block;\n float: left;\n}\n#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen .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#DiagnoalScreen.clicked .title {\n top: 50% !important;\n left: 50% !important;\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) !important;\n}\n#DiagnoalScreen .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#DiagnoalScreen button, #DiagnoalScreen button:focus {\n border: none;\n outline: none;\n}\n\n/*# sourceMappingURL=DiagonalScreens.vue.map */"]}, media: undefined }); | ||
@@ -329,0 +329,0 @@ }; |
| { | ||
| "name": "vue-diagonal-screens", | ||
| "version": "0.1.1", | ||
| "main": "dist/DiagonalScreen.umd.js", | ||
| "module": "dist/DiagonalScreen.esm.js", | ||
| "unpkg": "dist/DiagonalScreen.min.js", | ||
| "version": "0.1.2", | ||
| "main": "dist/DiagonalScreens.umd.js", | ||
| "module": "dist/DiagonalScreens.esm.js", | ||
| "unpkg": "dist/DiagonalScreens.min.js", | ||
| "browser": { | ||
@@ -25,5 +25,5 @@ "./sfc": "src/my-component.vue" | ||
| "build": "npm run build:umd & npm run build:es & npm run build:unpkg", | ||
| "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/DiagonalScreen.umd.js", | ||
| "build:es": "rollup --config build/rollup.config.js --format es --file dist/DiagonalScreen.esm.js", | ||
| "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/DiagonalScreen.min.js" | ||
| "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/DiagonalScreens.umd.js", | ||
| "build:es": "rollup --config build/rollup.config.js --format es --file dist/DiagonalScreens.esm.js", | ||
| "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/DiagonalScreens.min.js" | ||
| }, | ||
@@ -30,0 +30,0 @@ "dependencies": {}, |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by11.08%
652781
- Number of package files
- increased by50%
9
- Lines of code
- increased by8.09%
15538
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes