Improve display feedback on like actions

[friendica.git] / view / theme / frio / js / theme.js

diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index 02bbd916d227973305e90e43a769a57727a82c84..4e8ede07fd965289a63c996aa1fec2f0e50e4948 100644 (file)
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -10,7 +10,7 @@ $(document).ready(function(){
                        $("#back-to-top").fadeOut();
                }
        });
- 
+
        // scroll body to 0px on click
        $("#back-to-top").click(function () {
                $("body,html").animate({
@@ -40,7 +40,7 @@ $(document).ready(function(){
        $(".field.select > select, .field.custom > select").addClass("form-control");
 
        // move the tabbar to the second nav bar
-       $("section ul.tabbar").first().appendTo("#topbar-second > .container > #tabmenu");
+       $("section .tabbar-wrapper").first().appendTo("#topbar-second > .container > #tabmenu");
 
        // add mask css url to the logo-img container
        //
@@ -54,7 +54,7 @@ $(document).ready(function(){
        }
 
        // make responsive tabmenu with flexmenu.js
-       // the menupoints which doesn't fit in the second nav bar will moved to a 
+       // the menupoints which doesn't fit in the second nav bar will moved to a
        // dropdown menu. Look at common_tabs.tpl
        $("ul.tabs.flex-nav").flexMenu({
                'cutoff': 2,
@@ -82,17 +82,17 @@ $(document).ready(function(){
                                return false;
                        }
                });
-               
+
                if(checked == true) {
                        $("a#item-delete-selected").fadeTo(400, 1);
                        $("a#item-delete-selected").show();
                } else {
                        $("a#item-delete-selected").fadeTo(400, 0, function(){
                                $("a#item-delete-selected").hide();
-                       });     
+                       });
                }
        });
-               
+
        //$('ul.flex-nav').flexMenu();
 
        // initialize the bootstrap tooltips
@@ -128,7 +128,7 @@ $(document).ready(function(){
                // append the new heading to the navbar
                $("#topbar-second > .container > #tabmenu").append(newText);
 
-               // try to get the value of the original search input to insert it 
+               // try to get the value of the original search input to insert it
                // as value in the nav-search-input
                var searchValue = $("#search-wrapper .form-group-search input").val();
 
@@ -258,9 +258,9 @@ $(document).ready(function(){
 
        // Set the padding for input elements with inline buttons
        //
-       // In Frio we use some input elemnts where the submit button is visually
+       // In Frio we use some input elements where the submit button is visually
        // inside the the input field (through css). We need to set a padding-right
-       // to the input field where the padding value would be at least the width
+       // to the input element where the padding value would be at least the width
        // of the button. Otherwise long user input would be invisible because it is
        // behind the button.
        $("body").on('click', '.form-group-search > input', function() {
@@ -573,31 +573,38 @@ String.prototype.rtrim = function() {
        return trimmed;
 };
 
-// Scroll to a specific item and highlight it
-// Note: jquery.color.js is needed
-function scrollToItem(itemID) {
-       if( typeof itemID === "undefined")
+/**
+ * Scroll the screen to the item element whose id is provided, then highlights it
+ *
+ * Note: jquery.color.js is required
+ *
+ * @param {string} elementId The item element id
+ * @returns {undefined}
+ */
+function scrollToItem(elementId) {
+       if (typeof elementId === "undefined") {
                return;
+       }
 
-       var elm = $('#'+itemID);
+       var $el = $(document.getElementById(elementId));
        // Test if the Item exists
-       if(!elm.length)
+       if (!$el.length) {
                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 = $(elm).offset().top - 100;
+       // Get the Item Position (we need to substract 100 to match correct position
+       var itemPos = $el.offset().top - 100;
 
        // Scroll to the DIV with the ID (GUID)
        $('html, body').animate({
                scrollTop: itemPos
        }, 400, function() {
                // Highlight post/commenent with ID  (GUID)
-               $(elm).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600);
+               $el.animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600);
        });
 }
 
@@ -610,3 +617,24 @@ function htmlToText(htmlString) {
 
        return text;
 }
+
+/**
+ * Sends a /like API call and updates the display of the relevant action button
+ * before the update reloads the item.
+ *
+ * @param {string} ident The id of the relevant item
+ * @param {string} verb The verb of the action
+ * @returns {undefined}
+ */
+function doLikeAction(ident, verb) {
+       unpause();
+
+       if (verb.indexOf('attend') === 0) {
+               $('.item-' + ident + ' .button-event:not(#' + verb + '-' + ident + ')').removeClass('active');
+       }
+       $('#' + verb + '-' + ident).toggleClass('active');
+       $('#like-rotator-' + ident.toString()).show();
+       $.get('like/' + ident.toString() + '?verb=' + verb, NavUpdate );
+       liking = 1;
+       force_update = true;
+}
\ No newline at end of file