MediaWiki:Common.js

Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.

• Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
• Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
• Internet Explorer/Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
• Opera: Presiona Ctrl+F5.

/* === DERECHOPEDIA SKIN REDESIGN JS 2025 v3.2 === */
$(function () {
  var pageName = mw.config.get('wgPageName');
  var isMain = (pageName === 'Página_principal');

  /* ── 1. Top navigation bar ── */
  var topnav = document.createElement('div');
  topnav.id = 'dp-topnav';
  topnav.innerHTML =
    '<div class="dp-mainbar">' +
      '<a class="dp-logo-block" href="/">' +
        '<img class="dp-logo-img" src="https://www.derechopedia.cl/resources/assets/logoDerechoPedia_small_2.png" alt="DerechoPedia" style="background:#fff;border-radius:5px;padding:3px 6px;">' +
        '<div><span class="dp-logo-sitename">DerechoPedia</span><span class="dp-logo-sub">Enciclopedia jurídica</span></div>' +
      '</a>' +
      '<div class="dp-nav-zone">' +
        '<ul class="dp-nav-links">' +
          '<li' + (isMain ? ' class="dp-active"' : '') + '><a href="/">Portada</a></li>' +
          '<li><a href="/Código_del_Trabajo">Normas</a></li>' +
          '<li><a href="/#dp-guias-portada">Guías para trabajadores</a></li>' +
          '<li><a href="/Correos_para_oficios">Correos para oficios</a></li>' +
          '<li><a href="https://kopaitic.cl/contador-plazos-laborales/" target="_blank">Contador de Plazos</a></li>' +
          '<li><a href="https://kopaitic.cl/calculadora-de-finiquito/" target="_blank">Calculadora de Finiquito</a></li>' +
        '</ul>' +
        '<a class="dp-cta-btn" href="https://wa.me/56974717602" target="_blank">' +
          '<span class="dp-cta-dot"></span>Consultar abogado' +
        '</a>' +
              '<button class="dp-hamburger" id="dp-hamburger" aria-label="Abrir menú">&#9776;</button>' +
      '</div>' +
    '</div>' +
    '<div class="dp-mobile-menu" id="dp-mobile-menu">' +
      '<ul class="dp-mobile-nav">' +
        '<li><a href="/">Portada</a></li>' +
        '<li><a href="/Código_del_Trabajo">Normas</a></li>' +
        '<li><a href="/#dp-guias-portada">Guías para trabajadores</a></li>' +
        '<li><a href="/Correos_para_oficios">Correos para oficios</a></li>' +
        '<li><a href="https://kopaitic.cl/contador-plazos-laborales/" target="_blank">Contador de Plazos</a></li>' +
        '<li><a href="https://kopaitic.cl/calculadora-de-finiquito/" target="_blank">Calculadora de Finiquito</a></li>' +
      '</ul>' +
      '<div class="dp-mobile-search-wrap">' +
        '<input type="text" class="dp-mobile-search-input" id="dp-mobile-search-input" placeholder="Buscar en DerechoPedia...">' +
        '<button class="dp-mobile-search-btn" id="dp-mobile-search-btn">&#128269;</button>' +
      '</div>' +
      '<div class="dp-mobile-cta-wrap">' +
        '<a class="dp-mobile-cta" href="https://wa.me/56974717602" target="_blank">&#128172; Consultar abogado</a>' +
      '</div>' +
    '</div>';
  document.body.insertBefore(topnav, document.body.firstChild);
  /* Buscador debajo del topnav */
  var sb = document.createElement('div');
  sb.id = 'dp-search-bar';
  sb.style.cssText = 'background:#1c2e4a;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 4px rgba(0,0,0,0.15);';
  sb.innerHTML = '<input type="text" id="dp-search-input" placeholder="Buscar en DerechoPedia..." ' +
    'style="width:100%;max-width:620px;padding:9px 18px;border:none;border-radius:20px;font-size:14px;outline:none;">' +
    '<button id="dp-search-btn" style="background:#c8992a;color:#fff;border:none;padding:9px 22px;' +
    'border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;">Buscar</button>';
  document.body.insertBefore(sb, topnav.nextSibling);
  document.getElementById('dp-search-btn').addEventListener('click', function() {
    var q = document.getElementById('dp-search-input').value.trim();
    if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);
  });
  document.getElementById('dp-search-input').addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && this.value.trim())
      window.location.href = '/index.php?search=' + encodeURIComponent(this.value.trim());
  });
  /* Login link en topnav */
  (function() {
    var lw = document.createElement('div');
    lw.style.cssText = 'margin-left:8px;flex-shrink:0;';
    if (!mw.config.get('wgUserName')) {
      lw.innerHTML = '<a href="/index.php?title=Special:UserLogin" style="color:#fff;font-size:13px;' +
        'font-weight:500;text-decoration:none;opacity:0.85;white-space:nowrap;' +
        'border:1px solid rgba(255,255,255,0.4);padding:5px 12px;border-radius:4px;">Iniciar sesi&#243;n</a>';
    } else {
      lw.innerHTML = '<a href="/index.php?title=Special:UserLogout" style="color:#fff;font-size:13px;' +
        'font-weight:500;text-decoration:none;opacity:0.85;white-space:nowrap;">&#128100; ' +
        mw.config.get('wgUserName') + '</a>';
    }
    var ctaBtn = topnav.querySelector('.dp-cta-btn');
    if (ctaBtn) ctaBtn.parentNode.insertBefore(lw, ctaBtn);
  })();

  /* Toggle hamburger */
  document.getElementById('dp-hamburger').addEventListener('click', function () {
    var menu = document.getElementById('dp-mobile-menu');
    var isOpen = menu.classList.toggle('dp-menu-open');
    this.innerHTML = isOpen ? '&#10005;' : '&#9776;';
    this.setAttribute('aria-label', isOpen ? 'Cerrar menú' : 'Abrir menú');
  });

  /* Buscar desde menu mobile */
  function dpMobileSearch() {
    var q = document.getElementById('dp-mobile-search-input').value.trim();
    if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);
  }
  document.getElementById('dp-mobile-search-btn').addEventListener('click', dpMobileSearch);
  document.getElementById('dp-mobile-search-input').addEventListener('keypress', function (e) {
    if (e.key === 'Enter') dpMobileSearch();
  });

  /* ── 2. Kopaitic firma block ── */
  var firma = document.createElement('div');
  firma.id = 'dp-firma';
  firma.innerHTML =
    '<div class="dp-firma-head">' +
      '<img class="dp-firma-logo" src="https://www.derechopedia.cl/resources/assets/logoDerechoPedia_small_2.png" alt="Kopaitic y Asociados">' +
      '<div class="dp-firma-name">Kopaitic &amp; Asociados<small>Abogados laboralistas · Viña del Mar</small></div>' +
    '</div>' +
    '<div class="dp-firma-lawyers">' +
      '<a class="dp-sb-lawyer" href="https://kopaitic.cl/emiliokopaitic-2/" target="_blank">' +
        '<img src="https://www.derechopedia.cl/images/thumb/0/06/Emilio_Kopaitic_Abogado_Laboral.jpg/200px-Emilio_Kopaitic_Abogado_Laboral.jpg" alt="Emilio Kopaitic">' +
        '<div><span class="dp-sb-lawyer-name">Emilio K.</span><span class="dp-sb-lawyer-role">Socio</span></div>' +
      '</a>' +
      '<a class="dp-sb-lawyer" href="https://kopaitic.cl/franciscacontardo-2/" target="_blank">' +
        '<img src="https://www.derechopedia.cl/images/thumb/2/2c/Francisca_Contardo_Derechopedia.jpg.JPG/200px-Francisca_Contardo_Derechopedia.jpg.JPG" alt="Francisca Contardo">' +
        '<div><span class="dp-sb-lawyer-name">Francisca C.</span><span class="dp-sb-lawyer-role">Abogada</span></div>' +
      '</a>' +
    '</div>' +
    '<a class="dp-firma-wa" href="https://wa.me/56974717602" target="_blank">💬 Hablar con un abogado</a>';
  var colOne = document.getElementById('column-one');
  colOne.insertBefore(firma, colOne.firstChild);

  /* ── 3. Urgente card ── */
  var urgente = document.createElement('a');
  urgente.id = 'dp-urgente';
  urgente.href = '/%C2%BFQu%C3%A9_hacer_en_caso_de_despido%3F';
  urgente.innerHTML =
    '<span class="dp-urg-label">¿Tienes dudas?</span>' +
    '<span class="dp-urg-title">¿Te despidieron o quieres renunciar?</span>' +
    '<span class="dp-urg-desc">Lee la guía antes de firmar cualquier documento.</span>' +
    '<span class="dp-urg-link">Leer guía completa →</span>';
  colOne.insertBefore(urgente, firma.nextSibling);

  /* ── 4. Tool card + divisor ── */
  var tbPortlet = document.getElementById('p-tb');
  if (tbPortlet) {
    var hr1 = document.createElement('hr');
    hr1.className = 'dp-sb-hr';
    tbPortlet.parentNode.insertBefore(hr1, tbPortlet);
    var toolCard = document.createElement('a');
    toolCard.className = 'dp-sb-tool';
    toolCard.href = 'https://kopaitic.cl/contador-plazos-laborales/';
    toolCard.target = '_blank';
    toolCard.innerHTML =
      '<span class="dp-sb-tool-icon">📅</span>' +
      '<span class="dp-sb-tool-name">Contador de Plazos Laborales</span>' +
      '<span class="dp-sb-tool-desc">Calcula fechas límite. Herramienta gratuita.</span>';
    tbPortlet.parentNode.insertBefore(toolCard, tbPortlet);
  }

  /* ── 5. Divisores ── */
  var navPortlet = document.getElementById('p-navigation');
  if (navPortlet) {
    var hr2 = document.createElement('hr');
    hr2.className = 'dp-sb-hr';
    navPortlet.parentNode.insertBefore(hr2, navPortlet);
  }
  var normasPortlet = document.getElementById('p-Normas');
  if (normasPortlet) {
    var hr3 = document.createElement('hr');
    hr3.className = 'dp-sb-hr';
    normasPortlet.parentNode.insertBefore(hr3, normasPortlet);
  }

  /* ── 6. Iconos en h3 ── */
  var icons = {
    'p-Principales': '🏠',
    'p-Secciones': '📂',
    'p-Normas': '📋',
    'p-navigation': '🔗',
    'p-tb': '🔧'
  };
  Object.keys(icons).forEach(function (id) {
    var el = document.getElementById(id);
    if (el) {
      var h3 = el.querySelector('h3');
      if (h3) h3.innerHTML = '<span style="opacity:.65;font-size:10px;margin-right:4px;">' + icons[id] + '</span>' + h3.textContent.trim();
    }
  });
});


