#!/bin/sh
#
# html4images2 - in a directory with images, generate a HTML page with a gallery
#
# $Id$

# see ./html4images1 for a simpler version

# config options
t_max_hxv=200x200  # size of the window to fit thumbnail into, in pixels
m_max_hxv=400x400  # size of the window to fit mediumsized into, in pixels
ext=png            # extension and type of generated images

me=`basename "$0"`
subdir="$me"       # holds all generated files except $subdir.html

# where to get source files
photoswipe_dist_svn_url=https://github.com/dimsemenov/PhotoSwipe/trunk/dist
jquery_dist_url=https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3

IsImage() { file "$1" | fgrep ' image ' >/dev/null; }
# is this file an image?

IsThumbOrMedium() { case "$1" in [mt]_*.$ext|*/[mt]_*.$ext) return 0;; *) return 1;; esac; }
# is this image a ThumbOf or MediumOf?

ThumbOf() { echo "$subdir"/`dirname "$1"`/t_`basename "$1"` | sed 's/\.[^.]*$/.'$ext'/'; }
# name of thumbnail corresponding to given image

MediumOf() { echo "$subdir"/`dirname "$1"`/m_`basename "$1"` | sed 's/\.[^.]*$/.'$ext'/'; }
# name of medium size image corresponding to given image

PreviewTOf() { if [ "$thumbs" -gt 0 ]; then ThumbOf "$1"; else echo "$1"; fi; }
PreviewMOf() { if [ "$thumbs" -gt 0 ]; then MediumOf "$1"; else echo "$1"; fi; }

Lib()   { echo "$subdir"/lib; }
Index() { echo "$subdir".html; }

SizeOf() { identify "$1" | awk '{print $(NF-6)}'; }

Rotation()
{
  identify -verbose "$1" | awk '
    /  Orientation:/ {
      if ($NF =="RightTop") print 90;
      else if ($NF == "RightBottom") print 180;
      else if ($NF == "LeftBottom") print 270;
      else print 0
    }'
}

Warn() { echo "$me: warning: $@" 1>&2; }
MsgIfV() { [ 1 = "$verbose" ] && echo "$me: $@" 1>&2; }

HaveDirFor() { dir=`dirname "$1"`; [ -d $dir ] || mkdir -p $dir; }

InLib()
# usage: InLib flagfile command ...
{
  if [ -f lib/"$1" ]
  then
    Warn not fetching, already exists: lib/"$1"
    return 0
  fi

  shift
  [ -d lib ] || mkdir lib  || return 1  # TO DO: better error handling
  ( cd lib && "$@" )
}

GetPhotoSwipe()
{
  InLib photoswipe.min.js svn export --force $photoswipe_dist_svn_url .
}

GetJQuery()
{
  InLib jquery.min.js wget -N $jquery_dist_url/jquery.min.js
}

nl='
'

Previews()
{
    IFS=
    find * -type d -name "$subdir" -prune -o -type f |
    while read f
    do
      if [ ! -f "$f" ]
      then
        Warn skipping $f, not a plain file
        continue
      elif IsThumbOrMedium "$f"
      then
        : # avoid recursion
      elif IsImage "$f"
      then
        MsgIfV including $f
        if [ "$thumbs" -gt 0 ]
        then
          HaveDirFor `ThumbOf "$f"` || return
          HaveDirFor `MediumOf "$f"` || return
          rot=`Rotation "$f"`
          convert "$f" \
            -resize $t_max_hxv'>' \
            -gravity center \
            -extent $t_max_hxv \
            -rotate "$rot" \
            `ThumbOf "$f"` &&
          convert "$f" \
            -resize $m_max_hxv'>' \
            -gravity center \
            -extent $m_max_hxv \
            -rotate "$rot" \
            `MediumOf "$f"` &&
          echo $f
        else
          # trust the image as it is
          echo $f
        fi
      else
        Warn skipping $f, not an image
        continue
      fi
    done
}

