X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;ds=inline;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