/* === PORTADA: GRILLA DE GUÍAS LABORALES === */
(function() {
  var target = document.getElementById('dp-guias-portada');
  if (!target) return;
  var CH = 'background:#f0f4fa; padding:11px 18px; border-bottom:1px solid #e8edf3;';
  var CT = 'font-size:14px; font-weight:700; color:#2d3c6b;';
  var CARD = 'background:#fff; border:1px solid #e8edf3; border-radius:8px; margin-bottom:16px; overflow:hidden;';
  target.innerHTML = [
    '<div style="' + CARD + '">',
    '<div style="' + CH + '"><div style="' + CT + '">Guías para trabajadores</div></div>',
    '<div class="dp-capture-grid">',
    dpItem('🚫','¿Qué hacer si me despidieron?','Pasos inmediatos para proteger tus derechos laborales.','/%C2%BFQu%C3%A9_hacer_en_caso_de_despido%3F'),
    dpItem('🔄','Autodespido (despido indirecto)','Cuándo puedes renunciar y cobrar indemnización igual.','/Autodespido'),
    dpItem('🤱','Fuero maternal','Protección desde el embarazo hasta un año post-natal.','/Fuero_maternal'),
    dpItem('😤','Acoso laboral','Qué conductas constituyen acoso y cómo demandarlo.','/Acoso_laboral'),
    dpItem('⏰','Horas extraordinarias no pagadas','Cómo cobrar las horas extra adeudadas con recargo legal.','/Horas_extraodinarias_en_Chile'),
    dpItem('⚖️','Tutela laboral','Cuando el empleador vulnera tus derechos fundamentales.','/Tutela_laboral_e_indemnizaci%C3%B3n_por_da%C3%B1o_moral'),
    dpItem('📋','Nulidad del despido (Ley Bustos)','Si te despidieron con cotizaciones adeudadas, el contrato sigue vigente.','/Nulidad_del_Despido'),
    dpItem('💰','Indemnización por años de servicio','Cómo se calcula y cuánto te corresponde cobrar.','/Indemnizaci%C3%B3n_por_a%C3%B1os_de_servicios'),
    dpItem('📄','Finiquito: qué revisar antes de firmar','Los errores más comunes y qué prestaciones te corresponden.','/Finiquito'),
    dpItem('🏭','Despido por necesidades de la empresa','¿Es justificado? ¿Qué debe pagar el empleador?','/Despido_por_necesidades_de_la_empresa'),
    '</div></div>',
    '<div style="' + CARD + '">',
    '<div style="' + CH + '"><div style="' + CT + '">Situaciones frecuentes</div></div>',
    '<div class="dp-sit-grid">',
    dpSit('🧾','Contratos a honorarios y relación laboral','/Contratos_a_honorarios'),
    dpSit('🔕','Fuero Laboral: tipos y protección','/Fuero_Laboral'),
    dpSit('✂️','Ley de las 40 horas','/Ley_de_las_40_horas'),
    dpSit('🚑','Accidentes del trabajo y enfermedades profesionales','/Accidentes_del_Trabajo_y_Enfermedades_Profesionales'),
    dpSit('🏠','Teletrabajo: obligaciones del empleador','/Teletrabajo'),
    dpSit('📅','Feriado proporcional al término del contrato','/%C2%BFQu%C3%A9_pasos_deben_seguirse_para_calcular_el_pago_del_feriado_proporcional_al_t%C3%A9rmino_del_contrato_de_un_trabajador%3F'),
    dpSit('👴','Desahucio y jubilación forzada','/Desahucio'),
    dpSit('📊','Gratificación en feriado proporcional','/%C2%BFCorresponde_incluir_la_gratificaci%C3%B3n_mensual_en_el_c%C3%A1lculo_del_feriado_proporcional%3F'),
    dpSit('👶','Extensión del postnatal parental (Ley 21.474)','/Extensi%C3%B3n_Excepcional_del_Permiso_Postnatal_Parental_(Ley_N%C2%B0_21.474)'),
    dpSit('🏥','Despido durante licencia médica','/Despido_con_licencia_m%C3%A9dica'),
    '</div></div>'
  ].join('');
  function dpItem(ico, name, desc, href) {
    return '<a class="dp-capture-item" href="' + href + '">'
      + '<span class="dp-cap-ico">' + ico + '</span>'
      + '<span class="dp-cap-name">' + name + '</span>'
      + '<span class="dp-cap-desc">' + desc + '</span>'
      + '<span class="dp-cap-arrow">Leer guía →</span>'
      + '</a>';
  }
  function dpSit(ico, txt, href) {
    return '<a class="dp-sit-item" href="' + href + '">'
      + '<span class="dp-sit-ico">' + ico + '</span>'
      + '<span class="dp-sit-txt">' + txt + '</span>'
      + '<span class="dp-sit-arr">›</span>'
      + '</a>';
  }
})();


