]> git.mxchange.org Git - friendica.git/blobdiff - view/theme/frio/js/theme.js
frio: some css work for help docs
[friendica.git] / view / theme / frio / js / theme.js
index 23c1f096e3f7367bd5b439127a25593cebc51642..8fbee06e51721c2ae7b78bf590fcbf6c5fb76108 100644 (file)
@@ -40,7 +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")) {
+       if( $("ul.tabbar").length ) {
                $("ul.tabbar").appendTo("#topbar-second > .container > #tabmenu");
        }
 
@@ -50,7 +50,7 @@ $(document).ready(function(){
        // to the friendica logo (the mask is in nav.tpl at the botom). To make it work we need to apply the
        // correct url. The only way which comes to my mind was to do this with js
        // So we apply the correct url (with the link to the id of the mask) after the page is loaded.
-       if($("#logo-img")) {
+       if($("#logo-img").length ) {
                var pageurl = "url('" + window.location.href + "#logo-mask')";
                $("#logo-img").css({"mask": pageurl});
        }
@@ -66,7 +66,7 @@ $(document).ready(function(){
        });
 
        // add Jot botton to the scecond navbar
-       if( $("section #jotOpen")) {
+       if( $("section #jotOpen").length ) {
                $("section #jotOpen").appendTo("#topbar-second > .container > #navbar-button");
                if( $("#jot-popup").is(":hidden")) $("#topbar-second > .container > #navbar-button #jotOpen").hide();
        }
@@ -94,13 +94,6 @@ $(document).ready(function(){
                        });     
                }
        });
-
-       // add search-heading to the scecond navbar
-       if( $(".search-heading")) {
-               $(".search-heading").appendTo("#topbar-second > .container > #tabmenu");
-       }
-
-       
                
        //$('ul.flex-nav').flexMenu();
 
@@ -120,15 +113,56 @@ $(document).ready(function(){
        // initialize the bootstrap-select
        $('.selectpicker').selectpicker();
 
+       // add search-heading to the seccond navbar
+       if( $(".search-heading").length) {
+               $(".search-heading").appendTo("#topbar-second > .container > #tabmenu");
+       }
+
+       // add search results heading to the second navbar
+       // and insert the search value to the top nav search input
+       if( $(".search-content-wrapper").length ) {
+               // get the text of the heading (we catch the plain text because we don't
+               // want to have a h4 heading in the navbar
+               var searchText = $(".section-title-wrapper > h2").text();
+               // insert the plain text in a <h4> heading and give it a class
+               var newText = '<h4 class="search-heading">'+searchText+'</h4>';
+               // 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 
+               // as value in the nav-search-input
+               var searchValue = $("#search-wrapper .form-group-search input").val();
+
+               // if the orignal search value isn't available use the location path as value
+               if( typeof searchValue === "undefined") {
+                       // get the location path
+                       var urlPath = window.location.search
+                       // and split it up in its parts
+                       var splitPath = urlPath.split(/(\?search?=)(.*$)/);
+
+                       if(typeof splitPath[2] !== 'undefined') {
+                               // decode the path (e.g to decode %40 to the character @)
+                               var searchValue = decodeURIComponent(splitPath[2]);
+                       }
+               }
+
+               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 .p-addr (vcard). Use scrollspy to get the scroll position.
-       if( $("aside .vcard .p-addr").length) {
-               $(".vcard .p-addr").scrollspy({
-                       min: $(".vcard .p-addr").position().top - 50,
+       // 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").appendTo("#vcard-short-info-wrapper");
-                               $("#vcard-short-info").fadeOut(500);
-
+                               $("#vcard-short-info").fadeOut(500, function () {
+                                       $("#vcard-short-info").appendTo("#vcard-short-info-wrapper");
+                               });
                        },
                        onEnter: function(element) {
                                $("#vcard-short-info").appendTo("#nav-short-info");
@@ -145,6 +179,43 @@ $(document).ready(function(){
                // 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();
+       });
+
 });
 //function commentOpenUI(obj, id) {
 //     $(document).unbind( "click.commentOpen", handler );
@@ -472,3 +543,40 @@ 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")
+               return;
+
+       var elm = $('#'+itemID);
+       // Test if the Item exists
+       if(!elm.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;
+
+       // 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);
+       });
+}
+
+// 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;
+}