Download as
Browse Code »

Commit 5a9b31396227f115a33160e0548d45720584e63c

Authored by Fabio Teixeira
1 parent 2e0e1b3d
Exists in theme_javascript_refactory

Refactory theme javascript by adding namespaces, remove some dead code, optmize … 

…methods and move custom translations to custom_locales file

Signed-off-by: ArthurJahn <stutrzbecher@gmail.com>
Signed-off-by: Dylan Guedes <djmgguedes@gmail.com>
Signed-off-by: Fabio Teixeira <fabio1079@gmail.com>
Signed-off-by: Melissa Wen <melissa.srw@gmail.com>
Showing 1 changed file with 245 additions and 235 deletions   Show diff stats
src/noosfero-spb/noosfero-spb-theme/theme.js
  Diff comments   View file @5a9b313
1 -function alignBlocks(containerIndex){  
2 - //Needed to save the original reference to jQuery(this)  
3 - jt = jQuery(this);  
4 - longerBlock = 0;  
5 - jt.find(".block-outer").each(function () {  
6 - if(jQuery(this).height() > longerBlock)  
7 - longerBlock = jQuery(this).height();  
8 - }); 1 +/* globals jQuery */
9 2
10 - jt.find("#block-48504 .block-inner-2").height(492);  
11 - jt.find("#block-55304 .block-inner-2").height(378);  
12 -  
13 - //Aligns the blocks in the most common situations  
14 - jt.find(".block-outer").height(longerBlock);  
15 - //Only used for blocks with video, since it uses the size of the iframe  
16 - if(jt.find("iframe").length > 0){  
17 - jt.find(".block-inner-1 .block-inner-2").each(function (idx) {  
18 - if(idx==2){  
19 - jQuery(this).height(jt.find("iframe").height());  
20 - }  
21 - });  
22 - }  
23 -} 3 +// Theme namespace
  4 +var SPBNoosferoTheme = {};