/* === FIX: EDIT TABS VISIBILITY === */
(function() {
  var pc = document.getElementById('p-cactions');
  var ct = document.getElementById('content');
  if (!pc || !ct) return;
  // Move p-cactions out of the overflow-hidden sidebar into the visible content area
  var sn = document.getElementById('siteNotice');
  if (sn && sn.parentNode === ct) {
    ct.insertBefore(pc, sn.nextSibling);
  } else {
    ct.insertBefore(pc, ct.firstChild);
  }
  // Style as a visible horizontal tab bar
  pc.style.cssText = 'display:flex;align-items:center;gap:4px;padding:6px 10px;background:#f8f9fa;border:1px solid #ddd;border-radius:4px;margin:4px 0 8px 0;box-sizing:border-box;';
  var ul = pc.querySelector('ul');
  if (ul) { ul.style.cssText = 'display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;'; }
  var lis = pc.querySelectorAll('li');
  lis.forEach(function(li) {
    li.style.cssText = 'margin:0;padding:0;';
    var a = li.querySelector('a');
    if (a) { a.style.cssText = 'display:inline-block;padding:5px 12px;background:#fff;border:1px solid #c8ccd1;border-radius:4px;color:#1c2e4a;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;'; }
  });
  var h3 = pc.querySelector('h3');
  if (h3) { h3.style.display = 'none'; }
})();

