rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/home-donut-chart.liquid

@@ -0,0 +1,335 @@
+{% assign full = section.settings.full %}
+{% assign margin = section.settings.margin | split: ',' %}
+{% assign top = margin[0] %}
+{% assign bottom = margin[1] %}
+
+{% if section.settings.show_portfolio_parallax_section %}
+<div class="donutchart-inner" style="float:left;width:100%;margin-top:{{top}}px; margin-bottom:{{bottom}}px;">
+  <!--container starts-->
+  <div class="{% if section.settings.full %} container-bg {% else %}container{% endif %}"> 
+    <!--main-title starts-->
+    <div class="parallax">
+      {% if section.settings.heading != blank or section.settings.sub_heading != blank   %}  
+      <div class="section-header section-header--small full-position-{{section.settings.heading_position}}">
+        <div class="border-title wow fadeInDown animated">          
+          {% if section.settings.heading != blank  %}  
+          <h2 class="" style="color:{{ section.settings.heading_clr }}">{{ section.settings.heading }}</h2>
+          {% endif %}
+          {% if section.settings.sub_heading != blank  %}  
+          <div class="small-desc">
+            <p style="color:{{ section.settings.sub_heading_clr }}">{{ section.settings.sub_heading }}</p>
+          </div>  
+          {% endif %}
+        </div>
+      </div>
+      {% endif %}
+
+      <!--main-title ends-->
+      <div class="grid-uniform">
+        {% if section.settings.show_1_donutchartbar %}
+        <!--column one-fourth starts-->
+        <div class="grid__item wide--one-quarter post-large--one-quarter large--one-half medium--one-half">
+          <!--donutchart-medium starts-->
+          <div class="dt-sc-donutchart-medium">
+            <!--donutchart starts-->
+            {% if section.settings.chart_1_percentage != blank %}
+            <div class="dt-sc-donutchart1" data-percent="{{ section.settings.chart_1_percentage }}" ></div>
+            {% endif %}
+            <!--donutchart ends-->
+            {% if section.settings.chart_1__title != blank %}
+            <h6 class="dt-sc-donutchart-title orange">{{ section.settings.chart_1__title }}</h6>
+            {% endif %}
+          </div>
+          <!--donutchart-medium ends-->
+        </div>                        
+        <!--column one-fourth ends-->
+        {% endif %}
+        {% if section.settings.show_2_donutchartbar %}
+        <!--column one-fourth starts-->
+        <div class="grid__item wide--one-quarter post-large--one-quarter large--one-half medium--one-half">
+          <!--donutchart-medium starts-->
+          <div class="dt-sc-donutchart-medium">
+            <!--donutchart starts-->
+            {% if section.settings.chart_2_percentage != blank %}
+            <div class="dt-sc-donutchart2" data-percent="{{ section.settings.chart_2_percentage }}"></div>
+            {% endif %}
+            <!--donutchart ends-->
+            {% if section.settings.chart_2__title != blank %}
+            <h6 class="dt-sc-donutchart-title blue">{{ section.settings.chart_2__title }}</h6>
+            {% endif %}
+          </div>
+          <!--donutchart-medium ends-->
+        </div>                        
+        <!--column one-fourth ends-->
+        {% endif %}
+        {% if section.settings.show_3_donutchartbar %}
+        <!--column one-fourth starts-->
+        <div class="grid__item wide--one-quarter post-large--one-quarter large--one-half medium--one-half">
+          <!--donutchart-medium starts-->
+          <div class="dt-sc-donutchart-medium">
+            <!--donutchart starts-->
+            {% if section.settings.chart_3_percentage != blank %}
+            <div class="dt-sc-donutchart3" data-percent="{{ section.settings.chart_3_percentage }}" ></div>
+            {% endif %}
+            <!--donutchart ends-->
+            {% if section.settings.chart_3__title != blank %}
+            <h6 class="dt-sc-donutchart-title light-green"> {{ section.settings.chart_3__title }}</h6>
+            {% endif %}
+          </div>
+          <!--donutchart-medium ends-->
+        </div>                        
+        <!--column one-fourth ends-->
+        {% endif %}
+
+        {% if section.settings.show_4_donutchartbar %}
+        <!--column one-fourth starts-->
+        <div class="grid__item wide--one-quarter post-large--one-quarter large--one-half medium--one-half">
+          <!--donutchart-medium starts-->
+          <div class="dt-sc-donutchart-medium">
+            <!--donutchart starts-->
+            {% if section.settings.chart_4_percentage != blank %}
+            <div class="dt-sc-donutchart4" data-percent="{{ section.settings.chart_4_percentage }}" ></div>
+            {% endif %}
+            <!--donutchart ends-->
+            {% if section.settings.chart_4__title != blank %}
+            <h6 class="dt-sc-donutchart-title yellow">{{ section.settings.chart_4__title }}</h6>
+            {% endif %}
+          </div>
+          <!--donutchart-medium ends-->
+        </div>                        
+        <!--column one-fourth ends-->
+        {% endif %}
+      </div>
+      <!--container ends-->
+    </div>
+  </div>
+</div>
+{% endif %}  
+
+<style>
+  {% if section.settings.full-width-brilliance %}
+  .home-donutchart-bar { background:url({{ section.settings.full-width-brilliance | img_url: 'master' }}) repeat-y 50% 0 fixed; }
+  {% else %}
+  .home-donutchart-bar { background-color:{{ section.settings.brilliance_bg_color }}; }
+  {% endif %}
+  .home-donutchart-bar .dt-sc-donutchart1 div span , .home-donutchart-bar .dt-sc-donutchart1 .dt-sc-donutchart-title{color:{{section.settings.chart_1__title_clr}};}
+  .home-donutchart-bar .dt-sc-donutchart2 div span ,.home-donutchart-bar .dt-sc-donutchart2 .dt-sc-donutchart-title{color:{{section.settings.chart_2__title_clr}};}
+  .home-donutchart-bar .dt-sc-donutchart3 div span , .home-donutchart-bar .dt-sc-donutchart3 .dt-sc-donutchart-title{color:{{section.settings.chart_3__title_clr}};}
+  .home-donutchart-bar .dt-sc-donutchart4 div span , .home-donutchart-bar .dt-sc-donutchart4 .dt-sc-donutchart-title{color:{{section.settings.chart_4__title_clr}};}
+  .home-donutchart-bar h6.orange{color:{{section.settings.chart_1__title_clr}};}
+  .home-donutchart-bar h6.blue{color:{{section.settings.chart_2__title_clr}};}
+  .home-donutchart-bar h6.light-green{color:{{section.settings.chart_3__title_clr}};}
+  .home-donutchart-bar h6.yellow{color:{{section.settings.chart_4__title_clr}};}
+</style>
+
+{% schema %}
+{
+"name": "Donutchart Bar",
+"class": "index-section home-donutchart-bar",
+"settings": [
+{
+"type": "checkbox",
+"id": "full",
+"label": "Show Full width"
+},
+{
+"type": "text",
+"id": "margin",
+"label": "Style value (Margin)",
+"default":"0,0",
+"info":"Top(px),Bottom(px)"
+},
+{
+"type": "text",
+"id": "heading",
+"label": "Heading",
+"default":"Our Services"
+},
+{
+"type": "color",
+"id": "heading_clr",
+"label": "Heading color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "sub_heading",
+"label": "Sub Heading"
+},
+{
+"type": "color",
+"id": "sub_heading_clr",
+"label": "Sub Heading color",
+"default": "#000"
+},
+{
+"type": "select",
+"id": "heading_position",
+"label": "Heading Position",
+"options": [
+{
+"value": "default",
+"label": "Full center"
+},
+{
+"value": "full-left",
+"label": "Full left"
+},
+{
+"value": "full-right",
+"label": "Full right"
+}
+]
+},
+{
+"type": "header",
+"content": "Portfolio Parallax Section"
+},
+{
+"type": "checkbox",
+"id": "show_portfolio_parallax_section",
+"label": "Show Portfolio Parallax Section",
+"default": true
+},
+{
+"type": "checkbox",
+"id": "use_brilliance_bg_image",
+"label": "Use Brilliance Bg Image?"
+},
+{
+"type": "image_picker",
+"id": "full-width-brilliance",
+"label": "Brilliance BG Image"
+},
+{
+"type": "color",
+"id": "brilliance_bg_color",
+"label": "Brilliance BG color",
+"default": "#d2d2d2"
+},
+{
+"type": "checkbox",
+"id": "show_1_donutchartbar",
+"label": "Show donutchartbar"
+},
+{
+"type": "text",
+"id": "chart_1_percentage",
+"label": "Chart1 Percentage"
+},
+
+{
+"type": "text",
+"id": "chart_1__title",
+"label": "Chart 1 Title"
+},
+{
+"type": "color",
+"id": "chart_1__title_clr",
+"label": "chart title color",
+"default": "#d2d2d2"
+},
+{
+"type": "checkbox",
+"id": "show_2_donutchartbar",
+"label": "Show donutchartbar"
+},
+{
+"type": "text",
+"id": "chart_2_percentage",
+"label": "Chart2 Percentage"
+},
+
+{
+"type": "text",
+"id": "chart_2__title",
+"label": "Chart 2 Title"
+},
+{
+"type": "color",
+"id": "chart_2__title_clr",
+"label": "chart title color",
+"default": "#d2d2d2"
+},
+{
+"type": "checkbox",
+"id": "show_3_donutchartbar",
+"label": "Show donutchartbar"
+},
+{
+"type": "text",
+"id": "chart_3_percentage",
+"label": "Chart3 Percentage"
+},
+
+
+{
+"type": "text",
+"id": "chart_3__title",
+"label": "Chart 3 Title"
+},
+{
+"type": "color",
+"id": "chart_3__title_clr",
+"label": "chart title color",
+"default": "#d2d2d2"
+},
+{
+"type": "checkbox",
+"id": "show_4_donutchartbar",
+"label": "Show donutchartbar"
+},
+{
+"type": "text",
+"id": "chart_4_percentage",
+"label": "Chart4 Percentage"
+},
+
+{
+"type": "text",
+"id": "chart_4__title",
+"label": "Chart 4 Title"
+},
+{
+"type": "color",
+"id": "chart_4__title_clr",
+"label": "chart title color",
+"default": "#d2d2d2"
+}
+],
+"presets": [
+{
+"name": "Donutchart Bar",
+"category": "Chart",
+"blocks": []
+}
+]
+}
+{% endschema %}
+
+{% stylesheet %}
+{% endstylesheet %}
+
+{% javascript %}
+
+jQuery(document).ready(function($){  
+
+/* Donut Chart */
+$('.dt-sc-donutchart1').one('inview', function (event, visible){
+if (visible == true) {
+$(".dt-sc-donutchart1").donutchart({'fgColor': '#fe6b35', 'bgColor': '#f5f5f5', 'textsize': 38 });
+$(".dt-sc-donutchart1").donutchart("animate");
+
+$(".dt-sc-donutchart2").donutchart({'fgColor': '#665de5', 'bgColor': '#f5f5f5', 'textsize': 38 });
+$(".dt-sc-donutchart2").donutchart("animate");
+
+$(".dt-sc-donutchart3").donutchart({'fgColor': '#36a6a0', 'bgColor': '#f5f5f5', 'textsize': 38 });
+$(".dt-sc-donutchart3").donutchart("animate");
+$(".dt-sc-donutchart4").donutchart({'fgColor': '#f4d30f', 'bgColor': '#f5f5f5', 'textsize': 38 });
+$(".dt-sc-donutchart4").donutchart("animate");
+
+}
+});
+
+});
+{% endjavascript %}

