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