futuro 0.9.9 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 88bfbc1f3328ee5154dc064ddfb904f9ebf4435ec7bb8d6413eaf65402652c1b
-  data.tar.gz: dfc3cb8a14cdaad18071aed49a3b9cee2b46aae6f6cfdece90a9d424342caf5c
+  metadata.gz: 5d530d37ba776df440f2c666b767c2c3b3079944e7c1472989b566132d494f7b
+  data.tar.gz: 871c66b9d5a0f0711b7cd984ce67bf6d59ddb8a1b28c1fc9cba53fd918a42900
 SHA512:
-  metadata.gz: f710a9862db4ae7662529f4c3c005790e0f9274e95ead6986d2d8cd8d33387978567b9d446f26707f2761a19028f4b22b082f28395398aa0107504c2d0ea4069
-  data.tar.gz: ecc6c7f000e1e2ae93edbce99504424c6cab9249b8b54d3a8f05d7155857f79c38af0591fc8e480c8f6907d93dec4bda4262f9e196d78befb2ec0cf86417ee85
+  metadata.gz: bf01794aec599c6fc831dfdf634a55aaf9092abd452a1b2a1617549be9c78987cb004b421f65b0ccda87ef613bb76bc2f2f4b3e2598dec937d6e1e709f3bc68b
+  data.tar.gz: d1c979756e476f0a8c602990a3961b31bfbd2c761e0253672832ad42a4ff3fa12d516dc3d0c80f1ffc1348f11e5b833936cfd7c17c12a664b7a2638cdcd6da0b

data/_includes/html/assign/site.liquid

@@ -14,6 +14,7 @@
 {% assign ContentLoop  = SiteContent | append : 'loop/' %}
 {% assign LoopArtwork  = ContentLoop | append : 'artwork/' %}
 {% assign LoopForm     = ContentLoop | append : 'form/' %}
+{% assign LoopRoller   = ContentLoop | append : 'roller/' %}
 {% assign LoopHeader   = ContentLoop | append : 'header/' %}
 {% assign LoopScreen   = ContentLoop | append : 'screen/' %}
 {% assign LoopButton   = ContentLoop | append : 'button/' %}

data/_includes/html/page/content/loop/roller/assign.liquid

@@ -0,0 +1,28 @@
+
+{% assign RollerItems = 0 %}
+
+{% assign RollerInline = false %}
+
+{% assign RollerOutput = false %}
+
+{% for item in include.loop %}
+
+  {% if item.inline %}
+
+    {% assign RollerInline = true %}
+
+  {% endif %}
+
+  {% if item.input %}
+
+    {% assign RollerItems = RollerItems | plus : 1 %}
+
+  {% endif %}
+
+  {% if item.output %}
+
+    {% assign RollerOutput = true %}
+
+  {% endif %}
+
+{% endfor %}

data/_includes/html/page/content/loop/roller/input.liquid

@@ -0,0 +1,16 @@
+
+{% for item in include.loop %}
+
+  {% if item.input %}
+
+    {% assign RollerInput = item.input | replace : ' ','-' | downcase %}
+
+    <li class="item roller input {{ RollerInput | prepend : 'title-' }}">
+
+      {{ item.input }}
+
+    </li>
+
+  {% endif %}
+  
+{% endfor %}

data/_includes/html/page/content/loop/roller/list.liquid

@@ -0,0 +1,12 @@
+
+{% assign RollerPath = include.type | append : '.liquid' %}
+
+<ul class="list roller {{ include.type }} 
+          {{ RollerType | prepend : 'style-' }} 
+          {{ PageChapter | prepend : 'chapter-' }}
+          {% if RollerInline %}{{ items | prepend : 'split-' }}{% endif %}">
+
+  {% include {{ LoopRoller | append : RollerPath }} 
+                loop = include.loop %}  
+
+</ul>

data/_includes/html/page/content/loop/roller/output.liquid

@@ -0,0 +1,20 @@
+
+{% for item in include.loop %}
+
+{% if item.input %}
+
+  {% assign RollerLabel = item.input | replace : ' ','-' | downcase %}
+
+{% endif %}
+
+{% if item.output %}
+
+  <li class="item roller output {{ RollerLabel | prepend : 'title-' }}">
+
+    {{ item.output }}
+
+  </li>
+
+{% endif %}
+
+{% endfor %}

