WordPress.org
Get WordPress

Making WordPress.org

Changeset 11217


Ignore:
Timestamp:
09/08/2021 01:07:57 AM (3 years ago)
Author:
dd32
Message:

Openverse: Update the theme to pass the locale.

Fixes #5892.
Closes ​https://github.com/WordPress/wordpress.org/pull/39

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/functions.php

    r11060 r11217  
    8686    wp_add_inline_script(
    8787        /* handle   */ 'openverse-message',
    88         /* JS       */ 'const openverseUrl = ' . json_encode( get_theme_mod( 'ov_src_url', OPENVERSE_URL ) ) . ";\n" .
    89         /* JS       */ 'const openverseSubpath = ' . json_encode( OPENVERSE_SUBPATH ) . ";\n",
     88        /* JS       */ 'const openverseUrl = ' . wp_json_encode( get_theme_mod( 'ov_src_url', OPENVERSE_URL ) ) . ";\n" .
     89        /* JS       */ 'const openverseSubpath = ' . wp_json_encode( OPENVERSE_SUBPATH ) . ";\n" .
     90        /* JS       */ 'const currentLocale = ' . wp_json_encode( get_locale() ) . ";\n",
    9091        /* position */ 'before'
    9192    ); 

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/index.php

    r11060 r11217  
    2020    <main id="main" class="site-main" role="main">
    2121        <iframe id="openverse_embed">
    22             😢 Your browser does not support inline frames.
     22            😢 Your browser does not support inline frames.
    2323        </iframe>
    2424    </main><!-- #main -->

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/js/message.js

    r11060 r11217  
    77 */
    88function updateHeight(value) {
    9     const height = value.height;
    10     let heightProp
    11     if (height) {
    12         heightProp = `${height}px`;
    13     } else {
    14         heightProp = '100vh';
    15     }
    16     document
    17         .documentElement
    18         .style
    19         .setProperty('--openverse-embed-height', heightProp);
     9  const height = value.height;
     10  let heightProp;
     11  if (height) {
     12    heightProp = `${height}px`;
     13  } else {
     14    heightProp = '100vh';
     15  }
     16  document
     17    .documentElement
     18    .style
     19    .setProperty('--openverse-embed-height', heightProp);
    2020}
    2121
    … …  
    3232 */
    3333function updatePath(value) {
    34     const path = value.path;
    35     const url = `${openverseSubpath}${path}`; // openverseSubpath defined in `index.php`
     34  const path = value.path;
     35  const url = `${openverseSubpath}${path}`; // openverseSubpath defined in `index.php`
    3636
    37     console.log(`Replacing state URL: ${url}`);
    38     history.replaceState(
    39         value.state,
    40         value.title ?? 'Openverse',
    41         url,
    42     );
     37  console.log(`Replacing state URL: ${url}`);
     38  history.replaceState(
     39    value.state,
     40    value.title ?? 'Openverse',
     41    url,
     42  );
    4343
    44     if (value.title) {
    45         console.log(`Setting document title: ${value.title}`);
    46         document.title = value.title;
    47     }
     44  if (value.title) {
     45    console.log(`Setting document title: ${value.title}`);
     46    document.title = value.title;
     47  }
     48}
     49
     50/**
     51 * Emit a message to the `iframe` containing information about the current
     52 * locale. This function combines the locale from WordPress with attributes
     53 * from the top-level HTML document.
     54 */
     55function emitLocale() {
     56  const currentLang = document.documentElement.lang;
     57  const currentDir = document.documentElement.dir;
     58
     59  const iframe = document.getElementById('openverse_embed');
     60  iframe.contentWindow.postMessage(
     61    {
     62      type: 'localeSet',
     63      value: {
     64        dir: currentDir,
     65        lang: currentLang,
     66        locale: currentLocale, // set in `header.php`
     67      },
     68    },
     69    '*', // Bad practice, but we are not sending sensitive info
     70  );
    4871}
    4972
    … …  
    5376 */
    5477function logUnhandled() {
    55     console.error('No handler configured for event received');
     78  console.error('No handler configured for event received');
    5679}
    5780
    … …  
    6588 * }>} message - the message object sent to this document
    6689 */
    67 function handleIframeMessages ({ origin, data }) {
    68     if (data.debug) {
    69         console.log(`Received message from origin ${origin}:`);
    70         console.log(data);
    71     }
     90function handleIframeMessages({ origin, data }) {
     91  if (data.debug) {
     92    console.log(`Received message from origin ${origin}:`);
     93    console.log(data);
     94  }
    7295
    73     let handler
    74     switch(data.type) {
    75         case 'resize':
    76             handler = updateHeight;
    77             break;
    78         case 'urlChange':
    79             handler = updatePath;
    80             break;
    81         default:
    82             handler = logUnhandled;
    83     }
    84     handler(data.value);
     96  let handler;
     97  switch (data.type) {
     98    case 'resize':
     99      handler = updateHeight;
     100      break;
     101    case 'urlChange':
     102      handler = updatePath;
     103      break;
     104    case 'localeGet':
     105      handler = emitLocale;
     106      break;
     107    default:
     108      handler = logUnhandled;
     109  }
     110  handler(data.value);
    85111}
    86112

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/js/message_test.html

    r11060 r11217  
    88        margin-top: 1em;
    99      }
     10
    1011      label {
    1112        display: inline-block;
    … …  
    2021       * @param {any} value - the data to send along with the message
    2122       */
    22       function sendMessage (type, value) {
     23      function sendMessage(type, value = {}) {
    2324        if (window.parent !== window) {
    2425          const message = { debug: true, type, value };
    … …  
    6465          }
    6566          sendMessage('urlChange', message);
     67        });
     68
     69        document.forms.localeGet.addEventListener('submit', (event) => {
     70          event.preventDefault();
     71
     72          const listener = ({ origin, data }) => {
     73            if (data.type !== 'localeSet') {
     74              return;
     75            }
     76
     77            console.log(`Received message from origin ${origin}:`);
     78            document.getElementById('gotLocale').innerText = JSON.stringify(data, null, 2);
     79
     80            console.log('Removing listener');
     81            window.removeEventListener('message', listener);
     82          };
     83          window.addEventListener('message', listener);
     84          sendMessage('localeGet');
    6685        });
    6786      });
    … …  
    114133      </div>
    115134    </form>
     135
     136    <h2>Test locale get</h2>
     137    <form name="localeGet">
     138      <div class="row">
     139        <button type="submit">
     140          Get locale
     141        </button>
     142        <pre><code id="gotLocale"></code></pre>
     143      </div>
     144    </form>
    116145  </body>
    117146</html>
Note: See TracChangeset for help on using the changeset viewer.