API tools faq
paste
Guest User

Untitled

a guest
Nov 14th, 2018
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.15 KB | None | 0 0
raw download clone embed print report
  1. class slider extends HTMLElement {
  2. constructor() {
  3. super();
  4. this.images = [];
  5. this.attachShadow({
  6. mode: "open"
  7. });
  8. // #region HTML/css
  9. this.shadowRoot.innerHTML = /*html*/ `
  10. <style>
  11. .site-preview,
  12. :host {
  13. display: block;
  14. position: relative;
  15. min-height: 100px;
  16. padding: 1em;
  17. z-index: 1;
  18. text-align: center;
  19. }
  20. .site-preview .mobile,
  21. :host .mobile {
  22. display: inline-block;
  23. border: 5px solid black;
  24. border-radius: 15px;
  25. width: 10%;
  26. padding-top: 21.6666667%;
  27. position: relative;
  28. filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.32));
  29. z-index: 1;
  30. }
  31. .site-preview .mobile::before,
  32. :host .mobile::before {
  33. content: "";
  34. z-index: 1;
  35. background-color: #000;
  36. position: absolute;
  37. width: 65%;
  38. height: 10px;
  39. top: 0;
  40. left: 50%;
  41. transform: translate(-50%);
  42. border-bottom-left-radius: 5px;
  43. border-bottom-right-radius: 5px;
  44. }
  45. .site-preview .mobile .screen,
  46. :host .mobile .screen {
  47. border-radius: 8px;
  48. }
  49. .site-preview .tablet,
  50. :host .tablet {
  51. z-index: 1;
  52. display: inline-block;
  53. border: 15px solid black;
  54. position: relative;
  55. border-top-width: 25px;
  56. border-bottom-width: 35px;
  57. border-radius: 15px;
  58. width: 17%;
  59. padding-top: 22.6666666667%;
  60. filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.32));
  61. }
  62. .site-preview .tablet::before,
  63. :host .tablet::before {
  64. z-index: 1;
  65. content: "";
  66. background-color: #333;
  67. position: absolute;
  68. top: -17px;
  69. left: 50%;
  70. transform: translate(-50%);
  71. height: 5px;
  72. width: 5px;
  73. border-radius: 100%;
  74. }
  75. .site-preview .tablet::after,
  76. :host .tablet::after {
  77. z-index: 1;
  78. content: "";
  79. background-color: #333;
  80. position: absolute;
  81. bottom: -25px;
  82. left: 50%;
  83. transform: translate(-50%);
  84. height: 15px;
  85. width: 15px;
  86. border-radius: 100%;
  87. }
  88. .site-preview .desktop,
  89. :host .desktop {
  90. display: inline-block;
  91. border: 15px solid black;
  92. position: relative;
  93. border-radius: 25px;
  94. margin: 0 -50px;
  95. border-bottom-width: 10px;
  96. border-bottom-left-radius: 0;
  97. border-bottom-right-radius: 0;
  98. width: 50%;
  99. padding-top: 28.125%;
  100. margin-bottom: 100px;
  101. z-index: 0;
  102. }
  103. .site-preview .desktop .screen,
  104. :host .desktop .screen {
  105. border-top-left-radius: 10px;
  106. border-top-right-radius: 10px;
  107. }
  108. .site-preview .desktop::after,
  109. :host .desktop::after {
  110. z-index: 1;
  111. position: absolute;
  112. display: block;
  113. content: "";
  114. width: calc(100% + 30px);
  115. left: -15px;
  116. bottom: -60px;
  117. height: 50px;
  118. background-color: #c2c2c2;
  119. border-bottom-left-radius: 15px;
  120. border-bottom-right-radius: 15px;
  121. }
  122. .site-preview .desktop::before,
  123. :host .desktop::before {
  124. z-index: 1;
  125. position: absolute;
  126. display: block;
  127. content: "";
  128. background-color: #acacac;
  129. width: 25%;
  130. height: 50px;
  131. bottom: -110px;
  132. left: 50%;
  133. transform: translate(-50%);
  134. border: #c2c2c2 5px solid;
  135. border-left: transparent 10px solid;
  136. border-right: transparent 10px solid;
  137. }
  138. .site-preview .screen,
  139. :host .screen {
  140. position: absolute;
  141. top: 0;
  142. left: 0;
  143. right: 0;
  144. bottom: 0;
  145. display: block;
  146. overflow: hidden;
  147. background-color: #000;
  148. }
  149. .site-preview .screen .slide,
  150. :host .screen .slide {
  151. display: inline-block;
  152. width: 100%;
  153. height: 0;
  154. transition: height 250ms ease-in-out;
  155. object-fit: cover;
  156. object-position: center center;
  157. }
  158. .site-preview .screen .slide.selected,
  159. :host .screen .slide.selected {
  160. height: 100%;
  161. }
  162.  
  163. @media screen and (max-width: 500px) {
  164. :host .mobile {
  165. border-radius: 7px;
  166. border-width: 2px;
  167. }
  168. :host .mobile .screen {
  169. border-radius: 3px;
  170. }
  171. :host .mobile::before {
  172. height: 5px;
  173. }
  174. :host .tablet {
  175. border-width: 7px;
  176. border-top-width: 12px;
  177. border-bottom-width: 17px;
  178. border-radius: 7px;
  179. }
  180. :host .tablet::before {
  181. top: -10px;
  182. height: 5px;
  183. width: 5px;
  184. }
  185. :host .tablet::after {
  186. bottom: -15px;
  187. height: 10px;
  188. width: 10px;
  189. }
  190. :host .desktop {
  191. border-top-left-radius: 10px;
  192. border-top-right-radius: 10px;
  193. border-width: 10px;
  194. margin: 0 -20px;
  195. margin-bottom: 70px;
  196. }
  197. :host .desktop .screen {
  198. border-top-left-radius: 2px;
  199. border-top-right-radius: 2px;
  200. }
  201. :host .desktop::after {
  202. bottom: -35px;
  203. height: 25px;
  204. width: calc(100% + 20px);
  205. left: -10px;
  206. }
  207. :host .desktop::before {
  208. bottom: -65px;
  209. height: 35px;
  210. }
  211. }
  212. </style>
  213. <div class="tablet">
  214. <div class="screen"></div>
  215. </div>
  216. <div class="desktop">
  217. <div class="screen">
  218. </div>
  219. </div>
  220. <div class="mobile">
  221. <div class="screen"></div>
  222. </div>
  223. <slot></slot>`;
  224. //#endregion
  225. this.desktop = this.shadowRoot.querySelector(".desktop>.screen");
  226. this.tablet = this.shadowRoot.querySelector(".tablet>.screen");
  227. this.mobile = this.shadowRoot.querySelector(".mobile>.screen");
  228. this.slides = 0;
  229. this.currentSlide = 0;
  230. window.addEventListener("resize", () => this.WidthChanged(this));
  231. }
  232. async connectedCallback() {
  233. await new Promise((res) => requestAnimationFrame(res));
  234. let slides = this.shadowRoot.querySelector("slot").assignedElements();
  235. this.slides = Math.ceil(slides.length / 3);
  236. if (slides.length > 0) {
  237. slides.forEach(screenshot => {
  238. if (!screenshot.hasAttribute("data-type")) return;
  239. switch (screenshot.getAttribute("data-type")) {
  240. case "desktop":
  241. this.desktop.innerHTML += slider.slide.replace(`{url}`, screenshot.src);
  242. break;
  243. case "tablet":
  244. this.tablet.innerHTML += slider.slide.replace(`{url}`, screenshot.src);
  245. break;
  246. case "mobile":
  247. this.mobile.innerHTML += slider.slide.replace(`{url}`, screenshot.src);
  248. break;
  249. }
  250. screenshot.remove();
  251. });
  252. this.desktop.firstElementChild.classList.add("selected");
  253. this.tablet.firstElementChild.classList.add("selected");
  254. this.mobile.firstElementChild.classList.add("selected");
  255. } else
  256. this.desktop.innerHTML = "<h1>No Slides found.</h1>";
  257. setInterval(() => this.Scroll(this), this.getAttribute("data-interval") || 2500);
  258. }
  259. WidthChanged(elem) {
  260. console.log(elem.clientWidth);
  261. elem.classList.toggle("mobile", elem.clientWidth < 385);
  262. }
  263.  
  264. async Scroll(elem) {
  265. elem.currentSlide++;
  266. if (elem.currentSlide >= elem.slides) elem.currentSlide = 0;
  267. let screen = [elem.tablet, elem.desktop, elem.mobile];
  268. screen.forEach((screen, i) => {
  269. setTimeout(() => {
  270. let current = screen.querySelector(".selected");
  271. if (current && current.nextElementSibling && elem.currentSlide > 0) {
  272. current.nextElementSibling.classList.add("selected");
  273. current.classList.remove("selected");
  274. } else {
  275. screen.firstElementChild.classList.add("selected");
  276. if (current && this.slides > 0)
  277. current.classList.remove("selected");
  278. }
  279. }, (elem.getAttribute("data-delay") || 0) * i);
  280. });
  281. }
  282. }
  283. slider.slide = /*html*/ `<img src="{url}" class="slide">`;
  284. customElements.define("app-slider", slider);
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!