]> git.mxchange.org Git - friendica.git/blobdiff - view/theme/frio/js/theme.js
Improve display feedback on like actions
[friendica.git] / view / theme / frio / js / theme.js
index 414df7c1a9103557f88e57bc305a76c0bcf7b61f..4e8ede07fd965289a63c996aa1fec2f0e50e4948 100644 (file)
@@ -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,9 +40,7 @@ $(document).ready(function(){
        $(".field.select > select, .field.custom > select").addClass("form-control");
 
        // move the tabbar to the second nav bar
-       if( $("ul.tabbar").length ) {
-               $("ul.tabbar").appendTo("#topbar-second > .container > #tabmenu");
-       }
+       $("section .tabbar-wrapper").first().appendTo("#topbar-second > .container > #tabmenu");
 
        // add mask css url to the logo-img container
        //
@@ -56,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,
@@ -84,22 +82,23 @@ $(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
        $('body').tooltip({
                selector: '[data-toggle="tooltip"]',
+               container: 'body',
                animation: true,
                html: true,
                placement: 'auto',
@@ -129,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();
 
@@ -149,46 +148,138 @@ $(document).ready(function(){
                if( typeof searchValue !== "undefined") {
                        $("#nav-search-input-field").val(searchValue);
                }
-
        }
 
        // move the "Save the search" button to the second navbar
        $(".search-content-wrapper #search-save-form ").appendTo("#topbar-second > .container > #navbar-button");
 
+       // append the vcard-short-info to the second nav after passing the element
+       // with .fn (vcard username). Use scrollspy to get the scroll position.
+       if( $("aside .vcard .fn").length) {
+               $(".vcard .fn").scrollspy({
+                       min: $(".vcard .fn").position().top - 50,
+                       onLeaveTop: function onLeave(element) {
+                               $("#vcard-short-info").fadeOut(500, function () {
+                                       $("#vcard-short-info").appendTo("#vcard-short-info-wrapper");
+                               });
+                       },
+                       onEnter: function(element) {
+                               $("#vcard-short-info").appendTo("#nav-short-info");
+                               $("#vcard-short-info").fadeIn(500);
+                       },
+               });
+       }
+
+       // move the forum contact information of the network page into the second navbar
+       if( $(".network-content-wrapper > #viewcontact_wrapper-network").length) {
+               // get the contact-wrapper element and append it to the second nav bar
+               // Note: We need the first() element with this class since at the present time we
+               // store also the js template information in the html code and thats why
+               // there are two elements with this class but we don't want the js template
+               $(".network-content-wrapper > #viewcontact_wrapper-network .contact-wrapper").first().appendTo("#nav-short-info");
+       }
+
+       // move heading from network stream to the second navbar nav-short-info section
+       if( $(".network-content-wrapper > .section-title-wrapper").length) {
+               // get the heading element
+               var heading = $(".network-content-wrapper > .section-title-wrapper > h2");
+               // get the text of the heading
+               var headingContent = heading.text();
+               // create a new element with the content of the heading
+               var newText = '<h4 class="heading" data-toggle="tooltip" title="'+headingContent+'">'+headingContent+'</h4>';
+               // remove the old heading element
+               heading.remove(),
+               // put the new element to the second nav bar
+               $("#topbar-second #nav-short-info").append(newText);
+       }
+
+       if( $(".community-content-wrapper").length) {
+               // get the heading element
+               var heading = $(".community-content-wrapper > h3").first();
+               // get the text of the heading
+               var headingContent = heading.text();
+               // create a new element with the content of the heading
+               var newText = '<h4 class="heading">'+headingContent+'</h4>';
+               // remove the old heading element
+               heading.remove(),
+               // put the new element to the second nav bar
+               $("#topbar-second > .container > #tabmenu").append(newText);
+       }
+
+       // Dropdown menus with the class "dropdown-head" will display the active tab
+       // as button text
+       $("body").on('click', '.dropdown-head .dropdown-menu li a', function(){
+               $(this).closest(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
+               $(this).closest(".dropdown").find('.btn').val($(this).data('value'));
+               $(this).closest("ul").children("li").show();
+               $(this).parent("li").hide();
+       });
+
+       /* setup onoff widgets */
+       // Add the correct class to the switcher according to the input
+       // value (On/Off)
+       $(".toggle input").each(function(){
+               // Get the value of the input element
+               val = $(this).val();
+               id = $(this).attr("id");
+
+               // The css classes for "on" and "off"
+               onstyle = "btn-primary";
+               offstyle = "btn-default off";
+
+               // Add the correct class in dependence of input value (On/Off)
+               toggleclass = (val == 0 ? offstyle : onstyle);
+               $("#"+id+"_onoff").addClass(toggleclass);
+
+       });
+
+       // Change the css class while clicking on the switcher elements
+       $(".toggle label, .toggle .toggle-handle").click(function(event){
+               event.preventDefault();
+               // Get the value of the input element
+               var input = $(this).siblings("input");
+               var val = 1-input.val();
+               var id = input.attr("id");
+
+               // The css classes for "on" and "off"
+               var onstyle = "btn-primary";
+               var offstyle = "btn-default off";
+
+               // According to the value of the input element we need to decide
+               // which class need to be added and removed when changing the switch
+               var removedclass = (val == 0 ? onstyle : offstyle);
+               var addedclass = (val == 0 ? offstyle : onstyle)
+               $("#"+id+"_onoff").addClass(addedclass).removeClass(removedclass);
+
+               // After changing the switch the input element is getting
+               // the newvalue
+               input.val(val);
+       });
+
+       // Set the padding for input elements with inline buttons
+       //
+       // 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 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() {
+               // Get the width of the button (if the button isn't available
+               // buttonWidth will be null
+               var buttonWidth = $(this).next('.form-button-search').outerWidth();
+
+               if (buttonWidth) {
+                       // Take the width of the button and ad 5px
+                       var newWidth = buttonWidth + 5;
+                       // Set the padding of the input element according
+                       // to the width of the button
+                       $(this).css('padding-right', newWidth);
+               }
+
+       });
+
+
 });
-//function commentOpenUI(obj, id) {
-//     $(document).unbind( "click.commentOpen", handler );
-//
-//     var handler = function() {
-//             if(obj.value == '{{$comment}}') {
-//                     obj.value = '';
-//                     $("#comment-edit-text-" + id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
-//                     // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them)
-//                     // The submit button gets tabindex + 1
-//                     $("#comment-edit-text-" + id).attr('tabindex','9');
-//                     $("#comment-edit-submit-" + id).attr('tabindex','10');
-//                     $("#comment-edit-submit-wrapper-" + id).show();
-//             }
-//     };
-//
-//     $(document).bind( "click.commentOpen", handler );
-//}
-//
-//function commentCloseUI(obj, id) {
-//     $(document).unbind( "click.commentClose", handler );
-//
-//     var handler = function() {
-//             if(obj.value === '') {
-//             obj.value = '{{$comment}}';
-//                     $("#comment-edit-text-" + id).removeClass("comment-edit-text-full").addClass("comment-edit-text-empty");
-//                     $("#comment-edit-text-" + id).removeAttr('tabindex');
-//                     $("#comment-edit-submit-" + id).removeAttr('tabindex');
-//                     $("#comment-edit-submit-wrapper-" + id).hide();
-//             }
-//     };
-//
-//     $(document).bind( "click.commentClose", handler );
-//}
 
 function openClose(theID) {
        var elem = document.getElementById(theID);
@@ -482,159 +573,68 @@ String.prototype.rtrim = function() {
        return trimmed;
 };
 
+/**
+ * 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;
+       }
 
-        
-//     $(document).ready(function() {
-//             $('#events-calendar').fullCalendar({
-//                     firstDay: {{$i18n.firstDay}},
-//                     monthNames: ['{{$i18n.January}}','{{$i18n.February}}','{{$i18n.March}}','{{$i18n.April}}','{{$i18n.May}}','{{$i18n.June}}','{{$i18n.July}}','{{$i18n.August}}','{{$i18n.September}}','{{$i18n.October}}','{{$i18n.November}}','{{$i18n.December}}'],
-//                     monthNamesShort: ['{{$i18n.Jan}}','{{$i18n.Feb}}','{{$i18n.Mar}}','{{$i18n.Apr}}','{{$i18n.May}}','{{$i18n.Jun}}','{{$i18n.Jul}}','{{$i18n.Aug}}','{{$i18n.Sep}}','{{$i18n.Oct}}','{{$i18n.Nov}}','{{$i18n.Dec}}'],
-//                     dayNames: ['{{$i18n.Sunday}}','{{$i18n.Monday}}','{{$i18n.Tuesday}}','{{$i18n.Wednesday}}','{{$i18n.Thursday}}','{{$i18n.Friday}}','{{$i18n.Saturday}}'],
-//                     dayNamesShort: ['{{$i18n.Sun}}','{{$i18n.Mon}}','{{$i18n.Tue}}','{{$i18n.Wed}}','{{$i18n.Thu}}','{{$i18n.Fri}}','{{$i18n.Sat}}'],
-//                     buttonText: {
-//                             prev: "<span class='fc-text-arrow'>&lsaquo;</span>",
-//                             next: "<span class='fc-text-arrow'>&rsaquo;</span>",
-//                             prevYear: "<span class='fc-text-arrow'>&laquo;</span>",
-//                             nextYear: "<span class='fc-text-arrow'>&raquo;</span>",
-//                             today: '{{$i18n.today}}',
-//                             month: '{{$i18n.month}}',
-//                             week: '{{$i18n.week}}',
-//                             day: '{{$i18n.day}}'
-//                     },
-//                     events: '{{$baseurl}}/events/json/',
-//                     header: {
-//                             left: '',
-//                     //      center: 'title',
-//                             right: ''
-//                     },                      
-//                     timeFormat: 'H(:mm)',
-//                     eventClick: function(calEvent, jsEvent, view) {
-//                             showEvent(calEvent.id);
-//                     },
-//                     loading: function(isLoading, view) {
-//                             if(!isLoading) {
-//                                     $('td.fc-day').dblclick(function() { window.location.href='/events/new?start='+$(this).data('date'); });
-//                             }
-//                     },
-//                     
-//                     eventRender: function(event, element, view) {
-//                             //console.log(view.name);
-//                             if (event.item['author-name']==null) return;
-//                             switch(view.name){
-//                                     case "month":
-//                                     element.find(".fc-event-title").html(
-//                                             "<img src='{0}' style='height:10px;width:10px'>{1} : {2}".format(
-//                                                     event.item['author-avatar'],
-//                                                     event.item['author-name'],
-//                                                     event.title
-//                                     ));
-//                                     break;
-//                                     case "agendaWeek":
-//                                     element.find(".fc-event-title").html(
-//                                             "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
-//                                                     event.item['author-avatar'],
-//                                                     event.item['author-name'],
-//                                                     event.item.desc,
-//                                                     event.item.location
-//                                     ));
-//                                     break;
-//                                     case "agendaDay":
-//                                     element.find(".fc-event-title").html(
-//                                             "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
-//                                                     event.item['author-avatar'],
-//                                                     event.item['author-name'],
-//                                                     event.item.desc,
-//                                                     event.item.location
-//                                     ));
-//                                     break;
-//                             }
-//                     }
-//                     
-//             })
-//             
-//             // center on date
-//             var args=location.href.replace(baseurl,"").split("/");
-//             if (args.length>=4) {
-//                     $("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1);
-//             } 
-//
-//             // echo the title
-//             var view = $('#events-calendar').fullCalendar('getView');
-//             $('#fc-title').text(view.title);
-//
-//             // show event popup
-//             var hash = location.hash.split("-")
-//             if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]);
-//             
-//     });
-       
-//             $(document).ready(function() {
-//             $('#events-calendar').fullCalendar({
-//
-//                     events: '{{$baseurl}}/events/json/',
-//                     header: {
-//                             left: '',
-//                     //      center: 'title',
-//                             right: ''
-//                     },                      
-//                     timeFormat: 'H(:mm)',
-//                     eventClick: function(calEvent, jsEvent, view) {
-//                             showEvent(calEvent.id);
-//                     },
-//                     loading: function(isLoading, view) {
-//                             if(!isLoading) {
-//                                     $('td.fc-day').dblclick(function() { window.location.href='/events/new?start='+$(this).data('date'); });
-//                             }
-//                     },
-//                     
-//                     eventRender: function(event, element, view) {
-//                             //console.log(view.name);
-//                             if (event.item['author-name']==null) return;
-//                             switch(view.name){
-//                                     case "month":
-//                                     element.find(".fc-event-title").html(
-//                                             "<img src='{0}' style='height:10px;width:10px'>{1} : {2}".format(
-//                                                     event.item['author-avatar'],
-//                                                     event.item['author-name'],
-//                                                     event.title
-//                                     ));
-//                                     break;
-//                                     case "agendaWeek":
-//                                     element.find(".fc-event-title").html(
-//                                             "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
-//                                                     event.item['author-avatar'],
-//                                                     event.item['author-name'],
-//                                                     event.item.desc,
-//                                                     event.item.location
-//                                     ));
-//                                     break;
-//                                     case "agendaDay":
-//                                     element.find(".fc-event-title").html(
-//                                             "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
-//                                                     event.item['author-avatar'],
-//                                                     event.item['author-name'],
-//                                                     event.item.desc,
-//                                                     event.item.location
-//                                     ));
-//                                     break;
-//                             }
-//                     }
-//                     
-//             })
-//             
-//             // center on date
-//             var args=location.href.replace(baseurl,"").split("/");
-//             if (args.length>=4) {
-//                     $("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1);
-//             } 
-//
-//             // echo the title
-//             var view = $('#events-calendar').fullCalendar('getView');
-//             $('#fc-title').text(view.title);
-//
-//             // show event popup
-//             var hash = location.hash.split("-")
-//             if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]);
-//             
-//     });
-       
\ No newline at end of file
+       var $el = $(document.getElementById(elementId));
+       // Test if the Item exists
+       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 = $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)
+               $el.animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600);
+       });
+}
+
+// format a html string to pure text
+function htmlToText(htmlString) {
+       // Replace line breaks with spaces
+       var text = htmlString.replace(/<br>/g, ' ');
+       // Strip the text out of the html string
+       text = text.replace(/<[^>]*>/g, '');
+
+       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