<!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>[9633] sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events: Official WordPress Events: Add shortcode for displaying online events</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/9633">9633</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/9633","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ryelle</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2020-03-25 18:20:25 +0000 (Wed, 25 Mar 2020)</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'>Official WordPress Events: Add shortcode for displaying online events
This adds the shortcode `[official_wordpress_events_online]`, which pulls only online events. The events are displayed using JS, so we can pick up the client's timezone and show events using their local timezone.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventsofficialwordpresseventscss">sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-wordpress-events.css</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventsofficialwordpresseventsphp">sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-wordpress-events.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventstemplateeventsphp">sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/template-events.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventsofficialeventsonlinejs">sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-events-online.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventsofficialeventsonlinephp">sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-events-online.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventstemplateeventsonlinephp">sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/template-events-online.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventsofficialeventsonlinejs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-events-online.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-events-online.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-events-online.js 2020-03-25 18:20:25 UTC (rev 9633)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,41 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Get the list of events in day-buckets.
+ *
+ * @param {Array} events
+ */
+function getSortedEvents( events ) {
+ const sortedEvents = {};
+ events.forEach( function( event ) {
+ const d = new Date( event.start_timestamp * 1000 );
+ const key = wp.date.format( 'Y-m-d', d );
+ // Inject a human-readable start time.
+ event.startTime = wp.date.format( 'g:i a ', d );
+ if ( sortedEvents.hasOwnProperty( key ) ) {
+ sortedEvents[ key ].push( event );
+ } else {
+ sortedEvents[ key ] = [ event ];
+ }
+ } );
+ return sortedEvents;
+}
+
+jQuery( function( $ ) {
+ var templateTZ = wp.template( 'owe-timezone' );
+ var templateList = wp.template( 'official-events' );
+ var templateEvent = wp.template( 'official-event' );
+
+ var list = $.map(
+ getSortedEvents( OfficialWordPressEvents ),
+ function( events, date ) {
+ return templateList( {
+ date: wp.date.format( 'F j', date ),
+ dayOfWeek: wp.date.format( 'l', date ),
+ eventMarkup: events.map( templateEvent ).join( '' ),
+ } );
+ }
+ ).join( '' );
+
+ var timezone = templateTZ( wp.date.format( '\\U\\T\\CP' ) );
+
+ $( '#official-online-events' ).html( timezone + list );
+});
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventsofficialeventsonlinephp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-events-online.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-events-online.php (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-events-online.php 2020-03-25 18:20:25 UTC (rev 9633)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,95 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+
+namespace Official_WordPress_Events\Online_Events;
+
+add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_scripts', 11 );
+add_action( 'wp_footer', __NAMESPACE__ . '\render_online_templates' );
+
+add_shortcode( 'official_wordpress_events_online', __NAMESPACE__ . '\render_online_shortcode' );
+
+/**
+ * Get events from the local database, filtering only for online events.
+ *
+ * @return array
+ */
+function get_synced_online_events() {
+ global $wpdb;
+
+ $table = \Official_WordPress_Events::EVENTS_TABLE;
+
+ // Include yesterday's events because server timezone may be ahead of user's timezone.
+ // phpcs:disable WordPress.DB.PreparedSQL.InterpolatedNotPrepared
+ $raw_events = $wpdb->get_results(
+ "SELECT title, url, date_utc, date_utc_offset
+ FROM `{$table}`
+ WHERE
+ date_utc >= SUBDATE( CURRENT_DATE(), 1 ) AND
+ status = 'scheduled' AND
+ (
+ location = 'online' OR
+ title LIKE '%[ONLINE]%'
+ )
+ ORDER BY date_utc ASC
+ LIMIT 300"
+ );
+ // @todo Could also include online WordCamps, using "virtual" question in WCPT.
+ // phpcs:enable
+
+ $cached_events = array();
+ foreach ( $raw_events as $event ) {
+ // The `date_utc` is not actually a UTC timestamp, it's the local time as Y-m-d H:i:s.
+ // We need to convert it back to UTC by subtracting the UTC offset.
+ $timestamp = strtotime( $event->date_utc ) - $event->date_utc_offset;
+ $cached_events[] = array(
+ 'title' => $event->title,
+ 'url' => $event->url,
+ 'start_timestamp' => $timestamp,
+ );
+ }
+
+ return $cached_events;
+}
+
+/**
+ * Enqueue scripts and styles
+ */
+function enqueue_scripts() {
+ global $post;
+
+ wp_register_script(
+ 'official-events-online',
+ plugins_url( 'official-events-online.js', __FILE__ ),
+ array( 'jquery', 'wp-date', 'wp-util' ),
+ \Official_WordPress_Events::CACHEBUSTER,
+ true
+ );
+
+ if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'official_wordpress_events_online' ) ) {
+ wp_enqueue_style( 'official-wordpress-events' );
+ wp_enqueue_script( 'official-events-online' );
+
+ $events = get_synced_online_events();
+ wp_add_inline_script(
+ 'official-events-online',
+ sprintf(
+ 'var OfficialWordPressEvents = JSON.parse( decodeURIComponent( \'%s\' ) );',
+ rawurlencode( wp_json_encode( $events ) )
+ ),
+ 'before'
+ );
+ }
+}
+
+/**
+ * Inject JS templates into page.
+ */
+function render_online_templates() {
+ require_once( __DIR__ . '/template-events-online.php' );
+}
+
+/**
+ * Output the container div, which is filled in by JS.
+ */
+function render_online_shortcode() {
+ return '<div id="official-online-events" class="ofe-events">Loading events…</div>';
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventsofficialwordpresseventscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-wordpress-events.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-wordpress-events.css 2020-03-25 14:37:51 UTC (rev 9632)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-wordpress-events.css 2020-03-25 18:20:25 UTC (rev 9633)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,12 +1,19 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#ofe-events h3 {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.ofe-events h3 {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 1.3em;
</span><span class="cx" style="display: block; padding: 0 10px"> text-transform: uppercase;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-weight: bold;
+ color: #23282D;
+ font-size: 1.2em;
</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"> .owe-day-of-week {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #a1a1a1;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #767676;
</ins><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">+.owe-timezone {
+ font-style: italic;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> ul.ofe-event-list {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 3em;
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventsofficialwordpresseventsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-wordpress-events.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-wordpress-events.php 2020-03-25 14:37:51 UTC (rev 9632)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/official-wordpress-events.php 2020-03-25 18:20:25 UTC (rev 9633)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -15,6 +15,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> const WORDCAMP_API_BASE_URL = 'https://central.wordcamp.org/wp-json/';
</span><span class="cx" style="display: block; padding: 0 10px"> const MEETUP_API_BASE_URL = 'https://api.meetup.com/';
</span><span class="cx" style="display: block; padding: 0 10px"> const MEETUP_MEMBER_ID = 72560962;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const CACHEBUSTER = 2;
</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"> * @todo
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -171,7 +172,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> public function enqueue_scripts() {
</span><span class="cx" style="display: block; padding: 0 10px"> global $post;
</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_register_style( 'official-wordpress-events', plugins_url( 'official-wordpress-events.css', __FILE__ ), array(), 1 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_register_style(
+ 'official-wordpress-events',
+ plugins_url( 'official-wordpress-events.css', __FILE__ ),
+ array(),
+ self::CACHEBUSTER
+ );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'official_wordpress_events' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_style( 'official-wordpress-events' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -824,4 +830,5 @@
</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"> require_once( __DIR__ . DIRECTORY_SEPARATOR . 'official-wordpress-event.php' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+require_once( __DIR__ . DIRECTORY_SEPARATOR . 'official-events-online.php' );
</ins><span class="cx" style="display: block; padding: 0 10px"> $GLOBALS['Official_WordPress_Events'] = new Official_WordPress_Events();
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventstemplateeventsonlinephp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/template-events-online.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/template-events-online.php (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/template-events-online.php 2020-03-25 18:20:25 UTC (rev 9633)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,25 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<script type="text/template" id="tmpl-owe-timezone">
+ <p class="owe-timezone">
+ All times displayed in {{ data }}
+ </p>
+</script>
+
+<script type="text/template" id="tmpl-official-events">
+ <h3>
+ {{ data.date }}
+ <span class="owe-day-of-week">{{ data.dayOfWeek }}</span>
+ </h3>
+ <ul class="ofe-event-list">
+ {{{ data.eventMarkup }}}
+ </ul>
+</script>
+
+<script type="text/template" id="tmpl-official-event">
+ <li>
+ <a href="{{ data.url }}">
+ {{ data.title }}
+ </a>
+ <span class="owe-separator"></span>
+ {{ data.startTime }}
+ </li>
+</script>
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsofficialwordpresseventstemplateeventsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/template-events.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/template-events.php 2020-03-25 14:37:51 UTC (rev 9632)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/official-wordpress-events/template-events.php 2020-03-25 18:20:25 UTC (rev 9633)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,4 +1,4 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<div id="ofe-events">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<div id="ofe-events" class="ofe-events">
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php foreach ( $events as $date => $day_events ) : ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <h3>
</span></span></pre>
</div>
</div>
</body>
</html>