Possibility to store current state of a gallery as URL

gallery.py

@@ -18,7 +18,7 @@
 SINGLE_FORMAT="""
 	<a href="{file}">[{ext}]</a>"""
 
-SEARCH_BOX="""<p><input type="text" class="quicksearch" placeholder="Regex Search" /></p>"""
+SEARCH_BOX="""<p><input type="text" class="quicksearch" placeholder="Regex Search" /></p><p><input type="text" class="documentUrl" value="" /><input type="button" class="urlcopybtn" value="copy URL to clipboard" onclick="CopyUrl()"/></p>"""
 
 BUTTON="""<button class="button" data-filter=".{FILTER}">{NAME}</button>"""
 

resources/index.html

@@ -113,6 +113,9 @@
 
 .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
 .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
+
+.urlcopybtn { margin: 0 0 0 0.5em;}
+
 </style>
 <script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen"/>
@@ -179,10 +182,130 @@
 {OTHERFILES}
 
 <script type="text/javascript">
+ // function to select the URL displayed in documentUrl and copy it to the clipboard
+ function CopyUrl() {
+    $('.documentUrl').select()
+    var successful = document.execCommand('copy');
+    var msg = successful ? 'successful' : 'unsuccessful';
+ }
+
+ // extract options from url as dict
+	function urlParameter(options) {
+		"use strict";
+		/*global window, document*/
+
+		var url_search_arr,
+			option_key,
+			i,
+			urlObj,
+			get_param,
+			key,
+			val,
+			url_query,
+			url_get_params = {},
+			a = document.createElement('a'),
+			default_options = {
+				'url': window.location.href,
+				'unescape': true,
+				'convert_num': true
+			};
+
+		if (typeof options !== "object") {
+			options = default_options;
+		} else {
+			for (option_key in default_options) {
+				if (default_options.hasOwnProperty(option_key)) {
+					if (options[option_key] === undefined) {
+						options[option_key] = default_options[option_key];
+					}
+				}
+			}
+		}
+
+		a.href = options.url;
+		url_query = a.search.substring(1);
+		url_search_arr = url_query.split('&');
+
+		if (url_search_arr[0].length > 1) {
+			for (i = 0; i < url_search_arr.length; i += 1) {
+				get_param = url_search_arr[i].split("=");
+
+				if (options.unescape) {
+					key = decodeURIComponent(get_param[0]);
+					val = decodeURIComponent(get_param[1]);
+				} else {
+					key = get_param[0];
+					val = get_param[1];
+				}
+
+				if (options.convert_num) {
+					if (val.match(/^\d+$/)) {
+						val = parseInt(val, 10);
+					} else if (val.match(/^\d+\.\d+$/)) {
+						val = parseFloat(val);
+					}
+				}
+
+				if (url_get_params[key] === undefined) {
+					url_get_params[key] = val;
+				} else if (typeof url_get_params[key] === "string") {
+					url_get_params[key] = [url_get_params[key], val];
+				} else {
+					url_get_params[key].push(val);
+				}
+
+				get_param = [];
+			}
+		}
+
+		return url_get_params;
+	}
+
  $(window).load(function(){
 
-     var qsRegex;
+    // try to not save the options in the history (seems not to work)
+    if(history.replaceState) {
+	    history.replaceState(null, null, window.location.search)
+    }
+
+    // display inital URL
+    updateUrl()
+
+    // get the parameters for trom the URL
+	var options = urlParameter()
+
+     var qsRegex
+     var Regex
+    // check if quicksearch is in the options, if so restore the requested state
+     if ("qsRegex" in options) {
+         // restore the search regex
+		Regex = options["qsRegex"];
+        // also restore the value of the input field (currently does not work)
+		 $('.quicksearch').val(Regex);
+	}
      var buttonFilter;
+     // check if buttons are in the options, if so set the buttons to them
+     if ("buttons" in options) {
+         // restore filter
+        buttonFilter = options["buttons"]
+        // also restore state of buttons
+        var $checkedButtons = buttonFilter.split(".")
+        for (var index = 0; index < $checkedButtons.length; index++)
+        {
+            if ($checkedButtons[index] != "") {
+                $('.button-group').each(function(i, buttonGroup) {
+                    var $buttonGroup = $( buttonGroup );
+                    var $activeButton = $buttonGroup.find("[data-filter=\"."+$checkedButtons[index]+"\"]")
+                    if($activeButton.length)
+                    {
+                        $buttonGroup.find('.is-checked').removeClass('is-checked');
+                        $activeButton.addClass('is-checked');
+                    }
+                })
+            }
+        }
+    }
+
      var $container = $('.gallery');
 
      $container.isotope({
@@ -213,6 +336,8 @@
        filters[ filterGroup ] = $this.attr('data-filter');
        // combine filters
        buttonFilter = concatValues( filters );
+       // update the displayed URL
+       updateUrl()
        // set filter for Isotope
        $container.isotope();
      });
@@ -229,7 +354,14 @@
 
      // use value of search field to filter
      var $quicksearch = $('.quicksearch').keyup( debounce( function() {
-       qsRegex = new RegExp( $quicksearch.val(), 'gi' );
+       try {
+         qsRegex = new RegExp( $quicksearch.val(), 'gi' );
+       }
+       catch(e) {
+         return 1
+       }
+       // update the displayed URL
+       updateUrl()
        $container.isotope();
      }, 200 ) );
 
@@ -247,6 +379,28 @@
        }
      }
 
+     // function to update the URL displayed
+     function updateUrl() {
+       var Regex = $('.quicksearch').val()
+       var pressedButtons
+       $('.button').each(function(i, button) {
+       var $button = $(button);
+       if ($button.is(".is-checked")) {
+           pressedButtons = pressedButtons ? pressedButtons+$button.attr('data-filter') : $button.attr('data-filter')
+       }
+       });
+       var url = [location.protocol, '//', location.host, location.pathname].join('')
+       if (Regex)
+       {
+           url += "?qsRegex=" + encodeURIComponent(Regex)
+       }
+       if (pressedButtons)
+       {
+           url += ((qsRegex) ? "&" : "?") + "buttons=" + encodeURIComponent(pressedButtons)
+       }
+       $('.documentUrl').val(url)
+    }
+
      // flatten object by concatting values
      function concatValues( obj ) {
        var value = '';