Font Loading Strategy (#43)

* Font Loading Strategy

* default the loaded fonts (in case we load multiple instances)
check for “not true” instead of “false” (default or un-instanced states can be true, false, null, default or a string). I specifically want to check for the absence of a “true” boolean setting)
add a case for when we are passing this mixin a straight string or variable.

Separate internal functions into stand-alone files (shea, we may need some discussion if a component contains variables, strings and functions, maybe we can instance this inside a parent folder that has it’s own structure?

flatten out the list

Gruntfile.js

@@ -36,7 +36,7 @@ module.exports = function(grunt) {
         sourceMap: true,
         // This controls the compiled css and can be changed to nested, compact or compressed.
         outputStyle: 'expanded',
-        precision: 10
+        precision: 10,
       },
       dist: {
         files: {

core/base/_fonts.scss

@@ -5,19 +5,13 @@
 /// @group base
 ////
 
-// @import '../utilities/settings/settings';
+/// Default fonts
+///
+$decanter-default-fonts: (
+  mono:   $monospace-source,
+  sans:   $sans-serif-source,
+  serif:  $serif-source,
+) !default;
 
-/// Import declared monospace font
-@if(global-variable-exists(monospace-source)) {
-  @import url($monospace-source);
-}
-
-/// Import declared Sans Serif font
-@if(global-variable-exists(sans-serif-source)) {
-  @import url($sans-serif-source);
-}
-
-/// Import declared Serif font
-@if(global-variable-exists(serif-source)) {
-  @import url($serif-source);
-}
+//// Load the font-face declarations.
+@include load-fonts($decanter-default-fonts);

core/utilities/functions/_decanter-functions.scss

@@ -5,7 +5,8 @@
 ////
 
 @import
-  'color',
-  'unitconversion',
-'layout/set-container-padding',
-'layout/adjust-container-margin';
+'color'
+, 'unitconversion'
+, 'font/log-loaded-font'
+, 'layout/set-container-padding'
+, 'layout/adjust-container-margin';

core/utilities/functions/fonts/_check-loaded-font.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+/// @access private
+/// Checks the global variable for loaded fonts
+@function _check-loaded-font($url) {
+  $_value: index($loaded-fonts, $url);
+  @if type-of($_value) == number {
+    @return true;
+  }
+  @return false;
+}

core/utilities/functions/fonts/_log-loaded-font.scss

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+/// @access private
+/// Internal function to keep track of loaded fonts
+/// so we don't duplicate calls.
+@function _log-loaded-font($url) {
+  $loaded-fonts: append($loaded-fonts, $url, comma) !global;
+  @return true;
+}

core/utilities/mixins/_decanter-mixins.scss

@@ -20,4 +20,5 @@
 , 'material-shadow'
 , 'font-size'
 , 'on-event'
+, 'load-fonts'
 ;

core/utilities/mixins/_load-fonts.scss

@@ -0,0 +1,66 @@
+@charset 'UTF-8';
+
+////
+/// Font loading function.
+/// @group functions
+////
+
+/// Global default fonts.
+$fonts: () !default;
+
+/// Keeps track of already loaded fonts.
+$loaded-fonts: () !default;
+
+/// Load a collection of @font-face fonts
+///
+@mixin load-fonts($load: $fonts) {
+
+  // String
+  @if type-of($load) == string {
+    // Cast the item to a string to be sure we don't pass
+    // strange variables to the loader.
+    $_item_string: '#{$load}';
+    @if (_is-loaded_font($_item_string) != true) {
+      $_tmp: _log-loaded-font($_item_string);
+      $_item_string: quote($_item_string);
+      @import url($_item_string);
+    }
+    @else {
+      @debug "Font: #{$_item_string} already loaded.";
+    }
+    // List
+  } @else if type-of($load) == list {
+    // Loop through each item in the passed in list.
+    @each $_item in $load {
+      // Cast the item to a string to be sure we don't pass
+      // strange variables to the loader.
+      $_item_string: '#{$_item}';
+      @if (_is-loaded_font($_item_string) != true) {
+        $_tmp: _log-loaded-font($_item_string);
+        $_item_string: quote($_item_string);
+        @import url($_item_string);
+      }
+      @else {
+        @debug "Font: #{$_item_string} already loaded.";
+      }
+    }
+    // Map
+  } @else if type-of($load) == map {
+    // Loop through each item in the passed in map.
+    @each $_index, $_item in $load {
+      @each $_font in $_item {
+        // Cast the item to a string to be sure we don't pass
+        // strange variables to the loader.
+        $_item_string: '#{$_font}';
+        @if (_is-loaded_font($_item_string) != true) {
+          $_tmp: _log-loaded-font($_item_string);
+          $_item_string: quote($_item_string);
+          @import url($_item_string);
+        }
+        @else {
+          @debug "Font: #{$_item_string} already loaded.";
+        }
+      }
+    }
+  }
+}