24 5
25 -(function($) {  
26 - // Run code  
27 - if($.cookie("high_contrast") === 'true'){  
28 - $( "body" ).toggleClass( "contraste" );  
29 - }  
30 - $( "#siteaction-contraste a" ).click(function() {  
31 - $( "body" ).toggleClass( "contraste" );  
32 - if($('body').hasClass('contraste')){  
33 - $.cookie('high_contrast', 'true', {path: '/'});  
34 - } else {  
35 - $.cookie('high_contrast', null, { path: '/' });  
36 - }  
37 - });  
38 -  
39 - $( ".profile-image" ).prepend( "<span class='helper'></span>" );  
40 - //insere a mensagem no bloco de trilhas na página inicial//  
41 - $( ".action-home-index #content .community-track-plugin_track-card-list-block .track_list" ).prepend( "<span class='msg_block'>Construa seu caminho de participação na elaboração de políticas públicas...</span>" );  
42 - //insere a mensagem no bloco de comunidades na página inicial//  
43 - $( ".action-home-index #content .communities-block .block-inner-2>div" ).prepend( "<span class='msg_block'>Participe dos dialogos entre governo e sociedade em comunidades temáticas...</span>" );  
44 - $( ".action-home-index #content .communities-block .block-inner-2>div.block-footer-content .msg_block" ).remove();  
45 - $('.container-block-plugin_container-block').each(alignBlocks);  
46 -  
47 - $('#block-48500 > .block-inner-1 > .block-inner-2').append('<div class="more_button" style="position: absolute; top: 5px; left: 519px;"><div class="view_all"><a href="/portal/blog">Ler todas</a></div></div>'); 6 +// Add in jQuery a method that executes a given function only if there is a filled query result
  7 +jQuery.fn.doOnce = function( func ) {
  8 + this.length && func.apply( this );
  9 + return this;
  10 +}
48 11
  12 +// Animate Organization Ratings additional informations form
  13 +SPBNoosferoTheme.OrganizationRatings = (function($) {
  14 + 'use strict';
49 15
  16 + // Add a question mark next to each form field, so when user mouse over it,
  17 + // it displays some userfull information about the field
  18 + function setTooltipContent() {
  19 + $('span.star-tooltip').html('?');
  20 + }
50 21
51 -// Foco no botao de busca 22 + // Given the current state of the form(hidden or in display)
  23 + // change the arrow image and animte its state change
  24 + function animateExtraFields(additionalFields, arrow) {
  25 + var innerHeight = additionalFields[0].offsetHeight;
  26 +
  27 + // If in display, puts the down arrow and hide the form
  28 + if(additionalFields.height() !== 0) {
  29 + arrow.attr('class', 'comments-arrow-down');
  30 + additionalFields.animate({height: 0});
  31 + } else { // if the form is hidden, puts the up arrow and display the form
  32 + arrow.attr('class', 'comments-arrow-up');
  33 + additionalFields.animate({
  34 + height: additionalFields.get(0).scrollHeight
  35 + }, 1000 );
  36 + }
52 37
53 -$('#link-buscar').click(function(e) {  
54 - e.defaultPrevented();  
55 - window.location.hash = '#portal-searchbox';  
56 - $('.searchField').focus()  
57 -}) 38 + // Fix for the arrow change on the additional informations, it prevents the institution modal
  39 + // from killing the entire page. When the form had their status changed, the institution modal
  40 + // tended to cover the page even if it was not in display
  41 + document.getElementById('institution_modal').style.display = 'none';
  42 + }
58 43
59 -})(jQuery); 44 + // Set additional informations form up and down arrows click event
  45 + function setArrowDirection() {
  46 + var reportForm = $('div.star-comment-container');
  47 + var parent = reportForm.parent();
  48 + reportForm.detach(); // Remove form from the page DOM
  49 +
  50 + // Apply arrows click event
  51 + var additionalDataBar = reportForm.find('div.comments-display-fields');
  52 + additionalDataBar.on('click', function() {
  53 + var arrow = additionalDataBar.find('span[class*="comments-arrow"]');
  54 + var additionalFields = reportForm.find('.comments-software-extra-fields');
  55 + animateExtraFields(additionalFields, arrow);
  56 + });
60 57
  58 + // Add the form back to the page
  59 + parent.append(reportForm);
  60 + }
61 61
62 -// Efeito Fade nos box de softwares  
63 62
64 -(function($){  
65 - "use strict";// Make javascript less intolerant to errors 63 + function initialize() {
  64 + $('div.star-rate-form').doOnce(function() {
  65 + setTooltipContent();
  66 + setArrowDirection();
  67 + });
  68 + }
66 69
67 - var TRANSITION_TIME = 250;// milliseconds 70 + return {
  71 + init: initialize
  72 + };
68 73
  74 +}) (jQuery);
