MediaWiki:Gadget-MobileView.js

/*

  Aperçu de la page courante sur téléphone mobile (smartphone).
  -------------------------------------------------------------
  Auteur : DavidL

*/
wgfrwikibooks_Gadget_MobileViewJsVersion = "20200705001";

function mob_fullurl()
{
    var url = mw.config.get('wgServer')+mw.config.get('wgArticlePath').replace("$1",mw.config.get('wgPageName'));
    var i = url.indexOf('.');
    return url.substring(0,i)+".m"+url.substring(i);
}

var mob_wx, mob_wy, mob_moving=false;
var mob_winx, mob_winy;
var mob_win = undefined;
function mobMMove(e)
{
  if (!mob_moving) return false;
  if (!e) var e = window.event;
  var nwx=e.clientX, nwy=e.clientY;
  mob_winx += nwx-mob_wx;
  mob_winy += nwy-mob_wy;
  mob_win.style.left = ''+mob_winx+'px';
  mob_win.style.top = ''+mob_winy+'px';
  mob_wx=nwx; mob_wy=nwy;
  return true;
}
function mobMUp(e)
{
  if (!e) var e = window.event;
  mob_moving=false;
  return true;
}
function mobMDown(e)
{
  if (!e) var e = window.event;
  mob_wx=e.clientX; mob_wy=e.clientY;
  mob_winx=mob_win.offsetLeft;
  mob_winy=mob_win.offsetTop;
  mob_moving=true;
  return true;
}
function mobOpen()
{
  mob_win.style.display = 'block';
}
function mobClose()
{
  mob_win.style.display = 'none';
}

var mob_default_wcell = 36;
var mob_default_horizontal = false;
var mob_pos_x = 50;
var mob_pos_y = 50;
var mob_title = "";

function getLangSet(messages)
{
	var wgUserLanguage = mw.config.get('wgUserLanguage');
    if (messages[wgUserLanguage]!==undefined) return messages[wgUserLanguage];
    if (messages[mw.config.get('wgContentLanguage')]!==undefined) return messages[mw.config.get('wgContentLanguage')];
    return messages['fr'];
}

var mob_langset = getLangSet
({
          /* titre par défaut,    nom du lien,     description du lien  */
    'fr': [ 'Aperçu sur mobile', 'aperçu mobile', 'Aperçu de cette page sur appareil mobile' ],
          /* default title,       link name,       link description */
    'en': [ 'Mobile preview',    'mobile view',   'Preview this page on mobile device' ],
});

function mobCreate()
{
    var mob_cell = mob_default_wcell;
    var horizontal = mob_default_horizontal;
    // écran mobile 16:9
    var mob_height = mob_cell*(horizontal?9:16);
    var mob_width = mob_cell*(horizontal?16:9);
    mob_height -= 16; // - marges barre d'état
    var mob_title_bar, mob_close;
    appendDOM(document.body,mob_win=genDOM(
    ['div',{'style':{'position':'fixed','z-index':'1000','font-size':'16px',
        'box-shadow':'0 0 10px 5px LightGrey','-moz-box-shadow':'0 0 10px 5px LightGrey','-webkit-box-shadow':'0 0 10px 5px LightGrey',
        'left':(mob_pos_x+'px'),'top':(mob_pos_y+'px'),
        'width':((mob_width+10)+'px'),'height':((mob_height+36)+'px'),
        'border':'solid 2px #eeeeee','background':'#eeeeee','border-radius':'2em'}},
      ['form',['table',{'style':{'width':'100%','height':'100%','background':'black','border':'solid 1px black','border-radius':'30px','padding':'0.5em 0'}},
      ['tr',{'style':{'height':'25px'}},
        ['td',{'style':{'color':'white','font-weight':'bold'}},
          mob_title_bar=genDOM(['div',{'style':{'cursor':'move','text-align':'center', 'padding':'0.5em'}},mob_title])
        ],
        [ "td", { 'style':{'width':'50px'} },
            mob_close=genDOM([ "div", { 'title':'Fermer l\'aperçu',
              'style':{'background':'#ee0000','color':'white','font-weight':'bold','font-size':'70%',
                'text-align':'center','cursor':'default','padding':'0.3 em 1.5em','margin':'0.5em','border-radius':'0.1em'}}, '\u2716'])
        ]
      ],
      ['tr',['td',{'colspan':'2','style':{'vertical-align':'top','verticalAlign':'top'}}, '',
        ['iframe',{'style':{'width':(mob_width+'px'),'height':(mob_height+'px'),'border':'solid 4px black','border-radius':'0.5em'},'src':mob_fullurl()}]
      ]]
      ]]]));
    mob_title_bar.onmousedown = mobMDown;
    mob_title_bar.onmouseup = mobMUp;
    mob_title_bar.onmousemove = mobMMove;
    mob_close.onmouseup = mobClose;
    mobOpenView = mobOpen;
}

var mobOpenView = mobCreate;

function mobOpenViewWindow()
{ mobOpenView(); }

function mobSetup()
{
    if (typeof(MobileViewConfig)=='undefined') MobileViewConfig = {};

// Paramètres et valeurs par défaut
// - nom du menu où ajouter le lien
    var portletId = MobileViewConfig.portletId || 'p-personal';

// - taille indicative de l'écran
    mob_default_wcell = MobileViewConfig.sizeInCells || 36;
// - orientation de l'écran pour l'aperçu
    mob_default_horizontal = MobileViewConfig.isHorizontal || false;
// - position initiale de l'aperçu
    mob_pos_x = MobileViewConfig.positionX || 50;
    mob_pos_y = MobileViewConfig.positionY || 50;
// - titre de la vue mobile
    mob_title = MobileViewConfig.title || mob_langset[0];

    var nextNode = MobileViewConfig.nextNodeId ? document.getElementById(MobileViewConfig.nextNodeId) : 'pt-logout';
    // Create portlet link
    var dev_portlet_link = mw.util.addPortletLink(portletId, '#',
        mob_langset[1], 'ca-mob-view', mob_langset[2], undefined, nextNode);
    // Bind click handler
    $(dev_portlet_link).click( function( e ) { e.preventDefault(); mobOpenViewWindow(); });
}
$(mobSetup);