diff options
Diffstat (limited to 'modules/gallery/js')
-rw-r--r-- | modules/gallery/js/albums_form_add.js | 12 | ||||
-rw-r--r-- | modules/gallery/js/fullsize.js | 78 | ||||
-rw-r--r-- | modules/gallery/js/l10n_client.js | 195 | ||||
-rw-r--r-- | modules/gallery/js/quick.js | 95 |
4 files changed, 380 insertions, 0 deletions
diff --git a/modules/gallery/js/albums_form_add.js b/modules/gallery/js/albums_form_add.js new file mode 100644 index 00000000..06a364f3 --- /dev/null +++ b/modules/gallery/js/albums_form_add.js @@ -0,0 +1,12 @@ +$("#gAddAlbumForm input[name=title]").change( + function() { + $("#gAddAlbumForm input[name=name]").attr( + "value", $("#gAddAlbumForm input[name=title]").attr("value"). + replace(/\s+/g, "_").replace(/\.+$/, "")); + }); +$("#gAddAlbumForm input[name=title]").keyup( + function() { + $("#gAddAlbumForm input[name=name]").attr( + "value", $("#gAddAlbumForm input[name=title]").attr("value"). + replace(/\s+/g, "_").replace(/\.+$/, "")); + }); diff --git a/modules/gallery/js/fullsize.js b/modules/gallery/js/fullsize.js new file mode 100644 index 00000000..7428adb5 --- /dev/null +++ b/modules/gallery/js/fullsize.js @@ -0,0 +1,78 @@ +/** + * @todo Move inline CSS out to external style sheet (theme style sheet) + */ +$(document).ready(function() { + $(".gFullSizeLink").click(function() { + var width = $(document).width(); + var height = $(document).height(); + + $("body").append('<div id="gFullsizeOverlay" class="ui-dialog-overlay" ' + + 'style="border: none; margin: 0; padding: 0; background: #000 ' + + 'none repeat scroll 0% 0%; position: absolute; top: 0px; left: 0px; ' + + 'width: ' + width + 'px; height: ' + height + 'px; opacity: 0.7; ' + + '-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; ' + + '-moz-background-inline-policy: -moz-initial; z-index: 1001;"> </div>'); + + var image_size = _auto_fit(fullsize_detail.width, fullsize_detail.height); + + $("body").append('<div id="gFullsize" class="ui-dialog ui-widget" ' + + 'style="overflow: hidden; display: block; ' + + 'position: absolute; z-index: 1002; outline-color: -moz-use-text-color; ' + + 'outline-style: none; outline-width: 0px; ' + + 'height: ' + image_size.height + 'px; ' + + 'width: ' + image_size.width + 'px; ' + + 'top: ' + image_size.top + 'px; left: ' + image_size.left + 'px;">' + + '<img id="gFullSizeImage" src="' + fullsize_detail.url + '"' + + 'height="' + image_size.height + '" width="' + image_size.width + '"/></div>'); + + $("#gFullsize").append('<span id="gFullsizeClose" class="fg-button ui-icon ui-state-default ' + + 'ui-icon-closethick ui-corner-all" style="z-index: 1003; position: absolute; ' + + 'right: 1em; top: 1em;"></span>'); + $("#gFullsizeClose").click(function() { + $("#gFullsizeOverlay*").remove(); + $("#gFullsize").remove(); + }); + $(window).resize(function() { + $("#gFullsizeOverlay").width($(document).width()); + $("#gFullsizeOverlay").height($(document).height()); + image_size = _auto_fit(fullsize_detail.width, fullsize_detail.height); + $("#gFullsize").height(image_size.height); + $("#gFullsize").width(image_size.width); + $("#gFullsize").css("top", image_size.top); + $("#gFullsize").css("left", image_size.left); + $("#gFullSizeImage").height(image_size.height); + $("#gFullSizeImage").width(image_size.width); + }); + }); +}); + +/* + * Calculate the size of the image panel based on the size of the image and the size of the + * window. Scale the image so the entire panel fits in the view port. + */ +function _auto_fit(imageWidth, imageHeight) { + // ui-dialog gives a padding of 2 pixels + var windowWidth = $(window).width() - 10; + var windowHeight = $(window).height() - 10; + + /* If the width is greater then scale the image width first */ + if (imageWidth > windowWidth) { + var ratio = windowWidth / imageWidth; + imageWidth *= ratio; + imageHeight *= ratio; + } + /* after scaling the width, check that the height fits */ + if (imageHeight > windowHeight) { + var ratio = windowHeight / imageHeight; + imageWidth *= ratio; + imageHeight *= ratio; + } + + // handle the case where the calculation is almost zero (2.14e-14) + return { + top: ((windowHeight - imageHeight) / 2).toFixed(2), + left: ((windowWidth - imageWidth) / 2).toFixed(2), + width: imageWidth.toFixed(2), + height: imageHeight.toFixed(2) + }; +} diff --git a/modules/gallery/js/l10n_client.js b/modules/gallery/js/l10n_client.js new file mode 100644 index 00000000..f43671f1 --- /dev/null +++ b/modules/gallery/js/l10n_client.js @@ -0,0 +1,195 @@ +// Fork from Drupal's l10n_client module, originally written by: +// Gbor Hojtsy http://drupal.org/user/4166 (original author) +// Young Hahn / Development Seed - http://developmentseed.org/ (friendly user interface) + +var Gallery = Gallery || { 'behaviors': {} }; + +Gallery.attachBehaviors = function(context) { + context = context || document; + // Execute all of them. + jQuery.each(Gallery.behaviors, + function() { + this(context); + }); +}; + +$(document).ready(function() { + Gallery.attachBehaviors(this); +}); + + +// Store all l10n_client related data + methods in its own object +jQuery.extend(Gallery, { + l10nClient: new (function() { + // Set "selected" string to unselected, i.e. -1 + this.selected = -1; + // Keybindings + this.keys = {'toggle':'ctrl+shift+s', 'clear': 'esc'}; // Keybindings + // Keybinding functions + this.key = function(pressed) { + switch(pressed) { + case 'toggle': + // Grab user-hilighted text & send it into the search filter + userSelection = window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text; + userSelection = String(userSelection); + if(userSelection.length > 0) { + Gallery.l10nClient.filter(userSelection); + Gallery.l10nClient.toggle(1); + $('#l10n-client #gL10nSearch').focus(); + } else { + if($('#l10n-client').is('.hidden')) { + Gallery.l10nClient.toggle(1); + if(!$.browser.safari) { + $('#l10n-client #gL10nSearch').focus(); + } + } else { + Gallery.l10nClient.toggle(0); + } + } + break; + case 'clear': + this.filter(false); + break; + } + } + // Toggle the l10nclient + this.toggle = function(state) { + switch(state) { + case 1: + $('#l10n-client-string-select, #l10n-client-string-editor, #l10n-client .labels .label').show(); + $('#l10n-client').height('22em').removeClass('hidden'); + $('#l10n-client .labels .toggle').text('X'); + /* + * This CSS clashes with Gallery's CSS, probably due to + * YUI's grid / floats. + if(!$.browser.msie) { + $('body').css('border-bottom', '22em solid #fff'); + } + */ + $.cookie('Gallery_l10n_client', '1', {expires: 7, path: '/'}); + break; + case 0: + $('#l10n-client-string-select, #l10n-client-string-editor, #l10n-client .labels .label').hide(); + $('#l10n-client').height('2em').addClass('hidden'); + // TODO: Localize this message + $('#l10n-client .labels .toggle').text('Translate Text'); + /* + if(!$.browser.msie) { + $('body').css('border-bottom', '0px'); + } + */ + $.cookie('Gallery_l10n_client', '0', {expires: 7, path: '/'}); + break; + } + } + // Get a string from the DOM tree + this.getString = function(index, type) { + return l10n_client_data[index][type]; + } + // Set a string in the DOM tree + this.setString = function(index, data) { + l10n_client_data[index]['translation'] = data; + } + // Filter the the string list by a search string + this.filter = function(search) { + if(search == false || search == '') { + $('#l10n-client #l10n-search-filter-clear').focus(); + $('#l10n-client-string-select li').show(); + $('#l10n-client #gL10nSearch').val(''); + $('#l10n-client #gL10nSearch').focus(); + } else { + if(search.length > 0) { + $('#l10n-client-string-select li').hide(); + $('#l10n-client-string-select li:contains('+search+')').show(); + $('#l10n-client #gL10nSearch').val(search); + } + } + } + }) +}); + +// Attaches the localization editor behavior to all required fields. +Gallery.behaviors.l10nClient = function(context) { + + switch($.cookie('Gallery_l10n_client')) { + case '1': + Gallery.l10nClient.toggle(1); + break; + default: + Gallery.l10nClient.toggle(0); + break; + } + + // If the selection changes, copy string values to the source and target fields. + // Add class to indicate selected string in list widget. + $('#l10n-client-string-select li').click(function() { + $('#l10n-client-string-select li').removeClass('active'); + $(this).addClass('active'); + var index = $('#l10n-client-string-select li').index(this); + + $('#l10n-client-string-editor .source-text').text(Gallery.l10nClient.getString(index, 'source')); + $("#gL10nClientSaveForm input[name='l10n-message-source']").val(Gallery.l10nClient.getString(index, 'source')); + $('#gL10nClientSaveForm #l10n-edit-target').val(Gallery.l10nClient.getString(index, 'translation')); + + Gallery.l10nClient.selected = index; + }); + + // When l10n_client window is clicked, toggle based on current state. + $('#l10n-client .labels .toggle').click(function() { + if($('#l10n-client').is('.hidden')) { + Gallery.l10nClient.toggle(1); + } else { + Gallery.l10nClient.toggle(0); + } + }); + + // Register keybindings using jQuery hotkeys + // TODO: Either remove hotkeys code or add query.hotkeys.js. + if($.hotkeys) { + $.hotkeys.add(Gallery.l10nClient.keys['toggle'], function(){Gallery.l10nClient.key('toggle')}); + $.hotkeys.add(Gallery.l10nClient.keys['clear'], {target:'#l10n-client #gL10nSearch', type:'keyup'}, function(){Gallery.l10nClient.key('clear')}); + } + + // Custom listener for l10n_client livesearch + $('#l10n-client #gL10nSearch').keyup(function(key) { + Gallery.l10nClient.filter($('#l10n-client #gL10nSearch').val()); + }); + + // Clear search + $('#l10n-client #l10n-search-filter-clear').click(function() { + Gallery.l10nClient.filter(false); + return false; + }); + + // Send AJAX POST data on form submit. + $('#gL10nClientSaveForm').ajaxForm({ + dataType: "json", + success: function(data) { + // Store string in local js + Gallery.l10nClient.setString(Gallery.l10nClient.selected, $('#gL10nClientSaveForm #l10n-edit-target').val()); + + // Mark string as translated. + $('#l10n-client-string-select li').eq(Gallery.l10nClient.selected).removeClass('untranslated').removeClass('active').addClass('translated').text($('#gL10nClientSaveForm #l10n-edit-target').val()); + + // Empty input fields. + $('#l10n-client-string-editor .source-text').html(''); + $('#gL10nClientSaveForm #l10n-edit-target').val(''); + $("#gL10nClientSaveForm input[name='l10n-message-source']").val(''); + }, + error: function(xmlhttp) { + // TODO: Localize this message + alert('An HTTP error @status occured (or empty response).'.replace('@status', xmlhttp.status)); + } + }); + + + // Copy source text to translation field on button click. + $('#gL10nClientSaveForm #l10n-edit-copy').click(function() { + $('#gL10nClientSaveForm #l10n-edit-target').val($('#l10n-client-string-editor .source-text').text()); + }); + + // Clear translation field on button click. + $('#gL10nClientSaveForm #l10n-edit-clear').click(function() { + $('#gL10nClientSaveForm #l10n-edit-target').val(''); + }); +}; diff --git a/modules/gallery/js/quick.js b/modules/gallery/js/quick.js new file mode 100644 index 00000000..e7f35cea --- /dev/null +++ b/modules/gallery/js/quick.js @@ -0,0 +1,95 @@ +$(document).ready(function() { + if ($("#gAlbumGrid").length) { + // @todo Add quick edit pane for album (meta, move, permissions, delete) + $(".gItem").hover(show_quick, function() {}); + } + if ($("#gPhoto").length) { + $("#gPhoto").hover(show_quick, function() {}); + } +}); + +var show_quick = function() { + var cont = $(this); + var quick = $(this).find(".gQuick"); + $("#gQuickPane").remove(); + cont.append("<div id=\"gQuickPane\"></div>"); + var img = cont.find(".gThumbnail,.gResize"); + var pos = cont.position(); + $("#gQuickPane").css({ + "position": "absolute", + "top": pos.top, + "left": pos.left, + "text-align": "center", + "width": cont.innerWidth() + 1, + "height": "auto" + }).hide(); + cont.hover(function() {}, hide_quick); + $.get( + quick.attr("href"), + {}, + function(data, textStatus) { + $("#gQuickPane").html(data).slideDown("fast"); + $(".ui-state-default").hover( + function(){ + $(this).addClass("ui-state-hover"); + }, + function(){ + $(this).removeClass("ui-state-hover"); + } + ); + $("#gQuickPane a:not(.options)").click(function(e) { + e.preventDefault(); + if ($(this).attr("id") == "gQuickDelete" && + !confirm($(this).attr("ref"))) { + return; + } + quick_do(cont, $(this), img); + }); + $("#gQuickPane a.options").click(function(e) { + e.preventDefault(); + $("#gQuickPaneOptions").slideToggle("fast"); + }); + } + ); +}; + +var quick_do = function(cont, pane, img) { + if (pane.hasClass("ui-state-disabled")) { + return false; + } + if (pane.hasClass("gDialogLink")) { + openDialog(pane, function() { window.location.reload(); }); + } else { + img.css("opacity", "0.1"); + cont.addClass("gLoadingLarge"); + $.ajax({ + type: "GET", + url: pane.attr("href"), + dataType: "json", + success: function(data) { + img.css("opacity", "1"); + cont.removeClass("gLoadingLarge"); + if (data.src) { + img.attr("width", data.width); + img.attr("height", data.height); + img.attr("src", data.src); + if (data.height > data.width) { + img.css("margin-top", -32); + } else { + img.css("margin-top", 0); + } + } else if (data.location) { + window.location = data.location; + } else if (data.reload) { + window.location.reload(); + } + } + }); + } + return false; +}; + +var hide_quick = function() { + $("#gQuickPane").remove(); +}; + |