
PhotoGallery
http://photoswipe.com/ - Cool and curated, mobile

Sliders
http://pedroduarte.me/wallop/#adding-animations
http://meandmax.github.io/lory/
https://codepen.io/din_wolf/pen/yimGw - Infinite responsive slider


- [x] Possibility to add more sliders via blocks
  - [x] all will be referenced by ID in this way all will be grouped like this:
    "$('#one, #two, #three').each(fn)"
  - [x] Ideally more components should share the same js and this is why of grouping
    but sometimes a component can be diversified from others.
    ex. In one page I could have 3 sliders, and the third one is faster than others
    so I'll get:
    "$('#slider1, #slider2').each(fnOrig); $('#slider3').each(fnFaster);"
    SOL: when 'script' changed set 'scriptUpdated' to 1
  - [] future, think about updateScript, could reduce the final code.
    With sliders example, I'd only update the speed after the same original init code
    http://stackoverflow.com/questions/811195/fast-open-source-checksum-for-small-strings
    http://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript-jquery
- [x] Generate JS in HTML for the moment, at the bottom


```js

    var domc = editor.DomComponents;
    var defaultType = domc.getType('default');
    var defaultModel = defaultType.model;
    var defaultView = defaultType.view;

    // SLIDER
    domc.addType('slider', {
    model: defaultModel.extend({
      defaults: _.extend({}, defaultModel.prototype.defaults, {
        autoRotation: false, // Autoplay
        switchTime: 3000, // Switch time
        animSpeed: 600, // Animation Speed/Duration
        droppable: false,
        gpagination: true,
        traits: [{
          type: 'number',
          label: 'Duration',
          name: 'animSpeed',
          changeProp: 1,
        }/*,{
          type: 'checkbox',
          label: 'Autoplay',
          name: 'autoRotation',
          changeProp: 1,
        },{
          type: 'number',
          label: 'Autoplay time',
          name: 'switchTime',
          changeProp: 1,
        }*/],
      }),

      init: function () {
        this.listenTo(this, 'active', this.activeScript);
        this.listenTo(this, 'change:animSpeed change:autoRotation change:switchTime',
          this.buildScript);
      },

      activeScript: function () {
        this.set({'script': this.getScript()}, {silent: 1});
        this.view.updateScript();
      },

      buildScript: function() {
        this.set('script', this.getScript());
      },

      getScript: function() {
        var opts = {
          mask: '.slider-mask',
          slider: '.slider-slideset',
          slides: '.slider-slide',
          btnPrev: '.btn-slider-prev',
          btnNext: '.btn-slider-next',
          generatePagination: this.get('gpagination') ? '.slider-pagination' : false,
          pagerLinks: '.slider-pagination li a',
          stretchSlideToMask: true,
          animSpeed: parseInt(this.get('animSpeed')),
          //switchTime: parseInt(this.get('switchTime')),
          //autoRotation: this.get('autoRotation'),
        };
        var optsStr = JSON.stringify(opts);
        var script = 'var $el = window.$(this); $el.scrollGallery('+ optsStr + ')';
        console.log(script);
        return script;
      },

    },{
      isComponent: function(el) {
        if(el.getAttribute &&
          el.getAttribute('data-gjs-type') == 'slider'){
          return {type: 'slider'};
        }
      },
    }),
    view: defaultView,
    });


    // SLIDE
    domc.addType('slide', {
    model: defaultModel.extend({
      defaults: _.extend({}, defaultModel.prototype.defaults, {
        droppable: false,
        draggable: false,
      }),
    },{
      isComponent: function(el) {
        if(el.getAttribute &&
          el.getAttribute('data-gjs-type') == 'slide'){
          return {type: 'slide'};
        }
      },
    }),
    view: defaultView,
    });


    // SLIDE NAV
    domc.addType('slider-nav', {
    model: defaultModel.extend({
      defaults: _.extend({}, defaultModel.prototype.defaults, {
        editable: false,
        droppable: false,
        draggable: false,
        removable: false,
        copyable: false,
      }),
    },{
      isComponent: function(el) {
        if(el.getAttribute &&
          el.getAttribute('data-gjs-type') == 'slider-nav'){
          return {type: 'slider-nav'};
        }
      },
    }),
    view: defaultView,
    });


    // SLIDE SET
    domc.addType('slider-set', {
      model: defaultModel.extend({
        defaults: _.extend({}, defaultModel.prototype.defaults, {
          droppable: '[data-gjs-type=slide]',
          draggable: false,
          removable: false,
          copyable: false,
        }),
      },{
        isComponent: function(el) {
          if(el.getAttribute &&
            el.getAttribute('data-gjs-type') == 'slider-set'){
            return {type: 'slider-set'};
          }
        },
      }),
      view: defaultView.extend({
        init: function () {
          var comps = this.model.get('components');
          this.listenTo(comps, 'add remove', this.updateSliders);
        },
        updateSliders: function() {
          var slider = this.$el.closest('.slider');
          var model = slider.data('model');
          if(model)
            setTimeout(function() {
              model.trigger('active');
            }, 0);
        },
      }),
    });

    var dc = editor.DomComponents.getComponents();
    //http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
    dc.add('<link rel="stylesheet" href="private/main.css">'+
          '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>'+
          '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>' +
          '<script src="private/jquery.main.js" defer=""></script>');

```

```html
<section class="section-testimonials">
<div class="container">
<div class="row">
  <div class="col-sm-12">
    <h1 class="h1-with-decor text-center">Testimonials</h1>
    <div class="slider carousel" data-gjs-type="slider">
      <div class="slider-mask" data-gjs-custom-name="Slider Mask" data-gjs-droppable="false" data-gjs-draggable="false">
        <div class="slider-slideset" data-gjs-type="slider-set" data-gjs-custom-name="Slider Set">
          <div class="slider-slide" data-gjs-type="slide">
              <cite class="cite">
                <img src="https://cdn.filestackcontent.com/o54S2SKtSF2n3QHyzLjF" alt="Image description" width="130" height="130" class="cite-img"><strong class="cite-name">Henry Palmer</strong>App Professional Editor
              </cite>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
          <div class="slider-slide" data-gjs-type="slide">
              <cite class="cite"><img src="https://cdn.filestackcontent.com/o54S2SKtSF2n3QHyzLjF" alt="Image description" width="130" height="130" class="cite-img"><strong class="cite-name">Henry Palmer</strong>App Professional Editor</cite>
              <p>#2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
          <div class="slider-slide" data-gjs-type="slide">
              <cite class="cite"><img src="https://cdn.filestackcontent.com/o54S2SKtSF2n3QHyzLjF" alt="Image description" width="130" height="130" class="cite-img"><strong class="cite-name">Henry Palmer</strong>App Professional Editor</cite>
              <p>#3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </div>
      </div>
      <a href="#" class="btn-slider-prev" data-gjs-type="slider-nav"></a>
      <a href="#" class="btn-slider-next" data-gjs-type="slider-nav"></a>
      <div class="slider-pagination text-center"></div>
    </div>
  </div>
</div>
</div>
</section>
```
