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 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 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 124 var leadLink = $('<a></a>');
103 125  
104 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 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 232 filterOptions.animate({
143 233 height: 0
144 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 236 showOptions.hide();
148 237 hideOptions.show();
  238 +
149 239 filterOptions.animate({
150 240 height: filterHeight
151 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 265 /* Splits a file name from its extension. Example: example.pdf becomes example - PDF */
185 266 function split_file_extension(element) {
186 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);
... ...