From fc7c34eb4c3dff866c98af5a666196d49cb1e831 Mon Sep 17 00:00:00 2001 From: GRMrGecko Date: Sat, 22 Jun 2013 05:57:07 -0500 Subject: [PATCH] Changed the way you can change the title of the image database form "Image Database" to anything else. Changed the way tags are handled in editing mode. Added delete button to Tagless Images mode. Added support for browser state which makes it easy to share the state you are in with others by copying the current URL shown in the browser. --- code/hash.php | 27 +++++++++++---- code/index.php | 88 +++++++++++++++++++++++++++++++++++++++++++----- code/tagless.php | 58 +++++++++++++++++++++++++++++-- header.php | 2 +- index.php | 1 + 5 files changed, 159 insertions(+), 17 deletions(-) diff --git a/code/hash.php b/code/hash.php index 03086ce..c15d516 100644 --- a/code/hash.php +++ b/code/hash.php @@ -151,14 +151,16 @@ function loadImage(image) { $("#imageViewer_sidebar .basic_info").append("File Size: "+bytesToSize(image.attr("file_size"))+"
"); $("#imageViewer_sidebar .tags").html(""); - - $("#imageViewer_sidebar .tags_edit").val(image.attr("tags")); - + var tagsEdit = ""; var tags = image.attr("tags").split(" "); for (var i=0; i"); + tagsEdit += tag+"\n"; } + + $("#imageViewer_sidebar .tags_edit").val(tagsEdit); + =4) {?> if (image.attr("user")=="") { @@ -189,14 +191,27 @@ $(document).ready(function() { $("#imageViewer_sidebar .tags").removeClass("hide"); $("#imageViewer_sidebar .tags_edit").addClass("hide"); + var tagsToSave = ""; + var tags = $("#imageViewer_sidebar .tags_edit").val().split("\n"); + for (var i=0; i"); } - - $("#imageViewer_apiloader").load("/", {hash: imageViewing, tags: $("#imageViewer_sidebar .tags_edit").val()}); + + $("#imageViewer_apiloader").load("/", {hash: imageViewing, tags: tagsToSave}); } }); diff --git a/code/index.php b/code/index.php index b5c327c..5efe3cd 100644 --- a/code/index.php +++ b/code/index.php @@ -136,6 +136,7 @@ var filter = ""; var readyToLoad = false; var loadingPage = false; var currentPage = 0; +var currentState = 0; function loadPage(page) { if (loadingPage) { @@ -224,7 +225,7 @@ function bytesToSize(bytes) { return (Math.round(size*100)/100)+" "+type; } -function loadImage(image, animate) { +function loadImage(image, animate, urlHistory) { if (animate==0) { $("#backdrop").css("opacity", 0); $("#backdrop").removeClass("hide"); @@ -247,14 +248,16 @@ function loadImage(image, animate) { $("#imageViewer_sidebar .basic_info").append("File Size: "+bytesToSize(image.attr("file_size"))+"
"); $("#imageViewer_sidebar .tags").html(""); - - $("#imageViewer_sidebar .tags_edit").val(image.attr("tags")); - + var tagsEdit = ""; var tags = image.attr("tags").split(" "); for (var i=0; i"); + tagsEdit += tag+"\n"; } + + $("#imageViewer_sidebar .tags_edit").val(tagsEdit); + =4) {?> if (image.attr("user")=="") { @@ -274,6 +277,10 @@ function loadImage(image, animate) { } else { $("#imageViewer_nextButton").attr("disabled","disabled"); } + if (urlHistory==undefined) { + window.history.pushState({image: imageViewing, state: currentState}, "", "hash/"+image.attr("hash")+"/"); + } + currentState = 2; } $(document).ready(function() { @@ -286,7 +293,7 @@ $(document).ready(function() { $("#imageViewer_nextButton").click(function() { repositionImage(3); }); - function closeImageViewer() { + function closeImageViewer(urlHistory) { $("#backdrop").animate({opacity: 0}, {duration: 400, complete: function() { $("#backdrop").addClass("hide"); }}); @@ -302,6 +309,15 @@ $(document).ready(function() { repositionImage(2); + + if (urlHistory==undefined) { + if (filter!="") { + window.history.pushState({state: currentState}, "", "?filter="+encodeURIComponent(filter)); + } else { + window.history.pushState({state: currentState}, "", ""); + } + } + currentState = 2; } $("#backdrop, #imageViewer_close").click(closeImageViewer); $(window).resize(function() { @@ -320,15 +336,28 @@ $(document).ready(function() { $(this).text("Edit Tags"); $("#imageViewer_sidebar .tags").removeClass("hide"); $("#imageViewer_sidebar .tags_edit").addClass("hide"); - + + var tagsToSave = ""; + var tags = $("#imageViewer_sidebar .tags_edit").val().split("\n"); + for (var i=0; i"); } - $("#imageViewer_apiloader").load("/", {hash: imageViewing, tags: $("#imageViewer_sidebar .tags_edit").val()}); + $("#imageViewer_apiloader").load("/", {hash: imageViewing, tags: tagsToSave}); } }); @@ -356,9 +385,52 @@ $(document).ready(function() { } }); + window.onpopstate = function(event) { + if (event.state!=undefined) { + if (event.state.filter!=undefined) { + if (currentState!=2) { + filter = event.state.filter; + $("#filter_field").val(filter); + $("#images_main").html(""); + loadPage(0); + } else { + closeImageViewer(true); + } + currentState = event.state.state; + } else if (event.state.image!=undefined) { + var image = $("#images_main .image[hash='"+event.state.image+"']"); + if (image.length>0) { + if ($("#backdrop").hasClass("hide")) { + loadImage(image, 0, true); + } else { + loadImage(image, 1, true); + } + } else { + closeImageViewer(true); + } + } + } else { + if (currentState==2) { + closeImageViewer(true); + } else { + filter = ""; + $("#filter_field").val(filter); + $("#images_main").html(""); + loadPage(0); + } + currentState = 0; + } + }; + $("#filter_form").submit(function() { filter = $("#filter_field").val(); $("#images_main").html(""); + if (filter=="") { + window.history.pushState({filter: filter, state: currentState}, "", ""); + } else { + window.history.pushState({filter: filter, state: currentState}, "", "?filter="+encodeURIComponent(filter)); + } + currentState = 1; loadPage(0); return false; }); diff --git a/code/tagless.php b/code/tagless.php index a37fd6e..edf04dc 100644 --- a/code/tagless.php +++ b/code/tagless.php @@ -60,10 +60,29 @@ require_once("header.php"); + + +
+ +

+
@@ -113,8 +132,17 @@ function loadImage(image) { $("#imageViewer_main").html(""); repositionImage(); + var tagsEdit = ""; + var tags = image.attr("tags").split(" "); + for (var i=0; i + $("#imageViewer_sidebar .tags_edit").val(tagsEdit); + + - $("#imageViewer_sidebar .tags_edit").val(image.attr("tags")); $("#imageViewer_sidebar .tags_edit").focus(); } @@ -130,10 +158,36 @@ $(document).ready(function() { if (imageViewing=="") { return; } - $("#imageViewer_apiloader").load("/", {hash: imageViewing, tags: $("#imageViewer_sidebar .tags_edit").val()}, function() { + var tagsToSave = ""; + var tags = $("#imageViewer_sidebar .tags_edit").val().split("\n"); + for (var i=0; i/", {hash: imageViewing, tags: tagsToSave}, function() { loadNext(); }); }); + + + $("#imageViewer_delete").click(function() { + if (imageViewing=="") { + return; + } + $("#imageViewer_confirmDelete").modal(); + }); + $("#imageViewer_confirmDelete_yes").click(function() { + $("#imageViewer_apiloader").load("/", {hash: imageViewing}, function() { + loadNext(); + }); + }); + loadNext(); }); diff --git a/header.php b/header.php index 1af53b2..a1ae5a3 100644 --- a/header.php +++ b/header.php @@ -18,7 +18,7 @@ - Image Database + <?=$_MGM['title']?> diff --git a/index.php b/index.php index dd75354..26c839d 100644 --- a/index.php +++ b/index.php @@ -18,6 +18,7 @@ error_reporting(E_ALL & ~E_NOTICE & ~E_WARNING & ~E_STRICT); $_MGM = array(); $_MGM['version'] = "2"; +$_MGM['title'] = "Image Database"; $_MGM['DBType'] = "SQLITE"; // MYSQL, POSTGRESQL, SQLITE. $_MGM['DBPersistent'] = NO; $_MGM['DBHost'] = "localhost";