/* === PORTADA: BANNER DE HERRAMIENTAS === */
(function() {
  var banner = document.getElementById('dp-tools-banner');
  if (!banner) return;

  if (!document.getElementById('dp-font-source-serif')) {
    var fontLink = document.createElement('link');
    fontLink.id = 'dp-font-source-serif';
    fontLink.rel = 'stylesheet';
    fontLink.href = 'https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&display=swap';
    document.head.appendChild(fontLink);
  }

  var courseUrl = 'https://postgrados.derecho.uchile.cl/curso-cuestiones-practicas-sobre-contrato-de-trabajo-y-su-ejecucion-2/#1622231569098-f08123aa-49c6';
  var serif = "'Source Serif 4', Georgia, serif";
  var gold = '#b9822f';
  var navy = '#1c2e4a';
  var cream = '#faf7ef';
  var border = '#ddd6c4';

  function stat(icon, label, value) {
    return '<div style="background:#fff;border:1px solid ' + border + ';border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:4px;">' +
      '<div style="display:flex;align-items:center;gap:6px;">' + icon +
        '<span style="font-size:11px;font-weight:700;color:' + gold + ';text-transform:uppercase;letter-spacing:0.04em;">' + label + '</span>' +
      '</div>' +
      '<span style="font-size:14px;font-weight:700;color:' + navy + ';">' + value + '</span>' +
    '</div>';
  }

  var iconCal = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="' + gold + '" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>';
  var iconClock = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="' + gold + '" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><polyline points="12 7 12 12 16 14"></polyline></svg>';
  var iconVideo = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="' + gold + '" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"></rect><polygon points="22 8 16 12 22 16 22 8"></polygon></svg>';
  var iconMoney = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="' + gold + '" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>';

  banner.setAttribute('style', 'padding:10px 24px 12px;max-width:1000px;margin:0 auto;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;');

  banner.innerHTML =
    '<a href="' + courseUrl + '" target="_blank" style="display:block;text-decoration:none;border-radius:4px;border:1px solid ' + border + ';background:' + cream + ';padding:26px 34px;">' +
      '<div style="display:flex;align-items:center;gap:24px;">' +
        '<div style="flex:0 0 auto;display:flex;flex-direction:column;align-items:center;line-height:1;padding-right:24px;border-right:1px solid ' + border + ';">' +
          '<span style="font-family:' + serif + ';font-size:56px;font-weight:700;color:' + navy + ';">28</span>' +
          '<span style="font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:' + gold + ';margin-top:4px;">Octubre</span>' +
        '</div>' +
        '<div style="display:flex;flex-direction:column;gap:8px;max-width:600px;">' +
          '<div style="display:flex;align-items:center;gap:10px;">' +
            '<div style="width:22px;height:1px;background:' + gold + ';"></div>' +
            '<span style="font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#8a6a2f;">Postgrados &middot; Facultad de Derecho U. de Chile</span>' +
          '</div>' +
          '<div style="font-family:' + serif + ';font-size:24px;font-weight:700;line-height:1.25;color:' + navy + ';">Cuestiones pr&aacute;cticas sobre contrato de trabajo y su ejecuci&oacute;n</div>' +
        '</div>' +
      '</div>' +
      '<div style="display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px;margin-top:16px;">' +
        stat(iconCal, 'Inicio', '28 oct 2026') +
        stat(iconClock, 'Duraci&oacute;n', '15 horas') +
        stat(iconVideo, 'Modalidad', 'Zoom') +
        stat(iconMoney, 'Arancel', '\$300.000') +
      '</div>' +
      '<div style="display:flex;align-items:center;justify-content:space-between;margin-top:16px;">' +
        '<span style="font-size:12px;color:#8a7a5a;">Inscripciones hasta el 23 de octubre</span>' +
        '<span style="font-size:14px;font-weight:700;color:' + navy + ';border-bottom:1px solid ' + gold + ';padding-bottom:2px;">Inscr&iacute;bete aqu&iacute; &rarr;</span>' +
      '</div>' +
    '</a>';
})();

