<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[7011] sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events: WP15: Use `wp_localize_script()` to pass all data to JS.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/7011">7011</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/7011","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>iandunn</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2018-04-03 20:46:45 +0000 (Tue, 03 Apr 2018)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>WP15: Use `wp_localize_script()` to pass all data to JS.
This will be more organized as we add more data in future commits, like localized strings. It also takes some logic out of the view file.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwp15wordpressnetpublic_htmlcontentpluginswp15meetupeventsviewseventsmapphp">sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/views/events-map.php</a></li>
<li><a href="#sitestrunkwp15wordpressnetpublic_htmlcontentpluginswp15meetupeventswp15meetupeventsjs">sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/wp15-meetup-events.js</a></li>
<li><a href="#sitestrunkwp15wordpressnetpublic_htmlcontentpluginswp15meetupeventswp15meetupeventsphp">sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/wp15-meetup-events.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwp15wordpressnetpublic_htmlcontentpluginswp15meetupeventsviewseventsmapphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/views/events-map.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/views/events-map.php 2018-04-03 20:46:41 UTC (rev 7010)
+++ sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/views/events-map.php 2018-04-03 20:46:45 UTC (rev 7011)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3,14 +3,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> namespace WP15\Meetup_Events;
</span><span class="cx" style="display: block; padding: 0 10px"> defined( 'WPINC' ) || die();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/** @var array $map_options */
-
</del><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<script>
- var wp15MeetupEventsOptions = <?php echo wp_json_encode( $map_options ); ?>;
-</script>
-
</del><span class="cx" style="display: block; padding: 0 10px"> <div id="wp15-events-map">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="wp15-spinner spinner spinner-visible"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span></span></pre></div>
<a id="sitestrunkwp15wordpressnetpublic_htmlcontentpluginswp15meetupeventswp15meetupeventsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/wp15-meetup-events.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/wp15-meetup-events.js 2018-04-03 20:46:41 UTC (rev 7010)
+++ sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/wp15-meetup-events.js 2018-04-03 20:46:45 UTC (rev 7011)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,8 +7,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> var WP15MeetupEvents = ( function( $ ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // `templateOptions` is copied from Core in order to avoid an extra HTTP request just to get `wp.template`.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var options,
- templateOptions = {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var events,
+ options,
+ strings,
+ templateOptions = {
</ins><span class="cx" style="display: block; padding: 0 10px"> evaluate: /<#([\s\S]+?)#>/g,
</span><span class="cx" style="display: block; padding: 0 10px"> interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
</span><span class="cx" style="display: block; padding: 0 10px"> escape: /\{\{([^\}]+?)\}\}(?!\})/g
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -17,15 +19,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Initialization that runs when the document has fully loaded.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function init( initOptions ) {
- options = initOptions;
- initOptions = null;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function init( data ) {
+ events = data.events;
+ options = data.map_options;
+ strings = data.strings;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> try {
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#wp15-events-query' ).keyup( filterEventList );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( options.hasOwnProperty( 'mapContainer' ) && options.hasOwnProperty( 'mapMarkers' ) ) {
- loadMap( options.mapContainer, options.mapMarkers );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( options.hasOwnProperty( 'mapContainer' ) ) {
+ loadMap( options.mapContainer, events );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } catch ( exception ) {
</span><span class="cx" style="display: block; padding: 0 10px"> log( exception );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -206,4 +209,4 @@
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px"> } )( jQuery );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-jQuery( document ).ready( WP15MeetupEvents.init( wp15MeetupEventsOptions ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+jQuery( document ).ready( WP15MeetupEvents.init( wp15MeetupEventsData ) );
</ins></span></pre></div>
<a id="sitestrunkwp15wordpressnetpublic_htmlcontentpluginswp15meetupeventswp15meetupeventsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/wp15-meetup-events.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/wp15-meetup-events.php 2018-04-03 20:46:41 UTC (rev 7010)
+++ sites/trunk/wp15.wordpress.net/public_html/content/plugins/wp15-meetup-events/wp15-meetup-events.php 2018-04-03 20:46:45 UTC (rev 7011)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -176,6 +176,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_enqueue_style(
+ 'wp15-meetup-events',
+ plugins_url( 'wp15-meetup-events.css', __FILE__ ),
+ array(),
+ filemtime( __DIR__ . '/wp15-meetup-events.css' )
+ );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> wp_register_script(
</span><span class="cx" style="display: block; padding: 0 10px"> 'google-maps',
</span><span class="cx" style="display: block; padding: 0 10px"> 'https://maps.googleapis.com/maps/api/js?key=' . GOOGLE_MAPS_PUBLIC_KEY,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -200,31 +207,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> true
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wp_enqueue_style(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_localize_script(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'wp15-meetup-events',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- plugins_url( 'wp15-meetup-events.css', __FILE__ ),
- array(),
- filemtime( __DIR__ . '/wp15-meetup-events.css' )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'wp15MeetupEventsData',
+ array(
+ 'map_options' => get_map_options(),
+ 'events' => get_formatted_events(),
+ )
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Render the WP15 events shortcode.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Get the configuration for the Google Map of events.
+ *
+ * @return array
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function render_events_shortcode() {
- $events = get_option( 'wp15_events' );
-
- // This needs to be done on the fly, in order to use the date format for the visitor's locale.
- foreach ( $events as & $event ) {
- $event['time'] = get_local_formatted_date( $event['time'], $event['timezone'] );
- }
- unset( $event ); // Destroy the reference to restore expected behavior; see https://stackoverflow.com/a/4969286/450127.
-
- usort( $events, __NAMESPACE__ . '\sort_events' );
-
- $map_options = array(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function get_map_options() {
+ return array(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'mapContainer' => 'wp15-events-map',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'mapMarkers' => $events,
</del><span class="cx" style="display: block; padding: 0 10px"> 'markerIconBaseURL' => plugins_url( '/images/', __FILE__ ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'markerIcon' => 'map-marker.svg',
</span><span class="cx" style="display: block; padding: 0 10px"> 'markerIconAnchorXOffset' => 32,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -234,11 +235,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'clusterIconWidth' => 53,
</span><span class="cx" style="display: block; padding: 0 10px"> 'clusterIconHeight' => 52,
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+}
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ob_start();
- require_once( __DIR__ . '/views/events-map.php' );
- require_once( __DIR__ . '/views/events-list.php' );
- return ob_get_clean();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Format the WP15 events for presentation.
+ *
+ * @return array
+ */
+function get_formatted_events() {
+ $events = get_option( 'wp15_events' );
+
+ // This needs to be done on the fly, in order to use the date format for the visitor's locale.
+ foreach ( $events as & $event ) {
+ $event['time'] = get_local_formatted_date( $event['time'], $event['timezone'] );
+ }
+ unset( $event ); // Destroy the reference to restore expected behavior; see https://stackoverflow.com/a/4969286/450127.
+
+ usort( $events, __NAMESPACE__ . '\sort_events' );
+
+ return $events;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -258,6 +273,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Render the WP15 events shortcode.
+ */
+function render_events_shortcode() {
+ $events = get_formatted_events();
+
+ ob_start();
+ require_once( __DIR__ . '/views/events-map.php' );
+ require_once( __DIR__ . '/views/events-list.php' );
+ return ob_get_clean();
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Format a UTC timestamp with respect to the local timezone.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param int $utc_time
</span></span></pre>
</div>
</div>
</body>
</html>