data/_includes/html/page/content/roller.liquid

@@ -1,76 +1,17 @@
 
-{% assign items = 0 %}
-{% assign inline = false %}
-{% assign output = false %}
+{% include {{ LoopRoller | append : 'assign.liquid' }} 
+              loop = page.roller.loop %}
 
-{%- for item in page.roller -%}
+{% assign RollerType = page.roller.type %}
 
-  {%- if item.inline -%}
+{% include {{ LoopRoller | append : 'list.liquid' }}
+              loop = page.roller.loop
+              type = "input" %}
 
-    {% assign inline = true %}
+{% if RollerType == "default" %}
 
-  {%- endif -%}
-
-  {%- if item.input -%}
-
-    {% assign items = items | plus : 1 %}
-
-  {%- endif -%}
-
-  {%- if item.output -%}
-
-    {% assign output = true %}
-
-  {%- endif -%}
-
-{%- endfor -%}
-
-<ul class="list roller input {{ PageChapter | prepend : 'chapter-' }}
-          {% if inline %}{{ items | prepend : 'split-' }}{% endif %}">
-
-  {%- for item in page.roller -%}
-
-    {%- if item.input -%}
-
-    {% assign label = item.input | replace : ' ','-' | downcase %}
-
-      <li class="item roller input {{ label | prepend : 'title-' }}">
-
-        {{ item.input }}
-
-      </li>
-
-    {%- endif -%}
-
-  {%- endfor -%}
-
-</ul>
-
-{%- if output -%}
-
-  <ul class="list roller output {{ PageChapter | prepend : 'chapter-' }}
-            {% if inline %}{{ items | prepend : 'split-' }}{% endif %}">
-
-    {%- for item in page.roller -%}
-
-      {%- if item.input -%}
-
-        {% assign label = item.input | replace : ' ','-' | downcase %}
-
-      {%- endif -%}
-
-      {%- if item.output -%}
-
-        <li class="item roller output {{ label | prepend : 'title-' }}">
-
-          {{ item.output }}
-
-        </li>
-
-      {%- endif -%}
-
-    {%- endfor -%}
-
-  </ul>
-
-{%- endif -%}
+  {% include {{ LoopRoller | append : 'list.liquid' }} 
+                loop = page.roller.loop
+                type = "output" %}
+  
+{% endif %}

data/_includes/html/search/loop.liquid

@@ -7,10 +7,11 @@
   {% assign shorturl = item.url | replace : '.html','' %}
   {% assign longurl  = longurl  | replace : '/index','' %}
   {% assign shorturl = shorturl | replace : '/index','' %}
+  {% assign chapter  = item.chapter | replace : ' ','-' | downcase %}
 
   {
     "book"     : "{{ item.collection }}",
-    "chapter"  : "{{ item.chapter }}",
+    "chapter"  : "{{ chapter }}",
     "title"    : "{{ item.title }}",
     "shorturl" : "{{ shorturl }}",
     "longurl"  : "{{ longurl }}"

data/_sass/helpers/mixins/theme.scss

@@ -9,13 +9,16 @@
   color: setcolor($custom,dark);
 }
 
+// Used in Mindsets
 @mixin ThemeMorph($name,$color) {
-
+  // find output path by dynamic class name
   svg#morph path#output.#{$name} {
+    // set associated color for this class
     stroke: $color;
   }
 }
 
