intia-theme 0.1.0 → 0.1.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (230) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/hero.html +5 -3
  3. data/_includes/introduction.html +1 -1
  4. data/_includes/story-slider.html +1 -1
  5. data/_layouts/404.html +7 -0
  6. data/_sass/_layout.scss +40 -11
  7. data/_sass/_main.scss +32 -11
  8. data/assets/img/404.png +0 -0
  9. data/assets/img/arrow-down.png +0 -0
  10. data/assets/img/arrow-left.png +0 -0
  11. data/assets/js/main.js +4 -1
  12. data/favicon.png +0 -0
  13. data/node_modules/bulma/CHANGELOG.md +1558 -0
  14. data/node_modules/bulma/LICENSE +21 -0
  15. data/node_modules/bulma/README.md +134 -0
  16. data/node_modules/bulma/bulma.sass +10 -0
  17. data/node_modules/bulma/css/bulma-rtl.css +11811 -0
  18. data/node_modules/bulma/css/bulma-rtl.css.map +1 -0
  19. data/node_modules/bulma/css/bulma-rtl.min.css +1 -0
  20. data/node_modules/bulma/css/bulma.css +11811 -0
  21. data/node_modules/bulma/css/bulma.css.map +1 -0
  22. data/node_modules/bulma/css/bulma.min.css +1 -0
  23. data/node_modules/bulma/package.json +82 -0
  24. data/node_modules/bulma/sass/base/_all.sass +6 -0
  25. data/node_modules/bulma/sass/base/animations.sass +5 -0
  26. data/node_modules/bulma/sass/base/generic.sass +145 -0
  27. data/node_modules/bulma/sass/base/helpers.sass +1 -0
  28. data/node_modules/bulma/sass/base/minireset.sass +79 -0
  29. data/node_modules/bulma/sass/components/_all.sass +15 -0
  30. data/node_modules/bulma/sass/components/breadcrumb.sass +77 -0
  31. data/node_modules/bulma/sass/components/card.sass +103 -0
  32. data/node_modules/bulma/sass/components/dropdown.sass +83 -0
  33. data/node_modules/bulma/sass/components/level.sass +79 -0
  34. data/node_modules/bulma/sass/components/media.sass +59 -0
  35. data/node_modules/bulma/sass/components/menu.sass +59 -0
  36. data/node_modules/bulma/sass/components/message.sass +101 -0
  37. data/node_modules/bulma/sass/components/modal.sass +117 -0
  38. data/node_modules/bulma/sass/components/navbar.sass +446 -0
  39. data/node_modules/bulma/sass/components/pagination.sass +166 -0
  40. data/node_modules/bulma/sass/components/panel.sass +121 -0
  41. data/node_modules/bulma/sass/components/tabs.sass +176 -0
  42. data/node_modules/bulma/sass/elements/_all.sass +16 -0
  43. data/node_modules/bulma/sass/elements/box.sass +26 -0
  44. data/node_modules/bulma/sass/elements/button.sass +345 -0
  45. data/node_modules/bulma/sass/elements/container.sass +29 -0
  46. data/node_modules/bulma/sass/elements/content.sass +159 -0
  47. data/node_modules/bulma/sass/elements/form.sass +1 -0
  48. data/node_modules/bulma/sass/elements/icon.sass +46 -0
  49. data/node_modules/bulma/sass/elements/image.sass +73 -0
  50. data/node_modules/bulma/sass/elements/notification.sass +52 -0
  51. data/node_modules/bulma/sass/elements/other.sass +31 -0
  52. data/node_modules/bulma/sass/elements/progress.sass +73 -0
  53. data/node_modules/bulma/sass/elements/table.sass +133 -0
  54. data/node_modules/bulma/sass/elements/tag.sass +140 -0
  55. data/node_modules/bulma/sass/elements/title.sass +70 -0
  56. data/node_modules/bulma/sass/form/_all.sass +9 -0
  57. data/node_modules/bulma/sass/form/checkbox-radio.sass +22 -0
  58. data/node_modules/bulma/sass/form/file.sass +184 -0
  59. data/node_modules/bulma/sass/form/input-textarea.sass +66 -0
  60. data/node_modules/bulma/sass/form/select.sass +87 -0
  61. data/node_modules/bulma/sass/form/shared.sass +60 -0
  62. data/node_modules/bulma/sass/form/tools.sass +215 -0
  63. data/node_modules/bulma/sass/grid/_all.sass +5 -0
  64. data/node_modules/bulma/sass/grid/columns.sass +513 -0
  65. data/node_modules/bulma/sass/grid/tiles.sass +36 -0
  66. data/node_modules/bulma/sass/helpers/_all.sass +12 -0
  67. data/node_modules/bulma/sass/helpers/color.sass +39 -0
  68. data/node_modules/bulma/sass/helpers/flexbox.sass +35 -0
  69. data/node_modules/bulma/sass/helpers/float.sass +10 -0
  70. data/node_modules/bulma/sass/helpers/other.sass +14 -0
  71. data/node_modules/bulma/sass/helpers/overflow.sass +2 -0
  72. data/node_modules/bulma/sass/helpers/position.sass +7 -0
  73. data/node_modules/bulma/sass/helpers/spacing.sass +31 -0
  74. data/node_modules/bulma/sass/helpers/typography.sass +103 -0
  75. data/node_modules/bulma/sass/helpers/visibility.sass +122 -0
  76. data/node_modules/bulma/sass/layout/_all.sass +6 -0
  77. data/node_modules/bulma/sass/layout/footer.sass +11 -0
  78. data/node_modules/bulma/sass/layout/hero.sass +153 -0
  79. data/node_modules/bulma/sass/layout/section.sass +17 -0
  80. data/node_modules/bulma/sass/utilities/_all.sass +9 -0
  81. data/node_modules/bulma/sass/utilities/animations.sass +1 -0
  82. data/node_modules/bulma/sass/utilities/controls.sass +49 -0
  83. data/node_modules/bulma/sass/utilities/derived-variables.sass +114 -0
  84. data/node_modules/bulma/sass/utilities/extends.sass +25 -0
  85. data/node_modules/bulma/sass/utilities/functions.sass +136 -0
  86. data/node_modules/bulma/sass/utilities/initial-variables.sass +78 -0
  87. data/node_modules/bulma/sass/utilities/mixins.sass +280 -0
  88. data/node_modules/bulma-block-list/LICENSE.txt +21 -0
  89. data/node_modules/bulma-block-list/README.md +32 -0
  90. data/node_modules/bulma-block-list/node_modules/bulma/CHANGELOG.md +1390 -0
  91. data/node_modules/bulma-block-list/node_modules/bulma/LICENSE +21 -0
  92. data/node_modules/bulma-block-list/node_modules/bulma/README.md +130 -0
  93. data/node_modules/bulma-block-list/node_modules/bulma/bulma.sass +9 -0
  94. data/node_modules/bulma-block-list/node_modules/bulma/css/bulma.css +10855 -0
  95. data/node_modules/bulma-block-list/node_modules/bulma/css/bulma.css.map +1 -0
  96. data/node_modules/bulma-block-list/node_modules/bulma/css/bulma.min.css +1 -0
  97. data/node_modules/bulma-block-list/node_modules/bulma/package.json +80 -0
  98. data/node_modules/bulma-block-list/node_modules/bulma/sass/base/_all.sass +5 -0
  99. data/node_modules/bulma-block-list/node_modules/bulma/sass/base/generic.sass +142 -0
  100. data/node_modules/bulma-block-list/node_modules/bulma/sass/base/helpers.sass +281 -0
  101. data/node_modules/bulma-block-list/node_modules/bulma/sass/base/minireset.sass +79 -0
  102. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/_all.sass +15 -0
  103. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/breadcrumb.sass +75 -0
  104. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/card.sass +79 -0
  105. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/dropdown.sass +81 -0
  106. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/level.sass +77 -0
  107. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/list.sass +39 -0
  108. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/media.sass +50 -0
  109. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/menu.sass +57 -0
  110. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/message.sass +99 -0
  111. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/modal.sass +113 -0
  112. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/navbar.sass +441 -0
  113. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/pagination.sass +150 -0
  114. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/panel.sass +119 -0
  115. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/tabs.sass +151 -0
  116. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/_all.sass +15 -0
  117. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/box.sass +24 -0
  118. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/button.sass +323 -0
  119. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/container.sass +24 -0
  120. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/content.sass +155 -0
  121. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/form.sass +1 -0
  122. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/icon.sass +21 -0
  123. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/image.sass +71 -0
  124. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/notification.sass +43 -0
  125. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/other.sass +39 -0
  126. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/progress.sass +67 -0
  127. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/table.sass +127 -0
  128. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/tag.sass +128 -0
  129. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/title.sass +70 -0
  130. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/_all.sass +8 -0
  131. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/checkbox-radio.sass +21 -0
  132. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/file.sass +180 -0
  133. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/input-textarea.sass +64 -0
  134. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/select.sass +85 -0
  135. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/shared.sass +55 -0
  136. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/tools.sass +205 -0
  137. data/node_modules/bulma-block-list/node_modules/bulma/sass/grid/_all.sass +4 -0
  138. data/node_modules/bulma-block-list/node_modules/bulma/sass/grid/columns.sass +504 -0
  139. data/node_modules/bulma-block-list/node_modules/bulma/sass/grid/tiles.sass +34 -0
  140. data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/_all.sass +5 -0
  141. data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/footer.sass +9 -0
  142. data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/hero.sass +145 -0
  143. data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/section.sass +13 -0
  144. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/_all.sass +8 -0
  145. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/animations.sass +5 -0
  146. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/controls.sass +50 -0
  147. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/derived-variables.sass +106 -0
  148. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/functions.sass +110 -0
  149. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/initial-variables.sass +77 -0
  150. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/mixins.sass +261 -0
  151. data/node_modules/bulma-block-list/package.json +59 -0
  152. data/node_modules/bulma-block-list/src/block-list.scss +109 -0
  153. data/node_modules/bulma-block-list/src/demo.scss +3 -0
  154. data/node_modules/bulma-carousel/CHANGELOG.md +307 -0
  155. data/node_modules/bulma-carousel/LICENSE +21 -0
  156. data/node_modules/bulma-carousel/README.md +13 -0
  157. data/node_modules/bulma-carousel/dist/css/bulma-carousel.min.css +1 -0
  158. data/node_modules/bulma-carousel/dist/js/bulma-carousel.js +2371 -0
  159. data/node_modules/bulma-carousel/package.json +108 -0
  160. data/node_modules/bulma-carousel/src/demo/_data/events.yml +15 -0
  161. data/node_modules/bulma-carousel/src/demo/_data/getters.yml +26 -0
  162. data/node_modules/bulma-carousel/src/demo/_data/menu.yml +26 -0
  163. data/node_modules/bulma-carousel/src/demo/_data/methods.yml +57 -0
  164. data/node_modules/bulma-carousel/src/demo/_data/options.yml +79 -0
  165. data/node_modules/bulma-carousel/src/demo/_data/setters.yml +0 -0
  166. data/node_modules/bulma-carousel/src/demo/_data/tree.yml +30 -0
  167. data/node_modules/bulma-carousel/src/demo/_includes/anchor.html +3 -0
  168. data/node_modules/bulma-carousel/src/demo/_includes/breadcrumb.html +5 -0
  169. data/node_modules/bulma-carousel/src/demo/_includes/events.html +33 -0
  170. data/node_modules/bulma-carousel/src/demo/_includes/getters.html +28 -0
  171. data/node_modules/bulma-carousel/src/demo/_includes/head.html +22 -0
  172. data/node_modules/bulma-carousel/src/demo/_includes/menu.html +22 -0
  173. data/node_modules/bulma-carousel/src/demo/_includes/methods.html +49 -0
  174. data/node_modules/bulma-carousel/src/demo/_includes/options.html +33 -0
  175. data/node_modules/bulma-carousel/src/demo/_includes/setters.html +28 -0
  176. data/node_modules/bulma-carousel/src/demo/_includes/tree.html +25 -0
  177. data/node_modules/bulma-carousel/src/demo/_includes/variables.html +28 -0
  178. data/node_modules/bulma-carousel/src/demo/_layouts/default.html +47 -0
  179. data/node_modules/bulma-carousel/src/demo/assets/css/bulma-carousel.min.css +1 -0
  180. data/node_modules/bulma-carousel/src/demo/assets/css/documentation.min.css +1 -0
  181. data/node_modules/bulma-carousel/src/demo/assets/css/highlight.css +78 -0
  182. data/node_modules/bulma-carousel/src/demo/assets/images/1.jpg +0 -0
  183. data/node_modules/bulma-carousel/src/demo/assets/images/2.jpg +0 -0
  184. data/node_modules/bulma-carousel/src/demo/assets/images/3.jpg +0 -0
  185. data/node_modules/bulma-carousel/src/demo/assets/images/4.jpg +0 -0
  186. data/node_modules/bulma-carousel/src/demo/assets/images/5.jpg +0 -0
  187. data/node_modules/bulma-carousel/src/demo/assets/images/6.jpg +0 -0
  188. data/node_modules/bulma-carousel/src/demo/assets/images/left.svg +3 -0
  189. data/node_modules/bulma-carousel/src/demo/assets/images/right.svg +3 -0
  190. data/node_modules/bulma-carousel/src/demo/assets/js/bulma-carousel.min.js +1 -0
  191. data/node_modules/bulma-carousel/src/demo/assets/js/doc.js +111 -0
  192. data/node_modules/bulma-carousel/src/demo/assets/js/main.js +23 -0
  193. data/node_modules/bulma-carousel/src/demo/changelog.html +17 -0
  194. data/node_modules/bulma-carousel/src/demo/customization.html +78 -0
  195. data/node_modules/bulma-carousel/src/demo/demonstration/index.html +402 -0
  196. data/node_modules/bulma-carousel/src/demo/index.html +396 -0
  197. data/node_modules/bulma-carousel/src/js/components/Media.js +129 -0
  198. data/node_modules/bulma-carousel/src/js/components/autoplay.js +111 -0
  199. data/node_modules/bulma-carousel/src/js/components/breakpoint.js +91 -0
  200. data/node_modules/bulma-carousel/src/js/components/infinite.js +60 -0
  201. data/node_modules/bulma-carousel/src/js/components/loop.js +35 -0
  202. data/node_modules/bulma-carousel/src/js/components/navigation.js +107 -0
  203. data/node_modules/bulma-carousel/src/js/components/pagination.js +103 -0
  204. data/node_modules/bulma-carousel/src/js/components/swipe.js +106 -0
  205. data/node_modules/bulma-carousel/src/js/components/transitioner.js +74 -0
  206. data/node_modules/bulma-carousel/src/js/components/transitions/fade.js +90 -0
  207. data/node_modules/bulma-carousel/src/js/components/transitions/translate.js +98 -0
  208. data/node_modules/bulma-carousel/src/js/defaultOptions.js +50 -0
  209. data/node_modules/bulma-carousel/src/js/index.js +428 -0
  210. data/node_modules/bulma-carousel/src/js/templates/index.js +5 -0
  211. data/node_modules/bulma-carousel/src/js/templates/item.js +3 -0
  212. data/node_modules/bulma-carousel/src/js/templates/navigation.js +4 -0
  213. data/node_modules/bulma-carousel/src/js/templates/pagination-page.js +3 -0
  214. data/node_modules/bulma-carousel/src/js/templates/pagination.js +3 -0
  215. data/node_modules/bulma-carousel/src/js/utils/coordinate.js +98 -0
  216. data/node_modules/bulma-carousel/src/js/utils/css.js +84 -0
  217. data/node_modules/bulma-carousel/src/js/utils/detect-prefixes.js +50 -0
  218. data/node_modules/bulma-carousel/src/js/utils/detect-supportsPassive.js +16 -0
  219. data/node_modules/bulma-carousel/src/js/utils/device.js +17 -0
  220. data/node_modules/bulma-carousel/src/js/utils/dom.js +10 -0
  221. data/node_modules/bulma-carousel/src/js/utils/eventEmitter.js +19 -0
  222. data/node_modules/bulma-carousel/src/js/utils/events.js +65 -0
  223. data/node_modules/bulma-carousel/src/js/utils/index.js +16 -0
  224. data/node_modules/bulma-carousel/src/js/utils/type.js +21 -0
  225. data/node_modules/bulma-carousel/src/sass/index.sass +145 -0
  226. data/package-lock.json +32 -0
  227. data/package.json +10 -0
  228. metadata +222 -4
  229. data/_config.yml +0 -72
  230. data/assets/img/arrow.png +0 -0
