Feature debug

README.MD

@@ -148,6 +148,10 @@ Avalanche includes a media query mixin that makes use of the breakpoint aliases
  }
 }
 ```
+## Debug
+
+**`$av-enable-debug`** 
+Enable debug mode to view the current breakpoint in the bottom right corner of your browser.
 
 ## Browser support
 

_avalanche.scss

@@ -46,6 +46,7 @@ $av-enable-grid-large: false !default;
 $av-enable-grid-huge: false !default;
 $av-enable-grid-auto: false !default;
 $av-enable-grid-rev: false !default;
+$av-enable-debug: false !default;
 
 /**
  * LOGIC aka THE MAGIC
@@ -326,3 +327,9 @@ $av-enable-grid-rev: false !default;
  }
  }
 }
+
+/**
+ * DEBUG
+ */
+
+@import 'debug/breakpoints';

debug/_breakpoints.scss

@@ -0,0 +1,37 @@
+// Derived vars
+$av-number-of-breakpoints: length($av-breakpoints);
+$av-breakpoint-keys : map-keys($av-breakpoints);
+$av-breakpoint-values : map-values($av-breakpoints);
+
+@import './breakpoints/helpers/string';
+@import './breakpoints/helpers/list';
+@import './breakpoints/helpers/mediaquery';
+@import './breakpoints/label';
+@import './breakpoints/mixins';
+
+@if $av-enable-debug {
+
+ // Objective: create combinations of media queries.
+ // Desired combination sequence for example of 4 queries. 
+ // More complex queries come last, because they need to overrule the simpler ones.
+ // Difficulty: 'and' and 'or' mediaqueries needs to be combined accordingly
+ // Some combinations won't make any sence, but let the browser handle this
+
+ // 1
+ // 2
+ // 3
+ // 4
+ // 1 2
+ // 1 3
+ // 1 4
+ // 2 3
+ // 2 4
+ // 3 4
+ // 1 2 3
+ // 1 2 4
+ // 1 3 4
+ // 2 3 4
+ // 1 2 3 4
+
+ @include breakpointCombinations;
+}

debug/breakpoints/_label.scss

@@ -0,0 +1,23 @@
+@if $av-enable-debug {
+ html:after {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ z-index: 100000;
+ display: block;
+ padding: 5px 5px 5px 28px;
+ width: auto;
+ height: auto;
+ border-width: 1px 0 0 1px;
+ border-style: solid;
+ border-color: #ddd;
+ background: #fbfbfb url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0Q4NTg0RkZBQTAzMTFFNjlBMDNDREMxREUzRTAzQjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0Q4NTg1MDBBQTAzMTFFNjlBMDNDREMxREUzRTAzQjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDRDg1ODRGREFBMDMxMUU2OUEwM0NEQzFERTNFMDNCNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDRDg1ODRGRUFBMDMxMUU2OUEwM0NEQzFERTNFMDNCNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu6fi+IAAAZDSURBVHja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') no-repeat;
+ background-position: 4px center;
+ background-size: 16px 16px;
+ color: #494949;
+ content: 'No breakpoints';
+ font-weight: 300;
+ font-size: 10px;
+ font-family: monospace;
+ }
+}

debug/breakpoints/_mixins.scss

@@ -0,0 +1,104 @@
+@mixin breakpointCombinations() {
+
+ // Increase media query complexity
+ @for $complexity from 1 through $av-number-of-breakpoints{
+ // Loop through all queries and create combinations for this complexity level
+ @for $index from 1 through $av-number-of-breakpoints {
+ $combination: $index;
+ @include breakpointCombinationsLoop($index, $combination, $complexity);
+ }
+ } 
+} 
+
+@mixin breakpointCombinationsLoop($index, $combination, $complexity) {
+
+ // The hard work: recursive loop to create a combination of breakpoint indexes for a given complexity
+ @if length($combination) < $complexity {
+ @if( $index < $av-number-of-breakpoints){
+ @for $next from $index + 1 through $av-number-of-breakpoints {
+ @include breakpointCombinationsLoop($next, append($combination, $next), $complexity); 
+ }
+ }
+ }
+ @else {
+ @include renderBreakpointCombinations($combination);
+ }
+}
+
+@mixin renderBreakpointCombinations($indexes) {
+
+ // Given 4 mediaqueries with and / or
+ // a , b (=> or)
+ // c , d (=> or)
+ // e and f
+ // g and h
+
+ // Desired output for...
+ // eg. queries 1 & 2
+ // => a and c , a and d, b and c, b and d
+ // 
+ // eg. queries 2 & 4
+ // => c and e and f , d and e and f
+
+ $queries: (); 
+ $outputs: ();
+
+ // Loop through all query indexes to add them to the final queries
+ @each $index in $indexes {
+
+ $query: getQuery($index);
+
+ // $queries has OR
+ @if queryHasOrCondition($queries) {
+ @if queryHasOrCondition($query) {
+ $queries: combineOrWithOr($queries, $query);
+ }
+ @else {
+ $queries: combineOrWithAnd($queries, $query);
+ }
+ }
+ // $queries has AND or is empty the first time
+ @else {
+ @if queryHasOrCondition($query) {
+ $queries: combineAndWithOr($queries, $query);
+ }
+ @else {
+ $queries: combineAndWithAnd($queries, $query);
+ }
+ }
+ }
+
+ @each $query in str-explode($queries, ',') {
+
+ $media-types: ();
+ $expressions: ();
+
+ // Strip double media types
+ $expressions-or-types: list-remove-duplicates(str-explode($query, 'and'));
+
+ @each $expression-or-type in $expressions-or-types {
+ @if queryIsMediaType($expression-or-type) {
+ $media-types: append($media-types, $expression-or-type);
+ }
+ @else {
+ $expressions: append($expressions, $expression-or-type, comma);
+ }
+ }
+
+ // Cannot have more than 1 media type in 1 query
+ @if length($media-types) < 2 {
+ $output: join($media-types, $expressions);
+ $output: list-implode($output, ' and ');
+ $outputs: append($outputs, $output, comma); 
+ }
+ }
+
+ // That's all folks
+ @if length($outputs) > 0 {
+ @media #{list-implode($outputs, ', ')} {
+ html:after {
+ content: getQueryKeys($indexes);
+ }
+ }
+ }
+}

debug/breakpoints/helpers/_list.scss

@@ -0,0 +1,34 @@
+@function list-remove-duplicates($list, $recursive: false) {
+ $result: ();
+
+ @each $item in $list {
+
+ @if not index($result, $item) {
+
+ @if length($item) > 1 and $recursive {
+ $result: append($result, remove-duplicates($item, $recursive));
+ }
+ @else {
+ $result: append($result, $item);
+ }
+ }
+ }
+
+ @return $result;
+}
+
+@function list-implode($list, $delimiter) {
+ $string: null;
+
+ @each $item in $list {
+
+ @if $string and $item {
+ $string: $string + $delimiter + $item ;
+ }
+ @else {
+ $string: $item ;
+ }
+ }
+
+ @return $string; 
+}

debug/breakpoints/helpers/_mediaquery.scss

@@ -0,0 +1,70 @@
+@function queryHasOrCondition($query) {
+ @if type-of($query) == string and str-index($query, ',') {
+ @return true;
+ }
+
+ @return false;
+}
+
+@function queryHasAndCondition($query) {
+ @return not queryHasOrCondition($query);
+}
+
+@function queryIsMediaType($query) {
+ // !! Only consider screen and print for now
+ @if( $query == screen or $query == print) {
+ @return true;
+ }
+
+ @return false;
+}
+
+@function getQuery($index) {
+ @return unquote(nth($av-breakpoint-values, $index));
+}
+
+@function getQueryKeys($indexes) {
+
+ $results: ();
+
+ @each $index in $indexes {
+ $results: append($results, nth($av-breakpoint-keys, $index), comma);
+ }
+
+ @return list-implode($results, ', ');
+}
+
+@function combineAndWithOr($and-query, $or-query) {
+
+ $return : ();
+
+ @each $or-condition in str-explode($or-query, ',') {
+ $combination: combineAndWithAnd($and-query, $or-condition);
+ $return: append($return, $combination, comma);
+ }
+
+ @return inspect($return); // render as string
+}
+
+@function combineOrWithAnd($or-query, $and-query) {
+ @return combineAndWithOr($and-query, $or-query);
+}
+
+@function combineAndWithAnd($and-query, $and-query2) {
+ $join: join($and-query, $and-query2); 
+ @return list-implode($join, ' and ');
+}
+
+@function combineOrWithOr($or-query, $or-query2) {
+
+ $return : ();
+
+ @each $or-condition in str-explode($or-query, ',') {
+ @each $or-condition2 in str-explode($or-query2, ',') {
+ $combination: combineAndWithAnd($or-condition, $or-condition2);
+ $return: append($return, $combination, comma);
+ }
+ }
+
+ @return inspect($return);
+}

debug/breakpoints/helpers/_string.scss

@@ -0,0 +1,42 @@
+@function str-explode($string, $delimiter) {
+
+ @if type-of($string) == string {
+ $list: ();
+ $sum: str-length($string);
+ $delimiter-length: str-length($delimiter);
+
+ // whitespace around delimiter
+ $string: str-replace($string, $delimiter + ' ', $delimiter);
+ $string: str-replace($string, ' ' + $delimiter , $delimiter);
+
+ @for $i from 1 through $sum {
+ $str: str-index($string, $delimiter);
+
+ @if str-length($string) >= 1 and $str == null {
+ $list: append($list, $string, comma);
+ $string: '';
+ }
+
+ @if type-of($str) == number {
+ $each: str-slice($string, 0, ($str - 1)); 
+ $list: append($list, $each, comma);
+ $string: str-slice($string, ($str + $delimiter-length), $sum);
+ }
+ }
+
+ @return $list;
+ }
+ @else {
+ @return null;
+ }
+}
+
+@function str-replace($string, $search, $replace: '') {
+ $index: str-index($string, $search);
+
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+
+ @return $string;
+}

demo/index.html

@@ -0,0 +1,11 @@
+<html>
+<head>
+<title>Avalanche Debug Demo</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <p class=help>
+ See the media queries in effect (bottom right)
+ </p>
+</body>
+</html>

demo/style.scss

@@ -0,0 +1,19 @@
+$av-enable-debug: true;
+
+@import "../_avalanche";
+
+
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+}
+
+.help {
+ padding: 10px;
+ color: #ddd;
+ text-align: center;
+ font-size: 21px;
+ font-family: sans-serif;
+}