---
layout:                                 raw

title:                                  GALLERY Previewer
tagline:                                Manage Justified Gallery your Way
description:                            Justified Gallery Previewer

tags:                                   [ Customizer, Justified Gallery ]
resources:                              [ light_gallery, justified_gallery ]
toc:                                    false
permalink:                              /pages/private/previewer/justified_gallery/

resource_options:

  - masthead:
      opacity:                          0.5
      slides:
        - url:                          /assets/images/gallery/justified_gallery/16961685188_f130144d60_b.jpg
          alt:                          justified_gallery

regenerate:                             false
---


{% comment %} Main
--------------------------------------------------------------- {% endcomment %}

<!-- [INFO   ] [j1.gallery_customizer              ] [Placement of BMD Drawer] -->
<div class="row">
  <!-- div class="bmd-layout-container bmd-drawer-f-l app-drawer" -->
  <div class="nav bmd-layout-container bmd-drawer-f-l">

    <header class="bmd-layout-header">
      <div class="navbar navbar-dark bg-primary raised-z2 mb-2">
        <button class="bmd-drawer drawer-toggler animated fadeIn" type="button" data-toggle="drawer" data-target="#drw_customizer">
          <span class="sr-only">Toggle drawer</span>
          <!-- i class="material-icons">menu</i -->
          <span class="mdi mdi-menu mdi-48px"></span>
        </button>
        <ul class="nav navbar-nav">
          <!-- li class="nav-item">Customize Your Gallery</li -->
          <li class="nav-item">
            <a class="nav-link" href="#">Preview Your Gallery</a>
          </li>
        </ul>
      </div>
    </header>

    <div id="drw_customizer" class="bmd-layout-drawer bg-faded">

      <header>
        <a class="navbar-brand">Gallery Customizer</a>
      </header>

      <form id="jg-customizer-form" class="form-horizontal">
        <div class="mdc-list-group">

          <div class="col-md-12">
            <div class="form-group">
              <label class="bmd-label-floating" for="rowHeight">Row Height [px]</label>
              <input id="rowHeight" name="rowHeight" class="form-control" type="text" value="120">
              <!-- div class="input-group-addon">[px]</div -->
              <span class="bmd-help">Preferred row height (min: 40px)</span>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <label class="bmd-label-floating" for="rowHeightMax">Row Height Max [px]</label>
              <input id="rowHeightMax" name="rowHeightMax" class="form-control" type="text" value="-1">
              <span class="bmd-help">Maximum row height</span>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <label class="bmd-label-floating" for="margins">Thumb Spacing [px]</label>
              <input id="margins" name="margins" class="form-control" type="text" value="1">
              <span class="bmd-help">Space between the images</span>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <label class="bmd-label-floating" for="border">Gallery Padding [px]</label>
              <input id="border" name="border" class="form-control" type="text" value="0">
              <span class="bmd-help">Border size around the gallery</span>
            </div>
          </div>

        <!-- div class="col-md-12">
          <div class="input-group">
        		<span class="input-group-addon">
        			<i class="material-icons">group</i>
        		</span>
        		<input type="text" class="form-control" placeholder="With Material Icons">
        	</div>
        </div -->

          <div class="ml-3 mt-4 mb-5">
            <div class="switch">
              <label>
                <input id="captions" name="captions" type="checkbox" checked>
                Enable Captions
              </label>
            </div>

            <div class="switch">
              <label>
                <input id="random" name="random" type="checkbox">
                Random Order
              </label>
            </div>

            <div class="switch">
              <label>
                <input id="justify_last_row" name="justify_last_row" type="checkbox">
                Justify Last Row
              </label>
            </div>

            <div class="switch">
              <label>
                <input id="hide_last_row" name="hide_last_row" type="checkbox">
                Hide Last Row
              </label>
            </div>
          </div>

        </div>

        <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12">
          <!--button type="button" name="jgs-create-yaml" class="btn btn btn-success btn-raised btn-round">Create YAML data</button -->
          <button type="button" name="reset-defaults" class="btn btn btn-danger btn-raised btn-round">Gallery Reset</button>
        </div>

      </form>
    </div>

    <div class="bmd-layout-content">
      <div class="container" style="padding-right: 0px; padding-left: 0px;">
        <!-- main content -->
        <div id="jg_customizer" class="bla"></div>
      </div>
    </div>

  </div>
</div>

