Merge pull request #2726 from rabuzarus/1008-item-highlight

Frio: fix auto jump to the item position in /display
This commit is contained in:
Tobias Diekershoff 2016-08-10 14:42:11 +02:00 committed by GitHub
commit 2a79b8c235
3 changed files with 35 additions and 14 deletions

View file

@ -0,0 +1,11 @@
/**
* @brief Javascript for the display module
*/
// Catch the GUID from the URL
var itemGuid = window.location.pathname.split("/").pop();
$(window).load(function(){
// Scroll to the Item by its GUID
scrollToItem('item-'+itemGuid);
});

View file

@ -542,3 +542,26 @@ String.prototype.rtrim = function() {
var trimmed = this.replace(/\s+$/g, ''); var trimmed = this.replace(/\s+$/g, '');
return trimmed; return trimmed;
}; };
// Scroll to a specific item and highlight it
// Note: jquery.color.js is needed
function scrollToItem(itemID) {
if( typeof itemID === "undefined")
return;
// Define the colors which are used for highlighting
var colWhite = {backgroundColor:'#F5F5F5'};
var colShiny = {backgroundColor:'#FFF176'};
// Get the Item Position (we need to substract 100 to match
// correct position
var itemPos = $('#'+itemID).offset().top - 100;
// Scroll to the DIV with the ID (GUID)
$('html, body').animate({
scrollTop: itemPos
}, 400, function() {
// Highlight post/commenent with ID (GUID)
$('#'+itemID).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600);
});
}

View file

@ -1,4 +1,5 @@
<script type="text/javascript" src="view/theme/frio/frameworks/jquery-color/jquery.color.js"></script> <script type="text/javascript" src="view/theme/frio/frameworks/jquery-color/jquery.color.js"></script>
{{if $mode == display}}<script type="text/javascript" src="view/theme/frio/js/mod_display.js"></script>{{/if}}
{{$live_update}} {{$live_update}}
@ -23,17 +24,3 @@
</a> </a>
<img id="item-delete-selected-rotator" class="like-rotator" src="images/rotator.gif" style="display: none;" /> <img id="item-delete-selected-rotator" class="like-rotator" src="images/rotator.gif" style="display: none;" />
{{/if}} {{/if}}
<script>
var colWhite = {backgroundColor:'#F5F5F5'};
var colShiny = {backgroundColor:'#FFF176'};
</script>
{{if $mode == display}}
<script>
var id = window.location.pathname.split("/").pop();
$(window).scrollTop($('#item-'+id).position().top);
$('#item-'+id).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 2000);
</script>
{{/if}}