/* === LINK INICIAR SESION EN TOPNAV === */
(function() {
  var userName = mw.config.get('wgUserName');
  var nav = document.getElementById('dp-topnav');
  if (!nav) return;
  var loginWrap = document.createElement('div');
  loginWrap.style.cssText = 'margin-left:8px;flex-shrink:0;';
  if (!userName) {
    loginWrap.innerHTML = '<a href="/index.php?title=Special:UserLogin" style="color:#fff;font-size:13px;font-weight:500;text-decoration:none;opacity:0.85;white-space:nowrap;border:1px solid rgba(255,255,255,0.4);padding:5px 12px;border-radius:4px;">Iniciar sesi&#243;n</a>';
  } else {
    loginWrap.innerHTML = '<a href="/index.php?title=Special:UserLogout" style="color:#fff;font-size:13px;font-weight:500;text-decoration:none;opacity:0.85;white-space:nowrap;">&#128100; ' + userName + '</a>';
  }
  var ctaBtn = nav.querySelector('.dp-cta-btn');
  if (ctaBtn) {
    ctaBtn.parentNode.insertBefore(loginWrap, ctaBtn);
  } else {
    nav.appendChild(loginWrap);
  }
})();


/* === FIX JS: TITULO NO TAPADO POR TABS === */
(function() {
var s = document.createElement('style');
s.id = 'dp-fix-heading-overlap';
s.innerHTML = '#firstHeading{margin-top:44px !important; clear:both !important; position:relative !important;} .mw-indicators{clear:both !important;}';
document.head.appendChild(s);
})();