<!-- [INFO   ] [j1.gallery_customizer              ] [Placement of JS Components )] -->
<script>
  $(function() {

    var environment         = "{{site.environment}}";

    var formId              = '#jg-customizer-form';
    var galleryId           = '#jg_customizer';
    var galleryContainerId  = '#jg_customizer_div';
    var $instance;


    var logger              = log4javascript.getLogger("gallery_customizer");
    var logText             = '';
    var kbdDelay            = 750;
    var imageHeightMin      = 40;

    if ( $( formId ).length ) {
      var timerid;

      $("input[name='rowHeight']").on('input', function (e) {
        e.stopPropagation();
        var value = $(this).val();
        $instance = j1.jg_customizer_div.$el;

        if (value < imageHeightMin) { return false; }

        if($(this).data("lastval") != value){
            $(this).data("lastval", value);
            clearTimeout(timerid);
            //change action
            timerid = setTimeout(function() {
              $instance.justifiedGallery({rowHeight: value});
              if( environment == "development" ) {
                logText = "Gallery on ID " +galleryId+ " changed rowHeight to: " +value;
                logger.info( logText );
              }
            }, kbdDelay);
        };
        return false;
      });

      $("input[name='rowHeightMax']").on('input', function (e) {
        //e.preventDefault();
        var value = $(this).val();
        $instance = j1.jg_customizer_div.$el;

        if($(this).data("lastval") != value){
            $(this).data("lastval", value);
            clearTimeout(timerid);
            //change action
            timerid = setTimeout(function() {
              $instance.justifiedGallery({maxRowHeight: value});
              if( environment == "development" ) {
                logText = "Gallery on ID " +galleryId+ " changed maxRowHeight to: " +value;
                logger.info( logText );
              }
            }, kbdDelay);
        };
        //return false;
      });

      $("input[name='margins']").on('input', function (e) {
        //e.preventDefault();
        var value = $(this).val();
        $instance = j1.jg_customizer_div.$el;

        if($(this).data("lastval") != value){
            $(this).data("lastval", value);
            clearTimeout(timerid);
            //change action
            timerid = setTimeout(function() {
              $instance.justifiedGallery({margins: value});
              if( environment == "development" ) {
                logText = "Gallery on ID " +galleryId+ " changed margins to: " +value;
                logger.info( logText );
              }
            }, kbdDelay);
        };
        //return false;
      });

      $("input[name='border']").on('input', function (e) {
        //e.preventDefault();
        var value = $(this).val();
        $instance = j1.jg_customizer_div.$el;

        if($(this).data("lastval") != value){
            $(this).data("lastval", value);
            clearTimeout(timerid);
            //change action
            timerid = setTimeout(function() {
              $instance.justifiedGallery({border: value});
              if( environment == "development" ) {
                logText = "Gallery on ID " +galleryId+ " changed padding to: " +value;
                logger.info( logText );
              }
            }, kbdDelay);
        };
        //return false;
      });

      $('input:checkbox[name="captions"]').on('click', function (e) {
        $instance = j1.jg_customizer_div.$el;
        value = $('input:checkbox[name="captions"]').is(":checked");

        $instance.justifiedGallery({captions: value});
        if( environment == "development" ) {
          logText = "Gallery on ID " +galleryId+ " changed captions to: " +value;
          logger.info( logText );
        }
      });

      $('input:checkbox[name="random"]').on('click', function (e) {
        $instance = j1.jg_customizer_div.$el;
        value = $('input:checkbox[name="random"]').is(":checked");

        $instance.justifiedGallery({randomize: value});
        if( environment == "development" ) {
          logText = "Gallery on ID " +galleryId+ " changed randomize to: " +value;
          logger.info( logText );
        }
      });

      $('input:checkbox[name="justify_last_row"]').on('click', function (e) {
        $instance = j1.jg_customizer_div.$el;
        value = $('input:checkbox[name="justify_last_row"]').is(":checked");

        if ( value == true ) {
          value = 'justify';
          $instance.justifiedGallery({lastRow: value});
        } else {
          value = 'nojustify';
          $instance.justifiedGallery({lastRow: value});
        }
        if( environment == "development" ) {
          logText = "Gallery on ID " +galleryId+ " changed lastRow to: " +value;
          logger.info( logText );
        }
      });

      $('input:checkbox[name="hide_last_row"]').on('click', function (e) {
        $instance = j1.jg_customizer_div.$el;
        value = $('input:checkbox[name="hide_last_row"]').is(":checked");

        if ( value == true ) {
          value = 'hide';
          $instance.justifiedGallery({lastRow: value});
        } else {
          value = 'nojustify';
          $instance.justifiedGallery({lastRow: value});
        }
        if( environment == "development" ) {
          logText = "Gallery on ID " +galleryId+ " changed lastRow to: " +value;
          logger.info( logText );
        }
      });

      $('#jg-customizer-form button[name="reset-defaults"]').on('click', function (e) {
        $instance = j1.jg_customizer_div.$el;
        $('#rowHeight').val("120");
        $('#rowHeightMax').val("-1");
        $('#margins').val("1");
        $('#border').val("0");
        $('input:checkbox[name="captions"]').val("on").filter('[value="on"]').prop('checked', true);
        $('input:checkbox[name="random"]').val("off").filter('[value="off"]').prop('checked', false);
        $('input:checkbox[name="animate"]').val("on").filter('[value="on"]').prop('checked', true);
        $('input:checkbox[name="justify_last_row"]').val("on").filter('[value="on"]').prop('checked', false);
        $('input:checkbox[name="hide_last_row"]').val("off").filter('[value="off"]').prop('checked', false);

        $instance.justifiedGallery({
          rowHeight:                    120,
          maxRowHeight:                 false,
          thumbnailPath:                "",
          lastRow:                      "nojustify",
          margins:                      1,
          border:                       0,
          waitThumbnailsLoad:           true,
          randomize:                    false,
          filter:                       false,
          sort:                         false,
          selector:                     "a, div:not(.spinner)",
          extension:                    "/\.[^.\\/]+$/",
          refreshTime:                  200,
          refreshSensitivity:           0,
          rel:                          "",
          target:                       "",
          justifyThreshold:             0.90,
          cssAnimation:                 true,
          imagesAnimationDuration:      500,
          captions:                     true,
          captionSettings:
          {
            animationDuration:          500,
            visibleOpacity:             0.7,
            nonVisibleOpacity:          0.0
          }
        });
        if( environment == "development" ) {
          logText = "Gallery on ID " +galleryId+ " reset to default values";
          logger.info( logText );
        }
      });

    }
  });

  // See: https://jsfiddle.net/prathviraj080/vbbbw46a/1/
  $('button.drawer-toggler').click(function(){
    $('button.drawer-toggler span.mdi').toggleClass('mdi-menu mdi-close');
  });
  $('button.drawer-toggler').click(function(){
    $('button.drawer-toggler').toggleClass('fadeIn rotateIn');
  });

</script>