@@ -0,0 +1,396 @@
1
+ ---
2
+ layout: default
3
+ route: index
4
+ fixed-navbar: false
5
+ title: Quick-Start
6
+ subtitle: bulma.io Carousel/Slider component
7
+ ---
8
+
9
+ {% capture component_include_css %}
10
+ <link href="~bulma-carousel/dist/css/bulma-carousel.min.css" rel="stylesheet">
11
+ {% endcapture %}
12
+
13
+ {% capture component_include_sass %}
14
+ @charset "utf-8"
15
+
16
+ // Import Bulma core
17
+ @import 'bulma.sass'
18
+
19
+ // Import component
20
+ @import "bulmaCarousel.sass"
21
+ {% endcapture %}
22
+
23
+ {% capture component_include_es5 %}
24
+ <script src="~bulma-carousel/dist/js/bulma-carousel.min.js"></script>
25
+ {% endcapture %}
26
+
27
+ {% capture component_include_es6 %}
28
+ import bulmaCarousel from '~bulma-carousel/dist/js/bulma-carousel.min.js';
29
+ {% endcapture %}
30
+
31
+ {% capture component_starter_template %}
32
+ <!DOCTYPE html>
33
+ <html>
34
+ <head>
35
+ <meta charset="utf-8">
36
+ <meta name="viewport" content="width=device-width, initial-scale=1">
37
+ <title>Hello Bulma!</title>
38
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
39
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/css/bulma-carousel.min.css">
40
+ </head>
41
+ <body>
42
+ <section class="section">
43
+ <div class="container">
44
+ <!-- Start Carousel -->
45
+ <div id="carousel-demo" class="carousel">
46
+ <div class="item-1">
47
+ <!-- Slide Content -->
48
+ </div>
49
+ <div class="item-2">
50
+ <!-- Slide Content -->
51
+ </div>
52
+ <div class="item-3">
53
+ <!-- Slide Content -->
54
+ </div>
55
+ </div>
56
+ <!-- End Carousel -->
57
+ </div>
58
+ </section>
59
+
60
+ <script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/js/bulma-carousel.min.js"></script>
61
+ <script>
62
+ bulmaCarousel.attach('#carousel-demo', {
63
+ slidesToScroll: 1,
64
+ slidesToShow: 4
65
+ });
66
+ </script>
67
+ </body>
68
+ </html>
69
+ {% endcapture %}
70
+
71
+ {% capture component_hero_starter_template %}
72
+ <!DOCTYPE html>
73
+ <html>
74
+ <head>
75
+ <meta charset="utf-8">
76
+ <meta name="viewport" content="width=device-width, initial-scale=1">
77
+ <title>Hello Bulma!</title>
78
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
79
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/css/bulma-carousel.min.css">
80
+ </head>
81
+ <body>
82
+ <!-- Start Hero Carousel -->
83
+ <section class="hero is-medium has-carousel">
84
+ <div id="carousel-demo" class="hero-carousel">
85
+ <div class="item-1">
86
+ <!-- Slide Content -->
87
+ </div>
88
+ <div class="item-2">
89
+ <!-- Slide Content -->
90
+ </div>
91
+ <div class="item-3">
92
+ <!-- Slide Content -->
93
+ </div>
94
+ </div>
95
+ <div class="hero-head"></div>
96
+ <div class="hero-body"></div>
97
+ <div class="hero-foot"></div>
98
+ </section>
99
+ <!-- End Hero Carousel -->
100
+
101
+ <script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/js/bulma-carousel.min.js"></script>
102
+ <script>
103
+ bulmaCarousel.attach('#carousel-demo', {
104
+ slidesToScroll: 1,
105
+ slidesToShow: 4
106
+ });
107
+ </script>
108
+ </body>
109
+ </html>
110
+ {% endcapture %}
111
+
112
+ {% capture component_dataset %}
113
+ <div class="carousel" data-slides-to-scroll="2">
114
+ <div class="item-1"></div>
115
+ <div class="item-2"></div>
116
+ <div class="item-3"></div>
117
+ </div>
118
+ {% endcapture %}
119
+
120
+ {% capture component_init_es5 %}
121
+ // Initialize all div with carousel class
122
+ var carousels = bulmaCarousel.attach('.carousel', options);
123
+
124
+ // Loop on each carousel initialized
125
+ for(var i = 0; i < carousels.length; i++) {
126
+ // Add listener to event
127
+ carousels[i].on('before:show', state => {
128
+ console.log(state);
129
+ });
130
+ }
131
+
132
+ // Access to bulmaCarousel instance of an element
133
+ var element = document.querySelector('#my-element');
134
+ if (element && element.bulmaCarousel) {
135
+ // bulmaCarousel instance is available as element.bulmaCarousel
136
+ element.bulmaCarousel.on('before-show', function(state) {
137
+ console.log(state);
138
+ });
139
+ }
140
+ {% endcapture %}
141
+
142
+ {% capture component_init_es6 %}
143
+ // Initialize all elements with carousel class.
144
+ const carousels = bulmaCarousel.attach('.carousel', options);
145
+
146
+ // To access to bulmaCarousel instance of an element
147
+ const element = document.querySelector('#my-element');
148
+ if (element && element.bulmaCarousel) {
149
+ // bulmaCarousel instance is available as element.bulmaCarousel
150
+ }
151
+ {% endcapture %}
152
+
153
+ {% capture component_instance_access %}
154
+ // Access to bulmaCarousel instance of an element
155
+ var element = document.querySelector('#my-element');
156
+ if (element && element.bulmaCarousel) {
157
+ // bulmaCarousel instance is available as element.bulmaCarousel
158
+ }
159
+ {% endcapture %}
160
+
161
+ {% capture component_events %}
162
+ // Initialize all elements with carousel class.
163
+ const carousels = bulmaCarousel.attach('.carousel', options);
164
+
165
+ // To access to bulmaCarousel instance of an element
166
+ const element = document.querySelector('#my-element');
167
+ if (element && element.bulmaCarousel) {
168
+ // bulmaCarousel instance is available as element.bulmaCarousel
169
+ element.bulmaCarousel.on('show', function(bulmaCarouselInstance) {
170
+ console.log(bulmaCarouselInstance.index);
171
+ });
172
+ }
173
+ {% endcapture %}
174
+
175
+
176
+ {% include anchor.html name="Features" %}
177
+ <div class="columns is-multiline is-variable is-6">
178
+ <div class="column is-one-third">
179
+ <article class="media">
180
+ <figure class="media-left">
181
+ <span class="icon has-text-info">
182
+ <i class="fas fa-2x fa-desktop"></i>
183
+ </span>
184
+ </figure>
185
+ <div class="media-content">
186
+ <div class="content">
187
+ <h1 class="title is-6 heading has-text-grey-dark">Responsive</h1>
188
+ <p>Carousel works fine on any device: desktop, tablet or mobile an adapt number of items visible (configurable).</p>
189
+ </div>
190
+ </div>
191
+ </article>
192
+ </div>
193
+ <div class="column is-one-third">
194
+ <article class="media">
195
+ <figure class="media-left">
196
+ <span class="icon has-text-info">
197
+ <i class="fas fa-2x fa-paint-brush"></i>
198
+ </span>
199
+ </figure>
200
+ <div class="media-content">
201
+ <div class="content">
202
+ <h1 class="title is-6 heading has-text-grey-dark">Customization</h1>
203
+ <p>Many options to customize behavior. Use of sass variables to easily customize design.</p>
204
+ </div>
205
+ </div>
206
+ </article>
207
+ </div>
208
+ <div class="column is-one-third">
209
+ <article class="media">
210
+ <figure class="media-left">
211
+ <span class="icon has-text-info">
212
+ <i class="fab fa-2x fa-js"></i>
213
+ </span>
214
+ </figure>
215
+ <div class="media-content">
216
+ <div class="content">
217
+ <h1 class="title is-6 heading has-text-grey-dark">Javascript</h1>
218
+ <p>Pure JavaScript to manage user interaction.</p>
219
+ </div>
220
+ </div>
221
+ </article>
222
+ </div>
223
+ </div>
224
+
225
+ {% include anchor.html name="Installation" %}
226
+ <article class="message is-warning">
227
+ <div class="message-body">
228
+ This component requires bulma.io to work. See <a href="https://bulma.io/documentation/overview/start/" target="_blank">bulma.io
229
+ documentation</a> first to know how to include it into your project.
230
+ </div>
231
+ </article>
232
+ <p>There are several ways to get started with Bulma-extensions. You can either:</p>
233
+
234
+ <section class="section is-paddingless">
235
+ <div class="tabs">
236
+ <ul>
237
+ <li class="is-active"><a href="#install-npm">Npm</a></li>
238
+ <li><a href="#install-github">Github</a> </li>
239
+ </ul>
240
+ </div>
241
+
242
+ <div class="tab-contents">
243
+ <div id="install-npm" class="tab-content is-active">
244
+ <p>Use npm to install and stay up to date in the future</p>
245
+ {% highlight shell %}npm install bulma-carousel{% endhighlight %}
246
+ </div>
247
+
248
+ <div id="install-github" class="tab-content">
249
+ <p>Use the GitHub repository to get the latest development version</p>
250
+ <p class="help">This method requires git installed on your computer.</p>
251
+ {% highlight shell %}git clone git://github.com/Wikiki/bulma-carousel.git{% endhighlight %}
252
+ </div>
253
+ </div>
254
+ </section>
255
+
256
+ {% include anchor.html name="Starter Template" %}
257
+ <section class="section is-paddingless">
258
+ <p>If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer. </p>
259
+ <p>The best way to start with carousel is to use a simple div to encaspulate your items. All child will then be used as Carousel Item:</p>
260
+ <div class="tabs">
261
+ <ul>
262
+ <li class="is-active"><a href="#classic-carousel">Classic Carousel</a></li>
263
+ <li><a href="#hero-carousel">Hero Carousel</a></li>
264
+ </ul>
265
+ </div>
266
+
267
+ <div class="tab-contents">
268
+ <div id="classic-carousel" class="tab-content is-active">
269
+ <p>{% highlight html %}{{ component_starter_template }}{% endhighlight %}</p>
270
+ </div>
271
+ <div id="hero-carousel" class="tab-content">
272
+ <p>{% highlight html %}{{ component_hero_starter_template }}{% endhighlight %}</p>
273
+ </div>
274
+ </div>
275
+ </section>
276
+
277
+ {% include anchor.html name="Integration" %}
278
+ <section class="section is-paddingless">
279
+ <article class="message is-warning">
280
+ <div class="message-body">
281
+ This component requires bulma.io to work. See <a href="https://bulma.io/documentation" target="_blank">bulma.io
282
+ documentation</a> first to know how to install it.
283
+ </div>
284
+ </article>
285
+ <p>You are only at 3 simple steps to work with bulmaCarousel.</p>
286
+ <ul class="step-text">
287
+ <li>
288
+ <h6 class="title is-6">Include Stylesheet</h6>
289
+ <p>The first step is to include the stylesheet into your project. You can use either the minified CSS version or
290
+ the Sass source to integrate it into a more global project.</p>
291
+ <div class="tabs">
292
+ <ul>
293
+ <li class="is-active"><a href="#include-css">Css</a></li>
294
+ <li><a href="#include-sass">Sass</a></li>
295
+ </ul>
296
+ </div>
297
+
298
+ <div class="tab-contents">
299
+ <div id="include-css" class="tab-content is-active">
300
+ <p>{% highlight html %}{{ component_include_css }}{% endhighlight %}</p>
301
+ </div>
302
+ <div id="include-sass" class="tab-content">
303
+ <p>{% highlight html %}{{ component_include_sass }}{% endhighlight %}</p>
304
+ </div>
305
+ </div>
306
+ </li>
307
+ <li>
308
+ <h6 class="title is-6">Include JavaScript</h6>
309
+ <p>Second step is to include the JavaScript part of the component.</p>
310
+ <div class="tabs">
311
+ <ul>
312
+ <li class="is-active"><a href="#import-es5">ES5</a></li>
313
+ <li><a href="#import-es6">ES6</a></li>
314
+ </ul>
315
+ </div>
316
+
317
+ <div class="tab-contents">
318
+ <div id="import-es5" class="tab-content is-active">
319
+ <p>{% highlight html %}{{ component_include_es5 }}{% endhighlight %}</p>
320
+ </div>
321
+ <div id="import-es6" class="tab-content">
322
+ <p>{% highlight javascript %}{{ component_include_es6 }}{% endhighlight %}</p>
323
+ </div>
324
+ </div>
325
+ </li>
326
+ <li>
327
+ <h6 class="title is-6">Initiate component</h6>
328
+ <p>Now all that remains is to intiate the component to all elements you want to transform into a Carousel</p>
329
+ <article class="message is-warning">
330
+ <div class="message-body">
331
+ The <code>attach()</code> method <strong>always</strong> return an array of Carousel instances (even if it
332
+ targets only one element).
333
+ </div>
334
+ </article>
335
+ <article class="message is-warning">
336
+ <div class="message-body">
337
+ Instantiation method is the same for classic & hero carousel.
338
+ </div>
339
+ </article>
340
+ <div class="tabs">
341
+ <ul>
342
+ <li class="is-active"><a href="#init-es5">ES5</a></li>
343
+ <li><a href="#init-es6">ES6</a></li>
344
+ </ul>
345
+ </div>
346
+
347
+ <div class="tab-contents">
348
+ <div id="init-es5" class="tab-content is-active">
349
+ <p>{% highlight javascript %}{{ component_init_es5 }}{% endhighlight %}</p>
350
+ </div>
351
+ <div id="init-es6" class="tab-content">
352
+ <p>{% highlight javascript %}{{ component_init_es6 }}{% endhighlight %}</p>
353
+ </div>
354
+ </div>
355
+ </li>
356
+ </ul>
357
+ </section>
358
+
359
+ {% include anchor.html name="Options" %}
360
+ {% include options.html %}
361
+
362
+ <article class="message is-info">
363
+ <div class="message-body">
364
+ Options can be set using input data attributes. Just convert option name to dashes.<br />
365
+ <i>For example if you want to init a carousel with SlidesToScroll option set to "2":</i>
366
+ {% highlight html %}{{ component_dataset }}{% endhighlight %}
367
+ </div>
368
+ </article>
369
+
370
+ {% include anchor.html name="Methods" %}
371
+ <section class="section is-paddingless">
372
+ <p>Carousel component provides some public methods to manually work with it.</p>
373
+ {% include methods.html %}
374
+ </section>
375
+
376
+ {% include anchor.html name="Getters" %}
377
+ <section class="section is-paddingless">
378
+ <p>Carousel component provides some public Getters to manually access properties.</p>
379
+ {% include getters.html %}
380
+
381
+ <article class="message is-info">
382
+ <div class="message-body">
383
+ <p>Reminder: You can easily access to bulmaCarousel instance from a DOM element using the following code:</p>
384
+ {% highlight javascript %}{{ component_instance_access }}{% endhighlight %}
385
+ </div>
386
+ </article>
387
+ </section>
388
+
389
+ {% include anchor.html name="Events" %}
390
+ <section class="section is-paddingless">
391
+ <p>Carousel component comes with Events Management API so you can easily react to its behavior.</p>
392
+ {% include events.html %}
393
+
394
+ <p>Example working with "show" event:</p>
395
+ {% highlight javascript %}{{ component_events }}{% endhighlight %}
396
+ </section>
@@ -0,0 +1,129 @@
1
+ import {
2
+ uuid
3
+ } from '../utils/';
4
+ import {
5
+ isVideo,
6
+ isIFrame,
7
+ isHTML5
8
+ } from '../utils/type';
9
+
10
+ class Player {
11
+ constructor(element) {
12
+ this.id = uuid('player');
13
+ this.element = element;
14
+ }
15
+
16
+ play() {
17
+ if (!isVideo()) {
18
+ return;
19
+ }
20
+
21
+ if (isIFrame()) {
22
+ this._enableApi().then(() => this._postMessage(this.element, {
23
+ func: 'playVideo',
24
+ method: 'play'
25
+ }));
26
+ } else if (isHTML5()) {
27
+ try {
28
+ this.element.play();
29
+ } catch (e) {}
30
+ }
31
+ }
32
+
33
+ pause() {
34
+ if (!isVideo()) {
35
+ return;
36
+ }
37
+
38
+ if (isIFrame()) {
39
+ this._enableApi().then(() => this._postMessage(this.element, {
40
+ func: 'pauseVideo',
41
+ method: 'pause'
42
+ }));
43
+ } else if (isHTML5()) {
44
+ this.element.pause();
45
+ }
46
+ }
47
+
48
+ mute() {
49
+ if (!isVideo()) {
50
+ return;
51
+ }
52
+
53
+ if (isIFrame()) {
54
+ this._enableApi().then(() => this._postMessage(this.element, {
55
+ func: 'mute',
56
+ method: 'setVolume',
57
+ value: 0
58
+ }));
59
+ } else if (isHTML5()) {
60
+ this.element.muted = true;
61
+ this.element.setAttribute('muted', '');
62
+ }
63
+ }
64
+
65
+ _enableApi() {
66
+ if (this.ready) {
67
+ return this.ready;
68
+ }
69
+
70
+ const youtube = isYoutube();
71
+ const vimeo = isVimeo();
72
+
73
+ let poller;
74
+
75
+ if (youtube || vimeo) {
76
+ return this.ready = new Promise(resolve => {
77
+ once(this.element, 'load', () => {
78
+ if (youtube) {
79
+ const listener = () => this._postMessage(this.element, {
80
+ event: 'listening',
81
+ id: this.id
82
+ });
83
+ poller = setInterval(listener, 100);
84
+ listener();
85
+ }
86
+ });
87
+
88
+ this._listen(data => youtube && data.id === this.id && data.event === 'onReady' || vimeo && Number(data.player_id) === this.id)
89
+ .then(() => {
90
+ resolve();
91
+ poller && clearInterval(poller);
92
+ });
93
+
94
+ this.element.setAttribute('src', `${this.element.src}${this.element.src.includes('?') ? '&' : '?'}${youtube ? 'enablejsapi=1' : `api=1&player_id=${this.id}`}`);
95
+
96
+ });
97
+
98
+ }
99
+ return Promise.resolve();
100
+ }
101
+
102
+ _postMessage(element, cmd) {
103
+ try {
104
+ element.contentWindow.postMessage(JSON.stringify({
105
+ event: 'command',
106
+ ...cmd
107
+ }), '*');
108
+ } catch (e) {}
109
+ }
110
+
111
+ _listen(cb) {
112
+ return new Promise(resolve => {
113
+ once(window, 'message', (_, data) => resolve(data), false, ({data}) => {
114
+ if (!data || !isString(data)) {
115
+ return;
116
+ }
117
+
118
+ try {
119
+ data = JSON.parse(data);
120
+ } catch (e) {
121
+ return;
122
+ }
123
+
124
+ return data && cb(data);
125
+
126
+ });
127
+ });
128
+ }
129
+ }
@@ -0,0 +1,111 @@
1
+ import EventEmitter from '../utils/eventEmitter';
2
+ import {pointerEnter, pointerLeave} from '../utils/device';
3
+
4
+ const onVisibilityChange = Symbol('onVisibilityChange');
5
+ const onMouseEnter = Symbol('onMouseEnter');
6
+ const onMouseLeave = Symbol('onMouseLeave');
7
+
8
+ const defaultOptions = {
9
+ autoplay: false,
10
+ autoplaySpeed: 3000
11
+ };
12
+
13
+ export default class Autoplay extends EventEmitter {
14
+ constructor(slider) {
15
+ super();
16
+
17
+ this.slider = slider;
18
+
19
+ this.onVisibilityChange = this.onVisibilityChange.bind(this);
20
+ this.onMouseEnter = this.onMouseEnter.bind(this);
21
+ this.onMouseLeave = this.onMouseLeave.bind(this);
22
+ }
23
+
24
+ init() {
25
+ this._bindEvents();
26
+ return this;
27
+ }
28
+
29
+ _bindEvents() {
30
+ document.addEventListener('visibilitychange', this.onVisibilityChange);
31
+ if (this.slider.options.pauseOnHover) {
32
+ this.slider.container.addEventListener(pointerEnter, this.onMouseEnter);
33
+ this.slider.container.addEventListener(pointerLeave, this.onMouseLeave);
34
+ }
35
+ }
36
+
37
+ _unbindEvents() {
38
+ document.removeEventListener('visibilitychange', this.onVisibilityChange);
39
+ this.slider.container.removeEventListener(pointerEnter, this.onMouseEnter);
40
+ this.slider.container.removeEventListener(pointerLeave, this.onMouseLeave);
41
+ }
42
+
43
+ start() {
44
+ this.stop();
45
+ if (this.slider.options.autoplay) {
46
+ this.emit('start', this);
47
+ this._interval = setInterval(() => {
48
+ if (!(this._hovering && this.slider.options.pauseOnHover)) {
49
+ if (!this.slider.options.centerMode && this.slider.state.next >= this.slider.state.length - this.slider.slidesToShow && !this.slider.options.loop && !this.slider.options.infinite) {
50
+ this.stop();
51
+ } else {
52
+ this.slider.next();
53
+ }
54
+ }
55
+ }, this.slider.options.autoplaySpeed);
56
+ }
57
+ }
58
+
59
+ stop() {
60
+ this._interval = clearInterval(this._interval);
61
+ this.emit('stop', this);
62
+ }
63
+
64
+ pause(speed = 0) {
65
+ if (this.paused) {
66
+ return;
67
+ }
68
+ if (this.timer) {
69
+ this.stop();
70
+ }
71
+ this.paused = true;
72
+ if (speed === 0) {
73
+ this.paused = false;
74
+ this.start();
75
+ } else {
76
+ this.slider.on('transition:end', () => {
77
+ if (!this) {
78
+ return;
79
+ }
80
+ this.paused = false;
81
+ if (!this.run) {
82
+ this.stop();
83
+ } else {
84
+ this.start();
85
+ }
86
+ });
87
+ }
88
+ }
89
+
90
+ onVisibilityChange(e) {
91
+ if (document.hidden) {
92
+ this.stop();
93
+ } else {
94
+ this.start();
95
+ }
96
+ }
97
+
98
+ onMouseEnter(e) {
99
+ this._hovering = true;
100
+ if (this.slider.options.pauseOnHover) {
101
+ this.pause();
102
+ }
103
+ }
104
+
105
+ onMouseLeave(e) {
106
+ this._hovering = false;
107
+ if (this.slider.options.pauseOnHover) {
108
+ this.pause();
109
+ }
110
+ }
111
+ }