Fix scrollToItem breaking dropItem functionality

- Add doc
- Refactor function by removing double jQuery wrapping
This commit is contained in:
Hypolite Petovan 2017-03-13 12:10:03 -04:00
parent 054f43a332
commit f2a0c9fad1
2 changed files with 19 additions and 12 deletions

View file

@ -573,31 +573,38 @@ String.prototype.rtrim = function() {
return trimmed; return trimmed;
}; };
// Scroll to a specific item and highlight it /**
// Note: jquery.color.js is needed * Scroll the screen to the item element whose id is provided, then highlights it
function scrollToItem(itemID) { *
if( typeof itemID === "undefined") * Note: jquery.color.js is required
*
* @param {string} elementId The item element id
* @returns {undefined}
*/
function scrollToItem(elementId) {
if (typeof elementId === "undefined") {
return; return;
}
var elm = $('#'+itemID); var $el = $(document.getElementById(elementId));
// Test if the Item exists // Test if the Item exists
if(!elm.length) if (!$el.length) {
return; return;
}
// Define the colors which are used for highlighting // Define the colors which are used for highlighting
var colWhite = {backgroundColor:'#F5F5F5'}; var colWhite = {backgroundColor:'#F5F5F5'};
var colShiny = {backgroundColor:'#FFF176'}; var colShiny = {backgroundColor:'#FFF176'};
// Get the Item Position (we need to substract 100 to match // Get the Item Position (we need to substract 100 to match correct position
// correct position var itemPos = $el.offset().top - 100;
var itemPos = $(elm).offset().top - 100;
// Scroll to the DIV with the ID (GUID) // Scroll to the DIV with the ID (GUID)
$('html, body').animate({ $('html, body').animate({
scrollTop: itemPos scrollTop: itemPos
}, 400, function() { }, 400, function() {
// Highlight post/commenent with ID (GUID) // Highlight post/commenent with ID (GUID)
$(elm).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600); $el.animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600);
}); });
} }

View file

@ -68,9 +68,9 @@ as the value of $top_child_total (this is done at the end of this file)
{{* Use a different div container in dependence max thread-level = 7 *}} {{* Use a different div container in dependence max thread-level = 7 *}}
{{if $item.thread_level<7}} {{if $item.thread_level<7}}
<div class="wall-item-container {{$item.indent}} {{$item.shiny}} {{$item.network}} thread_level_{{$item.thread_level}} {{if $item.thread_level==1}}panel-body h-entry{{else}}u-comment h-cite{{/if}}" id="item-{{$item.guid|regex_replace:'/%.*/':''}}"><!-- wall-item-container --> <div class="wall-item-container {{$item.indent}} {{$item.shiny}} {{$item.network}} thread_level_{{$item.thread_level}} {{if $item.thread_level==1}}panel-body h-entry{{else}}u-comment h-cite{{/if}}" id="item-{{$item.guid}}"><!-- wall-item-container -->
{{else}} {{else}}
<div class="wall-item-container {{$item.indent}} {{$item.shiny}} {{$item.network}} thread_level_7 u-comment h-cite" id="item-{{$item.guid|regex_replace:'/%.*/':''}}"> <div class="wall-item-container {{$item.indent}} {{$item.shiny}} {{$item.network}} thread_level_7 u-comment h-cite" id="item-{{$item.guid}}">
{{/if}} {{/if}}
<div class="media"> <div class="media">
{{* Put addional actions in a top-right dropdown menu *}} {{* Put addional actions in a top-right dropdown menu *}}