Switch to popper.js for the tooltip.

Already included in Bootstrap and much better than current tooltispy
author: Manuel Hiebel <leuhmanu@mageia.org> 2018-02-19 18:04:06 +0100
committer: Manuel Hiebel <leuhmanu@mageia.org> 2018-02-19 18:04:06 +0100
commit: f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321 (patch)
tree: 4663e85d3f5ab72cadd0c1ccc4ca5f3913e4f1ec
parent: 36bf59a0d7129dd8125b2348d428b03e527c3b21 (diff)
download: www-f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321.tar
www-f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321.tar.gz
www-f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321.tar.bz2
www-f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321.tar.xz
www-f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321.zip
1 files changed, 58 insertions, 82 deletions
diff --git a/en/6/download_index.php b/en/6/download_index.php
index fa77e9cac..a210b4234 100644
--- a/en/6/download_index.php
+++ b/en/6/download_index.php
@@ -69,8 +69,6 @@ function get_image($ttl, $src, $sty){
     <?php include '../../analytics.php'; ?>
     <style>
 
-.iso2usb {cursor:pointer}
-
 input[type="radio"]:checked + label,.ui-button:active  {
     background: #2383C2;
     background: -webkit-linear-gradient(top, #3494D3 0%, #2383C2 50%);
@@ -79,23 +77,9 @@ input[type="radio"]:checked + label,.ui-button:active  {
     background: linear-gradient(top, #3494D3 0%, #2383C2 50%);
     color: white;
 }
-input[type="radio"], input[type="submit"]  {
+input[type="radio"], input[type="submit"], .popover-content  {
     display: none;
 }
-.tooltipsy{
-    padding: 0.5em;
-    width:auto;
-    max-width: 500px;
-    color: #303030;
-    background-color: #F0F9FF;
-    border: 1px solid #deca7e;
-    text-align: left;
-    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
-    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
-    text-shadow: none;
-    border-radius: 6px;
-}
 </style>
 </head>
 <body class="release downloads">
@@ -119,8 +103,8 @@ input[type="radio"], input[type="submit"]  {
             <div class="yui-u first col-md-8">
 
 <noscript>
-<div class="para warn"><?php _g('It looks like you have JavaScript disable. Please <a href="%s">enable</a> it to have better render. At the <a href="%s">end</a> of this page there will be download link for you. But what is written between is important.',array('http://www.enable-javascript.com/','#Fclassical'),'p'); ?></div>
-<style>.radiobutton .ui-button{display: none;}</style>
+<div class="para alert alert-info"><?php _g('It looks like you have JavaScript disable. Please <a href="%s">enable</a> it to have better render. At the <a href="%s">end</a> of this page there will be download link for you. But what is written between is important.',array('http://www.enable-javascript.com/','#Fclassical'),'p'); ?></div>
+<style>.pop{display: none;} .popover-content{display:block ;}</style>
 </noscript>
 
 <div class="para">
@@ -129,14 +113,14 @@ input[type="radio"], input[type="submit"]  {
     <br>
     <?php _g('All ISOs can also be launched from a <a %s>USB drive</a>.', array('href="' . _r('https://wiki.mageia.org/en/Installation_Media#Dump_Mageia_ISO_on_a_USB_flash_drive') . '"'));
     echo '</p>';
-    _g('To <a %s>dump</a> a Mageia installation ISO on a USB stick, you may try one of several tools:', array('class="iso2usb"'),'p');
+    _g('To <a %s>dump</a> a Mageia installation ISO on a USB stick, you may try one of several tools:', array('href="#" data-tip="iso2usb" class="pop"'),'p');
     echo '<ul><li>';
     _g('For Linux, IsoDumper, available inside repo. Or any tools based on %sdd%s.', array('<span class="italic" >', '</span>'), ' ');
     _g('Unetbootin is not supported.', null, 'span class="warn"'); ?>
     </li>
     <?php _g('For Windows please have a look on our <a href="%s">wiki</a> for your options.', array(_r('https://wiki.mageia.org/en/Dump_Mageia_ISO_on_a_USB_flash_drive_-_Alternative_tools')), 'li'); ?>
     </ul>
-    <div id="iso2usbEx"><p>
+    <div id="iso2usbEx" class="popover-content"><p>
     <?php _g('"Dumping" an image onto a flash device destroys any prior file-system in the partition; access to any data not destroyed will be lost, and partition capacity will be reduced to the image size. In other words, all prior data on the device is at risk.'); ?>
     </p></div>
     <p>
@@ -147,7 +131,7 @@ input[type="radio"], input[type="submit"]  {
 <div class="para" id="format">
 
 <?php if($classical == true){?>
-<div id="classicalEx">
+<div id="classicalEx" class="popover-content">
     <?php _g('Classical Installation Flavours',null,'h2')?>
 
     <?php _g('The Classical ISO is the traditional way to install Mageia directly. Take a look at the complete <a href="%s">documentation</a> for this installer.', array('../doc/'), 'p'); ?>
@@ -170,7 +154,7 @@ input[type="radio"], input[type="submit"]  {
 
 
 <?php if($live == true){?>
-<div id="liveEx">
+<div id="liveEx" class="popover-content">
     <?php _g('LiveDVDs',null,'h3');?>
 
     <?php _g('Live ISO\'s let you try %s without installation. You can run Mageia directly from a DVD or USB device, and try it using one of the graphical user interfaces such as GNOME, Plasma or Xfce.', array("$name $version"), 'p');
@@ -185,7 +169,7 @@ input[type="radio"], input[type="submit"]  {
 </div>
 <?php } ?>
 
-<div id="lanEx">
+<div id="lanEx" class="popover-content">
     <?php _g('Wired Network-based Installation CD',null,'h3');
     _g('Download quickly and immediately boot into install mode from <em>wired</em> network or a local disk.',null,'p');
     _g('Have a look in the <a href="%s">wiki</a> to get a list of possibilities.',array(_r('https://wiki.mageia.org/en/Boot.iso_install')),'p');
@@ -195,11 +179,11 @@ input[type="radio"], input[type="submit"]  {
 
 <div class="d-sm-flex justify-content-center">
     <?php if( $classical ){?><input type="radio" value="DVD" name="format" id="classical"/>
-    <label for="classical" class="btn btn-outline-primary classical" ><?php _g('Classic Installation')?></label><?php }?>
+    <label for="classical" class="btn btn-outline-primary pop" data-tip="classical" ><?php _g('Classic Installation')?></label><?php }?>
     <?php if($live){ ?><input type="radio" id="live" value="LiveDVD" name="format" />
-    <label for="live" class="btn btn-outline-primary live"><?php _g('Live Media');?></label><?php }?>
+    <label for="live" class="btn btn-outline-primary pop" data-tip="live"><?php _g('Live Media');?></label><?php }?>
     <input type="radio" id="lan" value="netinstall" name="format" />
-    <label for="lan" class="btn btn-outline-primary lan"><?php _g('Network Installation')?></label>
+    <label for="lan" class="btn btn-outline-primary pop" data-tip="lan"><?php _g('Network Installation')?></label>
 </div>
 <?php if( !$live || !$classical ){?>
 <p style="margin-top:1.5em;" class="warn">
@@ -214,76 +198,76 @@ input[type="radio"], input[type="submit"]  {
 <div class="para" id="desktop">
     <?php _g('Desktop',null,'h2');?>
 
-    <div id="gnomeEx">
+    <div id="gnomeEx" class="popover-content">
         <?php _g('GNOME Desktop',null,'h3');?>
         <?php //get_image('GNOME', '/g/5/gnome.png', 'width: 100%');?>
     </div>
-    <div id="kdeEx">
+    <div id="kdeEx" class="popover-content">
         <?php _g('Plasma Desktop',null,'h3');?>
         <?php //get_image('PLASMA', '/g/5/kde.png', 'width: 100%');?>
     </div>
-    <div id="xfceEx">
+    <div id="xfceEx" class="popover-content">
         <?php _g('Xfce Desktop',null,'h3');?>
         <?php //get_image('PLASMA', '/g/5/kde.png', 'width: 100%');?>
     </div>    
 
     <div class="d-sm-flex justify-content-center">
         <input type="radio" id="kde" value="Plasma" name="desktop" />
-        <label for="kde" class="btn btn-outline-primary kde"><?php _g('Plasma Desktop')?></label>
+        <label for="kde" class="btn btn-outline-primary pop" data-tip="kde"><?php _g('Plasma Desktop')?></label>
         <input type="radio" id="gnome" value="GNOME" name="desktop" />
-        <label for="gnome" class="btn btn-outline-primary gnome"><?php _g('GNOME Desktop')?></label>
+        <label for="gnome" class="btn btn-outline-primary pop" data-tip="gnome"><?php _g('GNOME Desktop')?></label>
         <input type="radio" id="xfce" value="Xfce" name="desktop" />
-        <label for="xfce" class="btn btn-outline-primary xfce"><?php _g('Xfce Desktop')?></label>
+        <label for="xfce" class="btn btn-outline-primary pop" data-tip="xfce"><?php _g('Xfce Desktop')?></label>
     </div>
 </div><?php }/*live*/?>
 
 <div class="para" id="nat">
     <?php _g('Network installer',null,'h2');?>
 
-    <div id="freeEx">
+    <div id="freeEx" class="popover-content">
         <?php _g('Network installer, Free Software CD', null,'h3');
         _g('Contain only free software',null,'p')?>
     </div>
-    <div id="nonfreeEx">
+    <div id="nonfreeEx" class="popover-content">
         <?php _g('Network installer + nonfree firmware CD', null,'h3');
         _g('Contain nonfree drivers needed for some disc controllers, some network cards, etc.',null,'p')?>
     </div>
     <div class="d-sm-flex justify-content-center">
         <input type="radio" id="free" value="-" name="nat" />
-        <label for="free" class="btn btn-outline-primary free"><?php _g('Free Software CD')?></label>
+        <label for="free" class="btn btn-outline-primary pop" data-tip="free"><?php _g('Free Software CD')?></label>
         <input type="radio" id="nonfree" value="nonfree" name="nat" />
-        <label for="nonfree" class="btn btn-outline-primary nonfree"><?php _g('Nonfree Firmware CD')?></label>
+        <label for="nonfree" class="btn btn-outline-primary pop" data-tip="nonfree"><?php _g('Nonfree Firmware CD')?></label>
     </div>
 </div>
 
 <div class="para" id="arch">
     <?php _g('Supported Architecture',null,'h2');?>
-    <div id='64bEx'>
+    <div id='64bEx' class="popover-content">
         <?php _g('64 bit',null,'h3');
         _g('Most new computers support x86-64 (also known as AMD64 and Intel64), but some laptop processors and netbook processors do not support it.',null,'p')?>
     </div>
-    <div id='32bEx'>
+    <div id='32bEx' class="popover-content">
         <?php _g('32 bit',null,'h3');
         _g('This version runs on all PCs including those that support 64 Bit. If you have more than 3 GB of RAM you should prefer the 64 Bit version though.',null,'p')?>
     </div>
 
     <div class="d-sm-flex justify-content-center">
         <input type="radio" id="32b" value="i586" name="arch" />
-        <label for="32b" class="btn btn-outline-primary 32b"><?php _g('32 bit')?></label>
+        <label for="32b" class="btn btn-outline-primary pop" data-tip="32b"><?php _g('32 bit')?></label>
         <input type="radio" id="64b" value="x86_64" name="arch" />
-        <label for="64b" class="btn btn-outline-primary 64b"><?php _g('64 bit')?></label>
+        <label for="64b" class="btn btn-outline-primary pop" data-tip="64b"><?php _g('64 bit')?></label>
     </div>
 </div>
 
 <div class="dllink para" id="dllink" >
     <?php _g('Download Method',null,'h2');?>
-    <div id="directEx">
+    <div id="directEx" class="popover-content">
         <?php _g('Direct Link',null,'h3');
         _g('You will be redirected to a HTTP or FTP mirror.',null,'p') ?>
     </div>
 
 
-    <div id="torrentEx">
+    <div id="torrentEx" class="popover-content">
 <?php if($torrentavailable){ ?>
     <?php _g('BitTorrent',null,'h3');
     _g('We recommend you to use <a href=%s>BitTorrent</a> for downloading as it usually give a higher speeds and more reliable download of large files.',array(_r('http://en.wikipedia.org/wiki/BitTorrent')),'p');?>
@@ -292,8 +276,8 @@ input[type="radio"], input[type="submit"]  {
 
     <div class="d-sm-flex justify-content-center">
     <?php if($torrentavailable){ ?>
-        <a href="#" id="torrentlink" class="btn btn-outline-primary torrentlink"><?php _g('BitTorrent')?></a><?php }?>
-        <a href="#" id="directlink" class="btn btn-outline-primary directlink"><?php _g('Direct Link')?></a>
+        <a href="#" id="torrentlink" class="btn btn-outline-primary pop" data-tip="torrent"><?php _g('BitTorrent')?></a><?php }?>
+        <a href="#" id="directlink" class="btn btn-outline-primary pop" data-tip="direct"><?php _g('Direct Link')?></a>
     </div>
 </div>
 
@@ -436,28 +420,37 @@ input[type="radio"], input[type="submit"]  {
         </div>
     </div>
 <?php echo common_footer($locale); ?>
-<script src="/g/js/tooltipsy.min.js"></script>
 <script>
 
 $(function () {
 
-function scrolltoid(id){ $('html, body').animate({ scrollTop: $(id).offset().top }, 800); }
-
-function gettooltip($cl, $id, $x, $y){
-$($cl).tooltipsy({
-    alignTo: 'cursor',
-    offset: [($x), ($y)],
-    delay:500,
-    content: function ($el, $tip) {
-    $tip.html($($id).remove().html())
-    },
-    hide: function (e, $el) {
-    setTimeout(function(){
-        $el.hide(); 
-    }, 400);
+
+$('.pop').each(function () {
+  $(this).popover({
+    html: true,
+    container: 'body',
+    trigger: 'manual',
+    placement: 'auto',
+    content: function () {
+      var id = $(this).data('tip')
+      return $('#' + id + 'Ex').html();
     }
+  }).on('mouseenter', function () {
+    var _this = this;
+    $(this).popover('show');
+    $('.popover').on('mouseleave', function () {
+      $(_this).popover('hide');
+    });
+  }).on('mouseleave', function () {
+    var _this = this;
+    setTimeout(function () {
+      if (!$('.popover:hover').length) {
+        $(_this).popover('hide');
+      }
+    }, 300);
+  });
+});
 });
-}
 
 function lazyload(){
 $('img.lazy').each(function(){
@@ -468,10 +461,10 @@ $('img.lazy').each(function(){
 });
 }
 
-    $('#iso2usb,#arch,#nat,#desktop,#dllink').hide();
+    $('#arch,#nat,#desktop,#dllink').hide();
     $('input[name=format]').click(function () {
         $('#arch')[this.id == 'classical' ? 'slideDown' : 'slideUp']();
-        $('label[for="32b"],#32bEx').show();
+        $('label[for="32b"]').show();
         $('input[name="desktop"],input[name="nat"],input[name="arch"],input[name="dllink"]').prop('checked', false);
         $('#desktop')[this.id == 'live' ? 'slideDown' : 'slideUp']();
         $('#nat')[this.id == 'lan' ? 'slideDown' : 'slideUp']();
@@ -484,15 +477,14 @@ $('img.lazy').each(function(){
 
     $('input[name=desktop]').click(function () {
         $('#arch')[ $('#gnome,#kde,#xfce').is(':checked') ? 'slideDown' : 'slideUp']();
-        $('#32bEx,label[for="32b"]')[$('#gnome,#kde').is(':checked') ? 'hide' : 'show']()
+        $('label[for="32b"]')[$('#gnome,#kde').is(':checked') ? 'hide' : 'show']()
         lazyload();
     });
 
     $('input[name=arch]').click(function () {
         $('#dllink')[$('#32b,#64b').is(':checked') ? 'slideDown' : 'slideUp']();
         $('input[name="dllink"]').prop('checked', false);
-        $('#torrentEx,#torrentlink')[$('#lan').is(':checked') ? 'hide' : 'show']();
-        scrolltoid('#dllink')
+        $('#torrentlink')[$('#lan').is(':checked') ? 'hide' : 'show']();
     });
 
     $('#directlink,#torrentlink').hover(function () {
@@ -505,22 +497,6 @@ $('img.lazy').each(function(){
         file = (this.id == 'torrentlink') ? getname + file + '&torrent=1' : getname + file ;
         $("a.btn").attr('href','../downloads/get/?q=' + file);
     });
-
-    gettooltip('.iso2usb', '#iso2usbEx',0,1)
-    gettooltip('.classical', '#classicalEx',40,-70)
-    gettooltip('.live', '#liveEx',40,-70)
-    gettooltip('.lan','#lanEx',40,-70)
-    gettooltip('.gnome', '#gnomeEx',40,-0)
-    gettooltip('.kde', '#kdeEx',40,-0)
-    gettooltip('.xfce', '#xfceEx',40,-0)
-    gettooltip('.free', '#freeEx',40,-70)
-    gettooltip('.nonfree','#nonfreeEx',40,-70)
-    gettooltip('.32b', '#32bEx',40,-70)
-    gettooltip('.64b', '#64bEx',40,-70)
-    gettooltip('.directlink', '#directEx',40,-40)
-    gettooltip('.torrentlink','#torrentEx',40,-40)
-
-});
 </script>
 </body>
 </html>
author	Manuel Hiebel <leuhmanu@mageia.org>	2018-02-19 18:04:06 +0100
committer	Manuel Hiebel <leuhmanu@mageia.org>	2018-02-19 18:04:06 +0100
commit	f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321 (patch)
tree	4663e85d3f5ab72cadd0c1ccc4ca5f3913e4f1ec
parent	36bf59a0d7129dd8125b2348d428b03e527c3b21 (diff)
download	www-f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321.tar www-f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321.tar.gz www-f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321.tar.bz2 www-f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321.tar.xz www-f62c24a63ec3eaa2fcf7e50d8eb2590aaba26321.zip