Skip to content

Commit

Permalink
replace jquery fadeOut/fadeIn with CSS3 opacity transition
Browse files Browse the repository at this point in the history
  • Loading branch information
Ray committed Sep 22, 2017
1 parent 7820813 commit d1d0260
Showing 1 changed file with 12 additions and 2 deletions.
14 changes: 12 additions & 2 deletions ImgHtml.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,16 @@ li.dropdown {\
@media screen and (max-width: 400px) {\
ul li { float: none; } \
}\
.visible\
{\
opacity: 1;\
transition: opacity 1s ease;\
}\
.faded\
{\
opacity: 0.2;\
transition: opacity 1s ease;\
}\
</style>\n";


Expand Down Expand Up @@ -472,8 +482,8 @@ li.dropdown {\

const char* ImgHtmlFlexboxSlide::_jsblock()
{
static const char* js = "<script>\n$(function() {\n// Select all links with hashes\n$('a[href*=\"\\\\#\"]')\n // Remove links that don't actually link to anything\n .not('[href=\"\\\\#\"]')\n .not('[href=\"\\\\#0\"]')\n .click(function(event) {\n // On-page links\n if (\n location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '')\n &&\n location.hostname == this.hostname\n ) {\n // Figure out element to scroll to\n var target = $(this.hash);\n target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');\n // Does a scroll target exist?\n if (target.length) {\n // Only prevent default if animation is actually gonna happen\n event.preventDefault();\n $('html, body').animate({\n scrollTop: target.offset().top\n }, 1000, function() {\n // Callback after animation\n // Must change focus!\n var $target = $(target);\n $target.focus();\n if ($target.is(\":focus\")) { // Checking if the target was focused\n return false;\n } else {\n $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable\n $target.focus(); // Set focus again\n };\n });\n }\n }\n });\n});\n</script>\
\n<script>\n$(document).ready(function() {\n var i = 0;\n var len = $('div[id^=\"photo_block\"]').length;\n\n function _scrollNext() {\n\ti = ++i % len;\n\tvar target = \"#photo_block\" + i;\n\t$('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n };\n function _scrollPrev() {\n\tif (!i) i = len;\n\t--i;\n\tvar target = \"#photo_block\" + i;\n\t$('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n };\n\n\n $('#next').click(function() {\n\t_scrollNext();\n\treturn false;\n });\n\n $('#prev').click(function() {\n\t_scrollPrev();\n\treturn false;\n });\n\n var rating_hide = 0;\n\n function _toggleRatings(r_)\n {\n $('.flex-item').each(function(){\n\t var item_rating = $(this).attr(\"rating\");\n\t if (rating_hide == 1) {\n\t $(this).fadeTo(750, 1);\n\t }\n\t else {\n\t\tif (item_rating < r_) {\n\t\t $(this).fadeTo(750, 0.2);\n\t\t}\n\t\telse {\n\t\t $(this).fadeTo(750, 1);\n\t\t}\n\t }\n\t});\n\t\n\tif (rating_hide == 1) {\n\t $('.ToggleRatings').text(\"Only Show Rated (showing all)\");\n\t}\n\telse {\n\t $('.ToggleRatings').text(\"Show All (showing rated)\");\n\t}\n\trating_hide = !rating_hide;\n }\n function _showRatingGT(r_)\n {\n $('.flex-item').each(function(){\n\t var item_rating = $(this).attr(\"rating\");\n\t if (item_rating < r_) {\n\t $(this).fadeTo(750, 0.2);\n\t }\n\t else {\n\t\t$(this).fadeTo(750, 1);\n\t }\n\t});\n\t$('.ToggleRatings').text(\"Show All \" + \"(showing >=\" + r_ + \")\");\n\trating_hide = 0;\n }\n\n $('body').keydown(function(evnt) \n {\n switch (evnt.keyCode) {\n\t case 74:\n\t case 39:\n\t\tevnt.preventDefault();\n\t\t_scrollNext();\n\t\tbreak;\n\n\t case 75:\n\t case 37:\n\t\tevnt.preventDefault();\n\t\t_scrollPrev();\n\t\tbreak;\n\n\t case 48: //0\n\t case 49:\n\t case 50:\n\t case 51:\n\t case 52:\n\t case 53:\n\t _showRatingGT(evnt.keyCode - 48);\n\t\tbreak;\n\n\t case 82: //r\n\t _toggleRatings(1);\n\t\t break;\n\t}\n });\n\n $('#toggle_ratings').click(function() {\n _toggleRatings(1);\n });\n});\n</script>\n";
static const char* js = "<script>\n$(function() {\n// Select all links with hashes\n$('a[href*=\"\\\\#\"]')\n // Remove links that don't actually link to anything\n .not('[href=\"\\\\#\"]')\n .not('[href=\"\\\\#0\"]')\n .click(function(event) {\n // On-page links\n if (\n location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '')\n &&\n location.hostname == this.hostname\n ) {\n // Figure out element to scroll to\n var target = $(this.hash);\n target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');\n // Does a scroll target exist?\n if (target.length) {\n // Only prevent default if animation is actually gonna happen\n event.preventDefault();\n $('html, body').animate({\n scrollTop: target.offset().top\n }, 1000, function() {\n // Callback after animation\n // Must change focus!\n var $target = $(target);\n $target.focus();\n if ($target.is(\":focus\")) { // Checking if the target was focused\n return false;\n } else {\n $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable\n $target.focus(); // Set focus again\n };\n });\n }\n }\n });\n});\n</script>\n\
<script>\n$(document).ready(function() {\n var i = 0;\n var len = $('div[id^=\"photo_block\"]').length;\n\n function _scrollNext() {\n i = ++i % len;\n var target = \"#photo_block\" + i;\n $('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n };\n function _scrollPrev() {\n if (!i) i = len;\n --i;\n var target = \"#photo_block\" + i;\n $('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n };\n\n\n $('#next').click(function() {\n _scrollNext();\n return false;\n });\n\n $('#prev').click(function() {\n _scrollPrev();\n return false;\n });\n\n var rating_hide = 0;\n\n function _toggleRatings(r_)\n {\n $('.flex-item').each(function(){\n var item_rating = $(this).attr(\"rating\");\n if (rating_hide == 1) {\n\t$(this).removeClass(\"faded\").addClass(\"visible\");\n }\n else {\n\t if (item_rating < r_) {\n\t $(this).removeClass(\"visible\").addClass(\"faded\");\n\t }\n\t else {\n\t $(this).removeClass(\"faded\").addClass(\"visible\");\n\t }\n }\n });\n \n if (rating_hide == 1) {\n $('.ToggleRatings').text(\"Only Show Rated (showing all)\");\n }\n else {\n $('.ToggleRatings').text(\"Show All (showing rated)\");\n }\n rating_hide = !rating_hide;\n }\n function _showRatingGT(r_)\n {\n $('.flex-item').each(function(){\n var item_rating = $(this).attr(\"rating\");\n if (item_rating < r_) {\n\t$(this).removeClass(\"visible\").addClass(\"faded\");\n }\n else {\n\t$(this).removeClass(\"faded\").addClass(\"visible\");\n }\n });\n $('.ToggleRatings').text(\"Show All \" + \"(showing >=\" + r_ + \")\");\n rating_hide = 0;\n }\n\n $('body').keydown(function(evnt) \n {\n switch (evnt.keyCode) {\n case 74:\n case 39:\n\tevnt.preventDefault();\n\t_scrollNext();\n\tbreak;\n\n case 75:\n case 37:\n\tevnt.preventDefault();\n\t_scrollPrev();\n\tbreak;\n\n case 48: //0\n case 49:\n case 50:\n case 51:\n case 52:\n case 53:\n\t_showRatingGT(evnt.keyCode - 48);\n\tbreak;\n\n case 82: //r\n _toggleRatings(1);\n break;\n }\n });\n\n $('#toggle_ratings').click(function() {\n _toggleRatings(1);\n });\n});\n</script>\n\n";
return js;
}

Expand Down

0 comments on commit d1d0260

Please sign in to comment.