Skip to content

Instantly share code, notes, and snippets.

@bryantAXS

bryantAXS/Component.js

Last active June 7, 2018 21:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bryantAXS/7e534c7a6a655615b58a50ed3549f081 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bryantAXS/7e534c7a6a655615b58a50ed3549f081 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bryantAXS revised this gist Jun 7, 2018. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions Component.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    var ComponentName = function(options){

    this.options = {
    $el: false
    };

    $.extend(true, this.options, options);

    };

    ComponentName.prototype.init = function(){

    };

    module.exports = ComponentName;
  2. bryantAXS revised this gist Jun 7, 2018. 1 changed file with 14 additions and 0 deletions.
    14 changes: 14 additions & 0 deletions Template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    var components = [
    {handle: "[data-hero]", require: require("../components/hero")},
    {handle: "[data-hero-page]", require: require("../components/heroPage")},
    {handle: "[data-gallery-full]", require: require("../components/galleryFull")},
    {handle: "[data-gallery-slider]", require: require("../components/gallerySlider")},
    {handle: "[data-gallery-with-content]", require: require("../components/galleryWithContent")},
    {handle: "[data-lockup-with-color]", require: require("../components/lockupWithColor")},
    {handle: "[data-cta-full]", require: require("../components/ctaFull")},
    {handle: "[data-lockup-full-width]", require: require("../components/lockupFullWidth")}
    ];

    // our components loader
    var componentsLoader = new ComponentsLoader({components: components});
    componentsLoader.initScreen();
  3. bryantAXS created this gist Jun 7, 2018.
    75 changes: 75 additions & 0 deletions ComponentLoader.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@


    /**
    * A class to handle dynamically loading our components
    */

    var ComponentsLoader = function(options){

    this.options = {
    components: []
    };

    $.extend(true, this.options, options);

    this.activeComponents = [];

    };

    /**
    * Initing all components on the screen, and sorting them by vertical position
    */
    ComponentsLoader.prototype.initScreen = function(){

    var self = this;

    // might need some sort of unbinding here for removing active components
    this.activeComponents = [];

    $.each(this.options.components, function(){

    var componentObj = this;
    var $components = $(componentObj.handle);

    $components.each(function(){

    var individualComponent = this;
    var component = new componentObj.require({
    $el: $(this)
    });

    self.activeComponents.push(component);

    });

    });

    if(this.activeComponents.length > 1){

    // sorting them based on their vertical position on the screen
    this.activeComponents.sort(function(a, b){

    var aOffset = a.options.$el.offset().top;
    var bOffset = b.options.$el.offset().top;

    if(aOffset < bOffset){
    return -1;
    }

    if (aOffset > bOffset){
    return 1;
    }

    return 0;

    });

    }

    $.each(this.activeComponents, function(){
    this.init();
    });

    };

    module.exports = ComponentsLoader