+// Used in Patterns
 @mixin ThemeArtformHeader($name) {
 
   .block.header.title-artform.tag-#{$name} {
@@ -40,6 +43,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeHeader($name,$col) {
 
   .block.header.title-#{$name} {
@@ -64,6 +68,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeCheckbox($name,$col) {
   .area.title-#{$name} {
 
@@ -75,6 +80,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeRadio($name,$col) {
   .area.title-#{$name} {
 
@@ -93,6 +99,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeTextArea($name,$col) {
   .area.title-#{$name} {
 
@@ -112,6 +119,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeSelect($name,$col) {
   .area.title-#{$name} {
 
@@ -127,6 +135,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeList($name,$col) {
   .area.title-#{$name} {
 
@@ -150,6 +159,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeText($name,$col) {
   .area.title-#{$name} {
 
@@ -168,6 +178,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemePassword($name,$col) {
   .area.title-#{$name} {
     .block.password-strength {
@@ -179,6 +190,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeMessage($name,$col) {
   .area.title-#{$name} {
     .block.message {
@@ -187,6 +199,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeCallout($name,$col) {
   .area.title-#{$name} {
     .block.title {
@@ -196,6 +209,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeAlert($name,$col) {
   .area.title-#{$name} {
     .block.form-alert {
@@ -206,6 +220,7 @@
   }
 }
 
+// Used in Patterns
 @mixin ThemeButton($name,$color) {
 
   .area.title-#{$name} {
@@ -220,6 +235,7 @@
   }
 }
 
+// Used globally
 @mixin ThemeHome($name,$color){
   // inherit theme color for the book cover
   .link.book.#{$name} {
@@ -227,6 +243,7 @@
   }
 }
 
+// Used globally
 @mixin ThemeTopbar($name,$color) {
   // inherit theme color for the topbar link
   .link.navigation.#{$name} {
@@ -238,6 +255,7 @@
   }  
 }
 
+// Used globally
 @mixin ThemeCover($name,$color,$left:false,$chapter:false) {
 
   @if $chapter {
@@ -263,6 +281,7 @@
   }
 }
 
+// Used globally
 @mixin PageInfo($col,$right) {
 
   .title.page-weight {
@@ -277,17 +296,20 @@
   }
 }
 
+// Used in Mindsets
 @mixin ThemeRollerInput($name,$col) {
   background-color: rgba($col,10%);
   color: $col;
 }
 
+// Used in Mindsets
 @mixin ThemeRollerOutput($name,$col) {
   background-color: rgba($col,10%);
   border-color: rgba($col,20%);
   color: $col;
 }
 
+// Used in Mindsets
 @mixin ThemeRoller($name,$col,$chapter:false) {
 
   @if $chapter {
@@ -325,6 +347,7 @@
   }
 }
 
+// Used in Mindsets
 @mixin ThemeChart($col) {
   .block.chart-pcent-title {
     color: $col;
@@ -335,6 +358,7 @@
   }
 }
 
+// Used in Mindsets
 @mixin ThemePages($name,$col,$right:false,$chapter:false) {
 
   @if $chapter {
@@ -384,20 +408,20 @@
   }
 }
 
-@mixin ThemePies($name,$col) {
-  &.#{$name} {
-    color: $col;
-
-    .chunk.#{$name} {
-      opacity: 1;
+// Used in Mindsets
+@mixin ThemeSnap($name,$color) {
+  svg.snap {
+    path.#{$name} {
+      fill: #{$color};
     }
   }
 }
 
+// Used everywhere
 @mixin ThemeSearch($name,$col,$chapter:false) {
 
   @if $chapter {
-
+ 
     // Search Results
 
     .block.results-entry.chapter-#{$name} {

data/_sass/item/pie.scss

@@ -1,15 +1,24 @@
 
-.item.pie {
+%ItemPie {
   text-align: center;
   display: grid;
 }
 
+%ItemPieSnap {
+  @extend %ItemPie;
+  grid-row-gap: 15px;
+  font-size: 2.4rem;
+}
+
+.item.pie {
+  @extend %ItemPie;
+}
+
 .item.pie.style-spin {
   grid-row-gap: 30px;
   font-size: 2.8rem;
 }
 
 .item.pie.style-snap {
-  grid-row-gap: 15px;
-  font-size: 2.4rem;
+  @extend %ItemPieSnap;
 }

data/_sass/list/pie.scss

@@ -1,5 +1,5 @@
 
-.list.pies {
+%ListPies {
   @include Grid(3);
   @extend %bold;
   list-style: none;
@@ -9,4 +9,8 @@
   svg {
     margin: 0 auto;
   }
+}
+
+.list.pies {
+  @extend %ListPies;
 }

data/_sass/list/roller.scss

@@ -14,4 +14,8 @@
 .list.roller.input {
   @extend %bold;
   grid-template-columns: repeat(2,1fr);
+}
+
+.list.roller.output.style-snap {
+  @extend %ListPies; 
 }

data/assets/js/footer/custom/1_Settings.js

@@ -12,4 +12,16 @@ if ($("body").hasClass("type-home")) {
 
 if (!Site.isTheme) {
   Browse.able = $(".wrap.type-page").length;
-}
+} 
+
+const HandleClass = (e,state,name="active") => {
+  $(e).map((index,value) => {
+    if (state == "add") {
+      $(value).addClass(name);
+    } else if (state == "remove") {
+      $(value).removeClass(name);
+    } else if (state == "clear") {
+      $(value).removeClass();
+    }
+  });
+}

data/assets/js/footer/custom/4_Roller.default.js

@@ -0,0 +1,73 @@
+
+Roller.default.over = (tl, input, value, output, index) => {
+
+  tl.pause();
+
+  input.map((index,value) => {
+
+    if ($(value).hasClass("active")) {
+
+      Save.input = value;
+      Save.index = index;
+      
+      HandleClass([value,output[index]],'remove');
+
+    }
+
+  });
+
+  HandleClass([value,output[index]],'add');
+
+}
+
+Roller.default.out = (tl, input, output) => {
+
+  input.map((index,value) => {
+
+    if ($(value).hasClass("active")) {
+
+      HandleClass([value,output[index]],'remove');
+
+    }
+
+  });
+
+  HandleClass([Save.input,output[Save.index]],'add');
+
+  tl.play();
+
+}
+
+Roller.default.tl = (input, output) => {
+
+  let tl = gsap.timeline({ repeat : -1 });
+
+  input.map((index,value) => {
+
+    let live = "";
+
+    $(value.classList).map((index,value) => {
+  
+      if (value.startsWith("title-")) { live = value.slice(6); }
+  
+    });
+  
+    tl
+    .call(HandleClass,[value,'add'])
+    .call(HandleClass,[output[index],'add'])
+    .call(HandleClass,[value,'remove'],"+=1")
+    .call(HandleClass,[output[index],'remove']);    
+  
+    $(value).hover(function(){
+  
+      Roller.default.over(tl, input, value, output, index);
+  
+    }, function() {
+  
+      Roller.default.out(tl, input, output);     
+  
+    });
+
+  });
+
+}

data/assets/js/footer/custom/4_Roller.morph.js

@@ -0,0 +1,115 @@
+
+
+Roller.morph.over = (tl, input, value, output, index, data, live) => {
+
+  tl.pause();
+
+  input.map((index,value)=>{
+
+    if ($(value).hasClass("active")) {
+
+      Save.input = value;
+      Save.index = index;
+  
+      HandleClass(value,'remove');
+  
+    }
+
+  });
+
+  HandleClass(output,'clear');
+
+  $(value.classList).map((index,value) => {
+  
+    if (value.startsWith("title-")) { live = value.slice(6); }
+
+  });
+
+  data = `path#${live}`;
+  
+  gsap.to(output,{
+    morphSVG : data,
+    duration : 0.3
+  });
+
+  HandleClass(value,'add');
+
+  HandleClass(output,'add',live);
+
+}
+
+Roller.morph.out = (tl, input, output, live, data) => {
+
+  input.map((index,value) => {
+
+    if ($(value).hasClass("active")) {
+  
+      HandleClass(value,'remove');
+  
+    }
+
+  });
+
+  HandleClass(output,'clear');
+  
+  $(Save.input.classList).map((index,value) => {
+  
+    if (value.startsWith("title-")) { live = value.slice(6); }
+
+  });
+
+  data = `path#${live}`;
+  
+  gsap.to(output,{
+    morphSVG : data,
+    duration : 0.3
+  });
+
+  HandleClass(Save.input,'add');
+
+  HandleClass(output,'add',live);
+
+  tl.play();
+
+}
+
+Roller.morph.tl = (input, output) => {
+
+  let tl = gsap.timeline({ repeat : -1 }),
+      live = "",
+      data = "";
+  
+  input.map((index,value) => {
+
+    $(value.classList).map((index,value) => {
+  
+      if (value.startsWith("title-")) { live = value.slice(6); }
+  
+    });
+  
+    data = `path#${live}`;
+    
+    tl
+    .call(HandleClass,[value,'add'])
+    .call(HandleClass,[output,'add',live])
+    .to(output,{
+      morphSVG : data,
+      duration : 0.3
+    })
+    .call(HandleClass,[value,'remove'],"+=1")
+    .call(HandleClass,[output,'remove',live])
+    ;   
+  
+    $(value).hover(function(){
+  
+      Roller.morph.over(tl, input, value, output, index, data, live);
+  
+    }, function() {
+  
+      Roller.morph.out(tl, input, output);     
+  
+    });         
+
+  });
+
+}