69 75
70 - function show_finality() {  
71 - var finality = $(this).children(".software-block-finality"); 76 +// Fade effect on software blocks of portal homepage
  77 +SPBNoosferoTheme.HighlightedSoftwaresBlock = (function($) {
  78 + 'use strict';
72 79
73 - //finality.stop().fadeTo(TRANSITION_TIME,1); 80 + function showFinality() {
  81 + var finality = $(this).children('div.software-block-finality');
74 finality.stop().fadeTo('fast', 1); 82 finality.stop().fadeTo('fast', 1);
75 - //finality.stop().animate({"top" : "0%"}, TRANSITION_TIME);  
76 } 83 }
77 84
78 - function hide_finality() {  
79 - var finality = $(this).children(".software-block-finality");  
80 -  
81 - //finality.stop().fadeTo(TRANSITION_TIME,0); 85 + function hideFinality() {
  86 + var finality = $(this).children('div.software-block-finality');
82 finality.stop().fadeTo('fast', 0); 87 finality.stop().fadeTo('fast', 0);
83 - //finality.stop().animate({"top" : "100%"}, TRANSITION_TIME);  
84 } 88 }
85 89
86 - function move_article_buttons(){  
87 - var article_actions = $('#article-actions').clone();  
88 - var report = $('.report-abuse-action').remove();  
89 - var suggest = $('.icon-suggest').remove(); 90 + // Set the mouse over and out event in each of the finality blocks in the page
  91 + function setFadeInOutFinality(){
  92 + $('#boxes div.software-block-finality').css({'opacity':0, 'top':0});
  93 + var softwaresBlocks = $('#boxes div.software-block');
90 94
91 -  
92 - $(article_actions).find('.icon-edit, .icon-new, .icon-delete, .icon-locale').remove();  
93 - $('.article-body').append(article_actions); 95 + softwaresBlocks.mouseover(showFinality);
  96 + softwaresBlocks.mouseout(hideFinality);
94 } 97 }
95 98
96 - function add_link_to_article_div(){  
97 - var list = $('.display-content-block').find('li'); 99 + function initialize() {
  100 + $('#boxes .box-1 div.softwares-block').doOnce(function() {
  101 + setFadeInOutFinality();
  102 + });
  103 + }
98 104
99 - list.each(function(){  
100 - var link = $(this).find('.title').find('a').attr('href');  
101 - var text = $(this).find('.lead').find('p').text(); 105 + return {
  106 + init: initialize
  107 + };
  108 +}) (jQuery);
  109 +
  110 +
  111 +SPBNoosferoTheme.NoosferoHTMLAdjusts = (function($) {
  112 + 'use strict';
  113 +
  114 + // Take each list item from the block and apply to its lead the same link as its title
  115 + // then wraps the list item inside a new div with class notice-item
  116 + function insertLinksAndWrapsOnHomeNews(){
  117 + var news = $('div.display-content-block').find('li');
  118 + var parent = news.parent();
  119 + news.detach();
  120 + news.each(function(){
  121 + //add link on lead
  122 + var link = $(this).find('div.title a').attr('href');
  123 + var lead = $(this).find('div.lead');
102 var leadLink = $('<a></a>'); 124 var leadLink = $('<a></a>');
103 125
104 leadLink.attr('href', link); 126 leadLink.attr('href', link);
105 - leadLink.text(text); 127 + leadLink.text(lead.find('p').text());
  128 + lead.html(leadLink);
106 129
107 - $(this).find('.lead').html(leadLink); 130 + //add wraps to improve styling
  131 + $(this).find('div:gt(0)').wrapAll('<div class="notice-item"/>');
  132 + $(this).find('.notice-item div:gt(0)').wrapAll('<div class="notice-info"/>');
108 }); 133 });
  134 +
  135 + parent.append(news);
109 } 136 }
110 137
111 - function insert_notice_div(){  
112 - var notice = $('.display-content-block').find('li');  
113 - notice.each(function(){  
114 - var $set = $(this).children();  
115 - for(var i=1, len = $set.length; i < len; i+=5){  
116 - $set.slice(i, i+5).wrapAll('<div class="notice-item"/>');  
117 - }  
118 - for(var i=2, len = $set.length; i < len; i+=3){  
119 - $set.slice(i, i+3).wrapAll('<div class="notice-info"/>'); 138 + // Add a toggle tooltip to all span with title attribute
  139 + function addTooltips(){
  140 + $('#content span[title]').doOnce(function(){
  141 + this.attr('data-toggle', 'tooltip');
  142 + this.tooltip();
  143 + });
  144 + }
  145 +
  146 + // Make the link next to a popover span show the popover when it is clicked
  147 + function addPopovers() {
  148 + var span = $('span[data-toggle="popover"]');
  149 + var place = span.attr('data-placement');
  150 + var elementClass = span.attr('data-class');
  151 +
  152 + span.doOnce(function(){
  153 + var popover = this.popover({
  154 + html:true,
  155 + placement: place,
  156 + content: function() {
  157 + return $(this).next().html();
120 } 158 }
121 - //$('<div class="notice-item"></div>').wrap($(this).find( '.image', '.title', '.lead', '.read_more')); 159 + })
  160 + .data('bs.popover');
  161 +
  162 + if(popover) {
  163 + popover.tip()
  164 + .addClass(elementClass);
  165 +
  166 + // Make the link show the span popover when it is clicked
  167 + $('a.toggle-popover').on('click',function() {
  168 + span.trigger('click');
  169 + });
  170 + }
122 }); 171 });
  172 + }
123 173
  174 + function moveBreadcrumbs() {
  175 + $('div.breadcrumbs-plugin_content-breadcrumbs-block').doOnce(function() {
  176 + this.insertBefore('#content-inner');
  177 + $('<span id="breadcrumbs-you-are-here">Você está aqui:</span>').insertBefore(this.find('div.block-inner-2').children().first());
  178 + });
124 } 179 }
125 180
126 - //toggle filter options in catalog page  
127 - function setFilterCategoriesOptionClass() {  
128 - var filterOptions = $("#filter-categories-option");  
129 - filterOptions.addClass("animated slideInDown"); 181 + function removeButtons(){
  182 + $('#article-actions').doOnce(function() {
  183 + $(this).children('.icon-spread, .icon-locale, .report-abuse-action, .icon-clone').remove();
  184 + });
  185 +
  186 + $('div.page-members-header').doOnce(function() {
  187 + $(this).find('.report-abuse-action').remove();
  188 + });
130 } 189 }
131 190
  191 + // Put the focus on the search form when user click on the "go to search link"
  192 + function searchLinkApplyFocusToItsForm() {
  193 + $('#link-buscar').click(function(e) {
  194 + e.defaultPrevented();
  195 + $('.searchField').focus();
  196 + });
  197 + }
  198 +
  199 + function initialize() {
  200 + insertLinksAndWrapsOnHomeNews();
  201 + addTooltips();
  202 + addPopovers();
  203 + moveBreadcrumbs();
  204 + searchLinkApplyFocusToItsForm();
  205 + removeButtons();
  206 + }
  207 +
  208 + return {
  209 + init: initialize
  210 + };
  211 +
  212 +}) (jQuery);
  213 +
  214 +// Software catalog category filter toggle functionality
  215 +SPBNoosferoTheme.SoftwareCatalog = (function($) {
  216 + 'use strict';
  217 +
  218 + // Apply the toggle animation on the category filter based on its current status
132 function toggleFilterOptions(){ 219 function toggleFilterOptions(){
133 - var filterOptions = $("#filter-categories-option");  
134 - var filterHeight = filterOptions[0].scrollHeight;  
135 - var showOptions = $("#filter-option-catalog-software");  
136 - var hideOptions = $("#filter-option-catalog-close");  
137 - if(hideOptions.is(":visible")){  
138 - //filterOptions.slideUp(function() {  
139 - showOptions.show();  
140 - hideOptions.hide();  
141 - //}); 220 + var filter = document.getElementById('filter-catalog-software');
  221 + var filterOptions = $(filter.children[0]); // filter categories
  222 + var filterHeight = filterOptions[0].scrollHeight; // filter categories height to be used when displaying it
  223 + var showOptions = $(filter.children[1]); // Show categories div, has a click event
  224 + var hideOptions = $(filter.children[2]); // Hide categories div, has a click event
  225 +
  226 + // If the hide categories div is visible and it is clicked,
  227 + // hide the categories and display the show categories div
  228 + if(hideOptions.is(':visible')){
  229 + showOptions.show();
  230 + hideOptions.hide();
  231 +
142 filterOptions.animate({ 232 filterOptions.animate({
143 height: 0 233 height: 0
144 },500); 234 },500);
145 - }  
146 - else { 235 + } else { // The user clicked on the show categories div, then show the categories and the "hide categories div"
147 showOptions.hide(); 236 showOptions.hide();
148 hideOptions.show(); 237 hideOptions.show();
  238 +
149 filterOptions.animate({ 239 filterOptions.animate({
150 height: filterHeight 240 height: filterHeight
151 },500); 241 },500);
152 } 242 }
153 } 243 }
154 244
155 - function setEvents(){  
156 - // Fade css  
157 - $('.software-block-finality').css({'opacity':0, 'top':0});  
158 - // End Fade CSS  
159 - var software_block = $('.software-block');  
160 - software_block.mouseover(show_finality);  
161 - software_block.mouseout(hide_finality);  
162 -  
163 - var showOptions = $("#filter-option-catalog-software");  
164 - var hideOptions = $("#filter-option-catalog-close");  
165 - showOptions.click(toggleFilterOptions);  
166 - hideOptions.click(toggleFilterOptions);  
167 - }  
168 -  
169 - /* Finds all uploaded files from manuals page and sets its names on the right format */  
170 - function set_uploaded_files_names() {  
171 - try {  
172 - var article = document.getElementById('article');  
173 - var folderList = article.getElementsByClassName('folder-content')[0];  
174 - var folderItens = folderList.getElementsByClassName('item-description');  
175 -  
176 - for(var i = 0, var loop_length = folderItens.length; i < loop_length; i++) {  
177 - split_file_extension(folderItens[i].getElementsByTagName('a')[0]);  
178 - }  
179 - } catch(e) { 245 + // If there is a software catalog on the page, add its category filter toggle animation
  246 + function initialize() {
  247 + var filter = document.getElementById('filter-catalog-software');
180 248
  249 + if (filter) {
  250 + //toggle filter options in catalog page
  251 + filter.children[0].setAttribute('class', 'animated slideInDown');
  252 + $(filter.children[1]).click(toggleFilterOptions);
  253 + $(filter.children[2]).click(toggleFilterOptions);
181 } 254 }
182 } 255 }
183 256
  257 + return {
  258 + init: initialize
  259 + };
  260 +}) (jQuery);
  261 +
  262 +SPBNoosferoTheme.NoosferoFoldersContent = (function($) {
  263 + 'use strict';
  264 +
184 /* Splits a file name from its extension. Example: example.pdf becomes example - PDF */ 265 /* Splits a file name from its extension. Example: example.pdf becomes example - PDF */
185 function split_file_extension(element) { 266 function split_file_extension(element) {
186 var tokens = element.innerHTML.split('.'); 267 var tokens = element.innerHTML.split('.');
187 - if(tokens.length == 2) {  
188 - var fileName = tokens[0];  
189 - var fileExtension = tokens[1].toUpperCase();  
190 - element.innerHTML = fileName + " - " + fileExtension;  
191 - }  
192 - }  
193 -  
194 - function set_tooltip_content() {  
195 - $('.star-tooltip').html("?");  
196 - }  
197 268
198 - function set_arrow_direction() {  
199 - var additional_data_bar = $('.comments-display-fields');  
200 -  
201 - additional_data_bar.on('click', function() {  
202 - var arrow = additional_data_bar.find('span[class*="comments-arrow"]');  
203 - var additional_fields = $('.comments-software-extra-fields');  
204 -  
205 - if (additional_fields) {  
206 - animateExtraFields(additional_fields, arrow);  
207 - }  
208 - });  
209 - }  
210 -  
211 -  
212 - function animateExtraFields(additional_fields, arrow) {  
213 - var innerHeight = additional_fields[0].offsetHeight;  
214 -  
215 - if(additional_fields.height() !== 0) {  
216 - arrow.attr('class', "comments-arrow-down");  
217 - additional_fields.animate({height: 0});  
218 - } else {  
219 - arrow.attr('class', "comments-arrow-up");  
220 - additional_fields.animate({height: additional_fields.get(0).scrollHeight}, 1000 ); 269 + if(tokens.length > 1) {
  270 + var fileExtension = tokens.pop().toUpperCase();
  271 + var fileName = tokens.join('.');
  272 + element.innerHTML = fileName + ' - ' + fileExtension;
221 } 273 }
222 -  
223 - // Fix for the arrow change on modal display to block, killing the entire page  
224 - $("#institution_modal").css({'display':'none'});  
225 - }  
226 -  
227 -  
228 - function set_use_report_content() {  
229 - $('.profile-homepage .organization-average-rating-container .rate-this-organization a').html('Avalie este software');  
230 - $('.make-report-block .make-report-container .button-bar a span').html('Avalie este software');  
231 - $('.star-rate-data .star-rate-form.rating-cooldown .button-bar a span').html('Avalie este software');  
232 - $('.make-report-block .make-report-container .make-report-message').html('Relate sua experiência ou do órgão/empresa com relação ao software.');  
233 - $('.ratings-list .see-more a.icon-arrow-right-p').html('veja todos os relatos');  
234 - $('.main-content .star-rate-data .star-rate-form .star-comment-container .button-bar input').attr('value', 'Enviar');  
235 - $('.main-content .star-rate-data .star-rate-form .star-rate-text').html('Avalie este software');  
236 - $('.main-content .star-rate-data .star-rate-form .star-comment-container .formlabel').html('Depoimento sobre o software');  
237 - $('.star-rate-form .star-comment-container .comments-display-fields span#comments-additional-information').html('Dados adicionais (órgãos e empresas)');  
238 - $('.star-rate-form .star-comment-container .comments-software-extra-fields #input_institution_comments label').html('Nome do órgão ou empresa');  
239 - $('.star-rate-form .star-comment-container .comments-software-extra-fields .comments-software-people-benefited label').html('Número de beneficiados');  
240 - $('.star-rate-form .star-comment-container .comments-software-extra-fields .comments-software-saved-values label').html('Recursos economizados');  
241 } 274 }
242 275
243 - function add_tooltips(){  
244 - $('#content span[title]').attr("data-toggle","tooltip"); 276 + /* Finds all uploaded files from manuals page and sets its names on the right format */
  277 + function set_uploaded_files_names() {
  278 + try {
  279 + var article = document.getElementById('article');
  280 + var folderList = article.getElementsByClassName('folder-content')[0];
  281 + var folderItens = folderList.getElementsByClassName('item-description');
245 282
246 - $('[data-toggle="tooltip"]').tooltip();  
247 - } 283 + for(var i = 0, loop_length = folderItens.length; i < loop_length; i++) {
  284 + split_file_extension(folderItens[i].getElementsByTagName('a')[0]);
  285 + }
  286 + } catch(e) {
248 287
249 - function add_popovers() {  
250 - var span = $('span[data-toggle="popover"]');  
251 - var place = span.attr("data-placement");  
252 - var elementClass = span.attr("data-class");  
253 - if(span){  
254 - var popover = span.popover({  
255 - html:true,  
256 - placement: place,  
257 - content: function() {  
258 - return $(this).next().html();  
259 - }  
260 - })  
261 - .data('bs.popover');  
262 } 288 }
263 - if(popover) {  
264 - popover.tip()  
265 - .addClass(elementClass);  
266 - $('a.toggle-popover').on("click",function() {  
267 - span.trigger("click");  
268 - });  
269 - }  
270 - }  
271 -  
272 - function move_breadcrumbs() {  
273 - $('.breadcrumbs-plugin_content-breadcrumbs-block').prependTo('#wrap-2');  
274 - $('<span id="breadcrumbs-you-are-here">Você está aqui:</span>').insertBefore($('.breadcrumbs-plugin_content-breadcrumbs-block .block-inner-2').children().first());  
275 } 289 }
276 290
277 - // temporary solution for the suspension_point in some buttons  
278 - function remove_suspension_points_in_buttons() {  
279 - $(".template-kind a span:contains('...')").each(function(index, element) {  
280 - element.innerHTML = element.innerHTML.replace(/(\...)/, "");  
281 - });  
282 - }  
283 -  
284 - // temporary solution for the text in send_email buttons  
285 - function replace_send_email_button_text() {  
286 - $('.action-profile-members .page-members-header .icon-menu-mail').html('Contatar administradores'); 291 + function initialize() {
  292 + set_uploaded_files_names();
287 } 293 }
288 294
289 - $(document).ready(function(){  
290 - add_tooltips();  
291 - add_popovers();  
292 - move_article_buttons();  
293 - move_breadcrumbs();  
294 - insert_notice_div();  
295 - set_uploaded_files_names();  
296 - set_tooltip_content();  
297 - set_arrow_direction();  
298 - set_use_report_content();  
299 - setEvents();  
300 - remove_suspension_points_in_buttons();  
301 - replace_send_email_button_text();  
302 - });  
303 -})(jQuery); 295 + return {
  296 + init: initialize
  297 + };
  298 +
  299 +}) (jQuery);
  300 +
  301 +// Theme javascript bootstrap
  302 +(function(jQuery) {
  303 + 'use strict';
  304 +
  305 + // Initialize everything
  306 + $(document).ready(function() {
  307 + SPBNoosferoTheme.OrganizationRatings.init();
  308 + SPBNoosferoTheme.HighlightedSoftwaresBlock.init();
  309 + SPBNoosferoTheme.NoosferoHTMLAdjusts.init();
  310 + SPBNoosferoTheme.SoftwareCatalog.init();
  311 + SPBNoosferoTheme.NoosferoFoldersContent.init();
  312 + });
  313 +}) (jQuery);