Homec4science
Diffusion Desuto Platform (viewer-only) Browse

desuto-platform/desuto-retrieval/Desuto-retrievalinterface/js/main/main-functions-ui.js
d6b9841b9a91viewer-only

Last Change
Raw File

main-functions-ui.js
View Options

// UI-related functions (show/hide elements, etc.)
/* SHOWING MESSAGES */
/* Show a message in the results sections (empty results, errors, etc..) */
function showMessage(message) {
$("#info-message").fadeIn('fast');
$("#info-message").text(message);
}
/* Hide the message (when a new query is performed) */
function hideMessage() {
$("#info-message").fadeOut('fast');
}
/* TOGGLING */
/* Toggle bottom menu visibility */
function toggleUpDown(down) {
bt = $("#bottom").css('margin-bottom') === '0px' ? '-220px' : '0px';
if (typeof (down) === 'undefined' || (down && bt !== '0px')) {
$("#bottom").animate({'margin-bottom': bt}, 300);
if (bt === '0px') {
angle = 0;
animateTo = 180;
} else {
angle = 180;
animateTo = 360;
}
$("#updown img").rotate({
duration: 800,
angle: angle,
animateTo: animateTo
});
}
}
/* Hide or Show the overlay & trash icon */
function toggleOverlayVisibility(event, ui) {
$(ui.item).find(".overlay").toggleClass("hidden");
$(ui.item).find(".trash").toggleClass("hidden");
}
/* Hide or Show the load more link */
function toggleLoadMore(mode) {
if (mode === "hide")
$("#load-more").fadeOut(10);
else
$("#load-more").fadeIn(10);
}
/* Hide or show the expert mode box */
function expertMode() {
updateExpert();
$("#expertmode-overlay").toggle('fast');
}
/* APPLYING BEHAVIORS TO CONTAINERS */
/* Draggable images */
function makeImagesDraggableSortable() {
/* Left & Right are sortable */
$(".image-container").sortable({containment: "document", scroll: false, revert: 200,
start: function(event, ui) {
toggleOverlayVisibility(event, ui);
},
stop: function(event, ui) {
toggleOverlayVisibility(event, ui);
}
}).disableSelection();
/* Bottom are just draggable */
$("#query-images ul li").draggable({revert: "invalid", opacity: 0.8, helper: "clone"});
/* Results are draggable as well */
$("#results li").draggable({scroll: false, revert: "invalid", opacity: 0.8, helper: "clone"});
/* Uploaded images are draggable too */
$("#dropzone .dz-details img").draggable({revert: "invalid", opacity: 0.8, helper: "clone"});
/* Change containment option for left & right */
$("#relevant-images").sortable("option", "containment", "#left");
$("#irrelevant-images").sortable("option", "containment", "#right");
}
/* Droppable query boxes */
function makeQueryBoxesDroppable() {
$("#relevant-images").droppable({
accept: "#query-images li, #results li, #dropzone img",
activeClass: "box-active",
hoverClass: "box-hover",
drop: function(event, ui) {
var link, image;
//Modify link
link = $(ui.helper).find("a");
//Handle differently if the element is just an image (from uploads, for example)
if (ui.helper.is('img'))
image = ui.helper;
else
image = $(ui.helper).find("img");
dropImage(link, image, event.target);
}
});
}
/* Drop an image in one of the containers */
function dropImage(link, image, target) {
var content;
//Modifiy link
link.removeAttr('rel');
//Modify image
image.removeAttr("data-dz-thumbnail");
image.removeAttr('class');
image.removeAttr('style');
image.addClass('thumbnail');
//Handle differently if the element is just an image (from uploads, for example)
//TODO - Handle thumbnails from uploads
if (image.is('img'))
content = $('<a/>').attr("href", image.attr("src")).attr("class", "fancybox.image fancybox").append(image).outerHTML();
else {
//Remove image editing for query images on the side (for consistency)
link.removeClass('fancybox.iframe');
link.addClass('fancybox.image');
link.attr('href', image.attr('src'));
content = $(image).html();
}
//Construct new element to add in the list
newLiSimple = $("<li>" + content + "<div class='overlay'></div><div class='trash'></div></li>");
//TODO : REMOVE
//$(ui.draggable).remove();
//Add it to the list
$ul = $(target);//.find(".image-container");
$ul.append(newLiSimple);
$ul.sortable("refresh");
//Perform search
redirectToSearch();
}
/* Remove an image from one of the containers */
function deleteImage(li){
li.fadeOut("fast", function() {
$(this).remove();
//Perform search
redirectToSearch();
});
}
/* CONFIGURE SIZES */
/* Set the width of the results column based on the size of the container */
function setResultsColumnWidth() {
$("#results li").css("width", getResultsColumnWidth());
}
/* Calculate the width of the results column based on the size of the container */
function getResultsColumnWidth() {
$container = $("#results");
$containerWidth = parseFloat($container.css("width"));
$columnWidth = "";
//Set number of columns depending on the width of the results DIV
//<=500px : 2 columns
if ($containerWidth <= 500)
$columnWidth = "49.8%";
//<= 700px : 3 columns
else if ($containerWidth <= 700)
$columnWidth = "32.8%";
//<=900px : 4 columns
else if ($containerWidth <= 900)
$columnWidth = "24.8%";
//>900px : 5 columns
else if ($containerWidth <= 1200)
$columnWidth = "19.8%";
//>1200px : 5 columns
else
$columnWidth = "16.5%";
return $columnWidth;
}
/* MISC */
/* Clear out the results section of the page */
function clearResults() {
var destination = "#results";
$(destination).fadeOut("fast").promise();
toggleLoadMore('hide');
hideMessage();
}
/* Update Expert options */
function updateExpert() {
defineIndices(true);
$("#caption-index").val(captionIndex);
}
c4science · Help