Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – JS of my special page extension in mediawiki not loading only on smartphone

On my wiki I made a special page that display recent changes in a pinterest style. Fort the image, it fetchs them using mediawikiParserOutput as a thumb 100px and then with js, I fetch the big images and put them where it should go. On desktop the js is loaded properly but on smartphone (and mozilla firefox smartphone simulation), it doesn’t load.

It doesn’t even matter what is in the js, if the js is only composed of a console.log("loaded"), there will be nothing in the console.

Here’s my extension.json :

{
  "manifest_version": 1,
  "name": "ArchiRecentChanges",
  "version": "1.1",
  "license-name": "GPL-3.0",
  "author": "Aymeric Feltz",
  "description": "Custom pages for archi-wiki.org that display a pinterest style list of recent changes",
  "type": "specialpage",
  "SpecialPages": {
    "ArchiRecentChanges": "ArchiRecentChanges\SpecialArchiRecentChanges"
  },
  "AutoloadClasses": {
    "ArchiRecentChanges\SpecialArchiRecentChanges": "SpecialArchiRecentChanges.php"
  },
  "MessagesDirs": {
    "ArchiRecentChanges": [
      "i18n"
    ]
  },
  "ResourceModules": {
    "ext.archirecentchanges": {
      "scripts": [
        "js/archirecentchanges.js"
      ],
      "messages":[
        "readthis"
      ]
    }
  },
  "ResourceFileModulePaths": {
    "localBasePath": "",
    "remoteExtPath": "ArchiRecentChanges"
  },
  "ExtensionMessagesFiles": {
    "ArchiRecentChangesAlias": "ArchiRecentChanges.i18n.alias.php"
  }
}

Here’s the page in question :

ArchiRecentChanges

Here’s all the code :

archi-mediawiki/extensions/ArchiRecentChanges/
(commit 58bfb64de078fc436b60993f0f726f5cc15e4fd5, 19/07/24)

MediaWiki : 1.39.7

PHP : 7.4.33 (fpm-fcgi)

MariaDB : 10.11.6-MariaDB-0+deb12u1-log

ICU : 72.1

elasticsearch : 6.8.23

We also have some js in our hack.js in our skin folder (that we deploy with npm), and this js works perfectly fine. It’s only with the js of the extension that I have problems with

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    If you want to have add js with a module for an extension on mobile, you need to add the "targets" option. Here's how your extension.json would look like :

        {
  "manifest_version": 1,
  "name": "ArchiRecentChanges",
  "version": "1.1",
  "license-name": "GPL-3.0",
  "author": "Aymeric Feltz",
  "description": "Custom pages for archi-wiki.org that display a pinterest style list of recent changes",
  "type": "specialpage",
  "SpecialPages": {
    "ArchiRecentChanges": "ArchiRecentChanges\SpecialArchiRecentChanges"
  },
  "AutoloadClasses": {
    "ArchiRecentChanges\SpecialArchiRecentChanges": "SpecialArchiRecentChanges.php"
  },
  "MessagesDirs": {
    "ArchiRecentChanges": [
      "i18n"
    ]
  },
  "ResourceModules": {
    "ext.archirecentchanges": {
      "scripts": [
        "js/archirecentchanges.js"
      ],
      "messages":[
        "readthis"
      ],
      "targets": [
        "desktop",
        "mobile"
      ]
    }
  },
  "ResourceFileModulePaths": {
    "localBasePath": "",
    "remoteExtPath": "ArchiRecentChanges"
  },
  "ExtensionMessagesFiles": {
    "ArchiRecentChangesAlias": "ArchiRecentChanges.i18n.alias.php"
  }
}

    I don't know if after mediawiki version 1.39, this is still needed


  2. 0

    Not sure of exact reason, but I would start from cleaning up the resource load code:

    public function execute($subPage)
{
    global $wgOut;
    $wgOut->addModules('ext.archirecentchanges.js');
    $wgOut->addModules('ext.archirecentchanges');
    $this->languageCode = RequestContext::getMain()->getLanguage()->getCode();

    $output = $this->getOutput();
    $this->setHeaders();

    $output->addHTML('<div class="latest-block">');

    //Dernières modifications
    $addresses=$this->outputRecentChanges();
    $output->addWikiTextAsInterface('[[Special:Modifications récentes|' . wfMessage('allrecentchanges')->parse() . ']]');
    $output->addHTML('<button id="voir-plus" class="mw-ui-button" style="position:absolute;bottom:10px;left:45%;" data-val="'.$addresses['continue']['rccontinue'].'">Voir plus</button>');

    $output->addHTML('</div>'); // End of Latest block
}

    Probably smth like this may improve situation (corrected the output object, removed load of non-existing module ‘ext.archirecentchanges.js’. Maybe it failed on loading the non-existing module (not sure).

    public function execute($subPage)
{
    $output = $this->getOutput();
    
    $output->addModules('ext.archirecentchanges');
    
    $this->setHeaders();

    $output->addHTML('<div class="latest-block">');

    //Dernières modifications
    $addresses=$this->outputRecentChanges();
    $output->addWikiTextAsInterface('[[Special:Modifications récentes|' . wfMessage('allrecentchanges')->parse() . ']]');
    $output->addHTML('<button id="voir-plus" class="mw-ui-button" style="position:absolute;bottom:10px;left:45%;" data-val="'.$addresses['continue']['rccontinue'].'">Voir plus</button>');

    $output->addHTML('</div>'); // End of Latest block
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search