MakePreview()
(
    cd "$d" || return  # TODO: improve error handling

    good_fs=`Previews`

    index=`Index`

    if [ -z "$good_fs" ]
    then
      Warn not generating, no images found: $d/$index
      return
    elif [ $force = 0 ] && [ -f $index ]
    then
      Warn not regenerating, already exists: $d/$index
      return
    fi

    ( cd "$subdir" && GetPhotoSwipe && GetJQuery ) || return

    title="image gallery for $d"
    lib=`Lib`
    use_photoswipe=use-photoswipe.js

    cat > $lib/$use_photoswipe <<ZZ

// the following code is from
//   https://webdesign.tutsplus.com/tutorials/the-perfect-lightbox-using-photoswipe-with-jquery--cms-23587

var usePhotoSwipe = function() {
  var pic      = \$(this);
  var getItems = function() {
    var items = [];
    pic.find('a').each(function() {
      var href   = \$(this).attr('href'),
          size   = \$(this).data('size').split('x'),
          width  = size[0],
          height = size[1];
   
      var item = {
          src : href,
          w   : width,
          h   : height
      };
   
      items.push(item);
    });

    return items;
  };
 
  var items = getItems();

  var pswp = \$('.pswp')[0];

  pic.on('click', 'figure', function(event) {
    event.preventDefault();
   
    var index = \$(this).index();
    var options = {
        index: index,
        bgOpacity: 0.7,
        showHideOpacity: true
    };
   
    // Initialize PhotoSwipe
    var lightBox = new PhotoSwipe(pswp, PhotoSwipeUI_Default, items, options);
    lightBox.init();
  });
};
ZZ

    cat > $index <<ZZ
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" debug="true">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
    <meta charset="utf-8">

    <title>$title</title>

    <link rel="stylesheet" href="$lib/photoswipe.css" />
    <link rel="stylesheet" href="$lib/default-skin/default-skin.css" />

    <script src="$lib/photoswipe.min.js"></script>
    <script src="$lib/photoswipe-ui-default.min.js"></script>
    <script src="$lib/jquery.min.js"></script>
    <!-- figure/figcaption support for IE8 -->
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <![endif]-->
    <script src="$lib/$use_photoswipe"></script>
    <script>
       \$(function() {
         \$('.picture').each(usePhotoSwipe)
       })
    </script>
  </head>

  <body>

    <div class="section section--head">
      <div class="row row--heading">
        <h1>$title</h1>
        <p>Generated by $0 on `date +%F`.</p>
      </div>
    </div>

    <div class="row">
      <!-- <div id="demo-test-gallery" class="demo-gallery"> -->
      <div class="picture" itemscope itemtype="http://schema.org/ImageGallery">

ZZ

    idx=0

    IFS=$nl

    for f in $good_fs
    do
      hxv=`SizeOf "$f"`
      MsgIfV image $f has size $hxv
      h=`echo $hxv | awk -Fx '{print $1}'`
      v=`echo $hxv | awk -Fx '{print $2}'`

      m_f=`PreviewMOf $f`
      m_hxv=`SizeOf "$m_f"`
      MsgIfV medium sized image $m_f has size $m_hxv
      m_h=`echo $m_hxv | awk -Fx '{print $1}'`
      m_v=`echo $m_hxv | awk -Fx '{print $2}'`

      t_f=`PreviewTOf $f`
      t_hxv=`SizeOf "$t_f"`
      MsgIfV medium sized image $t_f has size $t_hxv
      t_h=`echo $t_hxv | awk -Fx '{print $1}'`
      t_v=`echo $t_hxv | awk -Fx '{print $2}'`

      if [ "$medium_as_main" ]
      then
        main_f="$m_f"
        main_sz="${m_v}x${m_h}"
      else
        main_f="$f"
        main_sz="${v}x${v}"
      fi
        
      cat >> $index <<ZZ
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="$main_f" itemprop="contentUrl" data-index="$idx" data-size="$main_sz" data-med="$m_f" data-med-size="${m_v}x${m_h}" data-author="Who Ever" class="demo-gallery__img--main">
            <img src="$t_f" itemprop="thumbnail" alt="[$f]" height="$t_v" width="$t_h" />
          </a>
          <figcaption>$f</figcaption>
        </figure>

ZZ
      idx=`expr $idx + 1`
    done

    cat >> $index << ZZ
      </div>
    </div>

    <!-- the following was copied from http://photoswipe.com/documentation/getting-started.html -->

    <!-- Root element of PhotoSwipe. Must have class pswp. -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

      <!-- Container that holds slides. 
           PhotoSwipe keeps only 3 of them in the DOM to save memory.
           Don't modify these 3 pswp__item elements, data is added later on. -->
      <div class="pswp__container">
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
      </div>

      <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
      <div class="pswp__ui pswp__ui--hidden">
        <div class="pswp__top-bar">

          <!--  Controls are self-explanatory. Order can be changed. -->
          <div class="pswp__counter"></div>
            <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
            <button class="pswp__button pswp__button--share" title="Share"></button>
            <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
            <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
            <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
            <!-- element will get class pswp__preloader--active when preloader is running -->
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
            <div class="pswp__share-tooltip"></div> 
          </div>

          <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>

          <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>

          <div class="pswp__caption">
            <div class="pswp__caption__center"></div>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

ZZ

) # end of MakePreview()


#--- go! ---#
#

if [ $# -lt 1 ]
then
  echo Usage: $me directory [directory [...]] 1>&2; exit 1
fi

thumbs=1
force=0
medium_as_main=0
verbose=0

for d in "$@"
do

  case "$d" in
  -a)
    thumbs=0
    ;;
  -m)
    medium_as_main=1
    ;;
  -t)
    thumbs=1
    ;;
  -f)
    force=1
    ;;
  -v)
    verbose=1
    ;;
  *)
    if [ ! -d "$d" ]
    then
      Warn skipping $d, not a directory
      continue
    else
      MakePreview "$d"
    fi
    ;;
  esac
done