X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;ds=sidebyside;f=view%2Ftheme%2Ffrio%2Fjs%2Ftheme.js;h=4e8ede07fd965289a63c996aa1fec2f0e50e4948;hb=85144908fa9cf12594b568f4f0b2d37fa21b6be1;hp=414df7c1a9103557f88e57bc305a76c0bcf7b61f;hpb=0af572ffbaca04ac757a76ced22ab48a90e29a4a;p=friendica.git diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index 414df7c1a9..4e8ede07fd 100644 --- 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,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 = '

'+headingContent+'

'; + // 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 = '

'+headingContent+'

'; + // 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() + ' '); + $(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: "‹", -// next: "›", -// prevYear: "«", -// nextYear: "»", -// 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( -// "{1} : {2}".format( -// event.item['author-avatar'], -// event.item['author-name'], -// event.title -// )); -// break; -// case "agendaWeek": -// element.find(".fc-event-title").html( -// "{1}

{2}

{3}

".format( -// event.item['author-avatar'], -// event.item['author-name'], -// event.item.desc, -// event.item.location -// )); -// break; -// case "agendaDay": -// element.find(".fc-event-title").html( -// "{1}

{2}

{3}

".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( -// "{1} : {2}".format( -// event.item['author-avatar'], -// event.item['author-name'], -// event.title -// )); -// break; -// case "agendaWeek": -// element.find(".fc-event-title").html( -// "{1}

{2}

{3}

".format( -// event.item['author-avatar'], -// event.item['author-name'], -// event.item.desc, -// event.item.location -// )); -// break; -// case "agendaDay": -// element.find(".fc-event-title").html( -// "{1}

{2}

{3}

".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(/
/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