Skip to content

Instantly share code, notes, and snippets.

@tintera

tintera/Bookmarklet - TaskPool image preview and galery.markdown

Last active August 29, 2015 14:22
Show Gist options
  • Save tintera/385c5f393733cf5b5d66 to your computer and use it in GitHub Desktop.
Save tintera/385c5f393733cf5b5d66 to your computer and use it in GitHub Desktop.
Download ZIP
Bookmarklet - TaskPool image preview and galery
Raw
index.html
<base href="https://www.taskpool.net/">
<table width="100%" id="commentGrid" class="editTable" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr rel="null " class="rowEven" style="display: table-row;">
<td data-bundleid="1432156281740:4248572741517669" class=" unreadComment"><span class="wordwrap"><span class="descriptionDate">[20.5.2015&nbsp;23:11 <a href="javascript:openWinE('editUser.do?action=Edit&amp;id=3405')">Ludmila Polanská</a>] </span><span class=""><span>&nbsp; Když se dala verze a zadala jsem nový požadavek, tak se mi nenabídl rolovací seznam se stítky?<br><br>Až po ručním refresh, čím to je? Můžete mi poradit? Děkuji. </span></span>
<span
class="">
<br>
<span>&nbsp; <img style="margin: 1px 3px -1px 4px;" alt="Soubor" src="_images/ext/attachment_blue.png"><a class="mail" href="file.do?id=2860178">2015-05-20_221601.png</a></span></span>
</span>
</td>
</tr>
<tr rel="null type_deadlines type_values " class="rowOdd" style="display: table-row;">
<td data-bundleid="1432154680173:8280620636627286" class=" unreadComment"><span class="wordwrap"><span class="descriptionDate">[20.5.2015&nbsp;22:44 <a href="javascript:openWinE('editUser.do?action=Edit&amp;id=3405')">Ludmila Polanská</a>] </span><span class=""><span>&nbsp; <img style="margin: 1px 3px -1px 4px;" alt="Soubor" src="_images/ext/attachment_blue.png"><a class="mail" href="file.do?id=2860169">2015-05-20_223513.png</a></span></span>
<span
class="">
<br>
<span>&nbsp; <img style="margin: 1px 3px -1px 4px;" alt="Soubor" src="_images/ext/attachment_blue.png"><a class="mail" href="file.do?id=2860170">2015-05-20_223611.png</a></span></span><span class="">
<br>
<span>&nbsp; <img style="margin: 1px 3px -1px 4px;" alt="Soubor" src="_images/ext/attachment_blue.png"><a class="mail" href="file.do?id=2860171">2015-05-20_223748.png</a></span></span><span class="">
<br>
<span>&nbsp; <img style="margin: 1px 3px -1px 4px;" alt="Soubor" src="_images/ext/attachment_blue.png"><a class="mail" href="file.do?id=2860172">2015-05-20_223830.png</a></span></span><span class="">
<br>
<span>&nbsp;Zadal k řešení, Priorita: Neuvedeno </span></span><span class="">
<br>
<span>&nbsp;Termín dokončení<span id="type_deadlines"></span> : 19.06.2015; </span>
</span><span class=" initialComment">
<br>
<span>&nbsp;<span id="type_values"></span>Typ aplikace: ?</span>
</span><span class="">
<br>
<span>&nbsp;Zaslána urgentní notifikace </span></span><a name="moreOrLess" href="javascript:void(null);" onclick="changeShowInitialComments(this);"><span class="showMore"> [více]</span><span class="showLess"> [méně]</span></a></span>
</td>
</tr>
</tbody>
</table>
<br />
<br /><a href="javascript:(function(){var jsCode = document.createElement('script');jsCode.setAttribute('src', 'https://rawgit.com/tintera/385c5f393733cf5b5d66/raw/script.js'); document.body.appendChild(jsCode); var cssCode=document.createElement('link'); cssCode.setAttribute('rel','stylesheet'); cssCode.setAttribute('type','text/css'); cssCode.setAttribute('href', 'https://rawgit.com/tintera/385c5f393733cf5b5d66/raw/style.css'); document.body.appendChild(cssCode);}());">TaskPool task images galery</a>
Raw
script.js
$(function() {
//gist.com project ID
if (window.hasOwnProperty('aaa_tintera_385c5f393733cf5b5d66')) {
console.log("TaskPool task images bookmarklet was already loaded. "+
"Exiting with no document modification.");
return;
}
console.log("TaskPool task images bookmarklet started. "+
"Version 1.0.20, created 7. 6. 2015 7:50 by TT");
var _workForFileNames = /jpg$|png$/i;
var _fixedBottom = 30;//px -- fixed footer height on TP 2.x
var _ikonaSouboru = '<img style="margin: 1px 3px -1px 4px;" alt="příloha" src="https://www.taskpool.net/_images/ext/attachment_blue.png"> ' //copied from TP 2.9
var _commentSelector = "#commentGrid tr"; //as used in TP 2.9
var _imageLinkSelector = "a.mail"; //as used in TP 2.9
var _onDisplayClass = "tt-big-on-display"; //classes are also used in css file
var _previewImageClass = "tt-preview-image";
var _galeryImageClass = "tt-galery-image";
var firstGaleryImage = 0;
var lastGaleryImage = 0;
var prevGaleryImage = 0;
var leftArrowKeyCode = 37;
var rightArrowKeyCode = 39;
var homeKeyCode = 36;
var endKeyCode = 35;
var escapeKeyCode = 27;
var mouseX;
var mouseY;
//hide my galery on click outside
$(document).mouseup(function (e)
{
var container = $("."+_onDisplayClass);
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
function createCursorImage(imageUrl) {
var cursorImageHTML = '<img class="tt-cursor-image" src="' + imageUrl + '" />';
return $(cursorImageHTML);
}
function createGaleryImage(imageUrl, caption, displayComment) {
var galeryHTML = '<a class="'+_galeryImageClass+'" href="#"></a>';
var galeryImage= $(galeryHTML);
galeryImage.append(displayComment);
galeryImage.append('<br /><br /><img src="' + imageUrl + '" alt="'+caption+'" />');
galeryImage.append('<br /><span class="caption">'+_ikonaSouboru+caption+'</span>');
galeryImage.click(function() { $(this).hide("fast").removeClass(_onDisplayClass); });
galeryImage.keydown(function(e) {
if (e.which == escapeKeyCode) {
$(this).hide().removeClass(_onDisplayClass);
}//if
});//keydown
return galeryImage;
}//function
function setNextGaleryImage(galeryImage) {
galeryImage.keydown(function(e) {
if (e.which == leftArrowKeyCode) {
$(this).hide().removeClass(_onDisplayClass);
this.prevImage.show().addClass(_onDisplayClass).focus();
}//if
});//keydown
galeryImage[0].prevImage.keydown(function(e) {
if(e.which == rightArrowKeyCode) {
$(this).hide().removeClass(_onDisplayClass);;
galeryImage.show().addClass(_onDisplayClass).focus();
}//if
});//keydown
}//function
function setHomeEndGalery(firstImage, lastImage) {
if(firstImage !== lastImage){
$( "."+_galeryImageClass ).keydown(function(e) {
currentImage = $(this);
if (e.which == homeKeyCode && firstImage !== currentImage) {
console.log('home '+e.which);
currentImage.hide().removeClass(_onDisplayClass);
firstImage.show().addClass(_onDisplayClass).focus();
e.preventDefault();
}//if
if (e.which == endKeyCode && lastImage !== currentImage) {
console.log('end '+e.which);
currentImage.hide().removeClass(_onDisplayClass);
lastImage.show().addClass(_onDisplayClass).focus();
e.preventDefault();
}//if
});//keydown
}
}//function
function createPreviewImage(imageUrl) {
var previewHTML = '<img class='+_previewImageClass+' src="' + imageUrl + '" />';
return $(previewHTML);
}
function showGaleryOnClick(element) {
element.click(function() {
var onDisplay = $('.tt-big-on-display');
if($(onDisplay).is(this.galeryImage)) {
onDisplay.hide("fast").removeClass(_onDisplayClass);
} else {
onDisplay.hide("fast").removeClass(_onDisplayClass);
this.galeryImage.show("fast").focus();
this.galeryImage.addClass(_onDisplayClass);
this.cursorImage.fadeOut("fast");
}
}); //click
}
$( _commentSelector ).each(function( i ) { //enumerate tp 2.9 commment
var comment = $(this);
var commentClone = comment.clone()
commentClone.remove("[name='moreOrLess']");
comment.find( _imageLinkSelector ).each(function( j ) {
var link = $(this);
if(_workForFileNames.test(link.text())) {
var href = link.attr("href");
var cursorImage = createCursorImage(href);
var galeryImage = createGaleryImage(href, link.text(), commentClone.clone());
if(prevGaleryImage!==0) {
galeryImage[0].prevImage = prevGaleryImage;
setNextGaleryImage(galeryImage);
} else {
firstGaleryImage = galeryImage;
}
prevGaleryImage = galeryImage;
var preview = createPreviewImage(href); //should be called after createGaleryImage
preview[0].cursorImage=cursorImage;
preview[0].galeryImage=galeryImage;
cursorImage[0].galeryImage=galeryImage;
showGaleryOnClick(preview);
showGaleryOnClick(cursorImage);
link.after(preview);
link.after(galeryImage);
link.after(cursorImage);
} //if
}); //each link
}); //each comment
lastGaleryImage = prevGaleryImage;
//console.debug(firstGaleryImage);
//console.debug(lastGaleryImage);
setHomeEndGalery(firstGaleryImage, lastGaleryImage);
function moveToScreen(targetElement) {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var delta = $(document).scrollTop();
var position = targetElement.offset();
//vertical
if (position.top < delta || (position.top+targetElement.outerHeight()) > (delta + h - _fixedBottom)) {
targetElement.offset({ top:Math.max(delta, delta + h - _fixedBottom - targetElement.outerHeight()), left:position.left});
}
//TODO: horizontal
}//moveToScreen
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$("."+_previewImageClass).mousemove(function(){
this.cursorImage.css({'top':mouseY+20,'left':mouseX+20});
moveToScreen(this.cursorImage);
});
$("."+_previewImageClass).mouseenter(function(){
this.cursorImage.fadeIn('fast');
});
$("."+_previewImageClass).mouseleave(function(){
this.cursorImage.fadeOut('fast');
});
window.aaa_tintera_385c5f393733cf5b5d66 = true;
console.log("TaskPool task images bookmarklet finished.");
}); //function
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
.tt-preview-image {
vertical-align:middle;
margin: 7px;
max-height:200px; max-width:200px;
}
.tt-cursor-image {
position:absolute; display:none;
max-height:40%; max-width:40%;
border:1px solid #222; background-color:#eee; border-radius:3px; padding:15px;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
.tt-galery-image {
display:none; position:fixed; cursor:pointer; padding:15px; z-index:100;
top:50%; left:50%; margin-right:-50%; width:60%; transform:translate(-50%, -50%);
background-color:#eee; text-decoration:none; color:inherit;
border:1px solid #222; border-radius:3px; box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
.tt-galery-image:hover, .tt-galery-image a, .tt-galery-image a:hover {
text-decoration:none;
}
.tt-galery-image .showLess, .tt-galery-image .showMore { /* vazano na strukturu komentare TP 2.x */
display: none;
}
.tt-galery-image img {
max-height:60%; max-width:100%;
}
.tt-galery-image .caption {
line-height: 200%;
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment