mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
Updated EditorConfig Recommendations
Applied 4-spaces for everything as per: https://locomotivemtl.teamwork.com/tasks/7113032
This commit is contained in:
Chauncey McAskill
802
.csscomb.json
802
.csscomb.json
@@ -1,404 +1,404 @@
|
|||||||
{
|
{
|
||||||
"always-semicolon": true,
|
"always-semicolon": true,
|
||||||
"color-case": "lower",
|
"color-case": "lower",
|
||||||
"block-indent": "\t",
|
"block-indent": "\t",
|
||||||
"color-shorthand": false,
|
"color-shorthand": false,
|
||||||
"eof-newline": true,
|
"eof-newline": true,
|
||||||
"leading-zero": true,
|
"leading-zero": true,
|
||||||
"quotes": "double",
|
"quotes": "double",
|
||||||
"space-before-colon": "",
|
"space-before-colon": "",
|
||||||
"space-after-colon": " ",
|
"space-after-colon": " ",
|
||||||
"space-before-combinator": " ",
|
"space-before-combinator": " ",
|
||||||
"space-after-combinator": " ",
|
"space-after-combinator": " ",
|
||||||
"space-between-declarations": "\n",
|
"space-between-declarations": "\n",
|
||||||
"space-before-opening-brace": " ",
|
"space-before-opening-brace": " ",
|
||||||
"space-after-opening-brace": "\n",
|
"space-after-opening-brace": "\n",
|
||||||
"space-before-selector-delimiter": "",
|
"space-before-selector-delimiter": "",
|
||||||
"space-before-closing-brace": "\n",
|
"space-before-closing-brace": "\n",
|
||||||
"strip-spaces": true,
|
"strip-spaces": true,
|
||||||
"unitless-zero": true,
|
"unitless-zero": true,
|
||||||
"vendor-prefix-align": true,
|
"vendor-prefix-align": true,
|
||||||
"sort-order": [
|
"sort-order": [
|
||||||
[
|
[
|
||||||
"$include"
|
"$include"
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
"position",
|
"position",
|
||||||
"top",
|
"top",
|
||||||
"right",
|
"right",
|
||||||
"bottom",
|
"bottom",
|
||||||
"left",
|
"left",
|
||||||
"z-index",
|
"z-index",
|
||||||
"display",
|
"display",
|
||||||
"visibility",
|
"visibility",
|
||||||
"-webkit-flex-direction",
|
"-webkit-flex-direction",
|
||||||
"-moz-flex-direction",
|
"-moz-flex-direction",
|
||||||
"-ms-flex-direction",
|
"-ms-flex-direction",
|
||||||
"-o-flex-direction",
|
"-o-flex-direction",
|
||||||
"flex-direction",
|
"flex-direction",
|
||||||
"-webkit-flex-order",
|
"-webkit-flex-order",
|
||||||
"-moz-flex-order",
|
"-moz-flex-order",
|
||||||
"-ms-flex-order",
|
"-ms-flex-order",
|
||||||
"-o-flex-order",
|
"-o-flex-order",
|
||||||
"flex-order",
|
"flex-order",
|
||||||
"-webkit-flex-pack",
|
"-webkit-flex-pack",
|
||||||
"-moz-flex-pack",
|
"-moz-flex-pack",
|
||||||
"-ms-flex-pack",
|
"-ms-flex-pack",
|
||||||
"-o-flex-pack",
|
"-o-flex-pack",
|
||||||
"flex-pack",
|
"flex-pack",
|
||||||
"float",
|
"float",
|
||||||
"clear",
|
"clear",
|
||||||
"-webkit-flex-align",
|
"-webkit-flex-align",
|
||||||
"-moz-flex-align",
|
"-moz-flex-align",
|
||||||
"-ms-flex-align",
|
"-ms-flex-align",
|
||||||
"-o-flex-align",
|
"-o-flex-align",
|
||||||
"flex-align",
|
"flex-align",
|
||||||
"overflow",
|
"overflow",
|
||||||
"-ms-overflow-x",
|
"-ms-overflow-x",
|
||||||
"-ms-overflow-y",
|
"-ms-overflow-y",
|
||||||
"overflow-x",
|
"overflow-x",
|
||||||
"overflow-y",
|
"overflow-y",
|
||||||
"-webkit-overflow-scrolling",
|
"-webkit-overflow-scrolling",
|
||||||
"clip",
|
"clip",
|
||||||
"-webkit-box-sizing",
|
"-webkit-box-sizing",
|
||||||
"-moz-box-sizing",
|
"-moz-box-sizing",
|
||||||
"box-sizing",
|
"box-sizing",
|
||||||
"margin",
|
"margin",
|
||||||
"margin-top",
|
"margin-top",
|
||||||
"margin-right",
|
"margin-right",
|
||||||
"margin-bottom",
|
"margin-bottom",
|
||||||
"margin-left",
|
"margin-left",
|
||||||
"padding",
|
"padding",
|
||||||
"padding-top",
|
"padding-top",
|
||||||
"padding-right",
|
"padding-right",
|
||||||
"padding-bottom",
|
"padding-bottom",
|
||||||
"padding-left",
|
"padding-left",
|
||||||
"min-width",
|
"min-width",
|
||||||
"min-height",
|
"min-height",
|
||||||
"max-width",
|
"max-width",
|
||||||
"max-height",
|
"max-height",
|
||||||
"width",
|
"width",
|
||||||
"height",
|
"height",
|
||||||
"outline",
|
"outline",
|
||||||
"outline-width",
|
"outline-width",
|
||||||
"outline-style",
|
"outline-style",
|
||||||
"outline-color",
|
"outline-color",
|
||||||
"outline-offset",
|
"outline-offset",
|
||||||
"border",
|
"border",
|
||||||
"border-spacing",
|
"border-spacing",
|
||||||
"border-collapse",
|
"border-collapse",
|
||||||
"border-width",
|
"border-width",
|
||||||
"border-style",
|
"border-style",
|
||||||
"border-color",
|
"border-color",
|
||||||
"border-top",
|
"border-top",
|
||||||
"border-top-width",
|
"border-top-width",
|
||||||
"border-top-style",
|
"border-top-style",
|
||||||
"border-top-color",
|
"border-top-color",
|
||||||
"border-right",
|
"border-right",
|
||||||
"border-right-width",
|
"border-right-width",
|
||||||
"border-right-style",
|
"border-right-style",
|
||||||
"border-right-color",
|
"border-right-color",
|
||||||
"border-bottom",
|
"border-bottom",
|
||||||
"border-bottom-width",
|
"border-bottom-width",
|
||||||
"border-bottom-style",
|
"border-bottom-style",
|
||||||
"border-bottom-color",
|
"border-bottom-color",
|
||||||
"border-left",
|
"border-left",
|
||||||
"border-left-width",
|
"border-left-width",
|
||||||
"border-left-style",
|
"border-left-style",
|
||||||
"border-left-color",
|
"border-left-color",
|
||||||
"-webkit-border-radius",
|
"-webkit-border-radius",
|
||||||
"-moz-border-radius",
|
"-moz-border-radius",
|
||||||
"border-radius",
|
"border-radius",
|
||||||
"-webkit-border-top-left-radius",
|
"-webkit-border-top-left-radius",
|
||||||
"-moz-border-radius-topleft",
|
"-moz-border-radius-topleft",
|
||||||
"border-top-left-radius",
|
"border-top-left-radius",
|
||||||
"-webkit-border-top-right-radius",
|
"-webkit-border-top-right-radius",
|
||||||
"-moz-border-radius-topright",
|
"-moz-border-radius-topright",
|
||||||
"border-top-right-radius",
|
"border-top-right-radius",
|
||||||
"-webkit-border-bottom-right-radius",
|
"-webkit-border-bottom-right-radius",
|
||||||
"-moz-border-radius-bottomright",
|
"-moz-border-radius-bottomright",
|
||||||
"border-bottom-right-radius",
|
"border-bottom-right-radius",
|
||||||
"-webkit-border-bottom-left-radius",
|
"-webkit-border-bottom-left-radius",
|
||||||
"-moz-border-radius-bottomleft",
|
"-moz-border-radius-bottomleft",
|
||||||
"border-bottom-left-radius",
|
"border-bottom-left-radius",
|
||||||
"-webkit-border-image",
|
"-webkit-border-image",
|
||||||
"-moz-border-image",
|
"-moz-border-image",
|
||||||
"-o-border-image",
|
"-o-border-image",
|
||||||
"border-image",
|
"border-image",
|
||||||
"-webkit-border-image-source",
|
"-webkit-border-image-source",
|
||||||
"-moz-border-image-source",
|
"-moz-border-image-source",
|
||||||
"-o-border-image-source",
|
"-o-border-image-source",
|
||||||
"border-image-source",
|
"border-image-source",
|
||||||
"-webkit-border-image-slice",
|
"-webkit-border-image-slice",
|
||||||
"-moz-border-image-slice",
|
"-moz-border-image-slice",
|
||||||
"-o-border-image-slice",
|
"-o-border-image-slice",
|
||||||
"border-image-slice",
|
"border-image-slice",
|
||||||
"-webkit-border-image-width",
|
"-webkit-border-image-width",
|
||||||
"-moz-border-image-width",
|
"-moz-border-image-width",
|
||||||
"-o-border-image-width",
|
"-o-border-image-width",
|
||||||
"border-image-width",
|
"border-image-width",
|
||||||
"-webkit-border-image-outset",
|
"-webkit-border-image-outset",
|
||||||
"-moz-border-image-outset",
|
"-moz-border-image-outset",
|
||||||
"-o-border-image-outset",
|
"-o-border-image-outset",
|
||||||
"border-image-outset",
|
"border-image-outset",
|
||||||
"-webkit-border-image-repeat",
|
"-webkit-border-image-repeat",
|
||||||
"-moz-border-image-repeat",
|
"-moz-border-image-repeat",
|
||||||
"-o-border-image-repeat",
|
"-o-border-image-repeat",
|
||||||
"border-image-repeat",
|
"border-image-repeat",
|
||||||
"-webkit-border-top-image",
|
"-webkit-border-top-image",
|
||||||
"-moz-border-top-image",
|
"-moz-border-top-image",
|
||||||
"-o-border-top-image",
|
"-o-border-top-image",
|
||||||
"border-top-image",
|
"border-top-image",
|
||||||
"-webkit-border-right-image",
|
"-webkit-border-right-image",
|
||||||
"-moz-border-right-image",
|
"-moz-border-right-image",
|
||||||
"-o-border-right-image",
|
"-o-border-right-image",
|
||||||
"border-right-image",
|
"border-right-image",
|
||||||
"-webkit-border-bottom-image",
|
"-webkit-border-bottom-image",
|
||||||
"-moz-border-bottom-image",
|
"-moz-border-bottom-image",
|
||||||
"-o-border-bottom-image",
|
"-o-border-bottom-image",
|
||||||
"border-bottom-image",
|
"border-bottom-image",
|
||||||
"-webkit-border-left-image",
|
"-webkit-border-left-image",
|
||||||
"-moz-border-left-image",
|
"-moz-border-left-image",
|
||||||
"-o-border-left-image",
|
"-o-border-left-image",
|
||||||
"border-left-image",
|
"border-left-image",
|
||||||
"-webkit-border-corner-image",
|
"-webkit-border-corner-image",
|
||||||
"-moz-border-corner-image",
|
"-moz-border-corner-image",
|
||||||
"-o-border-corner-image",
|
"-o-border-corner-image",
|
||||||
"border-corner-image",
|
"border-corner-image",
|
||||||
"-webkit-border-top-left-image",
|
"-webkit-border-top-left-image",
|
||||||
"-moz-border-top-left-image",
|
"-moz-border-top-left-image",
|
||||||
"-o-border-top-left-image",
|
"-o-border-top-left-image",
|
||||||
"border-top-left-image",
|
"border-top-left-image",
|
||||||
"-webkit-border-top-right-image",
|
"-webkit-border-top-right-image",
|
||||||
"-moz-border-top-right-image",
|
"-moz-border-top-right-image",
|
||||||
"-o-border-top-right-image",
|
"-o-border-top-right-image",
|
||||||
"border-top-right-image",
|
"border-top-right-image",
|
||||||
"-webkit-border-bottom-right-image",
|
"-webkit-border-bottom-right-image",
|
||||||
"-moz-border-bottom-right-image",
|
"-moz-border-bottom-right-image",
|
||||||
"-o-border-bottom-right-image",
|
"-o-border-bottom-right-image",
|
||||||
"border-bottom-right-image",
|
"border-bottom-right-image",
|
||||||
"-webkit-border-bottom-left-image",
|
"-webkit-border-bottom-left-image",
|
||||||
"-moz-border-bottom-left-image",
|
"-moz-border-bottom-left-image",
|
||||||
"-o-border-bottom-left-image",
|
"-o-border-bottom-left-image",
|
||||||
"border-bottom-left-image",
|
"border-bottom-left-image",
|
||||||
"background",
|
"background",
|
||||||
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
|
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
|
||||||
"background-color",
|
"background-color",
|
||||||
"background-image",
|
"background-image",
|
||||||
"background-attachment",
|
"background-attachment",
|
||||||
"background-position",
|
"background-position",
|
||||||
"-ms-background-position-x",
|
"-ms-background-position-x",
|
||||||
"-ms-background-position-y",
|
"-ms-background-position-y",
|
||||||
"background-position-x",
|
"background-position-x",
|
||||||
"background-position-y",
|
"background-position-y",
|
||||||
"-webkit-background-clip",
|
"-webkit-background-clip",
|
||||||
"-moz-background-clip",
|
"-moz-background-clip",
|
||||||
"background-clip",
|
"background-clip",
|
||||||
"background-origin",
|
"background-origin",
|
||||||
"-webkit-background-size",
|
"-webkit-background-size",
|
||||||
"-moz-background-size",
|
"-moz-background-size",
|
||||||
"-o-background-size",
|
"-o-background-size",
|
||||||
"background-size",
|
"background-size",
|
||||||
"background-repeat",
|
"background-repeat",
|
||||||
"box-decoration-break",
|
"box-decoration-break",
|
||||||
"-webkit-box-shadow",
|
"-webkit-box-shadow",
|
||||||
"-moz-box-shadow",
|
"-moz-box-shadow",
|
||||||
"box-shadow",
|
"box-shadow",
|
||||||
"color",
|
"color",
|
||||||
"table-layout",
|
"table-layout",
|
||||||
"caption-side",
|
"caption-side",
|
||||||
"empty-cells",
|
"empty-cells",
|
||||||
"list-style",
|
"list-style",
|
||||||
"list-style-position",
|
"list-style-position",
|
||||||
"list-style-type",
|
"list-style-type",
|
||||||
"list-style-image",
|
"list-style-image",
|
||||||
"quotes",
|
"quotes",
|
||||||
"content",
|
"content",
|
||||||
"counter-increment",
|
"counter-increment",
|
||||||
"counter-reset",
|
"counter-reset",
|
||||||
"-ms-writing-mode",
|
"-ms-writing-mode",
|
||||||
"vertical-align",
|
"vertical-align",
|
||||||
"text-align",
|
"text-align",
|
||||||
"-webkit-text-align-last",
|
"-webkit-text-align-last",
|
||||||
"-moz-text-align-last",
|
"-moz-text-align-last",
|
||||||
"-ms-text-align-last",
|
"-ms-text-align-last",
|
||||||
"text-align-last",
|
"text-align-last",
|
||||||
"text-decoration",
|
"text-decoration",
|
||||||
"text-emphasis",
|
"text-emphasis",
|
||||||
"text-emphasis-position",
|
"text-emphasis-position",
|
||||||
"text-emphasis-style",
|
"text-emphasis-style",
|
||||||
"text-emphasis-color",
|
"text-emphasis-color",
|
||||||
"text-indent",
|
"text-indent",
|
||||||
"-ms-text-justify",
|
"-ms-text-justify",
|
||||||
"text-justify",
|
"text-justify",
|
||||||
"text-outline",
|
"text-outline",
|
||||||
"text-transform",
|
"text-transform",
|
||||||
"text-wrap",
|
"text-wrap",
|
||||||
"-ms-text-overflow",
|
"-ms-text-overflow",
|
||||||
"text-overflow",
|
"text-overflow",
|
||||||
"text-overflow-ellipsis",
|
"text-overflow-ellipsis",
|
||||||
"text-overflow-mode",
|
"text-overflow-mode",
|
||||||
"text-shadow",
|
"text-shadow",
|
||||||
"white-space",
|
"white-space",
|
||||||
"word-spacing",
|
"word-spacing",
|
||||||
"-ms-word-wrap",
|
"-ms-word-wrap",
|
||||||
"word-wrap",
|
"word-wrap",
|
||||||
"-ms-word-break",
|
"-ms-word-break",
|
||||||
"word-break",
|
"word-break",
|
||||||
"-moz-tab-size",
|
"-moz-tab-size",
|
||||||
"-o-tab-size",
|
"-o-tab-size",
|
||||||
"tab-size",
|
"tab-size",
|
||||||
"-webkit-hyphens",
|
"-webkit-hyphens",
|
||||||
"-moz-hyphens",
|
"-moz-hyphens",
|
||||||
"hyphens",
|
"hyphens",
|
||||||
"letter-spacing",
|
"letter-spacing",
|
||||||
"font",
|
"font",
|
||||||
"font-weight",
|
"font-weight",
|
||||||
"font-style",
|
"font-style",
|
||||||
"font-variant",
|
"font-variant",
|
||||||
"font-size-adjust",
|
"font-size-adjust",
|
||||||
"font-stretch",
|
"font-stretch",
|
||||||
"font-size",
|
"font-size",
|
||||||
"font-family",
|
"font-family",
|
||||||
"src",
|
"src",
|
||||||
"line-height",
|
"line-height",
|
||||||
"opacity",
|
"opacity",
|
||||||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
|
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
|
||||||
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
|
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
|
||||||
"-ms-interpolation-mode",
|
"-ms-interpolation-mode",
|
||||||
"-webkit-filter",
|
"-webkit-filter",
|
||||||
"-ms-filter",
|
"-ms-filter",
|
||||||
"filter",
|
"filter",
|
||||||
"resize",
|
"resize",
|
||||||
"cursor",
|
"cursor",
|
||||||
"nav-index",
|
"nav-index",
|
||||||
"nav-up",
|
"nav-up",
|
||||||
"nav-right",
|
"nav-right",
|
||||||
"nav-down",
|
"nav-down",
|
||||||
"nav-left",
|
"nav-left",
|
||||||
"-webkit-transition",
|
"-webkit-transition",
|
||||||
"-moz-transition",
|
"-moz-transition",
|
||||||
"-ms-transition",
|
"-ms-transition",
|
||||||
"-o-transition",
|
"-o-transition",
|
||||||
"transition",
|
"transition",
|
||||||
"-webkit-transition-delay",
|
"-webkit-transition-delay",
|
||||||
"-moz-transition-delay",
|
"-moz-transition-delay",
|
||||||
"-ms-transition-delay",
|
"-ms-transition-delay",
|
||||||
"-o-transition-delay",
|
"-o-transition-delay",
|
||||||
"transition-delay",
|
"transition-delay",
|
||||||
"-webkit-transition-timing-function",
|
"-webkit-transition-timing-function",
|
||||||
"-moz-transition-timing-function",
|
"-moz-transition-timing-function",
|
||||||
"-ms-transition-timing-function",
|
"-ms-transition-timing-function",
|
||||||
"-o-transition-timing-function",
|
"-o-transition-timing-function",
|
||||||
"transition-timing-function",
|
"transition-timing-function",
|
||||||
"-webkit-transition-duration",
|
"-webkit-transition-duration",
|
||||||
"-moz-transition-duration",
|
"-moz-transition-duration",
|
||||||
"-ms-transition-duration",
|
"-ms-transition-duration",
|
||||||
"-o-transition-duration",
|
"-o-transition-duration",
|
||||||
"transition-duration",
|
"transition-duration",
|
||||||
"-webkit-transition-property",
|
"-webkit-transition-property",
|
||||||
"-moz-transition-property",
|
"-moz-transition-property",
|
||||||
"-ms-transition-property",
|
"-ms-transition-property",
|
||||||
"-o-transition-property",
|
"-o-transition-property",
|
||||||
"transition-property",
|
"transition-property",
|
||||||
"-webkit-transform",
|
"-webkit-transform",
|
||||||
"-moz-transform",
|
"-moz-transform",
|
||||||
"-ms-transform",
|
"-ms-transform",
|
||||||
"-o-transform",
|
"-o-transform",
|
||||||
"transform",
|
"transform",
|
||||||
"-webkit-transform-origin",
|
"-webkit-transform-origin",
|
||||||
"-moz-transform-origin",
|
"-moz-transform-origin",
|
||||||
"-ms-transform-origin",
|
"-ms-transform-origin",
|
||||||
"-o-transform-origin",
|
"-o-transform-origin",
|
||||||
"transform-origin",
|
"transform-origin",
|
||||||
"-webkit-animation",
|
"-webkit-animation",
|
||||||
"-moz-animation",
|
"-moz-animation",
|
||||||
"-ms-animation",
|
"-ms-animation",
|
||||||
"-o-animation",
|
"-o-animation",
|
||||||
"animation",
|
"animation",
|
||||||
"-webkit-animation-name",
|
"-webkit-animation-name",
|
||||||
"-moz-animation-name",
|
"-moz-animation-name",
|
||||||
"-ms-animation-name",
|
"-ms-animation-name",
|
||||||
"-o-animation-name",
|
"-o-animation-name",
|
||||||
"animation-name",
|
"animation-name",
|
||||||
"-webkit-animation-duration",
|
"-webkit-animation-duration",
|
||||||
"-moz-animation-duration",
|
"-moz-animation-duration",
|
||||||
"-ms-animation-duration",
|
"-ms-animation-duration",
|
||||||
"-o-animation-duration",
|
"-o-animation-duration",
|
||||||
"animation-duration",
|
"animation-duration",
|
||||||
"-webkit-animation-play-state",
|
"-webkit-animation-play-state",
|
||||||
"-moz-animation-play-state",
|
"-moz-animation-play-state",
|
||||||
"-ms-animation-play-state",
|
"-ms-animation-play-state",
|
||||||
"-o-animation-play-state",
|
"-o-animation-play-state",
|
||||||
"animation-play-state",
|
"animation-play-state",
|
||||||
"-webkit-animation-timing-function",
|
"-webkit-animation-timing-function",
|
||||||
"-moz-animation-timing-function",
|
"-moz-animation-timing-function",
|
||||||
"-ms-animation-timing-function",
|
"-ms-animation-timing-function",
|
||||||
"-o-animation-timing-function",
|
"-o-animation-timing-function",
|
||||||
"animation-timing-function",
|
"animation-timing-function",
|
||||||
"-webkit-animation-delay",
|
"-webkit-animation-delay",
|
||||||
"-moz-animation-delay",
|
"-moz-animation-delay",
|
||||||
"-ms-animation-delay",
|
"-ms-animation-delay",
|
||||||
"-o-animation-delay",
|
"-o-animation-delay",
|
||||||
"animation-delay",
|
"animation-delay",
|
||||||
"-webkit-animation-iteration-count",
|
"-webkit-animation-iteration-count",
|
||||||
"-moz-animation-iteration-count",
|
"-moz-animation-iteration-count",
|
||||||
"-ms-animation-iteration-count",
|
"-ms-animation-iteration-count",
|
||||||
"-o-animation-iteration-count",
|
"-o-animation-iteration-count",
|
||||||
"animation-iteration-count",
|
"animation-iteration-count",
|
||||||
"-webkit-animation-direction",
|
"-webkit-animation-direction",
|
||||||
"-moz-animation-direction",
|
"-moz-animation-direction",
|
||||||
"-ms-animation-direction",
|
"-ms-animation-direction",
|
||||||
"-o-animation-direction",
|
"-o-animation-direction",
|
||||||
"animation-direction",
|
"animation-direction",
|
||||||
"pointer-events",
|
"pointer-events",
|
||||||
"unicode-bidi",
|
"unicode-bidi",
|
||||||
"direction",
|
"direction",
|
||||||
"-webkit-columns",
|
"-webkit-columns",
|
||||||
"-moz-columns",
|
"-moz-columns",
|
||||||
"columns",
|
"columns",
|
||||||
"-webkit-column-span",
|
"-webkit-column-span",
|
||||||
"-moz-column-span",
|
"-moz-column-span",
|
||||||
"column-span",
|
"column-span",
|
||||||
"-webkit-column-width",
|
"-webkit-column-width",
|
||||||
"-moz-column-width",
|
"-moz-column-width",
|
||||||
"column-width",
|
"column-width",
|
||||||
"-webkit-column-count",
|
"-webkit-column-count",
|
||||||
"-moz-column-count",
|
"-moz-column-count",
|
||||||
"column-count",
|
"column-count",
|
||||||
"-webkit-column-fill",
|
"-webkit-column-fill",
|
||||||
"-moz-column-fill",
|
"-moz-column-fill",
|
||||||
"column-fill",
|
"column-fill",
|
||||||
"-webkit-column-gap",
|
"-webkit-column-gap",
|
||||||
"-moz-column-gap",
|
"-moz-column-gap",
|
||||||
"column-gap",
|
"column-gap",
|
||||||
"-webkit-column-rule",
|
"-webkit-column-rule",
|
||||||
"-moz-column-rule",
|
"-moz-column-rule",
|
||||||
"column-rule",
|
"column-rule",
|
||||||
"-webkit-column-rule-width",
|
"-webkit-column-rule-width",
|
||||||
"-moz-column-rule-width",
|
"-moz-column-rule-width",
|
||||||
"column-rule-width",
|
"column-rule-width",
|
||||||
"-webkit-column-rule-style",
|
"-webkit-column-rule-style",
|
||||||
"-moz-column-rule-style",
|
"-moz-column-rule-style",
|
||||||
"column-rule-style",
|
"column-rule-style",
|
||||||
"-webkit-column-rule-color",
|
"-webkit-column-rule-color",
|
||||||
"-moz-column-rule-color",
|
"-moz-column-rule-color",
|
||||||
"column-rule-color",
|
"column-rule-color",
|
||||||
"break-before",
|
"break-before",
|
||||||
"break-inside",
|
"break-inside",
|
||||||
"break-after",
|
"break-after",
|
||||||
"page-break-before",
|
"page-break-before",
|
||||||
"page-break-inside",
|
"page-break-inside",
|
||||||
"page-break-after",
|
"page-break-after",
|
||||||
"orphans",
|
"orphans",
|
||||||
"widows",
|
"widows",
|
||||||
"-ms-zoom",
|
"-ms-zoom",
|
||||||
"zoom",
|
"zoom",
|
||||||
"max-zoom",
|
"max-zoom",
|
||||||
"min-zoom",
|
"min-zoom",
|
||||||
"user-zoom",
|
"user-zoom",
|
||||||
"orientation",
|
"orientation",
|
||||||
"..."
|
"..."
|
||||||
|
]
|
||||||
]
|
]
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,12 +4,11 @@ root = true
|
|||||||
|
|
||||||
[*]
|
[*]
|
||||||
charset = utf-8
|
charset = utf-8
|
||||||
indent_style = tab
|
|
||||||
indent_size = 4
|
|
||||||
end_of_line = lf
|
end_of_line = lf
|
||||||
trim_trailing_whitespace = true
|
indent_size = 4
|
||||||
insert_final_newline = true
|
|
||||||
|
|
||||||
[{*.md,.*rc,.*.json,*.yml,.editorconfig,.env,.env.*,.git*,.htaccess,.jshintignore,bower.json,composer.json,package.json}]
|
|
||||||
indent_style = space
|
indent_style = space
|
||||||
indent_size = 2
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.{md,markdown}]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|||||||
88
.eslintrc
88
.eslintrc
@@ -1,46 +1,46 @@
|
|||||||
{
|
{
|
||||||
"env": {
|
"env": {
|
||||||
"browser": true,
|
"browser": true,
|
||||||
"node": true,
|
"node": true,
|
||||||
"es6": true
|
"es6": true
|
||||||
},
|
},
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"ecmaVersion": 6,
|
"ecmaVersion": 6,
|
||||||
"sourceType": "module"
|
"sourceType": "module"
|
||||||
},
|
},
|
||||||
"ecmaFeatures": {
|
"ecmaFeatures": {
|
||||||
"arrowFunctions": true,
|
"arrowFunctions": true,
|
||||||
"binaryLiterals": true,
|
"binaryLiterals": true,
|
||||||
"blockBindings": true,
|
"blockBindings": true,
|
||||||
"classes": true,
|
"classes": true,
|
||||||
"defaultParams": true,
|
"defaultParams": true,
|
||||||
"destructuring": true,
|
"destructuring": true,
|
||||||
"forOf": true,
|
"forOf": true,
|
||||||
"generators": true,
|
"generators": true,
|
||||||
"modules": true,
|
"modules": true,
|
||||||
"objectLiteralComputedProperties": true,
|
"objectLiteralComputedProperties": true,
|
||||||
"objectLiteralDuplicateProperties": true,
|
"objectLiteralDuplicateProperties": true,
|
||||||
"objectLiteralShorthandMethods": true,
|
"objectLiteralShorthandMethods": true,
|
||||||
"objectLiteralShorthandProperties": true,
|
"objectLiteralShorthandProperties": true,
|
||||||
"octalLiterals": true,
|
"octalLiterals": true,
|
||||||
"regexUFlag": true,
|
"regexUFlag": true,
|
||||||
"regexYFlag": true,
|
"regexYFlag": true,
|
||||||
"spread": true,
|
"spread": true,
|
||||||
"superInFunctions": false,
|
"superInFunctions": false,
|
||||||
"templateStrings": true,
|
"templateStrings": true,
|
||||||
"unicodeCodePointEscapes": true,
|
"unicodeCodePointEscapes": true,
|
||||||
"globalReturn": true,
|
"globalReturn": true,
|
||||||
"jsx": true
|
"jsx": true
|
||||||
},
|
},
|
||||||
"rules": {
|
"rules": {
|
||||||
"eqeqeq": 2,
|
"eqeqeq": 2,
|
||||||
"strict": 0,
|
"strict": 0,
|
||||||
"no-empty": 1,
|
"no-empty": 1,
|
||||||
"no-alert": 2,
|
"no-alert": 2,
|
||||||
"no-eval": 2,
|
"no-eval": 2,
|
||||||
"quotes": [1, "single", "avoid-escape"],
|
"quotes": [1, "single", "avoid-escape"],
|
||||||
"no-trailing-spaces": [2, { "skipBlankLines": true }],
|
"no-trailing-spaces": [2, { "skipBlankLines": true }],
|
||||||
"eol-last": 0,
|
"eol-last": 0,
|
||||||
"yoda": [2, "never", { "exceptRange": true }]
|
"yoda": [2, "never", { "exceptRange": true }]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -14,7 +14,6 @@ vendor/
|
|||||||
node_modules/
|
node_modules/
|
||||||
bower_components/
|
bower_components/
|
||||||
|
|
||||||
|
|
||||||
# Macintosh
|
# Macintosh
|
||||||
# -----------------
|
# -----------------
|
||||||
|
|
||||||
|
|||||||
44
Gruntfile.js
44
Gruntfile.js
@@ -9,27 +9,27 @@
|
|||||||
|
|
||||||
module.exports = function (grunt)
|
module.exports = function (grunt)
|
||||||
{
|
{
|
||||||
var path = require('path');
|
var path = require('path');
|
||||||
|
|
||||||
require('load-grunt-config')(grunt, {
|
require('load-grunt-config')(grunt, {
|
||||||
configPath: path.join(process.cwd(), 'build/grunt/config'),
|
configPath: path.join(process.cwd(), 'build/grunt/config'),
|
||||||
data: {
|
data: {
|
||||||
paths: {
|
paths: {
|
||||||
grunt: 'build/grunt',
|
grunt: 'build/grunt',
|
||||||
npm: 'node_modules',
|
npm: 'node_modules',
|
||||||
js: {
|
js: {
|
||||||
src: 'assets/scripts',
|
src: 'assets/scripts',
|
||||||
dist: 'www/assets/scripts'
|
dist: 'www/assets/scripts'
|
||||||
},
|
},
|
||||||
css: {
|
css: {
|
||||||
src: 'assets/styles',
|
src: 'assets/styles',
|
||||||
dist: 'www/assets/styles'
|
dist: 'www/assets/styles'
|
||||||
},
|
},
|
||||||
img: {
|
img: {
|
||||||
src: 'assets/images',
|
src: 'assets/images',
|
||||||
dist: 'www/assets/images'
|
dist: 'www/assets/images'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
2
LICENSE
2
LICENSE
@@ -1,6 +1,6 @@
|
|||||||
The MIT License (MIT)
|
The MIT License (MIT)
|
||||||
|
|
||||||
Copyright (c) Locomotive
|
Copyright (c) Locomotive, Inc.
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
this software and associated documentation files (the "Software"), to deal in
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
|||||||
72
README.md
72
README.md
@@ -1,50 +1,51 @@
|
|||||||
Locomotive front-end boilerplate
|
Locomotive's Front-end Boilerplate
|
||||||
====================
|
==================================
|
||||||
|
|
||||||
Front-end Boilerplate for projects by Locomotive.
|
Front-end boilerplate for projects by [Locomotive][locomtl].
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
| Prerequisite | How to check | How to install |
|
| Prerequisite | How to check | How to install |
|
||||||
| --------------- | ------------- | -------------- |
|
| --------------- | ------------- | -------------------------------- |
|
||||||
| Node.js 4.1.1 | `node -v` | [nodejs.org](//nodejs.org/) |
|
| Node.js 4.1.1 | `node -v` | [nodejs.org](https://nodejs.org) |
|
||||||
| Grunt >= 0.1.13 | `grunt -v` | `npm install -g grunt-cli` |
|
| Grunt >= 0.1.13 | `grunt -v` | `npm install -g grunt-cli` |
|
||||||
|
|
||||||
|
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
||||||
1. **Get the latest node modules**
|
1. **Get the latest node modules**
|
||||||
1. `npm install -g npm-check-updates`
|
1. `npm install -g npm-check-updates`
|
||||||
2. `npm-check-updates -u`
|
2. `npm-check-updates -u`
|
||||||
3. `npm install`
|
3. `npm install`
|
||||||
|
|
||||||
2. **Run grunt and start coding**
|
2. **Run grunt and start coding**
|
||||||
- `grunt`
|
- `grunt`
|
||||||
|
|
||||||
### Grunt
|
### Grunt
|
||||||
|
|
||||||
Each Grunt task has it's own file in the `grunt_tasks` folder.
|
Each Grunt task has it's own file in the `grunt_tasks` folder.
|
||||||
|
|
||||||
### BrowserSync
|
### BrowserSync
|
||||||
|
|
||||||
BrowserSync will automatically inject, refresh and sync all your browsers.
|
BrowserSync will automatically inject, refresh and sync all your browsers.
|
||||||
|
|
||||||
Run `grunt sync`
|
Run `grunt sync`
|
||||||
|
|
||||||
## CSS
|
## CSS
|
||||||
|
|
||||||
- We use [Sass](http://sass-lang.com/) for our CSS Preprocessor
|
- We use [Sass](http://sass-lang.com) for our CSS Preprocessor
|
||||||
- [itcss](http://itcss.io/) CSS architecture
|
- [itcss](http://itcss.io) CSS architecture
|
||||||
- More Minimal BEM like CSS Syntax: `.block_element -modifier`
|
- More Minimal BEM like CSS Syntax: `.block_element -modifier`
|
||||||
- [More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)
|
- [More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces)
|
||||||
|
|
||||||
### Sass import order
|
### Sass import order
|
||||||
|
|
||||||
* **Settings:** Global variables, site-wide settings, config switches, etc.
|
* **Settings:** Global variables, site-wide settings, config switches, etc.
|
||||||
* **Tools:** Site-wide mixins and functions.
|
* **Tools:** Site-wide mixins and functions.
|
||||||
* **Generic:** Low-specificity, far-reaching rulesets (e.g. resets).
|
* **Generic:** Low-specificity, far-reaching rulesets (e.g. resets).
|
||||||
* **Base:** Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).
|
* **Base:** Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).
|
||||||
* **Objects:** Objects, abstractions, and design patterns (e.g. `.o-media {}`).
|
* **Objects:** Objects, abstractions, and design patterns (e.g. `.o-media {}`).
|
||||||
* **Components:** Discrete, complete chunks of UI (e.g. `.c-carousel {}`).
|
* **Components:** Discrete, complete chunks of UI (e.g. `.c-carousel {}`).
|
||||||
* **Trumps:** High-specificity, very explicit selectors. Overrides and helper
|
* **Trumps:** High-specificity, very explicit selectors. Overrides and helper
|
||||||
classes (e.g. `.u-hidden {}`).
|
classes (e.g. `.u-hidden {}`).
|
||||||
|
|
||||||
### Grid
|
### Grid
|
||||||
@@ -56,19 +57,24 @@ We are using a simple inline-block grid system.
|
|||||||
Insert a `o-grid` block and add `o-grid_item` elements inside it.
|
Insert a `o-grid` block and add `o-grid_item` elements inside it.
|
||||||
No rows that contain floats, no twelve columns system; just the number of items you want, with the classes names you want, inside a single block.
|
No rows that contain floats, no twelve columns system; just the number of items you want, with the classes names you want, inside a single block.
|
||||||
|
|
||||||
- Include the grid mixins in your components classes.
|
- Include the grid mixins in your components classes.
|
||||||
- Create custom width grid items by including the `grid_item` mixin and adding the widths you need or just include the helpers mixins with fractions like names.
|
- Create custom width grid items by including the `grid_item` mixin and adding the widths you need or just include the helpers mixins with fractions like names.
|
||||||
- Add media queries, on the helpers mixins or on your custom components to change the grid items widths, for your content, on different screen sizes.
|
- Add media queries, on the helpers mixins or on your custom components to change the grid items widths, for your content, on different screen sizes.
|
||||||
|
|
||||||
*[Demo](http://codepen.io/AntoineBoulanger/pen/EaLNxe)*
|
*[Demo][demo-grid]*
|
||||||
|
|
||||||
### Form
|
### Form
|
||||||
|
|
||||||
We included some basic CSS styles and resets to the form elements so we can easily have custom style form elements that work on every browsers.
|
We included some basic CSS styles and resets to the form elements so we can easily have custom style form elements that work on every browsers.
|
||||||
|
|
||||||
*[Demo](http://codepen.io/AntoineBoulanger/pen/uBJmi)*
|
*[Demo][demo-form]*
|
||||||
|
|
||||||
## JavaScript
|
## JavaScript
|
||||||
- We use HTML data attributes to init our JavaScript modules: `data-module`
|
|
||||||
- All DOM related JavaScript is hooked to `js-` prefixed HTML classes
|
- We use HTML data attributes to init our JavaScript modules: `data-module`
|
||||||
- [jQuery](https://jquery.com/) is globally included
|
- All DOM related JavaScript is hooked to `js-` prefixed HTML classes
|
||||||
|
- [jQuery](https://jquery.com) is globally included
|
||||||
|
|
||||||
|
[locomtl]: https://locomotive.ca
|
||||||
|
[demo-grid]: https://codepen.io/AntoineBoulanger/pen/EaLNxe
|
||||||
|
[demo-form]: https://codepen.io/AntoineBoulanger/pen/uBJmi
|
||||||
|
|||||||
@@ -9,50 +9,50 @@ import globals from './utils/globals';
|
|||||||
import * as modules from './modules';
|
import * as modules from './modules';
|
||||||
|
|
||||||
class App {
|
class App {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.modules = modules;
|
this.modules = modules;
|
||||||
this.currentModules = [];
|
this.currentModules = [];
|
||||||
|
|
||||||
$document.on('initModules.App', (event) => {
|
$document.on('initModules.App', (event) => {
|
||||||
this.initGlobals(event.firstBlood)
|
this.initGlobals(event.firstBlood)
|
||||||
.deleteModules()
|
.deleteModules()
|
||||||
.initModules();
|
.initModules();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Destroy all existing modules
|
* Destroy all existing modules
|
||||||
* @return {Object} this Allows chaining
|
* @return {Object} this Allows chaining
|
||||||
*/
|
*/
|
||||||
deleteModules() {
|
deleteModules() {
|
||||||
// Loop modules
|
// Loop modules
|
||||||
var i = this.currentModules.length;
|
var i = this.currentModules.length;
|
||||||
|
|
||||||
// Destroy all modules
|
// Destroy all modules
|
||||||
while (i--) {
|
while (i--) {
|
||||||
this.currentModules[i].destroy();
|
this.currentModules[i].destroy();
|
||||||
this.currentModules.splice(i);
|
this.currentModules.splice(i);
|
||||||
}
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Execute global functions and settings
|
* Execute global functions and settings
|
||||||
* Allows you to initialize global modules only once if you need
|
* Allows you to initialize global modules only once if you need
|
||||||
* (ex.: when using Barba.js or SmoothState.js)
|
* (ex.: when using Barba.js or SmoothState.js)
|
||||||
* @return {Object} this Allows chaining
|
* @return {Object} this Allows chaining
|
||||||
*/
|
*/
|
||||||
initGlobals(firstBlood) {
|
initGlobals(firstBlood) {
|
||||||
globals(firstBlood);
|
globals(firstBlood);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Find modules and initialize them
|
* Find modules and initialize them
|
||||||
* @return {Object} this Allows chaining
|
* @return {Object} this Allows chaining
|
||||||
*/
|
*/
|
||||||
initModules() {
|
initModules() {
|
||||||
// Elements with module
|
// Elements with module
|
||||||
var moduleEls = document.querySelectorAll('[data-module]');
|
var moduleEls = document.querySelectorAll('[data-module]');
|
||||||
|
|
||||||
|
|||||||
@@ -6,12 +6,12 @@ import { $document, $window, $html, $body } from '../utils/environment';
|
|||||||
* Gives access to generic jQuery nodes
|
* Gives access to generic jQuery nodes
|
||||||
*/
|
*/
|
||||||
export default class {
|
export default class {
|
||||||
constructor(options) {
|
constructor(options) {
|
||||||
this.$document = $document;
|
this.$document = $document;
|
||||||
this.$window = $window;
|
this.$window = $window;
|
||||||
this.$html = $html;
|
this.$html = $html;
|
||||||
this.$body = $body;
|
this.$body = $body;
|
||||||
this.$el = options.$el;
|
this.$el = options.$el;
|
||||||
this.el = options.el;
|
this.el = options.el;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,15 +2,15 @@
|
|||||||
import AbstractModule from './AbstractModule';
|
import AbstractModule from './AbstractModule';
|
||||||
|
|
||||||
export default class extends AbstractModule {
|
export default class extends AbstractModule {
|
||||||
constructor(options) {
|
constructor(options) {
|
||||||
super(options);
|
super(options);
|
||||||
|
|
||||||
this.$el.on('click.Button', (event) => {
|
this.$el.on('click.Button', (event) => {
|
||||||
this.$document.trigger('Title.changeLabel', [$(event.currentTarget).val()]);
|
this.$document.trigger('Title.changeLabel', [$(event.currentTarget).val()]);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
destroy() {
|
destroy() {
|
||||||
this.$el.off('.Button');
|
this.$el.off('.Button');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,56 +3,56 @@ import { visibilityApi } from '../utils/visibility';
|
|||||||
import AbstractModule from './AbstractModule';
|
import AbstractModule from './AbstractModule';
|
||||||
|
|
||||||
export default class extends AbstractModule {
|
export default class extends AbstractModule {
|
||||||
constructor(options) {
|
constructor(options) {
|
||||||
super(options);
|
super(options);
|
||||||
|
|
||||||
this.$label = this.$el.find('.js-label');
|
this.$label = this.$el.find('.js-label');
|
||||||
|
|
||||||
this.$document.on('Title.changeLabel', (event, value) => {
|
this.$document.on('Title.changeLabel', (event, value) => {
|
||||||
this.changeLabel(value);
|
this.changeLabel(value);
|
||||||
this.destroy();
|
this.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
this.hiddenCallbackIdent = visibilityApi({
|
this.hiddenCallbackIdent = visibilityApi({
|
||||||
action: 'addCallback',
|
action: 'addCallback',
|
||||||
state: 'hidden',
|
state: 'hidden',
|
||||||
callback: this.logHidden
|
callback: this.logHidden
|
||||||
});
|
});
|
||||||
|
|
||||||
this.visibleCallbackIdent = visibilityApi({
|
this.visibleCallbackIdent = visibilityApi({
|
||||||
action: 'addCallback',
|
action: 'addCallback',
|
||||||
state: 'visible',
|
state: 'visible',
|
||||||
callback: this.logVisible
|
callback: this.logVisible
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
logHidden() {
|
logHidden() {
|
||||||
console.log('Title is hidden');
|
console.log('Title is hidden');
|
||||||
}
|
}
|
||||||
|
|
||||||
logVisible() {
|
logVisible() {
|
||||||
console.log('Title is visible');
|
console.log('Title is visible');
|
||||||
}
|
}
|
||||||
|
|
||||||
changeLabel(value) {
|
changeLabel(value) {
|
||||||
this.$label.text(value);
|
this.$label.text(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
destroy() {
|
destroy() {
|
||||||
this.$document.off('Title.changeLabel');
|
this.$document.off('Title.changeLabel');
|
||||||
|
|
||||||
visibilityApi({
|
visibilityApi({
|
||||||
action: 'removeCallback',
|
action: 'removeCallback',
|
||||||
state: 'hidden',
|
state: 'hidden',
|
||||||
ident: this.hiddenCallbackIdent
|
ident: this.hiddenCallbackIdent
|
||||||
});
|
});
|
||||||
|
|
||||||
visibilityApi({
|
visibilityApi({
|
||||||
action: 'removeCallback',
|
action: 'removeCallback',
|
||||||
state: 'visible',
|
state: 'visible',
|
||||||
ident: this.visibleCallbackIdent
|
ident: this.visibleCallbackIdent
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$el.off('.Title');
|
this.$el.off('.Title');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,83 +1,83 @@
|
|||||||
import { isArray } from './is';
|
import { isArray } from './is';
|
||||||
|
|
||||||
export function addToArray ( array, value ) {
|
export function addToArray ( array, value ) {
|
||||||
var index = array.indexOf( value );
|
var index = array.indexOf( value );
|
||||||
|
|
||||||
if ( index === -1 ) {
|
if ( index === -1 ) {
|
||||||
array.push( value );
|
array.push( value );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function arrayContains ( array, value ) {
|
export function arrayContains ( array, value ) {
|
||||||
for ( let i = 0, c = array.length; i < c; i++ ) {
|
for ( let i = 0, c = array.length; i < c; i++ ) {
|
||||||
if ( array[i] == value ) {
|
if ( array[i] == value ) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function arrayContentsMatch ( a, b ) {
|
export function arrayContentsMatch ( a, b ) {
|
||||||
var i;
|
var i;
|
||||||
|
|
||||||
if ( !isArray( a ) || !isArray( b ) ) {
|
if ( !isArray( a ) || !isArray( b ) ) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( a.length !== b.length ) {
|
if ( a.length !== b.length ) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
i = a.length;
|
i = a.length;
|
||||||
while ( i-- ) {
|
while ( i-- ) {
|
||||||
if ( a[i] !== b[i] ) {
|
if ( a[i] !== b[i] ) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ensureArray ( x ) {
|
export function ensureArray ( x ) {
|
||||||
if ( typeof x === 'string' ) {
|
if ( typeof x === 'string' ) {
|
||||||
return [ x ];
|
return [ x ];
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( x === undefined ) {
|
if ( x === undefined ) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
return x;
|
return x;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function lastItem ( array ) {
|
export function lastItem ( array ) {
|
||||||
return array[ array.length - 1 ];
|
return array[ array.length - 1 ];
|
||||||
}
|
}
|
||||||
|
|
||||||
export function removeFromArray ( array, member ) {
|
export function removeFromArray ( array, member ) {
|
||||||
if ( !array ) {
|
if ( !array ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const index = array.indexOf( member );
|
const index = array.indexOf( member );
|
||||||
|
|
||||||
if ( index !== -1 ) {
|
if ( index !== -1 ) {
|
||||||
array.splice( index, 1 );
|
array.splice( index, 1 );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function toArray ( arrayLike ) {
|
export function toArray ( arrayLike ) {
|
||||||
var array = [], i = arrayLike.length;
|
var array = [], i = arrayLike.length;
|
||||||
while ( i-- ) {
|
while ( i-- ) {
|
||||||
array[i] = arrayLike[i];
|
array[i] = arrayLike[i];
|
||||||
}
|
}
|
||||||
|
|
||||||
return array;
|
return array;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function findByKeyValue( array, key, value ) {
|
export function findByKeyValue( array, key, value ) {
|
||||||
return array.filter(function( obj ) {
|
return array.filter(function( obj ) {
|
||||||
return obj[key] === value;
|
return obj[key] === value;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
/* jshint esnext: true */
|
/* jshint esnext: true */
|
||||||
|
|
||||||
export default function() {
|
export default function() {
|
||||||
svg4everybody();
|
svg4everybody();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,37 +1,37 @@
|
|||||||
var toString = Object.prototype.toString,
|
var toString = Object.prototype.toString,
|
||||||
arrayLikePattern = /^\[object (?:Array|FileList)\]$/;
|
arrayLikePattern = /^\[object (?:Array|FileList)\]$/;
|
||||||
|
|
||||||
// thanks, http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/
|
// thanks, http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/
|
||||||
export function isArray ( thing ) {
|
export function isArray ( thing ) {
|
||||||
return toString.call( thing ) === '[object Array]';
|
return toString.call( thing ) === '[object Array]';
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isArrayLike ( obj ) {
|
export function isArrayLike ( obj ) {
|
||||||
return arrayLikePattern.test( toString.call( obj ) );
|
return arrayLikePattern.test( toString.call( obj ) );
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isEqual ( a, b ) {
|
export function isEqual ( a, b ) {
|
||||||
if ( a === null && b === null ) {
|
if ( a === null && b === null ) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( typeof a === 'object' || typeof b === 'object' ) {
|
if ( typeof a === 'object' || typeof b === 'object' ) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return a === b;
|
return a === b;
|
||||||
}
|
}
|
||||||
|
|
||||||
// http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
|
// http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
|
||||||
export function isNumeric ( thing ) {
|
export function isNumeric ( thing ) {
|
||||||
return !isNaN( parseFloat( thing ) ) && isFinite( thing );
|
return !isNaN( parseFloat( thing ) ) && isFinite( thing );
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isObject ( thing ) {
|
export function isObject ( thing ) {
|
||||||
return ( thing && toString.call( thing ) === '[object Object]' );
|
return ( thing && toString.call( thing ) === '[object Object]' );
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isFunction( thing ) {
|
export function isFunction( thing ) {
|
||||||
var getType = {};
|
var getType = {};
|
||||||
return thing && getType.toString.call(thing) === '[object Function]';
|
return thing && getType.toString.call(thing) === '[object Function]';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,18 +4,18 @@ import { arrayContains, findByKeyValue, removeFromArray } from './array';
|
|||||||
import { $document, $window, $html, $body } from './environment';
|
import { $document, $window, $html, $body } from './environment';
|
||||||
|
|
||||||
const CALLBACKS = {
|
const CALLBACKS = {
|
||||||
hidden: [],
|
hidden: [],
|
||||||
visible: []
|
visible: []
|
||||||
};
|
};
|
||||||
|
|
||||||
const ACTIONS = [
|
const ACTIONS = [
|
||||||
'addCallback',
|
'addCallback',
|
||||||
'removeCallback'
|
'removeCallback'
|
||||||
];
|
];
|
||||||
|
|
||||||
const STATES = [
|
const STATES = [
|
||||||
'visible',
|
'visible',
|
||||||
'hidden'
|
'hidden'
|
||||||
];
|
];
|
||||||
|
|
||||||
const PREFIX = 'v-';
|
const PREFIX = 'v-';
|
||||||
@@ -24,11 +24,11 @@ let UUID = 0;
|
|||||||
|
|
||||||
// Main event
|
// Main event
|
||||||
$document.on('visibilitychange', function(event) {
|
$document.on('visibilitychange', function(event) {
|
||||||
if (document.hidden) {
|
if (document.hidden) {
|
||||||
onDocumentChange('hidden');
|
onDocumentChange('hidden');
|
||||||
} else {
|
} else {
|
||||||
onDocumentChange('visible');
|
onDocumentChange('visible');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -38,21 +38,21 @@ $document.on('visibilitychange', function(event) {
|
|||||||
* @return {string} ident
|
* @return {string} ident
|
||||||
*/
|
*/
|
||||||
function addCallback (state, options) {
|
function addCallback (state, options) {
|
||||||
let callback = options.callback || '';
|
let callback = options.callback || '';
|
||||||
|
|
||||||
if (!isFunction(callback)) {
|
if (!isFunction(callback)) {
|
||||||
console.warn('Callback is not a function');
|
console.warn('Callback is not a function');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
let ident = PREFIX + UUID++;
|
let ident = PREFIX + UUID++;
|
||||||
|
|
||||||
CALLBACKS[state].push({
|
CALLBACKS[state].push({
|
||||||
ident: ident,
|
ident: ident,
|
||||||
callback: callback
|
callback: callback
|
||||||
});
|
});
|
||||||
|
|
||||||
return ident;
|
return ident;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -62,25 +62,25 @@ function addCallback (state, options) {
|
|||||||
* @return {boolean} If operation was a success
|
* @return {boolean} If operation was a success
|
||||||
*/
|
*/
|
||||||
function removeCallback (state, options) {
|
function removeCallback (state, options) {
|
||||||
let ident = options.ident || '';
|
let ident = options.ident || '';
|
||||||
|
|
||||||
if (typeof(ident) === 'undefined' || ident === '') {
|
if (typeof(ident) === 'undefined' || ident === '') {
|
||||||
console.warn('Need ident to remove callback');
|
console.warn('Need ident to remove callback');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
let index = findByKeyValue(CALLBACKS[state], 'ident', ident)[0];
|
let index = findByKeyValue(CALLBACKS[state], 'ident', ident)[0];
|
||||||
|
|
||||||
// console.log(ident)
|
// console.log(ident)
|
||||||
// console.log(CALLBACKS[state])
|
// console.log(CALLBACKS[state])
|
||||||
|
|
||||||
if (typeof(index) !== 'undefined') {
|
if (typeof(index) !== 'undefined') {
|
||||||
removeFromArray(CALLBACKS[state], index);
|
removeFromArray(CALLBACKS[state], index);
|
||||||
return true;
|
return true;
|
||||||
} else {
|
} else {
|
||||||
console.warn('Callback could not be found');
|
console.warn('Callback could not be found');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -88,13 +88,13 @@ function removeCallback (state, options) {
|
|||||||
* @param {string} state Visible or hidden
|
* @param {string} state Visible or hidden
|
||||||
*/
|
*/
|
||||||
function onDocumentChange (state) {
|
function onDocumentChange (state) {
|
||||||
let callbackArray = CALLBACKS[state];
|
let callbackArray = CALLBACKS[state];
|
||||||
let i = 0;
|
let i = 0;
|
||||||
let len = callbackArray.length;
|
let len = callbackArray.length;
|
||||||
|
|
||||||
for (; i < len; i++) {
|
for (; i < len; i++) {
|
||||||
callbackArray[i].callback();
|
callbackArray[i].callback();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -103,28 +103,28 @@ function onDocumentChange (state) {
|
|||||||
* @return {boolean|integer} Unique identifier for the callback or boolean indicating success or failure
|
* @return {boolean|integer} Unique identifier for the callback or boolean indicating success or failure
|
||||||
*/
|
*/
|
||||||
function visibilityApi (options) {
|
function visibilityApi (options) {
|
||||||
let action = options.action || '';
|
let action = options.action || '';
|
||||||
let state = options.state || '';
|
let state = options.state || '';
|
||||||
let ret;
|
let ret;
|
||||||
|
|
||||||
// Type and value checking
|
// Type and value checking
|
||||||
if (!arrayContains(ACTIONS, action)) {
|
if (!arrayContains(ACTIONS, action)) {
|
||||||
console.warn('Action does not exist');
|
console.warn('Action does not exist');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
if (!arrayContains(STATES, state)) {
|
if (!arrayContains(STATES, state)) {
|
||||||
console.warn('State does not exist');
|
console.warn('State does not exist');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// @todo Magic call function pls
|
// @todo Magic call function pls
|
||||||
if (action === 'addCallback') {
|
if (action === 'addCallback') {
|
||||||
ret = addCallback(state, options);
|
ret = addCallback(state, options);
|
||||||
} else if (action === 'removeCallback') {
|
} else if (action === 'removeCallback') {
|
||||||
ret = removeCallback(state, options);
|
ret = removeCallback(state, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
return ret;
|
return ret;
|
||||||
}
|
}
|
||||||
|
|
||||||
export { visibilityApi };
|
export { visibilityApi };
|
||||||
|
|||||||
@@ -2,35 +2,35 @@
|
|||||||
// Base
|
// Base
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
html {
|
html {
|
||||||
color: $color;
|
color: $color;
|
||||||
font-size: $font-size;
|
font-size: $font-size;
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
line-height: $line-height;
|
line-height: $line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: $selection;
|
background: $selection;
|
||||||
color: $selection-text;
|
color: $selection-text;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: 1px solid #cccccc;
|
border-top: 1px solid #cccccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
img, svg {
|
img, svg {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $link;
|
color: $link;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $link-hover;
|
color: $link-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,45 +2,45 @@
|
|||||||
// Headings
|
// Headings
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
@mixin h {
|
@mixin h {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
line-height: $heading-line-height;
|
line-height: $heading-line-height;
|
||||||
}
|
}
|
||||||
.o-h {
|
.o-h {
|
||||||
@include h;
|
@include h;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, .o-h1 {
|
h1, .o-h1 {
|
||||||
@extend .o-h;
|
@extend .o-h;
|
||||||
|
|
||||||
font-size: rem($heading1);
|
font-size: rem($heading1);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2, .o-h2 {
|
h2, .o-h2 {
|
||||||
@extend .o-h;
|
@extend .o-h;
|
||||||
|
|
||||||
font-size: rem($heading2);
|
font-size: rem($heading2);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3, .o-h3 {
|
h3, .o-h3 {
|
||||||
@extend .o-h;
|
@extend .o-h;
|
||||||
|
|
||||||
font-size: rem($heading3);
|
font-size: rem($heading3);
|
||||||
}
|
}
|
||||||
|
|
||||||
h4, .o-h4 {
|
h4, .o-h4 {
|
||||||
@extend .o-h;
|
@extend .o-h;
|
||||||
|
|
||||||
font-size: rem($heading4);
|
font-size: rem($heading4);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5, .o-h5 {
|
h5, .o-h5 {
|
||||||
@extend .o-h;
|
@extend .o-h;
|
||||||
|
|
||||||
font-size: rem($heading5);
|
font-size: rem($heading5);
|
||||||
}
|
}
|
||||||
|
|
||||||
h6, .o-h6 {
|
h6, .o-h6 {
|
||||||
@extend .o-h;
|
@extend .o-h;
|
||||||
|
|
||||||
font-size: rem($heading6);
|
font-size: rem($heading6);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,24 +3,24 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
button,
|
button,
|
||||||
.o-button {
|
.o-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: none;
|
background: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,39 +4,39 @@
|
|||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
|
|
||||||
&::-ms-expand {
|
&::-ms-expand {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-ms-value {
|
&::-ms-value {
|
||||||
background: none;
|
background: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove Firefox :focus dotted outline, breaks color inherit
|
// Remove Firefox :focus dotted outline, breaks color inherit
|
||||||
/*&:-moz-focusring {
|
/*&:-moz-focusring {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
text-shadow: 0 0 0 #000000; // Text :focus color
|
text-shadow: 0 0 0 #000000; // Text :focus color
|
||||||
}*/
|
}*/
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,11 +2,11 @@
|
|||||||
// Generic resets
|
// Generic resets
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
*, *:before, *:after {
|
*, *:before, *:after {
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
audio,
|
audio,
|
||||||
@@ -15,5 +15,5 @@ iframe,
|
|||||||
img,
|
img,
|
||||||
svg,
|
svg,
|
||||||
video {
|
video {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
// ==========================================================================
|
/**
|
||||||
// Main
|
* Front-end Styles
|
||||||
// ==========================================================================
|
*
|
||||||
|
* @package Boilerplate
|
||||||
|
*/
|
||||||
|
|
||||||
@import "_imports.scss";
|
@import "_imports.scss";
|
||||||
|
|||||||
@@ -2,18 +2,18 @@
|
|||||||
// Button objects
|
// Button objects
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
.o-button {
|
.o-button {
|
||||||
padding: rem(10px);
|
padding: rem(10px);
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: darkgray;
|
background-color: darkgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: gray;
|
background-color: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: dimgray;
|
background-color: dimgray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,9 +2,9 @@
|
|||||||
// Container
|
// Container
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
.o-container {
|
.o-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-right: rem($padding);
|
padding-right: rem($padding);
|
||||||
padding-left: rem($padding);
|
padding-left: rem($padding);
|
||||||
max-width: rem($max-width) + rem($padding * 2);
|
max-width: rem($max-width) + rem($padding * 2);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,8 +5,8 @@
|
|||||||
// Label
|
// Label
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
.o-label {
|
.o-label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: rem(15px);
|
margin-bottom: rem(15px);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Input
|
// Input
|
||||||
@@ -14,19 +14,19 @@
|
|||||||
$input-icon-color: 424242; // No #
|
$input-icon-color: 424242; // No #
|
||||||
|
|
||||||
.o-input {
|
.o-input {
|
||||||
padding: rem(10px);
|
padding: rem(10px);
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: lightgray;
|
border-color: lightgray;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: gray;
|
border-color: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: gray;
|
color: gray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Checkbox
|
// Checkbox
|
||||||
@@ -35,58 +35,58 @@ $checkbox: rem(18px);
|
|||||||
$checkbox-icon-color: $input-icon-color;
|
$checkbox-icon-color: $input-icon-color;
|
||||||
|
|
||||||
.o-checkbox {
|
.o-checkbox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
+ .o-checkbox-label {
|
+ .o-checkbox-label {
|
||||||
&::before {
|
&::before {
|
||||||
border-color: gray;
|
border-color: gray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:checked {
|
&:checked {
|
||||||
+ .o-checkbox-label {
|
+ .o-checkbox-label {
|
||||||
&::after {
|
&::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-checkbox-label {
|
.o-checkbox-label {
|
||||||
@extend .o-label;
|
@extend .o-label;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
padding-left: ($checkbox + rem(10px));
|
padding-left: ($checkbox + rem(10px));
|
||||||
|
|
||||||
&::before, &::after {
|
&::before, &::after {
|
||||||
@extend .o-input;
|
@extend .o-input;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: (-$checkbox / 2);
|
margin-top: (-$checkbox / 2);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: $checkbox;
|
width: $checkbox;
|
||||||
height: $checkbox;
|
height: $checkbox;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23#{$checkbox-icon-color}%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
|
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23#{$checkbox-icon-color}%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: rem(13px);
|
background-size: rem(13px);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Radio
|
// Radio
|
||||||
@@ -94,20 +94,20 @@ $checkbox-icon-color: $input-icon-color;
|
|||||||
$radio-icon-color: $input-icon-color;
|
$radio-icon-color: $input-icon-color;
|
||||||
|
|
||||||
.o-radio {
|
.o-radio {
|
||||||
@extend .o-checkbox;
|
@extend .o-checkbox;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-radio-label {
|
.o-radio-label {
|
||||||
@extend .o-checkbox-label;
|
@extend .o-checkbox-label;
|
||||||
|
|
||||||
&::before, &::after {
|
&::before, &::after {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23#{$radio-icon-color}%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
|
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23#{$radio-icon-color}%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
|
||||||
background-size: rem(8px);
|
background-size: rem(8px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Select
|
// Select
|
||||||
@@ -116,36 +116,36 @@ $select-icon: rem(40px);
|
|||||||
$select-icon-color: $input-icon-color;
|
$select-icon-color: $input-icon-color;
|
||||||
|
|
||||||
.o-select {
|
.o-select {
|
||||||
@extend .o-input;
|
@extend .o-input;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding-right: $select-icon;
|
padding-right: $select-icon;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-select-wrap {
|
.o-select-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
width: $select-icon;
|
width: $select-icon;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23#{$select-icon-color}%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
|
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23#{$select-icon-color}%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: rem(10px);
|
background-size: rem(10px);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Textarea
|
// Textarea
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
.o-textarea {
|
.o-textarea {
|
||||||
@extend .o-input;
|
@extend .o-input;
|
||||||
|
|
||||||
min-height: rem(100px);
|
min-height: rem(100px);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,21 +2,21 @@
|
|||||||
// Grid
|
// Grid
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
@mixin grid($grid-gutter: 0) {
|
@mixin grid($grid-gutter: 0) {
|
||||||
margin-left: -$grid-gutter;
|
margin-left: -$grid-gutter;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
.o-grid {
|
.o-grid {
|
||||||
@include grid;
|
@include grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin grid_item($grid-gutter: 0) {
|
@mixin grid_item($grid-gutter: 0) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-left: $grid-gutter;
|
padding-left: $grid-gutter;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
.o-grid_item {
|
.o-grid_item {
|
||||||
@include grid_item;
|
@include grid_item;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,13 +2,13 @@
|
|||||||
// Functions
|
// Functions
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
@function em($px, $base: $font-size) {
|
@function em($px, $base: $font-size) {
|
||||||
@return ($px / $base) * 1em;
|
@return ($px / $base) * 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@function rem($px, $base: $font-size) {
|
@function rem($px, $base: $font-size) {
|
||||||
@return ($px / $base) * 1rem;
|
@return ($px / $base) * 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@function span($fraction) {
|
@function span($fraction) {
|
||||||
@return $fraction * 100%;
|
@return $fraction * 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,43 +2,43 @@
|
|||||||
// Mixins
|
// Mixins
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
@mixin vertical-center {
|
@mixin vertical-center {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
content: "";
|
content: "";
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Micro clearfix, as per {@link css-101.org/articles/clearfix/latest-new-clearfix-so-far.php CSS Mojo}
|
// Micro clearfix, as per {@link css-101.org/articles/clearfix/latest-new-clearfix-so-far.php CSS Mojo}
|
||||||
//
|
//
|
||||||
// @see inuitcss/generic.clearfix
|
// @see inuitcss/generic.clearfix
|
||||||
@mixin clearfix {
|
@mixin clearfix {
|
||||||
&:after {
|
&:after {
|
||||||
display: table;
|
display: table;
|
||||||
clear: both;
|
clear: both;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin list-reset {
|
@mixin list-reset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin tap-highlight-color {
|
@mixin tap-highlight-color {
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin overflow-scrolling {
|
@mixin overflow-scrolling {
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,11 +2,11 @@
|
|||||||
// Helpers
|
// Helpers
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
.u-vertical-center {
|
.u-vertical-center {
|
||||||
@include vertical-center;
|
@include vertical-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-clearfix {
|
.u-clearfix {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -15,8 +15,8 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.u-hidden {
|
.u-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -25,14 +25,14 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.u-visuallyhidden {
|
.u-visuallyhidden {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
clip: rect(0 0 0 0);
|
clip: rect(0 0 0 0);
|
||||||
margin: -1px;
|
margin: -1px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -43,12 +43,12 @@
|
|||||||
|
|
||||||
.u-visuallyhidden.focusable:active,
|
.u-visuallyhidden.focusable:active,
|
||||||
.u-visuallyhidden.focusable:focus {
|
.u-visuallyhidden.focusable:focus {
|
||||||
position: static;
|
position: static;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
clip: auto;
|
clip: auto;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -56,5 +56,5 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.u-invisible {
|
.u-invisible {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,33 +2,33 @@
|
|||||||
// Trumps
|
// Trumps
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
.u-left {
|
.u-left {
|
||||||
float: left !important;
|
float: left !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-right {
|
.u-right {
|
||||||
float: right !important;
|
float: right !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-align-left {
|
.u-align-left {
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-align-right {
|
.u-align-right {
|
||||||
text-align: right !important;
|
text-align: right !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-align-center {
|
.u-align-center {
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// States
|
// States
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
.is-visible {
|
.is-visible {
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-hidden {
|
.is-hidden {
|
||||||
visibility: hidden !important;
|
visibility: hidden !important;
|
||||||
opacity: 0 !important;
|
opacity: 0 !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,41 +1,41 @@
|
|||||||
{
|
{
|
||||||
"default": [
|
"default": [
|
||||||
"build"
|
"build"
|
||||||
],
|
],
|
||||||
|
|
||||||
"sync": [
|
"sync": [
|
||||||
"browserSync",
|
"browserSync",
|
||||||
"browserify:dev",
|
"browserify:dev",
|
||||||
"watch",
|
"watch",
|
||||||
"notify:watch"
|
"notify:watch"
|
||||||
],
|
],
|
||||||
|
|
||||||
"build": [
|
"build": [
|
||||||
"sass",
|
"sass",
|
||||||
"postcss",
|
"postcss",
|
||||||
"cssmin",
|
"cssmin",
|
||||||
"browserify:prod",
|
"browserify:prod",
|
||||||
"concat:prod",
|
"concat:prod",
|
||||||
"uglify",
|
"uglify",
|
||||||
"svg_sprite",
|
"svg_sprite",
|
||||||
"notify:build"
|
"notify:build"
|
||||||
],
|
],
|
||||||
|
|
||||||
"w": [
|
"w": [
|
||||||
"browserify:dev",
|
"browserify:dev",
|
||||||
"watch",
|
"watch",
|
||||||
"notify:watch"
|
"notify:watch"
|
||||||
],
|
],
|
||||||
|
|
||||||
"c": [
|
"c": [
|
||||||
"csscomb"
|
"csscomb"
|
||||||
],
|
],
|
||||||
|
|
||||||
"j": [
|
"j": [
|
||||||
"eslint"
|
"eslint"
|
||||||
],
|
],
|
||||||
|
|
||||||
"p": [
|
"p": [
|
||||||
"phplint"
|
"phplint"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
options: {
|
options: {
|
||||||
open : false,
|
open : false,
|
||||||
proxy : 'localhost',
|
proxy : 'localhost',
|
||||||
port : 3000,
|
port : 3000,
|
||||||
watchTask : true,
|
watchTask : true,
|
||||||
notify : false
|
notify : false
|
||||||
},
|
},
|
||||||
dev: {
|
dev: {
|
||||||
bsFiles: {
|
bsFiles: {
|
||||||
src : [
|
src : [
|
||||||
'<%= paths.css.dist %>/**/*.css',
|
'<%= paths.css.dist %>/**/*.css',
|
||||||
'<%= paths.js.dist %>/**/*.js',
|
'<%= paths.js.dist %>/**/*.js',
|
||||||
'<%= paths.img.dist %>/**/*.svg',
|
'<%= paths.img.dist %>/**/*.svg',
|
||||||
'**/*.php'
|
'**/*.php'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,39 +1,39 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
options: {
|
options: {
|
||||||
browserifyOptions: {
|
browserifyOptions: {
|
||||||
debug: false
|
debug: false
|
||||||
},
|
},
|
||||||
exclude: "",
|
exclude: "",
|
||||||
transform: [
|
transform: [
|
||||||
['babelify', {
|
['babelify', {
|
||||||
presets: ['es2015'],
|
presets: ['es2015'],
|
||||||
plugins: [
|
plugins: [
|
||||||
['transform-es2015-classes', {loose: true}]
|
['transform-es2015-classes', {loose: true}]
|
||||||
]
|
]
|
||||||
}]
|
}]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
dev: {
|
dev: {
|
||||||
options: {
|
options: {
|
||||||
browserifyOptions: {
|
browserifyOptions: {
|
||||||
debug: true
|
debug: true
|
||||||
},
|
},
|
||||||
watch: true
|
watch: true
|
||||||
},
|
},
|
||||||
src: [
|
src: [
|
||||||
'<%= paths.js.src %>/**/*.js',
|
'<%= paths.js.src %>/**/*.js',
|
||||||
'!<%= paths.js.src %>/vendors/**/*.js'
|
'!<%= paths.js.src %>/vendors/**/*.js'
|
||||||
],
|
],
|
||||||
dest: '<%= paths.js.dist %>/app.js'
|
dest: '<%= paths.js.dist %>/app.js'
|
||||||
},
|
},
|
||||||
prod: {
|
prod: {
|
||||||
options: {
|
options: {
|
||||||
banner: '/*! <%= package.title %> - <%= grunt.template.today("yyyy-mm-dd") %> */\n'
|
banner: '/*! <%= package.title %> - <%= grunt.template.today("yyyy-mm-dd") %> */\n'
|
||||||
},
|
},
|
||||||
src: [
|
src: [
|
||||||
'<%= paths.js.src %>/**/*.js',
|
'<%= paths.js.src %>/**/*.js',
|
||||||
'!<%= paths.js.src %>/vendors/**/*.js'
|
'!<%= paths.js.src %>/vendors/**/*.js'
|
||||||
],
|
],
|
||||||
dest: '<%= paths.js.dist %>/app.js'
|
dest: '<%= paths.js.dist %>/app.js'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
prod: {
|
prod: {
|
||||||
options: {
|
options: {
|
||||||
banner: '/*! Dependencies for <%= package.title %> - <%= grunt.template.today("yyyy-mm-dd") %> */\n'
|
banner: '/*! Dependencies for <%= package.title %> - <%= grunt.template.today("yyyy-mm-dd") %> */\n'
|
||||||
},
|
},
|
||||||
src : [
|
src : [
|
||||||
'<%= paths.js.src %>/vendors/**/*.js',
|
'<%= paths.js.src %>/vendors/**/*.js',
|
||||||
'<%= paths.npm %>/svg4everybody/dist/svg4everybody.min.js'
|
'<%= paths.npm %>/svg4everybody/dist/svg4everybody.min.js'
|
||||||
],
|
],
|
||||||
dest : '<%= paths.js.dist %>/vendors.js'
|
dest : '<%= paths.js.dist %>/vendors.js'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,15 +1,15 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
options: {
|
options: {
|
||||||
config: '.csscomb.json'
|
config: '.csscomb.json'
|
||||||
},
|
},
|
||||||
dev: {
|
dev: {
|
||||||
files: [
|
files: [
|
||||||
{
|
{
|
||||||
expand : true,
|
expand : true,
|
||||||
cwd : '<%= paths.css.src %>',
|
cwd : '<%= paths.css.src %>',
|
||||||
src : [ '**/*.scss', '!base/_fonts.scss' ],
|
src : [ '**/*.scss', '!base/_fonts.scss' ],
|
||||||
dest : '<%= paths.css.src %>'
|
dest : '<%= paths.css.src %>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
options: {},
|
options: {},
|
||||||
prod: {
|
prod: {
|
||||||
files: [
|
files: [
|
||||||
{
|
{
|
||||||
expand : true,
|
expand : true,
|
||||||
cwd : '<%= paths.css.dist %>',
|
cwd : '<%= paths.css.dist %>',
|
||||||
src : [ '**/*.css', '!**/*.min.css' ],
|
src : [ '**/*.css', '!**/*.min.css' ],
|
||||||
dest : '<%= paths.css.dist %>'
|
dest : '<%= paths.css.dist %>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
options: {
|
options: {
|
||||||
quiet : false,
|
quiet : false,
|
||||||
format : require('eslint-tap'),
|
format : require('eslint-tap'),
|
||||||
configFile : '.eslintrc'
|
configFile : '.eslintrc'
|
||||||
},
|
},
|
||||||
dev: [
|
dev: [
|
||||||
'<%= paths.js.src %>/**/*.js',
|
'<%= paths.js.src %>/**/*.js',
|
||||||
'!<%= paths.js.src %>/vendors/**/*.js'
|
'!<%= paths.js.src %>/vendors/**/*.js'
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,36 +1,36 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
notify_hooks: {
|
notify_hooks: {
|
||||||
options: {
|
options: {
|
||||||
enabled : true,
|
enabled : true,
|
||||||
success : true,
|
success : true,
|
||||||
duration : 3,
|
duration : 3,
|
||||||
title : '<%= package.name %>',
|
title : '<%= package.name %>',
|
||||||
max_jshint_notifications : 5
|
max_jshint_notifications : 5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
options: {
|
options: {
|
||||||
message: 'Keeping an eye out, Chief!'
|
message: 'Keeping an eye out, Chief!'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
options: {
|
options: {
|
||||||
message: 'Everything is ready to go!'
|
message: 'Everything is ready to go!'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
sass: {
|
sass: {
|
||||||
options: {
|
options: {
|
||||||
message: 'CSS is compiled'
|
message: 'CSS is compiled'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
javascript: {
|
javascript: {
|
||||||
options: {
|
options: {
|
||||||
message: 'JavaScript is compiled'
|
message: 'JavaScript is compiled'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
svg: {
|
svg: {
|
||||||
options: {
|
options: {
|
||||||
message: 'SVG is concatenated'
|
message: 'SVG is concatenated'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
options: {
|
options: {
|
||||||
swapPath : '/tmp',
|
swapPath : '/tmp',
|
||||||
phpArgs : {
|
phpArgs : {
|
||||||
// add -f for fatal errors
|
// add -f for fatal errors
|
||||||
'-lf': null
|
'-lf': null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dev: [
|
dev: [
|
||||||
'**/*.php'
|
'**/*.php'
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,27 +1,27 @@
|
|||||||
module.exports = function (grunt, options)
|
module.exports = function (grunt, options)
|
||||||
{
|
{
|
||||||
return {
|
return {
|
||||||
options: {
|
options: {
|
||||||
map: false,
|
map: false,
|
||||||
processors: [
|
processors: [
|
||||||
require('autoprefixer')({
|
require('autoprefixer')({
|
||||||
browsers: [ 'last 2 versions', '> 1%', 'ie >= 9' ]
|
browsers: [ 'last 2 versions', '> 1%', 'ie >= 9' ]
|
||||||
}),
|
}),
|
||||||
require('postcss-banner')({
|
require('postcss-banner')({
|
||||||
banner: grunt.template.process('! <%= package.title %> - <%= grunt.template.today("yyyy-mm-dd") %> ', { data: options })
|
banner: grunt.template.process('! <%= package.title %> - <%= grunt.template.today("yyyy-mm-dd") %> ', { data: options })
|
||||||
})
|
})
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
prod: {
|
prod: {
|
||||||
files: [
|
files: [
|
||||||
{
|
{
|
||||||
expand : true,
|
expand : true,
|
||||||
flatten : true,
|
flatten : true,
|
||||||
cwd : '<%= paths.css.dist %>',
|
cwd : '<%= paths.css.dist %>',
|
||||||
src : [ '**/*.css', '!**/*.min.css' ],
|
src : [ '**/*.css', '!**/*.min.css' ],
|
||||||
dest : '<%= paths.css.dist %>'
|
dest : '<%= paths.css.dist %>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
options: {
|
options: {
|
||||||
sourceMap : false,
|
sourceMap : false,
|
||||||
outputStyle : 'expanded'
|
outputStyle : 'expanded'
|
||||||
},
|
},
|
||||||
prod: {
|
prod: {
|
||||||
files: [
|
files: [
|
||||||
{
|
{
|
||||||
expand : true,
|
expand : true,
|
||||||
cwd : '<%= paths.css.src %>',
|
cwd : '<%= paths.css.src %>',
|
||||||
src : [ '**/*.scss' ],
|
src : [ '**/*.scss' ],
|
||||||
dest : '<%= paths.css.dist %>',
|
dest : '<%= paths.css.dist %>',
|
||||||
ext : '.css'
|
ext : '.css'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,29 +1,29 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
options : {
|
options : {
|
||||||
svg: {
|
svg: {
|
||||||
xmlDeclaration : false,
|
xmlDeclaration : false,
|
||||||
namespaceIDs : true,
|
namespaceIDs : true,
|
||||||
doctypeDeclaration : false,
|
doctypeDeclaration : false,
|
||||||
cleanupNumericValues : true,
|
cleanupNumericValues : true,
|
||||||
removeTitle : true,
|
removeTitle : true,
|
||||||
removeDesc : true
|
removeDesc : true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
prod: {
|
prod: {
|
||||||
expand : true,
|
expand : true,
|
||||||
cwd : '<%= paths.img.src %>',
|
cwd : '<%= paths.img.dist %>',
|
||||||
src : [ '**/*.svg', '!sprite.svg' ],
|
src : [ '**/*.svg', '!sprite.svg' ],
|
||||||
dest : '<%= paths.img.dist %>',
|
dest : '<%= paths.img.dist %>',
|
||||||
options : {
|
options : {
|
||||||
mode: {
|
mode: {
|
||||||
symbol: {
|
symbol: {
|
||||||
dest : '.',
|
dest : '.',
|
||||||
sprite : 'sprite.svg',
|
sprite : 'sprite.svg',
|
||||||
example : {
|
example : {
|
||||||
dest: '../../../build/sprite.symbol.html'
|
dest: '../../../build/sprite.symbol.html'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
options: {},
|
options: {},
|
||||||
prod: {
|
prod: {
|
||||||
files: [
|
files: [
|
||||||
{
|
{
|
||||||
expand : true,
|
expand : true,
|
||||||
cwd : '<%= paths.js.dist %>',
|
cwd : '<%= paths.js.dist %>',
|
||||||
src : [ '**/*.js', '!**/*.min.js' ],
|
src : [ '**/*.js', '!**/*.min.js' ],
|
||||||
dest : '<%= paths.js.dist %>'
|
dest : '<%= paths.js.dist %>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,27 +1,27 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
options: {
|
options: {
|
||||||
spawn: false,
|
spawn: false,
|
||||||
livereload: false
|
livereload: false
|
||||||
},
|
},
|
||||||
javascript_vendors: {
|
javascript_vendors: {
|
||||||
files: [ '<%= paths.js.src %>/vendors/**/*.js', '<%= paths.grunt %>/config/concat.js' ],
|
files: [ '<%= paths.js.src %>/vendors/**/*.js', '<%= paths.grunt %>/config/concat.js' ],
|
||||||
tasks: [ 'concat', 'notify:javascript' ]
|
tasks: [ 'concat', 'notify:javascript' ]
|
||||||
},
|
},
|
||||||
sass: {
|
sass: {
|
||||||
files: [ '<%= paths.css.src %>/**/*.scss' ],
|
files: [ '<%= paths.css.src %>/**/*.scss' ],
|
||||||
tasks: [ 'sass', 'postcss', 'notify:sass' ]
|
tasks: [ 'sass', 'postcss', 'notify:sass' ]
|
||||||
},
|
},
|
||||||
svg: {
|
svg: {
|
||||||
files: [ '<%= paths.img.src %>/**/*.svg' ],
|
files: [ '<%= paths.img.dist %>/**/*.svg' ],
|
||||||
tasks: [ 'svg_sprite', 'notify:svg' ]
|
tasks: [ 'svg_sprite', 'notify:svg' ]
|
||||||
},
|
},
|
||||||
tasks: {
|
tasks: {
|
||||||
options: {
|
options: {
|
||||||
reload: true
|
reload: true
|
||||||
},
|
},
|
||||||
files: [
|
files: [
|
||||||
'Gruntfile.js',
|
'Gruntfile.js',
|
||||||
'<%= paths.grunt %>/**/*'
|
'<%= paths.grunt %>/**/*'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
60
package.json
60
package.json
@@ -1,32 +1,32 @@
|
|||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"name": "@locomotivemtl/boilerplate",
|
"name": "@locomotivemtl/boilerplate",
|
||||||
"title": "Locomotive Boilerplate",
|
"title": "Locomotive Boilerplate",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"author": "Locomotive <info@locomotive.ca>",
|
"author": "Locomotive <info@locomotive.ca>",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "0.0.0",
|
"autoprefixer": "0.0.0",
|
||||||
"babel-preset-es2015": "0.0.0",
|
"babel-preset-es2015": "0.0.0",
|
||||||
"babel-plugin-transform-es2015-classes": "0.0.0",
|
"babel-plugin-transform-es2015-classes": "0.0.0",
|
||||||
"babelify": "0.0.0",
|
"babelify": "0.0.0",
|
||||||
"eslint-tap": "0.0.0",
|
"eslint-tap": "0.0.0",
|
||||||
"glob": "0.0.0",
|
"glob": "0.0.0",
|
||||||
"grunt": "0.0.0",
|
"grunt": "0.0.0",
|
||||||
"grunt-browser-sync": "0.0.0",
|
"grunt-browser-sync": "0.0.0",
|
||||||
"grunt-browserify": "0.0.0",
|
"grunt-browserify": "0.0.0",
|
||||||
"grunt-contrib-concat": "0.0.0",
|
"grunt-contrib-concat": "0.0.0",
|
||||||
"grunt-contrib-cssmin": "0.0.0",
|
"grunt-contrib-cssmin": "0.0.0",
|
||||||
"grunt-contrib-uglify": "0.0.0",
|
"grunt-contrib-uglify": "0.0.0",
|
||||||
"grunt-contrib-watch": "0.0.0",
|
"grunt-contrib-watch": "0.0.0",
|
||||||
"grunt-csscomb": "0.0.0",
|
"grunt-csscomb": "0.0.0",
|
||||||
"grunt-eslint": "0.0.0",
|
"grunt-eslint": "0.0.0",
|
||||||
"grunt-notify": "0.0.0",
|
"grunt-notify": "0.0.0",
|
||||||
"grunt-phplint": "0.0.0",
|
"grunt-phplint": "0.0.0",
|
||||||
"grunt-postcss": "0.0.0",
|
"grunt-postcss": "0.0.0",
|
||||||
"grunt-sass": "0.0.0",
|
"grunt-sass": "0.0.0",
|
||||||
"grunt-svg-sprite": "0.0.0",
|
"grunt-svg-sprite": "0.0.0",
|
||||||
"load-grunt-config": "0.0.0",
|
"load-grunt-config": "0.0.0",
|
||||||
"postcss-banner": "0.0.0",
|
"postcss-banner": "0.0.0",
|
||||||
"svg4everybody": "0.0.0"
|
"svg4everybody": "0.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,36 +1,36 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
<title>Boilerplate</title>
|
<title>Boilerplate</title>
|
||||||
</head>
|
</head>
|
||||||
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
|
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
|
||||||
<center>
|
<center>
|
||||||
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
||||||
<tr>
|
<tr>
|
||||||
<td align="center" valign="top">
|
<td align="center" valign="top">
|
||||||
<table border="0" cellpadding="0" cellspacing="0" width="600">
|
<table border="0" cellpadding="0" cellspacing="0" width="600">
|
||||||
<tr>
|
<tr>
|
||||||
<td valign="top">
|
<td valign="top">
|
||||||
<table border="0" cellpadding="20" cellspacing="0" width="100%">
|
<table border="0" cellpadding="20" cellspacing="0" width="100%">
|
||||||
<tr>
|
<tr>
|
||||||
<td valign="top">
|
<td valign="top">
|
||||||
<h1 class="h1">Heading 1</h1>
|
<h1 class="h1">Heading 1</h1>
|
||||||
<h2 class="h2">Heading 2</h2>
|
<h2 class="h2">Heading 2</h2>
|
||||||
<h3 class="h3">Heading 3</h3>
|
<h3 class="h3">Heading 3</h3>
|
||||||
<h4 class="h4">Heading 4</h4>
|
<h4 class="h4">Heading 4</h4>
|
||||||
<p>
|
<p>
|
||||||
After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to
|
After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</center>
|
</center>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -27,39 +27,39 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
|
|
||||||
|
|
||||||
var App = function () {
|
var App = function () {
|
||||||
function App() {
|
function App() {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
_classCallCheck(this, App);
|
_classCallCheck(this, App);
|
||||||
|
|
||||||
this.modules = modules;
|
this.modules = modules;
|
||||||
this.currentModules = [];
|
this.currentModules = [];
|
||||||
|
|
||||||
_environment.$document.on('initModules.App', function (event) {
|
_environment.$document.on('initModules.App', function (event) {
|
||||||
_this.initGlobals(event.firstBlood).deleteModules().initModules();
|
_this.initGlobals(event.firstBlood).deleteModules().initModules();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Destroy all existing modules
|
* Destroy all existing modules
|
||||||
* @return {Object} this Allows chaining
|
* @return {Object} this Allows chaining
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
App.prototype.deleteModules = function deleteModules() {
|
App.prototype.deleteModules = function deleteModules() {
|
||||||
// Loop modules
|
// Loop modules
|
||||||
var i = this.currentModules.length;
|
var i = this.currentModules.length;
|
||||||
|
|
||||||
// Destroy all modules
|
// Destroy all modules
|
||||||
while (i--) {
|
while (i--) {
|
||||||
this.currentModules[i].destroy();
|
this.currentModules[i].destroy();
|
||||||
this.currentModules.splice(i);
|
this.currentModules.splice(i);
|
||||||
}
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Execute global functions and settings
|
* Execute global functions and settings
|
||||||
* Allows you to initialize global modules only once if you need
|
* Allows you to initialize global modules only once if you need
|
||||||
* (ex.: when using Barba.js or SmoothState.js)
|
* (ex.: when using Barba.js or SmoothState.js)
|
||||||
@@ -67,61 +67,61 @@ var App = function () {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
App.prototype.initGlobals = function initGlobals(firstBlood) {
|
App.prototype.initGlobals = function initGlobals(firstBlood) {
|
||||||
(0, _globals2.default)(firstBlood);
|
(0, _globals2.default)(firstBlood);
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Find modules and initialize them
|
* Find modules and initialize them
|
||||||
* @return {Object} this Allows chaining
|
* @return {Object} this Allows chaining
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
App.prototype.initModules = function initModules() {
|
App.prototype.initModules = function initModules() {
|
||||||
// Elements with module
|
// Elements with module
|
||||||
var moduleEls = document.querySelectorAll('[data-module]');
|
var moduleEls = document.querySelectorAll('[data-module]');
|
||||||
|
|
||||||
// Loop through elements
|
// Loop through elements
|
||||||
var i = 0;
|
var i = 0;
|
||||||
var elsLen = moduleEls.length;
|
var elsLen = moduleEls.length;
|
||||||
|
|
||||||
for (; i < elsLen; i++) {
|
for (; i < elsLen; i++) {
|
||||||
|
|
||||||
// Current element
|
// Current element
|
||||||
var el = moduleEls[i];
|
var el = moduleEls[i];
|
||||||
|
|
||||||
// All data- attributes considered as options
|
// All data- attributes considered as options
|
||||||
var options = (0, _html.getNodeData)(el);
|
var options = (0, _html.getNodeData)(el);
|
||||||
|
|
||||||
// Add current DOM element and jQuery element
|
// Add current DOM element and jQuery element
|
||||||
options.el = el;
|
options.el = el;
|
||||||
options.$el = $(el);
|
options.$el = $(el);
|
||||||
|
|
||||||
// Module does exist at this point
|
// Module does exist at this point
|
||||||
var attr = options.module;
|
var attr = options.module;
|
||||||
|
|
||||||
// Splitting modules found in the data-attribute
|
// Splitting modules found in the data-attribute
|
||||||
var moduleIdents = attr.replace(/\s/g, '').split(',');
|
var moduleIdents = attr.replace(/\s/g, '').split(',');
|
||||||
|
|
||||||
// Loop modules
|
// Loop modules
|
||||||
var j = 0;
|
var j = 0;
|
||||||
var modulesLen = moduleIdents.length;
|
var modulesLen = moduleIdents.length;
|
||||||
|
|
||||||
for (; j < modulesLen; j++) {
|
for (; j < modulesLen; j++) {
|
||||||
var moduleAttr = moduleIdents[j];
|
var moduleAttr = moduleIdents[j];
|
||||||
|
|
||||||
if (typeof this.modules[moduleAttr] === 'function') {
|
if (typeof this.modules[moduleAttr] === 'function') {
|
||||||
var module = new this.modules[moduleAttr](options);
|
var module = new this.modules[moduleAttr](options);
|
||||||
this.currentModules.push(module);
|
this.currentModules.push(module);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
return App;
|
return App;
|
||||||
}();
|
}();
|
||||||
|
|
||||||
// IIFE for loading the application
|
// IIFE for loading the application
|
||||||
@@ -129,11 +129,11 @@ var App = function () {
|
|||||||
|
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
window.App = new App();
|
window.App = new App();
|
||||||
_environment.$document.trigger({
|
_environment.$document.trigger({
|
||||||
type: 'initModules.App',
|
type: 'initModules.App',
|
||||||
firstBlood: true
|
firstBlood: true
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
||||||
},{"./modules":3,"./utils/environment":8,"./utils/globals":9,"./utils/html":10}],2:[function(require,module,exports){
|
},{"./modules":3,"./utils/environment":8,"./utils/globals":9,"./utils/html":10}],2:[function(require,module,exports){
|
||||||
@@ -228,7 +228,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
|
|
||||||
var _environment = require('../utils/environment');
|
var _environment = require('../utils/environment');
|
||||||
@@ -242,14 +242,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
var _class = function _class(options) {
|
var _class = function _class(options) {
|
||||||
_classCallCheck(this, _class);
|
_classCallCheck(this, _class);
|
||||||
|
|
||||||
this.$document = _environment.$document;
|
this.$document = _environment.$document;
|
||||||
this.$window = _environment.$window;
|
this.$window = _environment.$window;
|
||||||
this.$html = _environment.$html;
|
this.$html = _environment.$html;
|
||||||
this.$body = _environment.$body;
|
this.$body = _environment.$body;
|
||||||
this.$el = options.$el;
|
this.$el = options.$el;
|
||||||
this.el = options.el;
|
this.el = options.el;
|
||||||
};
|
};
|
||||||
|
|
||||||
exports.default = _class;
|
exports.default = _class;
|
||||||
@@ -258,7 +258,7 @@ exports.default = _class;
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
|
|
||||||
var _AbstractModule2 = require('./AbstractModule');
|
var _AbstractModule2 = require('./AbstractModule');
|
||||||
@@ -275,24 +275,24 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||||||
|
|
||||||
|
|
||||||
var _class = function (_AbstractModule) {
|
var _class = function (_AbstractModule) {
|
||||||
_inherits(_class, _AbstractModule);
|
_inherits(_class, _AbstractModule);
|
||||||
|
|
||||||
function _class(options) {
|
function _class(options) {
|
||||||
_classCallCheck(this, _class);
|
_classCallCheck(this, _class);
|
||||||
|
|
||||||
var _this = _possibleConstructorReturn(this, _AbstractModule.call(this, options));
|
var _this = _possibleConstructorReturn(this, _AbstractModule.call(this, options));
|
||||||
|
|
||||||
_this.$el.on('click.Button', function (event) {
|
_this.$el.on('click.Button', function (event) {
|
||||||
_this.$document.trigger('Title.changeLabel', [$(event.currentTarget).val()]);
|
_this.$document.trigger('Title.changeLabel', [$(event.currentTarget).val()]);
|
||||||
});
|
});
|
||||||
return _this;
|
return _this;
|
||||||
}
|
}
|
||||||
|
|
||||||
_class.prototype.destroy = function destroy() {
|
_class.prototype.destroy = function destroy() {
|
||||||
this.$el.off('.Button');
|
this.$el.off('.Button');
|
||||||
};
|
};
|
||||||
|
|
||||||
return _class;
|
return _class;
|
||||||
}(_AbstractModule3.default);
|
}(_AbstractModule3.default);
|
||||||
|
|
||||||
exports.default = _class;
|
exports.default = _class;
|
||||||
@@ -301,7 +301,7 @@ exports.default = _class;
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
|
|
||||||
var _visibility = require('../utils/visibility');
|
var _visibility = require('../utils/visibility');
|
||||||
@@ -320,65 +320,65 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||||||
|
|
||||||
|
|
||||||
var _class = function (_AbstractModule) {
|
var _class = function (_AbstractModule) {
|
||||||
_inherits(_class, _AbstractModule);
|
_inherits(_class, _AbstractModule);
|
||||||
|
|
||||||
function _class(options) {
|
function _class(options) {
|
||||||
_classCallCheck(this, _class);
|
_classCallCheck(this, _class);
|
||||||
|
|
||||||
var _this = _possibleConstructorReturn(this, _AbstractModule.call(this, options));
|
var _this = _possibleConstructorReturn(this, _AbstractModule.call(this, options));
|
||||||
|
|
||||||
_this.$label = _this.$el.find('.js-label');
|
_this.$label = _this.$el.find('.js-label');
|
||||||
|
|
||||||
_this.$document.on('Title.changeLabel', function (event, value) {
|
_this.$document.on('Title.changeLabel', function (event, value) {
|
||||||
_this.changeLabel(value);
|
_this.changeLabel(value);
|
||||||
_this.destroy();
|
_this.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
_this.hiddenCallbackIdent = (0, _visibility.visibilityApi)({
|
_this.hiddenCallbackIdent = (0, _visibility.visibilityApi)({
|
||||||
action: 'addCallback',
|
action: 'addCallback',
|
||||||
state: 'hidden',
|
state: 'hidden',
|
||||||
callback: _this.logHidden
|
callback: _this.logHidden
|
||||||
});
|
});
|
||||||
|
|
||||||
_this.visibleCallbackIdent = (0, _visibility.visibilityApi)({
|
_this.visibleCallbackIdent = (0, _visibility.visibilityApi)({
|
||||||
action: 'addCallback',
|
action: 'addCallback',
|
||||||
state: 'visible',
|
state: 'visible',
|
||||||
callback: _this.logVisible
|
callback: _this.logVisible
|
||||||
});
|
});
|
||||||
return _this;
|
return _this;
|
||||||
}
|
}
|
||||||
|
|
||||||
_class.prototype.logHidden = function logHidden() {
|
_class.prototype.logHidden = function logHidden() {
|
||||||
console.log('Title is hidden');
|
console.log('Title is hidden');
|
||||||
};
|
};
|
||||||
|
|
||||||
_class.prototype.logVisible = function logVisible() {
|
_class.prototype.logVisible = function logVisible() {
|
||||||
console.log('Title is visible');
|
console.log('Title is visible');
|
||||||
};
|
};
|
||||||
|
|
||||||
_class.prototype.changeLabel = function changeLabel(value) {
|
_class.prototype.changeLabel = function changeLabel(value) {
|
||||||
this.$label.text(value);
|
this.$label.text(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
_class.prototype.destroy = function destroy() {
|
_class.prototype.destroy = function destroy() {
|
||||||
this.$document.off('Title.changeLabel');
|
this.$document.off('Title.changeLabel');
|
||||||
|
|
||||||
(0, _visibility.visibilityApi)({
|
(0, _visibility.visibilityApi)({
|
||||||
action: 'removeCallback',
|
action: 'removeCallback',
|
||||||
state: 'hidden',
|
state: 'hidden',
|
||||||
ident: this.hiddenCallbackIdent
|
ident: this.hiddenCallbackIdent
|
||||||
});
|
});
|
||||||
|
|
||||||
(0, _visibility.visibilityApi)({
|
(0, _visibility.visibilityApi)({
|
||||||
action: 'removeCallback',
|
action: 'removeCallback',
|
||||||
state: 'visible',
|
state: 'visible',
|
||||||
ident: this.visibleCallbackIdent
|
ident: this.visibleCallbackIdent
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$el.off('.Title');
|
this.$el.off('.Title');
|
||||||
};
|
};
|
||||||
|
|
||||||
return _class;
|
return _class;
|
||||||
}(_AbstractModule3.default);
|
}(_AbstractModule3.default);
|
||||||
|
|
||||||
exports.default = _class;
|
exports.default = _class;
|
||||||
@@ -387,7 +387,7 @@ exports.default = _class;
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
exports.addToArray = addToArray;
|
exports.addToArray = addToArray;
|
||||||
exports.arrayContains = arrayContains;
|
exports.arrayContains = arrayContains;
|
||||||
@@ -401,86 +401,86 @@ exports.findByKeyValue = findByKeyValue;
|
|||||||
var _is = require('./is');
|
var _is = require('./is');
|
||||||
|
|
||||||
function addToArray(array, value) {
|
function addToArray(array, value) {
|
||||||
var index = array.indexOf(value);
|
var index = array.indexOf(value);
|
||||||
|
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
array.push(value);
|
array.push(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function arrayContains(array, value) {
|
function arrayContains(array, value) {
|
||||||
for (var i = 0, c = array.length; i < c; i++) {
|
for (var i = 0, c = array.length; i < c; i++) {
|
||||||
if (array[i] == value) {
|
if (array[i] == value) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function arrayContentsMatch(a, b) {
|
function arrayContentsMatch(a, b) {
|
||||||
var i;
|
var i;
|
||||||
|
|
||||||
if (!(0, _is.isArray)(a) || !(0, _is.isArray)(b)) {
|
if (!(0, _is.isArray)(a) || !(0, _is.isArray)(b)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (a.length !== b.length) {
|
if (a.length !== b.length) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
i = a.length;
|
i = a.length;
|
||||||
while (i--) {
|
while (i--) {
|
||||||
if (a[i] !== b[i]) {
|
if (a[i] !== b[i]) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function ensureArray(x) {
|
function ensureArray(x) {
|
||||||
if (typeof x === 'string') {
|
if (typeof x === 'string') {
|
||||||
return [x];
|
return [x];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (x === undefined) {
|
if (x === undefined) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
return x;
|
return x;
|
||||||
}
|
}
|
||||||
|
|
||||||
function lastItem(array) {
|
function lastItem(array) {
|
||||||
return array[array.length - 1];
|
return array[array.length - 1];
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeFromArray(array, member) {
|
function removeFromArray(array, member) {
|
||||||
if (!array) {
|
if (!array) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var index = array.indexOf(member);
|
var index = array.indexOf(member);
|
||||||
|
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
array.splice(index, 1);
|
array.splice(index, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toArray(arrayLike) {
|
function toArray(arrayLike) {
|
||||||
var array = [],
|
var array = [],
|
||||||
i = arrayLike.length;
|
i = arrayLike.length;
|
||||||
while (i--) {
|
while (i--) {
|
||||||
array[i] = arrayLike[i];
|
array[i] = arrayLike[i];
|
||||||
}
|
}
|
||||||
|
|
||||||
return array;
|
return array;
|
||||||
}
|
}
|
||||||
|
|
||||||
function findByKeyValue(array, key, value) {
|
function findByKeyValue(array, key, value) {
|
||||||
return array.filter(function (obj) {
|
return array.filter(function (obj) {
|
||||||
return obj[key] === value;
|
return obj[key] === value;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
},{"./is":11}],8:[function(require,module,exports){
|
},{"./is":11}],8:[function(require,module,exports){
|
||||||
@@ -503,11 +503,11 @@ exports.$body = $body;
|
|||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
|
|
||||||
exports.default = function () {
|
exports.default = function () {
|
||||||
svg4everybody();
|
svg4everybody();
|
||||||
};
|
};
|
||||||
|
|
||||||
},{}],10:[function(require,module,exports){
|
},{}],10:[function(require,module,exports){
|
||||||
@@ -580,7 +580,7 @@ function getNodeData(node) {
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
|
|
||||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
|
||||||
@@ -596,44 +596,44 @@ var toString = Object.prototype.toString,
|
|||||||
|
|
||||||
// thanks, http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/
|
// thanks, http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/
|
||||||
function isArray(thing) {
|
function isArray(thing) {
|
||||||
return toString.call(thing) === '[object Array]';
|
return toString.call(thing) === '[object Array]';
|
||||||
}
|
}
|
||||||
|
|
||||||
function isArrayLike(obj) {
|
function isArrayLike(obj) {
|
||||||
return arrayLikePattern.test(toString.call(obj));
|
return arrayLikePattern.test(toString.call(obj));
|
||||||
}
|
}
|
||||||
|
|
||||||
function isEqual(a, b) {
|
function isEqual(a, b) {
|
||||||
if (a === null && b === null) {
|
if (a === null && b === null) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ((typeof a === 'undefined' ? 'undefined' : _typeof(a)) === 'object' || (typeof b === 'undefined' ? 'undefined' : _typeof(b)) === 'object') {
|
if ((typeof a === 'undefined' ? 'undefined' : _typeof(a)) === 'object' || (typeof b === 'undefined' ? 'undefined' : _typeof(b)) === 'object') {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return a === b;
|
return a === b;
|
||||||
}
|
}
|
||||||
|
|
||||||
// http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
|
// http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
|
||||||
function isNumeric(thing) {
|
function isNumeric(thing) {
|
||||||
return !isNaN(parseFloat(thing)) && isFinite(thing);
|
return !isNaN(parseFloat(thing)) && isFinite(thing);
|
||||||
}
|
}
|
||||||
|
|
||||||
function isObject(thing) {
|
function isObject(thing) {
|
||||||
return thing && toString.call(thing) === '[object Object]';
|
return thing && toString.call(thing) === '[object Object]';
|
||||||
}
|
}
|
||||||
|
|
||||||
function isFunction(thing) {
|
function isFunction(thing) {
|
||||||
var getType = {};
|
var getType = {};
|
||||||
return thing && getType.toString.call(thing) === '[object Function]';
|
return thing && getType.toString.call(thing) === '[object Function]';
|
||||||
}
|
}
|
||||||
|
|
||||||
},{}],12:[function(require,module,exports){
|
},{}],12:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
exports.visibilityApi = undefined;
|
exports.visibilityApi = undefined;
|
||||||
|
|
||||||
@@ -644,8 +644,8 @@ var _array = require('./array');
|
|||||||
var _environment = require('./environment');
|
var _environment = require('./environment');
|
||||||
|
|
||||||
var CALLBACKS = {
|
var CALLBACKS = {
|
||||||
hidden: [],
|
hidden: [],
|
||||||
visible: []
|
visible: []
|
||||||
}; /* jshint esnext: true */
|
}; /* jshint esnext: true */
|
||||||
|
|
||||||
|
|
||||||
@@ -659,11 +659,11 @@ var UUID = 0;
|
|||||||
|
|
||||||
// Main event
|
// Main event
|
||||||
_environment.$document.on('visibilitychange', function (event) {
|
_environment.$document.on('visibilitychange', function (event) {
|
||||||
if (document.hidden) {
|
if (document.hidden) {
|
||||||
onDocumentChange('hidden');
|
onDocumentChange('hidden');
|
||||||
} else {
|
} else {
|
||||||
onDocumentChange('visible');
|
onDocumentChange('visible');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -673,21 +673,21 @@ _environment.$document.on('visibilitychange', function (event) {
|
|||||||
* @return {string} ident
|
* @return {string} ident
|
||||||
*/
|
*/
|
||||||
function addCallback(state, options) {
|
function addCallback(state, options) {
|
||||||
var callback = options.callback || '';
|
var callback = options.callback || '';
|
||||||
|
|
||||||
if (!(0, _is.isFunction)(callback)) {
|
if (!(0, _is.isFunction)(callback)) {
|
||||||
console.warn('Callback is not a function');
|
console.warn('Callback is not a function');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
var ident = PREFIX + UUID++;
|
var ident = PREFIX + UUID++;
|
||||||
|
|
||||||
CALLBACKS[state].push({
|
CALLBACKS[state].push({
|
||||||
ident: ident,
|
ident: ident,
|
||||||
callback: callback
|
callback: callback
|
||||||
});
|
});
|
||||||
|
|
||||||
return ident;
|
return ident;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -697,25 +697,25 @@ function addCallback(state, options) {
|
|||||||
* @return {boolean} If operation was a success
|
* @return {boolean} If operation was a success
|
||||||
*/
|
*/
|
||||||
function removeCallback(state, options) {
|
function removeCallback(state, options) {
|
||||||
var ident = options.ident || '';
|
var ident = options.ident || '';
|
||||||
|
|
||||||
if (typeof ident === 'undefined' || ident === '') {
|
if (typeof ident === 'undefined' || ident === '') {
|
||||||
console.warn('Need ident to remove callback');
|
console.warn('Need ident to remove callback');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
var index = (0, _array.findByKeyValue)(CALLBACKS[state], 'ident', ident)[0];
|
var index = (0, _array.findByKeyValue)(CALLBACKS[state], 'ident', ident)[0];
|
||||||
|
|
||||||
// console.log(ident)
|
// console.log(ident)
|
||||||
// console.log(CALLBACKS[state])
|
// console.log(CALLBACKS[state])
|
||||||
|
|
||||||
if (typeof index !== 'undefined') {
|
if (typeof index !== 'undefined') {
|
||||||
(0, _array.removeFromArray)(CALLBACKS[state], index);
|
(0, _array.removeFromArray)(CALLBACKS[state], index);
|
||||||
return true;
|
return true;
|
||||||
} else {
|
} else {
|
||||||
console.warn('Callback could not be found');
|
console.warn('Callback could not be found');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -723,13 +723,13 @@ function removeCallback(state, options) {
|
|||||||
* @param {string} state Visible or hidden
|
* @param {string} state Visible or hidden
|
||||||
*/
|
*/
|
||||||
function onDocumentChange(state) {
|
function onDocumentChange(state) {
|
||||||
var callbackArray = CALLBACKS[state];
|
var callbackArray = CALLBACKS[state];
|
||||||
var i = 0;
|
var i = 0;
|
||||||
var len = callbackArray.length;
|
var len = callbackArray.length;
|
||||||
|
|
||||||
for (; i < len; i++) {
|
for (; i < len; i++) {
|
||||||
callbackArray[i].callback();
|
callbackArray[i].callback();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -738,28 +738,28 @@ function onDocumentChange(state) {
|
|||||||
* @return {boolean|integer} Unique identifier for the callback or boolean indicating success or failure
|
* @return {boolean|integer} Unique identifier for the callback or boolean indicating success or failure
|
||||||
*/
|
*/
|
||||||
function visibilityApi(options) {
|
function visibilityApi(options) {
|
||||||
var action = options.action || '';
|
var action = options.action || '';
|
||||||
var state = options.state || '';
|
var state = options.state || '';
|
||||||
var ret = void 0;
|
var ret = void 0;
|
||||||
|
|
||||||
// Type and value checking
|
// Type and value checking
|
||||||
if (!(0, _array.arrayContains)(ACTIONS, action)) {
|
if (!(0, _array.arrayContains)(ACTIONS, action)) {
|
||||||
console.warn('Action does not exist');
|
console.warn('Action does not exist');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
if (!(0, _array.arrayContains)(STATES, state)) {
|
if (!(0, _array.arrayContains)(STATES, state)) {
|
||||||
console.warn('State does not exist');
|
console.warn('State does not exist');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// @todo Magic call function pls
|
// @todo Magic call function pls
|
||||||
if (action === 'addCallback') {
|
if (action === 'addCallback') {
|
||||||
ret = addCallback(state, options);
|
ret = addCallback(state, options);
|
||||||
} else if (action === 'removeCallback') {
|
} else if (action === 'removeCallback') {
|
||||||
ret = removeCallback(state, options);
|
ret = removeCallback(state, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
return ret;
|
return ret;
|
||||||
}
|
}
|
||||||
|
|
||||||
exports.visibilityApi = visibilityApi;
|
exports.visibilityApi = visibilityApi;
|
||||||
|
|||||||
@@ -1,30 +1,29 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<!--[if lte IE 9]> <html lang="fr" class="ie9"> <![endif]-->
|
<!--[if lte IE 9]> <html lang="fr" class="ie9"> <![endif]-->
|
||||||
<!--[if gt IE 9]><!--> <html lang="fr"> <!--<![endif]-->
|
<!--[if gt IE 9]><!--> <html lang="fr"> <!--<![endif]-->
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="theme-color" content="#f2f2f2">
|
<meta name="theme-color" content="#f2f2f2">
|
||||||
<title>Boilerplate</title>
|
<title>Boilerplate</title>
|
||||||
|
|
||||||
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
|
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
|
||||||
<link rel="icon" href="assets/images/favicon.png">
|
<link rel="icon" href="assets/images/favicon.png">
|
||||||
|
|
||||||
<link rel="stylesheet" href="assets/styles/main.css">
|
<link rel="stylesheet" href="assets/styles/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div data-module="Title">
|
||||||
|
<h1 class="js-label">Locomotive's Boilerplate</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div data-module="Title">
|
<button data-module="Button" type="button" value="Clicked! Title destroyed">Change value and destroy Title()</button>
|
||||||
<h1 class="js-label">Locomotive boilerplate</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button data-module="Button" type="button" value="Clicked! Title destroyed">Change value and destroy Title()</button>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
|
||||||
|
<script>window.jQuery || document.write('<script src="assets/scripts/jquery-3.0.0.min.js"><\/script>')</script>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
|
<script src="assets/scripts/vendors.js"></script>
|
||||||
<script>window.jQuery || document.write('<script src="assets/scripts/jquery-3.0.0.min.js"><\/script>')</script>
|
<script src="assets/scripts/app.js"></script>
|
||||||
<script src="assets/scripts/vendors.js"></script>
|
</body>
|
||||||
<script src="assets/scripts/app.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user