1// Easy Responsive Tabs Plugin 2// Author: Samson.Onna <Email : [email protected]> 3(function ($) { 4 $.fn.extend({ 5 easyResponsiveTabs: function (options) { 6 // Set the default values, use comma to separate the settings, example: 7 var defaults = { 8 type: 'default', // default, vertical, accordion; 9 width: 'auto', 10 fit: true, 11 closed: false, 12 tabidentify: '', 13 activetab_bg: 'white', 14 inactive_bg: '#FFF', 15 active_border_color: '#c1c1c1', 16 active_content_border_color: '#c1c1c1', 17 encabezado: 'h3', 18 activate: function () {} 19 }; 20 // Variables 21 var options = $.extend(defaults, options); 22 var opt = options, 23 jtype = opt.type, 24 jfit = opt.fit, 25 jwidth = opt.width, 26 vtabs = 'vertical', 27 accord = 'accordion'; 28 var hash = window.location.hash; 29 var historyApi = !!(window.history && history.replaceState); 30 var wRole = ''; 31 var wDesktop = ''; 32 var wWidth = jwidth.replace('px', ''); 33 console.log(wWidth) - console.log(window.innerWidth); 34 function wInit() { 35 if (window.innerWidth > wWidth) { 36 wRole = '.resp-tab-item > a[role=tab]'; 37 wDesktop = 'yes'; 38 console.log('initialI', wDesktop); 39 } else { 40 wRole = '.resp-accordion > a[role=button]'; 41 wDesktop = 'no'; 42 console.log('initialE', wDesktop); 43 } 44 } 45 wInit(); 46 window.onresize = wInit(); 47 console.log(window.innerWidth); 48 console.log(jwidth); 49 50 // Events 51 $(this).bind('tabactivate', function (e, currentTab) { 52 if (typeof options.activate === 'function') { 53 options.activate.call(currentTab, e); 54 } 55 }); 56 57 // Main function 58 this.each(function () { 59 var $respTabs = $(this); 60 var $respTabsList = $respTabs.find('ul.resp-tabs-list.' + options.tabidentify); 61 var respTabsId = $respTabs.attr('id'); 62 $respTabs.find('ul.resp-tabs-list').attr('role', 'tablist'); 63 $respTabs.find('ul.resp-tabs-list.' + options.tabidentify + ' li').addClass('resp-tab-item'); 64 $respTabs.find('ul.resp-tabs-list.' + options.tabidentify + ' li > a').addClass(options.tabidentify); 65 $respTabs.css({ 66 display: 'block', 67 width: jwidth 68 }); 69 70 if (options.type == 'vertical') $respTabsList.css('margin-top', '3px'); 71 72 // $respTabs.find('.resp-tabs-container.' + options.tabidentify).css('border-color', options.active_content_border_color); 73 $respTabs 74 .find('.resp-tabs-container.' + options.tabidentify + ' > div') 75 .addClass('resp-tab-content') 76 .addClass(options.tabidentify); 77 jtab_options(); 78 // Properties Function 79 function jtab_options() { 80 if (jtype == vtabs) { 81 $respTabs.addClass('resp-vtabs').addClass(options.tabidentify); 82 } 83 if (jfit == true) { 84 $respTabs.css({ width: '100%', margin: '0px' }); 85 } 86 if (jtype == accord) { 87 $respTabs.addClass('resp-easy-accordion').addClass(options.tabidentify); 88 $respTabs.find('.resp-tabs-list').css('display', 'none'); 89 } 90 } 91 92 // Assigning the h3 markup to accordion title 93 var $tabItemEncabezado; 94 $respTabs 95 .find('.resp-tab-content.' + options.tabidentify) 96 .before("<div class='col-xs-12 hidden-md hidden-lg'><" + options.encabezado + " class='resp-accordion " + options.tabidentify + "' ></" + options.encabezado + '></div>'); 97 98 /* $respTabs.find('.resp-tab-content.' + options.tabidentify).prev("h3").css({ 99 'background-color': options.inactive_bg, 100 'border-color': options.active_border_color 101 }); */ 102 103 var itemCount = 0; 104 $respTabs.find('.resp-accordion').each(function () { 105 $tabItemEncabezado = $(this); 106 var $tabItem = $respTabs.find('.resp-tab-item a:eq(' + itemCount + ')'); 107 var $accItem = $respTabs.find('.resp-accordion:eq(' + itemCount + ')'); 108 $accItem.append($tabItem.parent().html().replace('resp-tab-item ', '')); 109 $accItem.data($tabItem.data()); 110 $accItem.find('a').append("<span class='pull-right bipoicon icon-plus' aria-hidden='true'></span>"); 111 $accItem.find('a').attr('id', options.tabidentify + '_tabpanel_item-' + itemCount); 112 if (wDesktop == 'yes') { 113 console.log(wDesktop); 114 $accItem.find('a').attr('role', 'tab'); 115 $tabItemEncabezado.find('a').attr('aria-controls', options.tabidentify + '_tab_item-' + itemCount); 116 } else { 117 console.log(wDesktop); 118 $accItem.find('a').attr('role', 'button'); 119 if ($tabItemEncabezado.find('a').attr('aria-selected') == null) { 120 $tabItemEncabezado.find('a').attr('aria-expanded', 'false'); 121 } else{ 122 $tabItemEncabezado.find('a').attr('aria-expanded', $tabItemEncabezado.find('a').attr('aria-selected')); 123 } 124 console.log('aria-selected',$tabItemEncabezado.find('a').attr('aria-selected')); 125 $tabItemEncabezado.find('a').removeAttr('aria-selected'); 126 $tabItemEncabezado.find('a').removeAttr('aria-controls'); 127 $tabItemEncabezado.find('a').attr('data-controls', options.tabidentify + '_tab_item-' + itemCount); 128 } 129 itemCount++; 130 }); 131 132 // Assigning the 'aria-controls' to Tab items 133 var count = 0, 134 $tabContent; 135 $respTabs.find('.resp-tab-item a').each(function () { 136 $tabItem = $(this); 137 138 // $tabItem.attr('id', options.tabidentify + '_tabpanel_item-' + (count)); 139 $tabItem.attr('id', options.tabidentify + '_tabpanel_item-' + count); 140 if (wDesktop == 'yes') { 141 console.log(wDesktop); 142 $tabItem.attr('aria-selected', 'false'); 143 $tabItem.attr('role', 'tab'); 144 $tabItem.attr('aria-controls', options.tabidentify + '_tab_item-' + count); 145 } else { 146 console.log(wDesktop); 147 console.log('aqui'); 148 if ($tabItem.attr('aria-expanded', $tabItem.attr('aria-selected')) == null) { 149 $tabItem.attr('aria-expanded', 'false'); 150 } else{ 151 $tabItem.attr('aria-expanded', $tabItem.attr('aria-selected')); 152 } 153 console.log('aria-selected tabItem',$tabItemEncabezado.find('a').attr('aria-selected')); 154 $tabItem.removeAttr('aria-selected'); 155 $tabItem.attr('role', 'button'); 156 $tabItem.removeAttr('aria-controls'); 157 $tabItem.attr('data-controls', options.tabidentify + '_tab_item-' + count); 158 } 159 /* $tabItem.css({ 160 'background-color': options.inactive_bg, 161 'border-color': 'none' 162 }); */ 163 // Assigning the 'aria-labelledby' attr to tab-content 164 var tabcount = 0; 165 $respTabs.find('.resp-tab-content.' + options.tabidentify).each(function () { 166 $tabContent = $(this); 167 $tabContent.attr('aria-labelledby', options.tabidentify + '_tabpanel_item-' + tabcount); 168 $tabContent.attr('id', options.tabidentify + '_tab_item-' + tabcount); 169 if (wDesktop == 'yes') { 170 $tabContent.attr('role', 'tabpanel'); 171 $tabContent.attr('aria-labelledby', options.tabidentify + '_tabpanel_item-' + tabcount); 172 } else { 173 $tabContent.removeAttr('role'); 174 $tabContent.removeAttr('aria-labelledby'); 175 } 176 /* .css({ 177 'border-color': options.active_border_color 178 }); */ 179 tabcount++; 180 }); 181 count++; 182 }); 183 184 // Show correct content area 185 var tabNum = 0; 186 if (hash != '') { 187 var matches = hash.match(new RegExp(respTabsId + '([0-9]+)')); 188 if (matches !== null && matches.length === 2) { 189 tabNum = parseInt(matches[1], 10) - 1; 190 if (tabNum > count) { 191 tabNum = 0; 192 } 193 } 194 } 195 196 // Active correct tab 197 $($respTabs.find('.resp-tab-item a.' + options.tabidentify)[tabNum]) 198 .parent() 199 .addClass('resp-tab-active'); 200 if (wDesktop == 'yes') { 201 $($respTabs.find('.resp-tab-item a.' + options.tabidentify)[tabNum]).attr('aria-selected', 'true'); 202 } else { 203 $($respTabs.find('.resp-tab-item a.' + options.tabidentify)[tabNum]).removeAttr('aria-selected'); 204 $($respTabs.find('.resp-tab-item a.' + options.tabidentify)[tabNum]).attr('aria-expanded', 'true'); 205 } 206 /* .css({ 207 'background-color': options.activetab_bg, 208 'border-color': options.active_border_color 209 }); */ 210 211 // keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode 212 if (options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) { 213 // opción desplegada menú escritorio 214 $($respTabs.find('.resp-accordion.' + options.tabidentify)[tabNum]) 215 .children() 216 .addClass('resp-tab-active'); 217 if (wDesktop == 'yes') { 218 $($respTabs.find('.resp-tab-item a.' + options.tabidentify)[tabNum]).attr('aria-selected', 'true'); 219 } else { 220 $($respTabs.find('.resp-tab-item a.' + options.tabidentify)[tabNum]).removeAttr('aria-selected'); 221 $($respTabs.find('.resp-tab-item a.' + options.tabidentify)[tabNum]).attr('aria-expanded', 'true'); 222 } 223 /* .css({ 224 'background-color': options.activetab_bg + ' !important', 225 'border-color': options.active_border_color, 226 'background': 'none' 227 }); */ 228 229 $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]) 230 .addClass('resp-tab-content-active') 231 .addClass(options.tabidentify) 232 .attr('style', 'display:block'); 233 234 var selectorPestania = '.resp-tab-content.' + options.tabidentify[tabNum] + ' .bipo_diputacion_pestania'; 235 /* 236 if ($respTabs.find(selectorPestania).length){ 237 var pestania = $respTabs.find(selectorPestania); 238 //$(pestania).readmore('destroy'); 239 $(pestania).readmore({ 240 collapsedHeight: 260, 241 heightMargin: 23, 242 embedCSS: false, 243 moreLink: '<button class="bipo_toggle_contenido hidden-xxs hidden-xs hidden-sm"><span class="bipoicon icon-flecha_acordeon_desplegar"></span><span class="bipo_texto_boton">
243' + 'Mostrar\x20m\x26aacute\x3bs' + '</span></button>', 244 lessLink: '<button class="bipo_toggle_contenido hidden-xxs hidden-xs hidden-sm"><span class="bipoicon icon-flecha_acordeon_plegar"></span><span class="bipo_texto_boton">' + 'Mostrar\x20menos' + '</span></button>' 245 }); 246 } 247 */ 248 } else { 249 // assign proper classes for when tabs mode is activated before making a selection in accordion mode 250 // 251 // Responsive initial close and false 252 // 253 // Responsive initial open and true 254 // var isTabActive = $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).attr('aria-labelledby'); 255 // if ($('#' + isTabActive).attr('aria-expanded') == 'true') { 256 // $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]) 257 // .addClass('resp-tab-content-active') 258 // .addClass(options.tabidentify) 259 // .attr('style', 'display:block'); 260 // }else{ 261 // $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).addClass('resp-accordion-closed'); // removed resp-tab-content-active 262 // } 263 $($respTabs.find('h3 a.tab')[tabNum]).attr('aria-expanded','false'); // removed resp-tab-content-active 264 $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).addClass('resp-accordion-closed'); // removed resp-tab-content-active 265 } 266 267 // Tab Click action function 268 $respTabs.find(wRole).each(function () { 269 var $currentTab = $(this); 270 $currentTab.click(function (e) { 271 e.preventDefault(); 272 var $currentTab = $(this); 273 274 if (wDesktop == 'yes') { 275 var $tabAria = $currentTab.attr('aria-controls'); 276 } else { 277 var $tabAria = $currentTab.attr('data-controls'); 278 } 279 console.log($currentTab); 280 if ($currentTab.parent().hasClass('resp-accordion') && $currentTab.parent().hasClass('resp-tab-active')) { 281 // console.log('if cerrar'); 282 $respTabs.find('.resp-tab-content-active.' + options.tabidentify).slideUp('', function () { 283 $(this).addClass('resp-accordion-closed'); 284 }); 285 $currentTab.parent().removeClass('resp-tab-active'); 286 if (wDesktop == 'yes') { 287 $currentTab.attr('aria-selected', 'false'); 288 } else { 289 $currentTab.removeAttr('aria-selected'); 290 $currentTab.attr('aria-expanded', 'false'); 291 } 292 /* .css({ 293 'background-color': options.inactive_bg, 294 'border-color': 'none' 295 }); */ 296 $currentTab.find('span.bipoicon').toggleClass('icon-plus icon-minus'); 297 return false; 298 } 299 if (!$currentTab.parent().hasClass('resp-tab-active') && $currentTab.parent().hasClass('resp-accordion')) { 300 // console.log('if abrir'); 301 $respTabs.find('.resp-tab-active a.' + options.tabidentify + ' span.bipoicon').addClass('icon-plus'); 302 $respTabs.find('.resp-tab-active a.' + options.tabidentify + ' span.bipoicon').removeClass('icon-minus'); 303 if (wDesktop == 'yes') { 304 $respTabs.find('.resp-tab-active a.' + options.tabidentify).attr('aria-selected', 'false'); 305 } else { 306 $respTabs.removeAttr('aria-selected'); 307 $respTabs.find('.resp-tab-active a.' + options.tabidentify).attr('aria-expanded', 'false'); 308 } 309 $respTabs 310 .find('.resp-tab-active a.' + options.tabidentify) 311 .parent() 312 .removeClass('resp-tab-active'); 313 314 /* .css({ 315 'background-color': options.inactive_bg, 316 'border-color': 'none' 317 }); */ 318 319 $currentTab.find('span.bipoicon').toggleClass('icon-plus icon-m
319inus'); 320 321 $respTabs 322 .find('.resp-tab-content-active.' + options.tabidentify) 323 .slideUp() 324 .removeClass('resp-tab-content-active resp-accordion-closed'); 325 if (wDesktop == 'yes') { 326 $respTabs 327 .find('[aria-controls=' + $tabAria + ']') 328 .parent() 329 .addClass('resp-tab-active'); 330 $respTabs.find('[aria-controls=' + $tabAria + ']').attr('aria-selected', 'true'); 331 } else { 332 $respTabs 333 .find('[data-controls=' + $tabAria + ']') 334 .parent() 335 .addClass('resp-tab-active'); 336 $respTabs.find('[data-controls=' + $tabAria + ']').attr('aria-expanded', 'true'); 337 } 338 339 /* .css({ 340 'background-color': options.activetab_bg, 341 'border-color': options.active_border_color 342 }); */ 343 344 $respTabs 345 .find('.resp-tab-content[aria-labelledby = ' + $tabAria + '].' + options.tabidentify) 346 .slideDown() 347 .addClass('resp-tab-content-active'); 348 $respTabs 349 .find('.resp-tab-content[id = ' + $tabAria + '].' + options.tabidentify) 350 .slideDown() 351 .addClass('resp-tab-content-active'); 352 } else { 353 // console.log('else'); 354 if (wDesktop == 'yes') { 355 $respTabs.find('.resp-tab-active a.' + options.tabidentify).attr('aria-selected', 'false'); 356 } else { 357 $respTabs.removeAttr('aria-selected'); 358 $respTabs.find('.resp-tab-active a.' + options.tabidentify).attr('aria-expanded', 'false'); 359 } 360 $respTabs 361 .find('.resp-tab-active a.' + options.tabidentify) 362 .parent() 363 .removeClass('resp-tab-active'); 364 365 /* .css({ 366 'background-color': options.inactive_bg, 367 'border-color': 'none' 368 }); */ 369 370 $respTabs 371 .find('.resp-tab-content-active.' + options.tabidentify) 372 .removeAttr('style') 373 .removeClass('resp-tab-content-active') 374 .removeClass('resp-accordion-closed'); 375 if (wDesktop == 'yes') { 376 $respTabs 377 .find('[aria-controls=' + $tabAria + ']') 378 .parent() 379 .addClass('resp-tab-active'); 380 $respTabs.find('[aria-controls=' + $tabAria + ']').attr('aria-selected', 'true'); 381 } else { 382 $respTabs 383 .find('[data-controls=' + $tabAria + ']') 384 .parent() 385 .addClass('resp-tab-active'); 386 $respTabs.find('[data-controls=' + $tabAria + ']').attr('aria-expanded', 'true'); 387 } 388 /* .css({ 389 'background-color': options.activetab_bg, 390 'border-color': options.active_border_color 391 }); */ 392 393 $respTabs 394 .find('.resp-tab-content[aria-labelledby = ' + $tabAria + '].' + options.tabidentify) 395 .addClass('resp-tab-content-active') 396 .attr('style', 'display:block'); 397 $respTabs 398 .find('.resp-tab-content[id = ' + $tabAria + '].' + options.tabidentify) 399 .addClass('resp-tab-content-active') 400 .attr('style', 'display:block'); 401 } 402 403 var pestania = '#' + $tabAria + ' .bipo_diputacion_pestania'; 404 // $(pestania).readmore('destroy'); 405 /* 406 $(pestania).readmore({ 407 collapsedHeight: 260, 408 heightMargin: 23, 409 embedCSS: false, 410 moreLink: '<button class="bipo_toggle_contenido hidden-xxs hidden-xs hidden-sm"><span class="bipoicon icon-flecha_acordeon_desplegar"></span><span class="bipo_texto_boton">
410' + 'Mostrar\x20m\x26aacute\x3bs' + '</span></button>', 411 lessLink: '<button class="bipo_toggle_contenido hidden-xxs hidden-xs hidden-sm"><span class="bipoicon icon-flecha_acordeon_plegar"></span><span class="bipo_texto_boton">' + 'Mostrar\x20menos' + '</span></button>' 412 }); 413 */ 414 415 // Trigger tab activation event 416 $currentTab.trigger('tabactivate', $currentTab); 417 418 // Update Browser History 419 if (historyApi) { 420 var currentHash = window.location.hash; 421 var tabAriaParts = $tabAria.split('tab_item-'); 422 // var newHash = respTabsId + (parseInt($tabAria.substring(9), 10) + 1).toString(); 423 var newHash = respTabsId + (parseInt(tabAriaParts[1], 10) + 1).toString(); 424 if (currentHash != '') { 425 var re = new RegExp(respTabsId + '[0-9]+'); 426 if (currentHash.match(re) != null) { 427 newHash = currentHash.replace(re, newHash); 428 } else { 429 newHash = currentHash + '|' + newHash; 430 } 431 } else { 432 newHash = '#' + newHash; 433 } 434 435 history.replaceState(null, null, newHash); 436 } 437 }); 438 }); 439 440 // Window resize function 441 $(window).resize(function () { 442 $respTabs.find('.resp-accordion-closed').removeAttr('style'); 443 }); 444 }); 445 446 //accesibilidad funcionamiento con flechas 447 var keys = { left: 37, up: 38, right: 39, down: 40 }; 448 var prevTab = '' ; 449 var ulID = 'ul.resp-tabs-list.' + options.tabidentify; 450 var itemsNum = $(ulID + ' li').length; 451 function idForward(){ 452 console.log('derecha') 453 prevTab = $(document.activeElement); 454 var thisID = prevTab.attr('id').split("tabpanel_item-").pop(); 455 console.log('thisID ', thisID); 456 console.log(prevTab.attr('id')); 457 var idText = prevTab.attr('id').split('tabpanel_item-')[0] + 'tabpanel_item-'; 458 console.log(idText); 459 console.log('itemsNum ',itemsNum); 460 if (thisID == (itemsNum - 1)) { 461 $('#' + idText + '0').focus(); 462 $('#' + idText + '0').trigger('click'); 463 console.log('0', idText); 464 console.log('id 0', idText + '#' + idText + '0'); 465 }else{ 466 newID = Number(thisID) + 1; 467 console.log('segundo', newID); 468 console.log('id trigger', idText + newID); 469 $('#' + idText + newID.toString()).focus(); 470 $('#' + idText + newID.toString()).trigger('click'); 471 console.log('#' + idText + newID.toString()) 472 } 473 } 474 function idBackward(){ 475 console.log('derecha') 476 prevTab = $(document.activeElement); 477 var thisID = prevTab.attr('id').split("tabpanel_item-").pop(); 478 console.log('thisID ', thisID); 479 console.log(prevTab.attr('id')); 480 var idText = prevTab.attr('id').split('tabpanel_item-')[0] + 'tabpanel_item-'; 481 console.log(idText); 482 console.log('itemsNum ',itemsNum); 483 if (thisID == 0) { 484 $('#' + idText + (itemsNum - 1)).focus(); 485 $('#' + idText + (itemsNum - 1)).trigger('click'); 486 console.log('0', idText); 487 console.log('id 0', idText + '#' + idText + '0'); 488 }else{ 489 newID = Number(thisID) - 1; 490 console.log('segundo', newID); 491 console.log('id trigger', idText + newID); 492 $('#' + idText + newID.toString()).focus(); 493 $('#' + idText + newID.toString()).trigger('click'); 494 console.log('#' + idText + newID.toString()) 495 } 496 } 497 function handleKeyDown(id) { 498 $(id).keydown(function(event) { 499 switch (event.which) { 500 case keys.right: 501 case keys.down: 502 event.preventDefault(); 503 idForward(); 504 break; 505 506 case keys.left: 507 case keys.up: 508 event.preventDefault(); 509 idBackward(); 510 break; 511 } // end switch. 512 }); // end keydown. 513 } // end handleKeyDown. 514 handleKeyDown(ulID); 515 516 } 517 }); 518})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.