package/assets/data/component-library/home-fade-in-banner.liquid

@@ -0,0 +1,277 @@
+<div data-section-id="{{ section.id }}"  data-section-type="triangle-icon-block-4" class="triangle-icon-block-4" style="{% if section.settings.bg_image != blank %}background-image:url('{{ section.settings.bg_image | img_url: '1920X' }}');background-repeat:no-repeat;background-position:top center; {% else %}background-color:{{section.settings.bg_color}}{% endif%}">
+  <div class="grid-uniform">      
+    <div class="triangle-icon-wrapper">   
+      <div class="container-bg">
+        <div class="grid__item wow fadeInUp animated">          
+          <div id="triangle-{{ section.id }}-slider">
+            {% for block in section.blocks %}
+            <div class="grid__item">
+              <div class="grid__item wide--one-half post-large--one-half large--one-half medium--grid__item small-grid__item">
+                <div class="icon_wrapper icon-right">
+                  <div class="icon-content icon-content--{{ block.id }}">
+                    {% if block.settings.title != blank  %}  
+                    <h2>{{ block.settings.title }}</h2>
+                    {% endif %} 
+                    {% if block.settings.sub_title != blank  %}  
+                    <h3>{{ block.settings.sub_title }}</h3>
+                    {% endif %} 
+                    {% if block.settings.text != blank  %}  
+                    <p class="desc" style="">{{ block.settings.text }}</p>
+                    {% endif %} 
+                    {% if block.settings.url != blank  %}  
+                    <a href="{{ block.settings.url}}" class="btn">{{ block.settings.button }}</a>
+                    {% endif %} 
+                  </div>                
+                </div>
+              </div>
+              <div class="grid__item grid__item wide--one-half post-large--one-half large--one-half medium--grid__item small-grid__item">
+                <div class="icon">
+                  {% if block.settings.large != blank  %}
+                  <img src="{{ block.settings.large | img_url: '1000x' }}" alt="{{ block.settings.title }}" />
+                  {% else %}
+                  <img src="//via.placeholder.com/580x980">
+                  {% endif %} 
+                </div>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+          <ul id="triangle-{{ section.id }}-nav" class="slider-nav">
+            {% for block in section.blocks %}
+            <li class="center-block">
+              0{{ forloop.index }}
+            </li>
+            {% endfor %}
+          </ul>
+        </div>  
+        <ul class="home-social-media">
+          {% if section.settings.social_media1 != blank  %}
+          <li><a href="{{ section.settings.social_media1_url }}">{{ section.settings.social_media1 }}</a></li>
+          {% endif %}
+          {% if section.settings.social_media2 != blank  %}
+          <li><a href="{{ section.settings.social_media2_url }}">{{ section.settings.social_media2 }}</a></li>
+          {% endif %}
+          {% if section.settings.social_media3 != blank  %}
+          <li><a href="{{ section.settings.social_media3_url }}">{{ section.settings.social_media3 }}</a></li>
+          {% endif %}
+        </ul>
+      </div>    
+    </div>
+  </div>  
+</div> 
+
+<style>
+  {% for block in section.blocks %}
+  
+  .triangle-icon-block-4 .icon-content--{{ block.id }} h2 { color:{{ section.settings.title_clr }};}
+  .triangle-icon-block-4 .icon-content--{{ block.id }} h3 { color:{{ section.settings.sub_title_clr }};}
+  .triangle-icon-block-4 .icon-content--{{ block.id }} p { color:{{ section.settings.desc_clr }};}
+  .triangle-icon-block-4 .slick-current .icon-content--{{ block.id }} p { color:{{ section.settings.active_desc }};}
+  .triangle-icon-block-4 .icon-content--{{ block.id }} .btn {  background:{{ section.settings.btn_bg_color }};color:{{ section.settings.btn_txt_color }}; }
+  .triangle-icon-block-4 .icon-content--{{ block.id }}.btn:hover { background:{{ section.settings.btn_hoverbg_color }};color:{{ section.settings.btn_hovertxt_color }}; }
+
+  {% endfor %}
+
+  .triangle-icon-block-4 .icon i{color:{{section.settings.icon_clr}};}
+
+  @media (min-width: 767px) {
+
+    #triangle-{{ section.id }}-nav .grid__item { width:100% !important;}
+  }
+</style>
+
+
+<script>  
+  $(document).on('ready', function() {
+    $('#triangle-{{ section.id }}-slider').slick({
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      arrows: true,
+      fade: true,
+      asNavFor: '#triangle-{{ section.id }}-nav',
+      autoplay:false,
+      autoplaySpeed:1500      
+      });
+    $('#triangle-{{ section.id }}-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '#triangle-{{ section.id }}-slider',
+      dots: false,
+      focusOnSelect: true,
+      autoplay:false,
+      arrows: false,
+      autoplaySpeed:1500
+      });
+  })
+</script>
+
+
+
+
+
+{% schema %}
+{
+"name": "Slider",
+"class": "index-section",  
+"max_blocks": 3,
+"settings": [  
+{
+"type": "color",
+"id": "bg_color",
+"label":"Background Color",
+"default": "#000"
+},
+{
+  "type": "image_picker",
+  "id": "bg_image",
+  "label": "Image",
+  "info": "Size: 1920x1021"
+  },
+
+
+{
+"type": "color",
+"id": "title_clr",
+"label": "Title",
+"default": "#3C3664"   
+},
+{
+"type": "color",
+"id": "sub_title_clr",
+"label": "Sub Title",
+"default": "#421692"   
+},
+{
+"type": "color",
+"id": "desc_clr",
+"label": "Description",
+"default": "#3e3564"   
+},
+{
+"type": "color",
+"id": "btn_bg_color",
+"label": "Button Bg Color",
+"default": "#ae30eb",
+"info": "Default Value: #ae30eb"
+},
+{
+"type": "color",
+"id": "btn_txt_color",
+"label": "Button Text Color",
+"default": "#fff",
+"info": "Default Value: #fff"
+},
+{
+"type": "color",
+"id": "btn_hoverbg_color",
+"label": "Button Hover Bg Color",
+"default": "#3e3564",
+"info": "Default Value: #3e3564"
+},
+{
+"type": "color",
+"id": "btn_hovertxt_color",
+"label": "Button Hover Text Color",
+"default": "#fff",
+"info": "Default Value: #fff"
+},
+
+{
+"type": "text",
+"id": "social_media1",
+"label": "Social Media Name" ,
+"default": "Twitter" 
+},
+{
+"type": "url",
+"id": "social_media1_url",
+"label": "Link"
+},
+{
+"type": "text",
+"id": "social_media2",
+"label": "Social Media Name" ,
+"default": "Facebook" 
+},
+{
+"type": "url",
+"id": "social_media2_url",
+"label": "Link"
+},
+{
+"type": "text",
+"id": "social_media3",
+"label": "Social Media Name" ,
+"default": "Instagram" 
+},
+{
+"type": "url",
+"id": "social_media3_url",
+"label": "Link"
+}
+],
+"blocks": [
+{
+"type": "Image",
+"name":"Icon Block",
+"settings": [
+{
+"type": "text",
+"id": "title",
+"label": "Heading" ,
+"default": "Heading" 
+}, 
+{
+"type": "text",
+"id": "sub_title",
+"label": "Sub title",
+"default": "Sub title"          
+}, 
+{
+"type": "text",
+"id": "text",
+"label": "Description",
+"default": "Description"   
+},
+{
+"type": "text",
+"id": "button",
+"label": "Button",
+"default": "Shop Now"   
+},
+{
+"type": "url",
+"id": "url",
+"label": "Link"
+},
+{
+"type": "image_picker",
+"id": "icon",
+"label": "Icon Img"          
+},
+{
+"type": "image_picker",
+"id": "large",
+"label": "Large Image"
+}
+]
+}
+],
+"presets": [
+{
+"name": "Slider",
+"category": "Text",
+"blocks": []
+}
+]
+}
+{% endschema %}
+
+
+
+
+{% stylesheet %}
+{% endstylesheet %}
+
+{% javascript %}
+{% endjavascript %}