PluginProbe
Photonic Gallery & Lightbox for Flickr, SmugMug & Others / 3.36
Photonic Gallery & Lightbox for Flickr, SmugMug & Others v3.36
3.36 3.35 3.34 3.33 2.19 2.20 2.21 2.22 2.23 2.24 2.25 2.26 2.27 2.28 2.29 2.30 2.31 2.32 2.33 2.34 2.40 2.41 2.42 2.43 2.44 All 141 releases
← All changes | Admin/Getting_Started.php +728 -491 2.42 → 3.36 View file →
@@ -1,5 +1,6 @@
1 1 <?php
2 +
2 3 namespace Photonic_Plugin\Admin;
3 4
4 5 if (!defined('ABSPATH')) {
5 6 echo '<h1>WordPress not loaded!</h1>';
@@ -5,25 +6,26 @@
5 6 echo '<h1>WordPress not loaded!</h1>';
6 7 exit;
7 8 }
8 9
9 -require_once('Admin_Page.php');
10 +require_once 'Admin_Page.php';
10 11
11 12 class Getting_Started extends Admin_Page {
12 - private static $instance;
13 + private static ?Getting_Started $instance = null;
13 14
14 15 private function __construct() {
15 16 // Empty
16 17 }
17 18
18 - static function get_instance() {
19 - if (self::$instance == null) {
19 + public static function get_instance() {
20 + if (null === self::$instance) {
20 21 self::$instance = new Getting_Started();
21 22 }
22 23 return self::$instance;
23 24 }
24 25
25 - function render_content() {
26 + public function render_content() {
27 + $this->tabs();
26 28 $this->capabilities();
27 29 $this->build_gallery();
28 30 $this->layouts();
29 31 $this->lightbox();
@@ -31,541 +33,776 @@
31 33 $this->helper_shortcode();
32 34 $this->really_technical();
33 35 }
34 36
35 - function capabilities() {
37 + private function tabs() {
36 38 ?>
37 - <h2 class="photonic-section">Capabilities and Documentation</h2>
38 - <p>
39 - Photonic can show you photos and galleries not just from standard WordPress, but also from several third-party photo-hosting providers
40 - such as Flickr, SmugMug, Google Photos etc. The following table tells you what you need for each provider, and provides you with
41 - documentation links for how to show something using Photonic.
42 - </p>
39 + <script type="text/javascript">
40 + document.addEventListener('DOMContentLoaded', function () {
41 + const photonicStartTabs = document.querySelectorAll('.photonic-options-header-bar .nav-tab');
42 + photonicStartTabs.forEach(function (tab) {
43 + tab.addEventListener('click', function (e) {
44 + e.preventDefault();
45 + const hash = tab.getAttribute('href');
46 + photonicShowSection(hash);
47 + });
48 + });
43 49
44 - <table class="form-table photonic-form-table">
45 - <tr>
46 - <th rowspan="2" class="theader">Provider</th>
47 - <th colspan="4" class="theader">What Can You Show?</th>
48 - <th rowspan="2" class="theader">Authentication</th>
49 - <th rowspan="2" class="theader">Lightbox Support</th>
50 - </tr>
50 + function photonicShowSection(hash) {
51 + let check = 'photonic-start-capabilities';
52 + let foundHash = false;
53 + if (hash) {
54 + check = hash.substr(1);
55 + if (['photonic-start-capabilities', 'photonic-start-create', 'photonic-start-layouts', 'photonic-start-lightbox', 'photonic-start-secret', 'photonic-start-helpers', 'photonic-start-tech'].indexOf(check) < 0) {
56 + check = 'photonic-start-capabilities';
57 + }
58 + else {
59 + foundHash = true;
60 + }
61 + }
51 62
52 - <tr>
53 - <th class="theader">Single Photo<br/>(Level 0)</th>
54 - <th class="theader">Photos / Videos<br/>(Level 1)</th>
55 - <th class="theader">Albums / Sets / Galleries<br/>(Level 2)</th>
56 - <th class="theader">Collections / Groups<br/>(Level 3)</th>
57 - </tr>
63 + photonicStartTabs.forEach(function (tab) {
64 + let panel;
65 + if (tab.getAttribute('href') === ('#' + check)) {
66 + tab.classList.add('nav-tab-active');
67 + panel = document.querySelector(tab.getAttribute('href'));
68 + panel.classList.add('photonic-panel-visible');
69 + if (foundHash) {
70 + window.history.pushState({}, document.title, '#' + check);
71 + }
72 + else {
73 + window.history.pushState({}, document.title, '');
74 + }
75 + }
76 + else {
77 + tab.classList.remove('nav-tab-active');
78 + panel = document.querySelector(tab.getAttribute('href'));
79 + panel.classList.remove('photonic-panel-visible');
80 + }
81 + });
82 + }
58 83
59 - <tr>
60 - <th>Native WP</th>
61 - <td>Not supported</td>
62 - <td><a href="https://aquoid.com/plugins/photonic/wp-galleries/">Standard gallery photos</a>, no videos in WP galleries</td>
63 - <td><a href="https://aquoid.com/plugins/photonic/wp-galleries/">Standard galleries</a></td>
64 - <td>No such feature in WP</td>
65 - <td>No such feature in WP</td>
66 - <td>All</td>
67 - </tr>
84 + let hash = location.hash;
85 + photonicShowSection(hash);
86 + });
87 + </script>
88 + <div class="photonic-tabbed-start">
89 + <div class="photonic-header-nav">
90 + <div class="photonic-options-header-bar fix">
91 + <h2 class='nav-tab-wrapper'>
92 + <a class='nav-tab' id='photonic-start-tab-capabilities' href='#photonic-start-capabilities'>Overview</a>
93 + <a class='nav-tab' id='photonic-start-tab-create' href='#photonic-start-create'>Create
94 + Galleries</a>
95 + <a class='nav-tab' id='photonic-start-tab-layouts' href='#photonic-start-layouts'>Layouts</a>
96 + <a class='nav-tab' id='photonic-start-tab-lightbox'
97 + href='#photonic-start-lightbox'>Lightboxes</a>
98 + <a class='nav-tab' id='photonic-start-tab-secret' href='#photonic-start-secret'>Secret Menu</a>
99 + <a class='nav-tab' id='photonic-start-tab-helpers' href='#photonic-start-helpers'>Helpers</a>
100 + <a class='nav-tab' id='photonic-start-tab-tech' href='#photonic-start-tech'>Technical Stuff</a>
101 + </h2>
102 + </div>
103 + </div>
104 + </div><!-- /#photonic-tabbed-options -->
105 + <?php
106 + }
68 107
69 - <tr>
70 - <th>
71 - Flickr<br/>
72 - <em><a href="http://www.flickr.com/services/api/misc.api_keys.html">API Key Required</a></em><br/>
73 - <em>See <a href="https://aquoid.com/plugins/photonic/flickr/#api-key">Instructions</a></em>
74 - </th>
75 - <td><a href="https://aquoid.com/plugins/photonic/flickr/flickr-photo/">Supported</a></td>
76 - <td><a href="https://aquoid.com/plugins/photonic/flickr/flickr-photos/">User Photos, Videos and Group Pools</a></td>
77 - <td><a href="https://aquoid.com/plugins/photonic/flickr/flickr-photosets/">Albums / Photosets</a> and <a href="https://aquoid.com/plugins/photonic/flickr/flickr-galleries/">Galleries</a></td>
78 - <td><a href="https://aquoid.com/plugins/photonic/flickr/flickr-collections/">Collections, with lazy loading</a></td>
79 - <td><a href="https://aquoid.com/plugins/photonic/flickr/flickr-authentication/">Required to share private photos</a></td>
80 - <td>All; Image Lightbox, PrettyPhoto and StripJS cannot handle videos; Lightcase shows Flash videos for Flickr</td>
81 - </tr>
108 + private function capabilities() {
109 + ?>
110 + <div id="photonic-start-capabilities" class="photonic-start-panel">
111 + <h2 class="photonic-section">Capabilities and Documentation</h2>
112 + <p>
113 + Photonic can show you photos and galleries not just from standard WordPress, but also from several
114 + third-party photo-hosting providers
115 + such as Flickr, SmugMug, etc. The following table tells you what you need for each
116 + provider, and provides you with
117 + documentation links for how to show something using Photonic.
118 + </p>
82 119
83 - <tr>
84 - <th>
85 - SmugMug<br/>
86 - <em><a href="https://api.smugmug.com/api/developer/apply">API Key required for private photos</a></em><br/>
87 - <em>See <a href="https://aquoid.com/plugins/photonic/smugmug/#api-key">instructions</a></em>
88 - </th>
89 - <td>Not supported</td>
90 - <td><a href="https://aquoid.com/plugins/photonic/smugmug/smugmug-photos/">User photos and videos</a></td>
91 - <td><a href="https://aquoid.com/plugins/photonic/smugmug/smugmug-albums/">Albums</a></td>
92 - <td><a href="https://aquoid.com/plugins/photonic/smugmug/smugmug-tree/">User tree</a> and <a href="https://aquoid.com/plugins/photonic/smugmug/folders/">Folders</a></td>
93 - <td><a href="https://aquoid.com/plugins/photonic/smugmug/smugmug-albums/#protected">Password-protection</a>, <a href="https://aquoid.com/plugins/photonic/authentication/#back-end">Authentication to share your private photos</a> </td>
94 - <td>All; Image Lightbox, PrettyPhoto and StripJS cannot handle videos</td>
95 - </tr>
120 + <table class="form-table photonic-form-table">
121 + <tr>
122 + <th rowspan="2" class="theader">Provider</th>
123 + <th colspan="4" class="theader">What Can You Show?</th>
124 + <th rowspan="2" class="theader">Authentication</th>
125 + <th rowspan="2" class="theader">Lightbox Support</th>
126 + </tr>
96 127
97 - <tr>
98 - <th>
99 - Google Photos<br/>
100 - <a href="https://console.developers.google.com/apis/">Client ID required</a><br/>
101 - <a href="https://aquoid.com/plugins/photonic/google-photos/#auth">Authentication required</a>
102 - </th>
103 - <td>Not supported</td>
104 - <td><a href="https://aquoid.com/plugins/photonic/google-photos/photos/">Photos and Videos</a></td>
105 - <td><a href="https://aquoid.com/plugins/photonic/google-photos/albums/">Albums</a></td>
106 - <td>No such feature in Google Photos</td>
107 - <td><a href="https://aquoid.com/plugins/photonic/google-photos/#auth">Back-end authentication</a></td>
108 - <td>All; Fancybox, Featherlight, Image Lightbox, PrettyPhoto and StripJS cannot handle videos</td>
109 - </tr>
128 + <tr>
129 + <th class="theader">Single Photo<br/>(Level 0)</th>
130 + <th class="theader">Photos / Videos<br/>(Level 1)</th>
131 + <th class="theader">Albums / Sets / Galleries<br/>(Level 2)</th>
132 + <th class="theader">Collections / Groups<br/>(Level 3)</th>
133 + </tr>
110 134
111 - <tr>
112 - <th>Zenfolio</th>
113 - <td><a href="https://aquoid.com/plugins/photonic/zenfolio/photos/#individual">Supported</a></td>
114 - <td><a href="https://aquoid.com/plugins/photonic/zenfolio/photosets/">User</a> and <a href="https://aquoid.com/plugins/photonic/zenfolio/photos/">Generic</a> photos and videos</td>
115 - <td><a href="https://aquoid.com/plugins/photonic/zenfolio/photosets/">Photosets (Galleries and Collections)</a></td>
116 - <td><a href="https://aquoid.com/plugins/photonic/zenfolio/groups/">Groups</a> and <a href="https://aquoid.com/plugins/photonic/zenfolio/group-hierarchy/">Group hierarchies</a></td>
117 - <td><a href="https://aquoid.com/plugins/photonic/zenfolio/groups/">Password-protection supported</a>, authentication not supported</td>
118 - <td>All; Image Lightbox, PrettyPhoto and StripJS cannot handle videos</td>
119 - </tr>
135 + <tr>
136 + <th>Native WP</th>
137 + <td>Not supported</td>
138 + <td><a href="https://aquoid.com/plugins/photonic/wp-galleries/">Standard gallery photos</a>, no
139 + videos in WP galleries
140 + </td>
141 + <td><a href="https://aquoid.com/plugins/photonic/wp-galleries/">Standard galleries</a></td>
142 + <td>No such feature in WP</td>
143 + <td>No such feature in WP</td>
144 + <td>All</td>
145 + </tr>
120 146
121 - <tr>
122 - <th>
123 - Instagram<br/>
124 - <a href="https://aquoid.com/plugins/photonic/instagram/#auth-setup">Authentication required</a>
125 - </th>
126 - <td><a href="https://aquoid.com/plugins/photonic/instagram/#photo-of-the-day">Supported</a></td>
127 - <td><a href="https://aquoid.com/plugins/photonic/instagram/#own-photos">User photos and videos</a></td>
128 - <td>No such feature in Instagram</td>
129 - <td>No such feature in Instagram</td>
130 - <td><a href="https://aquoid.com/plugins/photonic/instagram/#auth-setup">Back-end / server-side</a></td>
131 - <td>All; Image Lightbox, PrettyPhoto and StripJS cannot handle videos</td>
132 - </tr>
133 - </table>
147 + <tr>
148 + <th>
149 + Flickr<br/>
150 + <em><a href="https://www.flickr.com/services/api/misc.api_keys.html">API Key
151 + Required</a></em><br/>
152 + <em>See <a href="https://aquoid.com/plugins/photonic/flickr/#api-key">Instructions</a></em>
153 + </th>
154 + <td><a href="https://aquoid.com/plugins/photonic/flickr/flickr-photo/">Supported</a></td>
155 + <td><a href="https://aquoid.com/plugins/photonic/flickr/flickr-photos/">User Photos, Videos and
156 + Group Pools</a></td>
157 + <td><a href="https://aquoid.com/plugins/photonic/flickr/flickr-photosets/">Albums / Photosets</a>
158 + and <a href="https://aquoid.com/plugins/photonic/flickr/flickr-galleries/">Galleries</a></td>
159 + <td><a href="https://aquoid.com/plugins/photonic/flickr/flickr-collections/">Collections, with lazy
160 + loading</a></td>
161 + <td><a href="https://aquoid.com/plugins/photonic/flickr/flickr-authentication/">Required to share
162 + private photos</a></td>
163 + <td>All; Image Lightbox, PrettyPhoto and StripJS cannot handle videos; Lightcase shows Flash videos
164 + for Flickr
165 + </td>
166 + </tr>
134 167
168 + <tr>
169 + <th>
170 + SmugMug<br/>
171 + <em><a href="https://api.smugmug.com/api/developer/apply">API Key required for private
172 + photos</a></em><br/>
173 + <em>See <a href="https://aquoid.com/plugins/photonic/smugmug/#api-key">instructions</a></em>
174 + </th>
175 + <td>Not supported</td>
176 + <td><a href="https://aquoid.com/plugins/photonic/smugmug/smugmug-photos/">User photos and videos</a>
177 + </td>
178 + <td><a href="https://aquoid.com/plugins/photonic/smugmug/smugmug-albums/">Albums</a></td>
179 + <td><a href="https://aquoid.com/plugins/photonic/smugmug/smugmug-tree/">User tree</a> and <a
180 + href="https://aquoid.com/plugins/photonic/smugmug/folders/">Folders</a></td>
181 + <td><a href="https://aquoid.com/plugins/photonic/smugmug/smugmug-albums/#protected">Password-protection</a>,
182 + <a href="https://aquoid.com/plugins/photonic/authentication/#back-end">Authentication to share
183 + your private photos</a></td>
184 + <td>All; Image Lightbox, PrettyPhoto and StripJS cannot handle videos</td>
185 + </tr>
186 +
187 + <tr>
188 + <th>
189 + Google Photos
190 + </th>
191 + <td>Not supported</td>
192 + <td>Not supported</td>
193 + <td>Not supported</td>
194 + <td>No such feature in Google Photos</td>
195 + <td>Not supported</td>
196 + <td>Not supported</td>
197 + </tr>
198 +
199 + <tr>
200 + <th>Zenfolio</th>
201 + <td><a href="https://aquoid.com/plugins/photonic/zenfolio/photos/#individual">Supported</a></td>
202 + <td><a href="https://aquoid.com/plugins/photonic/zenfolio/photosets/">User</a> and <a
203 + href="https://aquoid.com/plugins/photonic/zenfolio/photos/">Generic</a> photos and
204 + videos
205 + </td>
206 + <td><a href="https://aquoid.com/plugins/photonic/zenfolio/photosets/">Photosets (Galleries and
207 + Collections)</a></td>
208 + <td><a href="https://aquoid.com/plugins/photonic/zenfolio/groups/">Groups</a> and <a
209 + href="https://aquoid.com/plugins/photonic/zenfolio/group-hierarchy/">Group
210 + hierarchies</a></td>
211 + <td><a href="https://aquoid.com/plugins/photonic/zenfolio/groups/">Password-protection supported</a>,
212 + authentication not supported
213 + </td>
214 + <td>All; Image Lightbox, PrettyPhoto and StripJS cannot handle videos</td>
215 + </tr>
216 +
217 + <tr>
218 + <th>
219 + Instagram
220 + </th>
221 + <td>Not supported</td>
222 + <td>Not supported</td>
223 + <td>Not supported</td>
224 + <td>No such feature in Google Photos</td>
225 + <td>Not supported</td>
226 + <td>Not supported</td>
227 + </tr>
228 + </table>
229 + </div>
135 230 <?php
136 231 }
137 232
138 - function build_gallery() {
233 + private function build_gallery() {
139 234 ?>
140 - <h2 class="photonic-section">Showing a Gallery</h2>
141 - <p>
142 - While using the Classic Editor a gallery is displayed using the <code>[gallery]</code> shortcode. If the Gutenberg Block Editor is
143 - used a gallery is displayed using a Gutenberg Block instead. Given the plethora of options and configurations offered in Photonic,
144 - things have been made easier by virtue of a shortcode insertion UI. To use it:
145 - </p>
235 + <div id="photonic-start-create" class="photonic-start-panel">
236 + <h2 class="photonic-section">Showing a Gallery</h2>
237 + <p>
238 + While using the Classic Editor a gallery is displayed using the <code>[gallery]</code> shortcode. If the
239 + Gutenberg Block Editor is
240 + used a gallery is displayed using a Gutenberg Block instead. Given the plethora of options and
241 + configurations offered in Photonic,
242 + things have been made easier by virtue of a shortcode insertion UI. To use it:
243 + </p>
146 244
147 - <ol>
148 - <li>
149 - <h4>Getting Started</h4>
150 - If you are using the "Classic Editor" click on the "Add Media" button or the "Add / Edit Photonic Gallery" button:<br/>
151 - <img src="<?php echo PHOTONIC_URL.'screenshot-2.jpg'; ?>" /><br/><br/>
245 + <ol>
246 + <li>
247 + <h4>Getting Started</h4>
248 + If you are using the "Classic Editor" click on the "Add Media" button or the "Add / Edit Photonic
249 + Gallery" button:<br/>
250 + <img src="<?php echo esc_url(PHOTONIC_URL) . 'screenshot-2.jpg'; ?>" alt="'Add Media' Button"/><br/><br/>
152 251
153 - Correspondingly if you are using "Gutenberg" use the Photonic Gallery block:<br/>
154 - <img src="<?php echo PHOTONIC_URL.'screenshot-1.png'; ?>" />
155 - </li>
252 + Correspondingly if you are using "Gutenberg" use the Photonic Gallery block:<br/>
253 + <img src="<?php echo esc_url(PHOTONIC_URL) . 'screenshot-1.png'; ?>" alt="Gutenberg Block"/>
254 + </li>
156 255
157 - <li>
158 - <h4>Building a Gallery</h4>
159 - <ol>
160 - <li>
161 - <strong>Via "Add Media"</strong>
162 - <ol>
163 - <li>
164 - Click on the "Photonic" tab:<br/>
165 - <img src="<?php echo PHOTONIC_URL.'screenshot-5.jpg'; ?>" /><br/>
166 - </li>
167 - <li>
168 - Pick your source:<br/>
169 - <img src="<?php echo PHOTONIC_URL.'screenshot-6.jpg'; ?>" /><br/>
170 - </li>
171 - <li>
172 - Fill out the attributes for the gallery:<br/>
173 - <img src="<?php echo PHOTONIC_URL.'screenshot-8.png'; ?>" /><br/>
174 - </li>
175 - </ol>
176 - </li>
177 - <li>
178 - <strong>Via "Add / Edit Photonic Gallery", or the "Photonic Gallery" block</strong>
179 - <ol>
180 - <li>
181 - You are presented with a screen to pick the source for your gallery:<br/>
182 - <img src="<?php echo PHOTONIC_URL.'screenshot-3.png'; ?>" /><br/>
183 - </li>
184 - <li>
185 - You will be shown a contextual set of options based on your choices:<br/>
186 - <img src="<?php echo PHOTONIC_URL.'screenshot-4.png'; ?>" /><br/>
187 - </li>
188 - </ol>
189 - </li>
190 - </ol>
191 - </li>
192 - <li>
193 - Depending on which gallery you inserted you will be shown a placeholder of this sort:<br/>
194 - <img src="<?php echo PHOTONIC_URL.'screenshot-7.png'; ?>" />
195 - </li>
196 - <li>
197 - Clicking on the placeholder will let you edit the gallery you inserted.<br/>
198 - Note that if you are using the Visual Editor, you <em>may</em> encounter TinyMCE conflicts with other plugins. In case of such a conflict
199 - please <a href="https://wordpress.org/support/plugin/photonic/">report a bug</a>, and disable the Visual Editor integration from
200 - <em>Photonic &rarr; Settings &rarr; Generic Options &rarr; Generic Settings &rarr; Disable shortcode editing in Visual Editor</em>. The plugin will
201 - continue working normally &ndash; the only difference is that you will have to do shortcode edits by hand via the Text Editor rather than via a UI
202 - in the Visual Editor.
203 - </li>
204 - </ol>
256 + <li>
257 + <h4>Building a Gallery</h4>
258 + <ol>
259 + <li>
260 + <strong>Via "Add Media"</strong>
261 + <ol>
262 + <li>
263 + Click on the "Photonic" tab:<br/>
264 + <img src="<?php echo esc_url(PHOTONIC_URL) . 'screenshot-5.jpg'; ?>"
265 + alt="Media Uploader"/><br/>
266 + </li>
267 + <li>
268 + Pick your source:<br/>
269 + <img src="<?php echo esc_url(PHOTONIC_URL) . 'screenshot-6.jpg'; ?>"
270 + alt="Sources in Media Uploader"/><br/>
271 + </li>
272 + <li>
273 + Fill out the attributes for the gallery:<br/>
274 + <img src="<?php echo esc_url(PHOTONIC_URL) . 'screenshot-8.png'; ?>"
275 + alt="Gallery attributes"/><br/>
276 + </li>
277 + </ol>
278 + </li>
279 + <li>
280 + <strong>Wizard Via "Add / Edit Photonic Gallery", or the "Photonic Gallery" block</strong>
281 + <ol>
282 + <li>
283 + You are presented with a wizard to pick the source for your gallery:<br/>
284 + <img src="<?php echo esc_url(PHOTONIC_URL) . 'screenshot-3.png'; ?>"
285 + alt="Wizard Starting Screen"/><br/>
286 + </li>
287 + <li>
288 + You will be shown a contextual set of options based on your choices:<br/>
289 + <img src="<?php echo esc_url(PHOTONIC_URL) . 'screenshot-4.png'; ?>"
290 + alt="Contextual options in the Wizard"/><br/>
291 + </li>
292 + </ol>
293 + </li>
294 + </ol>
295 + </li>
296 + <li>
297 + Depending on which gallery you inserted you will be shown a placeholder of this sort:<br/>
298 + <img src="<?php echo esc_url(PHOTONIC_URL) . 'screenshot-7.png'; ?>"
299 + alt="Gallery shows up with a placeholder"/>
300 + </li>
301 + <li>
302 + Clicking on the placeholder will let you edit the gallery you inserted.<br/>
303 + Note that if you are using the Visual Editor, you <em>may</em> encounter TinyMCE conflicts with
304 + other plugins. In case of such a conflict
305 + please <a href="https://wordpress.org/support/plugin/photonic/">report a bug</a>, and disable the
306 + Visual Editor integration from
307 + <em>Photonic &rarr; Settings &rarr; Generic Options &rarr; Generic Settings &rarr; Disable shortcode
308 + editing in Visual Editor</em>. The plugin will
309 + continue working normally &ndash; the only difference is that you will have to do shortcode edits by
310 + hand via the Text Editor rather than via a UI
311 + in the Visual Editor.
312 + </li>
313 + </ol>
314 + </div>
205 315 <?php
206 316 }
207 317
208 - function layouts() {
318 + private function layouts() {
209 319 ?>
210 - <h2 class="photonic-section">Gallery Layouts</h2>
211 - <p>
212 - Photonic supports the following types of layouts:
213 - </p>
214 - <ol>
215 - <li><a href="https://aquoid.com/plugins/photonic/layouts/#square">Square thumbnails</a></li>
216 - <li><a href="https://aquoid.com/plugins/photonic/layouts/#circle">Circular thumbnails</a></li>
217 - <li><a href="https://aquoid.com/plugins/photonic/layouts/#slideshow">Slideshow</a></li>
218 - <li><a href="https://aquoid.com/plugins/photonic/layouts/#justified">Random Justified Grid</a></li>
219 - <li><a href="https://aquoid.com/plugins/photonic/layouts/#masonry">Masonry</a></li>
220 - <li><a href="https://aquoid.com/plugins/photonic/layouts/#mosaic">Mosaic</a></li>
221 - </ol>
320 + <div id="photonic-start-layouts" class="photonic-start-panel">
321 + <h2 class="photonic-section">Gallery Layouts</h2>
322 + <p>
323 + Photonic supports the following types of layouts:
324 + </p>
325 + <ol>
326 + <li><a href="https://aquoid.com/plugins/photonic/layouts/#square">Square thumbnails</a></li>
327 + <li><a href="https://aquoid.com/plugins/photonic/layouts/#circle">Circular thumbnails</a></li>
328 + <li><a href="https://aquoid.com/plugins/photonic/layouts/#slideshow">Slideshow</a></li>
329 + <li><a href="https://aquoid.com/plugins/photonic/layouts/#justified">Random Justified Grid</a></li>
330 + <li><a href="https://aquoid.com/plugins/photonic/layouts/#masonry">Masonry</a></li>
331 + <li><a href="https://aquoid.com/plugins/photonic/layouts/#mosaic">Mosaic</a></li>
332 + </ol>
333 + </div>
222 334 <?php
223 335 }
224 336
225 - function lightbox() {
337 + private function lightbox() {
338 + $lightboxes = [
339 + 'baguetteBox' => [
340 + 'name' => 'BaguetteBox',
341 + 'url' => 'https://feimosi.github.io/baguetteBox.js/',
342 + 'size' => '~10KB JS, ~4KB CSS',
343 + 'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch'],
344 + 'license' => 'MIT',
345 + 'notes' => 'No support for YouTube / Vimeo',
346 + ],
347 + 'bigPicture' => [
348 + 'name' => 'BigPicture',
349 + 'url' => 'https://henrygd.me/bigpicture/',
350 + 'size' => '~9KB JS, no CSS',
351 + 'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
352 + 'license' => 'MIT',
353 + 'notes' => 'No support for videos in galleries',
354 + ],
355 + 'colorbox' => [
356 + 'name' => 'Colorbox',
357 + 'url' => 'https://jacklmoore.com/colorbox/',
358 + 'size' => '~10KB JS, 5KB CSS',
359 + 'supports' => ['autoStart', 'bundled', 'deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
360 + 'license' => 'MIT',
361 + ],
362 + 'fancybox' => [
363 + 'name' => 'Fancybox1',
364 + 'url' => 'http://fancybox.net/',
365 + 'size' => '~16KB JS, 9KB CSS',
366 + 'supports' => ['autoStart', 'html5', 'touch', 'ytVimeo'],
367 + 'license' => 'MIT, GPL',
368 + ],
369 + 'fancybox2' => [
370 + 'name' => 'Fancybox2',
371 + 'url' => 'https://fancyapps.com/fancybox/',
372 + 'size' => '~23KB JS, 5KB CSS',
373 + 'supports' => ['autoStart', 'deepLinking', 'socialSharing', 'html5', 'thumbnails', 'touch', 'ytVimeo'],
374 + 'license' => 'CC-BY-NC 3.0',
375 + ],
376 + 'fancybox3' => [
377 + 'name' => 'Fancybox3',
378 + 'url' => 'https://fancyapps.com/fancybox/3',
379 + 'size' => '~61KB JS, 14KB CSS',
380 + 'supports' => ['autoStart', 'bundled', 'deepLinking', 'html5', 'socialSharing', 'thumbnails', 'touch', 'ytVimeo'],
381 + 'license' => 'GPL v3',
382 + ],
383 + 'featherlight' => [
384 + 'name' => 'Featherlight',
385 + 'url' => 'https://noelboss.github.io/featherlight/',
386 + 'size' => '~13KB JS, 5KB CSS',
387 + 'supports' => ['bundled', 'deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
388 + 'license' => 'MIT',
389 + ],
390 + 'glightbox' => [
391 + 'name' => '"Gie" Lightbox (GLightbox)',
392 + 'url' => 'https://biati-digital.github.io/glightbox/',
393 + 'size' => '~54KB JS, 14KB CSS',
394 + 'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
395 + 'license' => 'MIT',
396 + ],
397 + 'imageLightbox' => [
398 + 'name' => 'Image Lightbox',
399 + 'url' => 'https://osvaldas.info/image-lightbox-responsive-touch-friendly',
400 + 'size' => '~6KB JS, 5KB CSS',
401 + 'supports' => ['bundled', 'deepLinking', 'socialSharing', 'touch'],
402 + 'license' => 'MIT',
403 + 'notes' => 'No video support',
404 + ],
405 + 'lightCase' => [
406 + 'name' => 'LightCase',
407 + 'url' => 'https://cornel.bopp-art.com/lightcase/',
408 + 'size' => '~26KB JS, 14KB CSS',
409 + 'supports' => ['autoStart', 'bundled', 'deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
410 + 'license' => 'GPL',
411 + ],
412 + 'lightGallery' => [
413 + 'name' => 'LightGallery',
414 + 'url' => 'https://lightgalleryjs.com/',
415 + 'size' => '~52KB JS, 21KB CSS, ~26KB Fonts, + Additional Plugins',
416 + 'supports' => ['autoStart', 'bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'thumbnails', 'touch', 'ytVimeo'],
417 + 'license' => 'GPL v3',
418 + ],
419 + 'magnific' => [
420 + 'name' => 'Magnific Popup',
421 + 'url' => 'https://dimsemenov.com/plugins/magnific-popup/',
422 + 'size' => '~20KB JS, 7KB CSS',
423 + 'supports' => ['deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
424 + 'license' => 'MIT',
425 + ],
426 + 'photoSwipe' => [
427 + 'name' => 'PhotoSwipe',
428 + 'url' => 'https://github.com/dimsemenov/PhotoSwipe/tree/v4.1.3',
429 + 'size' => '~41KB JS, 11KB CSS',
430 + 'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
431 + 'license' => 'MIT',
432 + 'notes' => 'No video support for Flickr',
433 + ],
434 + 'photoSwipe5' => [
435 + 'name' => 'PhotoSwipe v5',
436 + 'url' => 'https://photoswipe.com/',
437 + 'size' => '~66KB JS, 5KB CSS',
438 + 'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
439 + 'license' => 'MIT',
440 + 'notes' => 'No video support for Flickr',
441 + ],
442 + 'prettyPhoto' => [
443 + 'name' => 'PrettyPhoto',
444 + 'url' => 'http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/',
445 + 'size' => '~23KB JS, 27KB CSS',
446 + 'supports' => ['autoStart', 'deepLinking', 'socialSharing', 'thumbnails', 'touch', 'ytVimeo'],
447 + 'license' => 'GPL v2.0',
448 + 'notes' => 'YouTube / Vimeo supported, but not other videos'
449 + ],
450 + 'strip' => [
451 + 'name' => 'Strip',
452 + 'url' => 'http://stripjs.com',
453 + 'size' => '~39KB JS, 13KB CSS',
454 + 'supports' => ['bundled', 'deepLinking', 'touch', 'ytVimeo'],
455 + 'license' => 'CC-BY 4.0',
456 + 'notes' => 'YouTube / Vimeo supported, but not other videos',
457 + ],
458 + 'spotlight' => [
459 + 'name' => 'Spotlight',
460 + 'url' => 'https://nextapps-de.github.io/spotlight/',
461 + 'size' => '~10KB JS, 11KB CSS',
462 + 'supports' => ['autoStart', 'bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
463 + 'license' => 'Apache 2.0',
464 + ],
465 + 'swipebox' => [
466 + 'name' => 'Swipebox',
467 + 'url' => 'https://brutaldesign.github.io/swipebox/',
468 + 'size' => '~12KB JS, 5KB CSS',
469 + 'supports' => ['bundled', 'deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
470 + 'license' => 'MIT',
471 + ],
472 + 'thickbox' => [
473 + 'name' => 'Thickbox',
474 + 'url' => 'http://codylindley.com/thickbox/',
475 + 'size' => '~12KB JS',
476 + 'supports' => ['bundled', 'deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
477 + 'license' => 'MIT',
478 + 'notes' => 'No video support'
479 + ],
480 + 'venobox' => [
481 + 'name' => 'VenoBox',
482 + 'url' => 'https://veno.es/venobox/',
483 + 'size' => '~16KB JS, ~15KB CSS',
484 + 'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
485 + 'license' => 'MIT',
486 + ],
487 + ];
488 + $lightboxes_json = wp_json_encode($lightboxes);
489 +
490 + $supports = [
491 + 'autoStart' => '<abbr title="When you open a gallery in a lightbox, this lets the lightbox run in a slideshow mode automatically without the user driving the navigation.">Auto-start slideshow</abbr>',
492 + 'bundled' => 'Bundled with Photonic',
493 + 'deepLinking' => '<abbr title="Deep-linking assigns a URL to every image in a gallery. If you enter that URL directly in a browser\'s address bar, it automatically opens the image in a lightbox.">Deep-linking</abbr>',
494 + 'html5' => 'HTML5 Videos from Flickr etc.',
495 + 'noJQ' => 'No <abbr title="jQuery adds a ~95KB file to the pages. It is commonly used by themes and plugins, so even if Photonic doesn\'t load jQuery, something else might.">jQuery</abbr> required',
496 + 'socialSharing' => '<abbr title="If deep-linking is enabled, you have the option to display social sharing links. Photonic can help you share links on Facebook, Twitter and Google+.">Social Sharing</abbr>',
497 + 'thumbnails' => '<abbr title="This capability helps display thumbnails for all your images within the lightbox.">Thumbnails</abbr>',
498 + 'touch' => 'Touch / gestures',
499 + 'ytVimeo' => 'YouTube, Vimeo etc.',
500 + ];
226 501 ?>
227 - <h2 class="photonic-section">Which Lightbox?</h2>
228 - <p>
229 - Photonic includes several lightboxes and supports some others that it cannot include due to licensing reasons. Each lightbox has
230 - its own strengths &mdash; some are lightweight, some are full-featured and some are very elegant looking. You can pick one based on the
231 - features that you feel are most important to you. Note that out-of-the-box, several of these don't support features such as touch gestures, or deep-linking,
232 - but for Photonic those capabilities have been integrated into the scripts via other approaches.
233 - </p>
234 - <table class="form-table photonic-form-table">
235 - <tr>
236 - <th class="theader">Lightbox</th>
237 - <th class="theader">Included in Photonic?</th>
238 - <th class="theader">Size</th>
239 - <th class="theader"><abbr title="When you open a gallery in a lightbox, this lets the lightbox run in a slideshow mode automatically without the user driving the navigation.">Auto-slideshow</abbr></th>
240 - <th class="theader"><abbr title="Deep-linking assigns a URL to every image in a gallery. If you enter that URL directly in a browser's address bar, it automatically opens the image in a lightbox.">Deep-linking</abbr></th>
241 - <th class="theader"><abbr title="If deep-linking is enabled, you have the option to display social sharing links. Photonic can help you share links on Facebook, Twitter and Google+.">Social Sharing</abbr></th>
242 - <th class="theader">Touch</th>
243 - <th class="theader">YouTube, Vimeo etc.</th>
244 - <th class="theader">HTML5 Videos from Flickr etc.</th>
245 - <th class="theader">External / Self-hosted MP4 videos</th>
246 - <th class="theader"><abbr title="This capability helps display thumbnails for all your images within the lightbox.">Thumbnails</abbr></th>
247 - </tr>
502 + <div id="photonic-start-lightbox" class="photonic-start-panel">
503 + <h2 class="photonic-section">Which Lightbox?</h2>
504 + <p>
505 + Photonic includes several lightboxes and supports some others that it cannot include due to licensing
506 + reasons. Each lightbox has
507 + its own strengths &mdash; some are lightweight, some are full-featured and some are very elegant
508 + looking. You can pick one based on the
509 + features that you feel are most important to you. Note that out-of-the-box, several of these don't
510 + support features such as touch gestures, or deep-linking,
511 + but for Photonic those capabilities have been integrated into the scripts via other approaches.
512 + </p>
248 513
249 - <tr>
250 - <th><a href="http://colorpowered.com/colorbox/">Colorbox</a></th>
251 - <td class="check"><span class="yes">&#x2713;</span></td>
252 - <td>
253 - <ul>
254 - <li>JS: 10KB</li>
255 - <li>CSS: 5KB</li>
256 - </ul>
257 - </td>
258 - <td class="check"><span class="yes">&#x2713;</span></td>
259 - <td class="check"><span class="yes">&#x2713;</span></td>
260 - <td class="check"><span class="yes">&#x2713;</span></td>
261 - <td class="check"><span class="yes">&#x2713;</span></td>
262 - <td class="check"><span class="yes">&#x2713;</span></td>
263 - <td class="check"><span class="yes">&#x2713;</span></td>
264 - <td class="check"><span class="yes">&#x2713;</span></td>
265 - <td class="check"><span class="no">&times;</span></td>
266 - </tr>
514 + <table class="form-table photonic-form-table" id="photonic-lightboxes">
515 + <tr>
516 + <th>Features</th>
517 + <th>Lightboxes</th>
518 + </tr>
267 519
268 - <tr>
269 - <th><a href="http://fancybox.net/">Fancybox</a></th>
270 - <td class="check"><span class="yes">&#x2713;</span></td>
271 - <td>
272 - <ul>
273 - <li>JS: 16KB</li>
274 - <li>CSS: 9KB</li>
275 - </ul>
276 - </td>
277 - <td class="check"><span class="yes">&#x2713;</span></td>
278 - <td class="check"><span class="no">&times;</span></td>
279 - <td class="check"><span class="no">&times;</span></td>
280 - <td class="check"><span class="yes">&#x2713;</span></td>
281 - <td class="check"><span class="yes">&#x2713;</span></td>
282 - <td class="check"><span class="yes">&#x2713;</span></td>
283 - <td class="check"><span class="yes">&#x2713;</span></td>
284 - <td class="check"><span class="no">&times;</span></td>
285 - </tr>
520 + <tr>
521 + <td id="lightbox-features">
522 + <ul>
523 + <?php
524 + foreach ($supports as $feature => $text) {
525 + ?>
526 + <li>
527 + <label>
528 + <input type="checkbox" value="<?php echo esc_attr($feature); ?>" />
529 + <?php echo wp_kses_post($text); ?>
530 + </label>
531 + </li>
532 + <?php
533 + }
534 + ?>
535 + </ul>
536 + </td>
286 537
287 - <tr>
288 - <th><a href="http://fancyapps.com/fancybox/">Fancybox2</a></th>
289 - <td class="check"><span class="no">&times;</span></td>
290 - <td>
291 - <ul>
292 - <li>JS: 23KB</li>
293 - <li>CSS: 5KB</li>
294 - </ul>
295 - </td>
296 - <td class="check"><span class="yes">&#x2713;</span></td>
297 - <td class="check"><span class="yes">&#x2713;</span></td>
298 - <td class="check"><span class="yes">&#x2713;</span></td>
299 - <td class="check"><span class="yes">&#x2713;</span></td>
300 - <td class="check"><span class="yes">&#x2713;</span></td>
301 - <td class="check"><span class="yes">&#x2713;</span></td>
302 - <td class="check"><span class="yes">&#x2713;</span></td>
303 - <td class="check"><span class="yes">&#x2713;</span></td>
304 - </tr>
538 + <td id="lightbox-list">
539 + <ul>
540 + <?php
541 + foreach ($lightboxes as $lb => $lightbox) {
542 + ?>
543 + <li id="photonic-lb-<?php echo esc_attr($lb); ?>">
544 + <button id="photonic-lb-button-<?php echo esc_attr($lb); ?>"
545 + style="border: none; cursor: pointer; ">
546 + <span class="dashicons dashicons-forms"></span>
547 + </button>
548 + <a href="<?php echo esc_url($lightbox['url']); ?>"><?php echo wp_kses_post($lightbox['name']); ?></a>
549 + (<?php echo wp_kses_post($lightbox['size']); ?>)
550 + <strong>License</strong> &ndash; <?php echo wp_kses_post($lightbox['license']); ?>
551 + <?php
552 + if (!empty($lightbox['notes'])) {
553 + ?>
554 + ; <?php echo wp_kses_post($lightbox['notes']); ?>
555 + <?php
556 + }
557 + ?>
558 + </li>
559 + <?php
560 + }
561 + ?>
562 + </ul>
563 + </td>
564 + </tr>
565 + <script type="text/javascript">
566 + document.addEventListener('DOMContentLoaded', function () {
567 + const lightboxes = <?php echo wp_kses_post($lightboxes_json); ?>;
568 + const checkboxes = document.querySelectorAll('#lightbox-features input');
569 + let matches;
570 + checkboxes.forEach(function (checkbox) {
571 + checkbox.addEventListener('change', function () {
572 + photonicResetButtonsAndCheckboxes(false, false);
573 + const checked = document.querySelectorAll('#lightbox-features input:checked');
574 + matches = [];
575 + let iterator = 0;
576 + checked.forEach(function (feature) {
577 + for (const [key, value] of Object.entries(lightboxes)) {
578 + if (iterator === 0 || matches.indexOf(key) >= 0) {
579 + const inArray = (matches.indexOf(key) >= 0);
580 + const supportList = value.supports;
581 + let found = false;
582 + for (let idx = 0; idx < supportList.length; idx++) {
583 + if (typeof supportList[idx] === 'string') {
584 + if (feature.value === supportList[idx]) {
585 + if (!inArray) {
586 + matches.push(key)
587 + }
588 + found = true;
589 + break;
590 + }
591 + }
592 + else {
593 + if (feature.value === supportList[idx].type) {
594 + if (!inArray) {
595 + matches.push(key);
596 + }
597 + found = true;
598 + break;
599 + }
600 + }
601 + }
305 602
306 - <tr>
307 - <th><a href="http://fancyapps.com/fancybox/3/">Fancybox3</a></th>
308 - <td class="check"><span class="yes">&#x2713;</span></td>
309 - <td>
310 - <ul>
311 - <li>JS: 61KB</li>
312 - <li>CSS: 14KB</li>
313 - </ul>
314 - </td>
315 - <td class="check"><span class="yes">&#x2713;</span></td>
316 - <td class="check"><span class="yes">&#x2713;</span></td>
317 - <td class="check"><span class="yes">&#x2713;</span></td>
318 - <td class="check"><span class="yes">&#x2713;</span></td>
319 - <td class="check"><span class="yes">&#x2713;</span></td>
320 - <td class="check"><span class="yes">&#x2713;</span></td>
321 - <td class="check"><span class="yes">&#x2713;</span></td>
322 - <td class="check"><span class="yes">&#x2713;</span></td>
323 - </tr>
603 + if (!found) {
604 + const pos = matches.indexOf(key);
605 + if (pos > -1) {
606 + matches.splice(pos, 1);
607 + }
608 + }
609 + }
610 + }
611 + iterator++;
612 + });
613 + photonicShowLightboxMatches(checked, matches);
614 + });
615 + });
324 616
325 - <tr>
326 - <th><a href="http://noelboss.github.io/featherlight/">Featherlight</a></th>
327 - <td class="check"><span class="yes">&#x2713;</span></td>
328 - <td>
329 - <ul>
330 - <li>JS: 13KB</li>
331 - <li>CSS: 5KB</li>
332 - </ul>
333 - </td>
334 - <td class="check"><span class="no">&times;</span></td>
335 - <td class="check"><span class="yes">&#x2713;</span></td>
336 - <td class="check"><span class="yes">&#x2713;</span></td>
337 - <td class="check"><span class="yes">&#x2713;</span></td>
338 - <td class="check"><span class="yes">&#x2713;</span></td>
339 - <td class="check"><span class="yes">&#x2713;</span></td>
340 - <td class="check"><span class="yes">&#x2713;</span></td>
341 - <td class="check"><span class="no">&times;</span></td>
342 - </tr>
617 + const buttons = document.querySelectorAll('#lightbox-list button');
618 + buttons.forEach(function (button) {
619 + button.addEventListener('click', function (e) {
620 + e.preventDefault();
621 + photonicShowLightboxFeatures(button);
622 + });
623 + });
343 624
344 - <tr>
345 - <th><a href="https://osvaldas.info/image-lightbox-responsive-touch-friendly">Image Lightbox</a></th>
346 - <td class="check"><span class="yes">&#x2713;</span></td>
347 - <td>
348 - <ul>
349 - <li>JS: 6KB</li>
350 - <li>CSS: 5KB</li>
351 - </ul>
352 - </td>
353 - <td class="check"><span class="no">&times;</span></td>
354 - <td class="check"><span class="yes">&#x2713;</span></td>
355 - <td class="check"><span class="yes">&#x2713;</span></td>
356 - <td class="check"><span class="yes">&#x2713;</span></td>
357 - <td class="check"><span class="no">&times;</span></td>
358 - <td class="check"><span class="no">&times;</span></td>
359 - <td class="check"><span class="no">&times;</span></td>
360 - <td class="check"><span class="no">&times;</span></td>
361 - </tr>
625 + function photonicShowLightboxMatches(checked, matches) {
626 + let all = document.querySelectorAll('#lightbox-list li');
627 + all.forEach(function (line) {
628 + const lb = line.getAttribute('id').substr(12);
629 + line.classList.remove('matching');
630 + line.classList.remove('not-matching');
631 + if (checked.length > 0 && matches.indexOf(lb) > -1) {
632 + line.classList.add('matching');
633 + }
634 + else if (checked.length > 0 && matches.indexOf(lb) < 0) {
635 + line.classList.add('not-matching');
636 + }
637 + });
638 + }
362 639
363 - <tr>
364 - <th><a href="http://cornel.bopp-art.com/lightcase/">LightCase</a></th>
365 - <td class="check"><span class="yes">&#x2713;</span></td>
366 - <td>
367 - <ul>
368 - <li>JS: 25KB</li>
369 - <li>CSS: 16KB</li>
370 - </ul>
371 - </td>
372 - <td class="check"><span class="yes">&#x2713;</span></td>
373 - <td class="check"><span class="yes">&#x2713;</span></td>
374 - <td class="check"><span class="yes">&#x2713;</span></td>
375 - <td class="check"><span class="yes">&#x2713;</span></td>
376 - <td class="check"><span class="yes">&#x2713;</span></td>
377 - <td class="check"><span class="yes">&#x2713;</span></td>
378 - <td class="check"><span class="yes">&#x2713;</span></td>
379 - <td class="check"><span class="no">&times;</span></td>
380 - </tr>
640 + function photonicShowLightboxFeatures(button) {
641 + const lightbox = button.getAttribute('id').substring('photonic-lb-button-'.length);
642 + if (lightboxes[lightbox]) {
643 + photonicResetButtonsAndCheckboxes(true, true);
644 + checkboxes.forEach(function (checkbox) {
645 + const li = checkbox.closest('li');
646 + if (lightboxes[lightbox]['supports'].indexOf(checkbox.value) > -1) {
647 + li.classList.remove('photonic-not-supported');
648 + li.classList.add('photonic-supported');
649 + }
650 + else {
651 + li.classList.remove('photonic-supported');
652 + li.classList.add('photonic-not-supported');
653 + }
654 + });
381 655
382 - <tr>
383 - <th><a href="https://sachinchoolur.github.io/lightGallery/">Lightgallery</a></th>
384 - <td class="check"><span class="yes">&#x2713;</span></td>
385 - <td>
386 - <ul>
387 - <li>JS: 18KB</li>
388 - <li>CSS: 20KB</li>
389 - <li>Fonts: 20KB</li>
390 - <li>+ Additional Plugins</li>
391 - </ul>
392 - </td>
393 - <td class="check"><span class="yes">&#x2713;</span></td>
394 - <td class="check"><span class="yes">&#x2713;</span></td>
395 - <td class="check"><span class="yes">&#x2713;</span></td>
396 - <td class="check"><span class="yes">&#x2713;</span></td>
397 - <td class="check"><span class="yes">&#x2713;</span></td>
398 - <td class="check"><span class="yes">&#x2713;</span></td>
399 - <td class="check"><span class="yes">&#x2713;</span></td>
400 - <td class="check"><span class="yes">&#x2713;</span></td>
401 - </tr>
656 + button.closest('li').classList.add('lb-selected');
657 + }
658 + }
402 659
403 - <tr>
404 - <th><a href="http://dimsemenov.com/plugins/magnific-popup/">Magnific Popup</a></th>
405 - <td class="check"><span class="yes">&#x2713;</span></td>
406 - <td>
407 - <ul>
408 - <li>JS: 20KB</li>
409 - <li>CSS: 7KB</li>
410 - </ul>
411 - </td>
412 - <td class="check"><span class="no">&times;</span></td>
413 - <td class="check"><span class="yes">&#x2713;</span></td>
414 - <td class="check"><span class="yes">&#x2713;</span></td>
415 - <td class="check"><span class="yes">&#x2713;</span></td>
416 - <td class="check"><span class="yes">&#x2713;</span></td>
417 - <td class="check"><span class="yes">&#x2713;</span></td>
418 - <td class="check"><span class="yes">&#x2713;</span></td>
419 - <td class="check"><span class="no">&times;</span></td>
420 - </tr>
660 + function photonicResetButtons(unmatch) {
661 + let remove = ['lb-selected'];
662 + if (unmatch) {
663 + remove = remove.concat(['matching', 'not-matching']);
664 + }
665 + buttons.forEach(function (button) {
666 + const li = button.closest('li');
667 + remove.forEach(function (css) {
668 + li.classList.remove(css);
669 + })
670 + });
671 + }
421 672
422 - <tr>
423 - <th><a href="http://photoswipe.com/">PhotoSwipe</a></th>
424 - <td class="check"><span class="yes">&#x2713;</span></td>
425 - <td>
426 - <ul>
427 - <li>JS: 41KB</li>
428 - <li>CSS: 16KB</li>
429 - </ul>
430 - </td>
431 - <td class="check"><span class="no">&times;</span></td>
432 - <td class="check"><span class="yes">&#x2713;</span></td>
433 - <td class="check"><span class="yes">&#x2713;</span></td>
434 - <td class="check"><span class="yes">&#x2713;</span></td>
435 - <td class="check"><span class="yes">&#x2713;</span></td>
436 - <td class="check"><span class="yes">&#x2713;</span></td>
437 - <td class="check"><span class="yes">&#x2713;</span></td>
438 - <td class="check"><span class="no">&times;</span></td>
439 - </tr>
673 + function photonicResetCheckboxes(uncheck) {
674 + checkboxes.forEach(function (checkbox) {
675 + if (uncheck) {
676 + checkbox.checked = false;
677 + }
678 + checkbox.closest('li').classList.remove('photonic-supported', 'photonic-not-supported');
679 + });
680 + }
440 681
441 - <tr>
442 - <th><a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">PrettyPhoto</a></th>
443 - <td class="check"><span class="yes">&#x2713;</span></td>
444 - <td>
445 - <ul>
446 - <li>JS: 23KB</li>
447 - <li>CSS: 27KB</li>
448 - </ul>
449 - </td>
450 - <td class="check"><span class="yes">&#x2713;</span></td>
451 - <td class="check"><span class="yes">&#x2713;</span></td>
452 - <td class="check"><span class="yes">&#x2713;</span></td>
453 - <td class="check"><span class="yes">&#x2713;</span></td>
454 - <td class="check"><span class="yes">&#x2713;</span></td>
455 - <td class="check"><span class="no">&times;</span></td>
456 - <td class="check"><span class="yes">&#x2713;</span></td>
457 - <td class="check"><span class="yes">&#x2713;</span></td>
458 - </tr>
459 -
460 - <tr>
461 - <th><a href='http://stripjs.com'>Strip</a></th>
462 - <td class="check"><span class="no">&times;</span></td>
463 - <td>
464 - <ul>
465 - <li>JS: 39KB</li>
466 - <li>CSS: 13KB</li>
467 - </ul>
468 - </td>
469 - <td class="check"><span class="no">&times;</span></td>
470 - <td class="check"><span class="yes">&#x2713;</span></td>
471 - <td class="check"><span class="no">&times;</span></td>
472 - <td class="check"><span class="yes">&#x2713;</span></td>
473 - <td class="check"><span class="yes">&#x2713;</span></td>
474 - <td class="check"><span class="no">&times;</span></td>
475 - <td class="check"><span class="no">&times;</span></td>
476 - <td class="check"><span class="no">&times;</span></td>
477 - </tr>
478 -
479 - <tr>
480 - <th><a href="http://brutaldesign.github.io/swipebox/">Swipebox</a></th>
481 - <td class="check"><span class="yes">&#x2713;</span></td>
482 - <td>
483 - <ul>
484 - <li>JS: 12KB</li>
485 - <li>CSS: 5KB</li>
486 - </ul>
487 - </td>
488 - <td class="check"><span class="no">&times;</span></td>
489 - <td class="check"><span class="yes">&#x2713;</span></td>
490 - <td class="check"><span class="yes">&#x2713;</span></td>
491 - <td class="check"><span class="yes">&#x2713;</span></td>
492 - <td class="check"><span class="yes">&#x2713;</span></td>
493 - <td class="check"><span class="yes">&#x2713;</span></td>
494 - <td class="check"><span class="yes">&#x2713;</span></td>
495 - <td class="check"><span class="no">&times;</span></td>
496 - </tr>
497 -
498 - </table>
682 + function photonicResetButtonsAndCheckboxes(unmatch, uncheck) {
683 + photonicResetButtons(unmatch);
684 + photonicResetCheckboxes(uncheck);
685 + }
686 + });
687 + </script>
688 + </table>
689 + </div>
499 690 <?php
500 691 }
501 692
502 - function secret_menu() {
693 + private function secret_menu() {
503 694 ?>
504 - <h2 class="photonic-section">The Secret Menu</h2>
505 - <p>
506 - While the shortcode generator for Photonic is fairly comprehensive, there are some additional hidden shortcode parameters that you can use. These are baked into the
507 - interactive shortcode builder / Photonic block for Gutenberg, but will not show up in the traditional shortcode interface:
508 - </p>
509 - <ol>
510 - <li><code>title_position</code> &ndash; Takes values <code>none</code>, <code>regular</code>, <code>tooltip</code>, <code>below</code>, <code>hover-slideup-show</code> and <code>slideup-stick</code>. It overrides the title positioning that you have set for that particular provider through your options.</li>
511 - <li><code>headers</code> &ndash; Takes a comma-separated list containing none or more of <code>thumbnail</code>, <code>title</code>, and <code>counter</code>.
512 - If a value is specified, that particular component will be shown in the level 2 entity's (i.e. album / gallery / set) header, regardless of the back-end options.
513 - So, setting <code>headers='title,counter'</code> for a particular call to display a Zenfolio set, will show the title and photo-count for that set in the header, and not its thumbnail.</li>
514 - <li><code>fx</code> &ndash; Applicable to slideshow layouts. Takes values <code>fade</code> and <code>slide</code> to provide the transitioning effect between slides.</li>
515 - <li><code>speed</code> &ndash; Applicable to slideshow layouts. Takes numeric values in milliseconds, determines the speed of transitioning of slides.</li>
516 - <li><code>timeout</code> &ndash; Applicable to slideshow layouts. Takes numeric values in milliseconds, determines the pause between two slides.</li>
517 - <li><code>pause</code> &ndash; Applicable to slideshow layouts. Takes values <code>0</code> (no pause) and <code>1</code> (pause), determines if the slideshow should pause upon hovering on it.</li>
518 - <li><code>controls</code> &ndash; Applicable to slideshow layouts. Takes values <code>show</code> and <code>hide</code>, and shows "Previous" and "Next" buttons on the slideshow.</li>
519 - <li><code>strip-style</code> &ndash; Applicable to slideshow layouts. Takes values <code>thumbs</code> and <code>button</code>. If set, and if the <code>layout</code> / <code>style</code> parameter is set to <code>strip-below</code>, <code>strip-above</code>, <code>strip-right</code>, it shows buttons <strong>below</strong> the slideshow.</li>
520 - <li><code>popup</code> &ndash; Takes values <code>show</code> and <code>hide</code>. If set, and if a level 2 thumbnail (i.e. an Album, Photoset or Gallery thumbnail) is being displayed, this setting overrides <em>Photonic &rarr; Settings &rarr; Generic Options &rarr; Overlaid Popup Panel &rarr; Enable Interim Popup for Album Thumbnails</em>.</li>
521 - </ol>
695 + <div id="photonic-start-secret" class="photonic-start-panel">
696 + <h2 class="photonic-section">The Secret Menu</h2>
697 + <p>
698 + While the shortcode generator for Photonic is fairly comprehensive, there are some additional hidden
699 + shortcode parameters that you can use. These are baked into the
700 + interactive shortcode builder / Photonic block for Gutenberg, but will not show up in the traditional
701 + shortcode interface:
702 + </p>
703 + <ol>
704 + <li><code>title_position</code> &ndash; Takes values <code>none</code>, <code>regular</code>, <code>tooltip</code>,
705 + <code>below</code>, <code>hover-slideup-show</code> and <code>slideup-stick</code>. It overrides the
706 + title positioning that you have set for that particular provider through your options.
707 + </li>
708 + <li><code>headers</code> &ndash; Takes a comma-separated list containing none or more of
709 + <code>thumbnail</code>, <code>title</code>, and <code>counter</code>.
710 + If a value is specified, that particular component will be shown in the level 2 entity's (i.e. album
711 + / gallery / set) header, regardless of the back-end options.
712 + So, setting <code>headers='title,counter'</code> for a particular call to display a Zenfolio set,
713 + will show the title and photo-count for that set in the header, and not its thumbnail.
714 + </li>
715 + <li><code>fx</code> &ndash; Applicable to slideshow layouts. Takes values <code>fade</code> and <code>slide</code>
716 + to provide the transitioning effect between slides.
717 + </li>
718 + <li><code>speed</code> &ndash; Applicable to slideshow layouts. Takes numeric values in milliseconds,
719 + determines the speed of transitioning of slides.
720 + </li>
721 + <li><code>timeout</code> &ndash; Applicable to slideshow layouts. Takes numeric values in milliseconds,
722 + determines the pause between two slides.
723 + </li>
724 + <li><code>pause</code> &ndash; Applicable to slideshow layouts. Takes values <code>0</code> (no pause)
725 + and <code>1</code> (pause), determines if the slideshow should pause upon hovering on it.
726 + </li>
727 + <li><code>controls</code> &ndash; Applicable to slideshow layouts. Takes values <code>show</code> and
728 + <code>hide</code>, and shows "Previous" and "Next" buttons on the slideshow.
729 + </li>
730 + <li><code>strip-style</code> &ndash; Applicable to slideshow layouts. Takes values <code>thumbs</code>
731 + and <code>button</code>. If set, and if the <code>layout</code> / <code>style</code> parameter is
732 + set to <code>strip-below</code>, <code>strip-above</code>, <code>strip-right</code>, it shows
733 + buttons <strong>below</strong> the slideshow.
734 + </li>
735 + <li><code>popup</code> &ndash; Takes values <code>show</code> and <code>hide</code>. If set, and if a
736 + level 2 thumbnail (i.e. an Album, Photoset or Gallery thumbnail) is being displayed, this setting
737 + overrides <em>Photonic &rarr; Settings &rarr; Generic Options &rarr; Overlaid Popup Panel &rarr;
738 + Enable Interim Popup for Album Thumbnails</em>.
739 + </li>
740 + </ol>
741 + </div>
522 742 <?php
523 743 }
524 744
525 - function helper_shortcode() {
745 + private function helper_shortcode() {
526 746 ?>
527 - <h2 class="photonic-section">The Helper Shortcode</h2>
528 - <p>
529 - There is a second utility shortcode present in the plugin, which displays the output of the helpers but <em>in the front-end</em>.
530 - </p>
531 - <ol>
532 - <li><strong>Short-code: </strong><code>photonic_helper</code></li>
533 - <li>
534 - <strong>Attributes: </strong> This primary attribute is <code>type</code>. Depending on the value of <code>type</code> other attributes can be passed:
535 - <ol>
536 - <li>
537 - <code>type='flickr'</code> - Additional attributes:
538 - <ol>
539 - <li><code>user='xxx'</code> - Passing the user name (i.e. from https://flickr.com/photos/xxx) will get the user_id for use in the Flickr shortcode</li>
540 - <li><code>group='yyy'</code> - Passing the group name will get the group_id for use in the Flickr shortcode</li>
541 - </ol>
542 - </li>
543 - <li>
544 - <code>type='google'</code> - This takes no additional parameters, and prints out the user's Google Photos albums in tabular form
545 - </li>
546 - </ol>
547 - </li>
548 - </ol>
549 -
747 + <div id="photonic-start-helpers" class="photonic-start-panel">
748 + <h2 class="photonic-section">The Helper Shortcode</h2>
749 + <p>
750 + There is a second utility shortcode present in the plugin, which displays the output of the helpers but
751 + <em>in the front-end</em>.
752 + </p>
753 + <ol>
754 + <li><strong>Short-code: </strong><code>photonic_helper</code></li>
755 + <li>
756 + <strong>Attributes: </strong> This primary attribute is <code>type</code>. Depending on the value of
757 + <code>type</code> other attributes can be passed:
758 + <ol>
759 + <li>
760 + <code>type='flickr'</code> - Additional attributes:
761 + <ol>
762 + <li><code>user='xxx'</code> - Passing the user name (i.e. from
763 + https://flickr.com/photos/xxx) will get the user_id for use in the Flickr shortcode
764 + </li>
765 + <li><code>group='yyy'</code> - Passing the group name will get the group_id for use in
766 + the Flickr shortcode
767 + </li>
768 + </ol>
769 + </li>
770 + <li>
771 + <code>type='google'</code> - Additional attributes:
772 + <ol>
773 + <li><code>album_type='self'</code> - Prints out the user's Google Photos albums in
774 + tabular form
775 + </li>
776 + <li><code>album_type='shared'</code> - Prints out the all Google Photos albums shared
777 + with and by the user in tabular form
778 + </li>
779 + </ol>
780 + </li>
781 + </ol>
782 + </li>
783 + </ol>
784 + </div>
550 785 <?php
551 786 }
552 787
553 - function really_technical() {
788 + private function really_technical() {
554 789 ?>
555 - <h2 class="photonic-section">The Really Technical Stuff</h2>
556 - <p>
557 - You are running PHP with the following details:
558 - </p>
559 - <table class="form-table photonic-form-table">
560 - <tr>
561 - <th>PHP Version</th>
562 - <td><?php echo phpversion(); ?></td>
563 - </tr>
564 - <tr>
565 - <th>Loaded Extensions</th>
566 - <td><?php echo implode(', ', get_loaded_extensions()); ?></td>
567 - </tr>
568 - </table>
790 + <div id="photonic-start-tech" class="photonic-start-panel">
791 + <h2 class="photonic-section">The Really Technical Stuff</h2>
792 + <p>
793 + You are running PHP with the following details:
794 + </p>
795 + <table class="form-table photonic-form-table">
796 + <tr>
797 + <th>PHP Version</th>
798 + <td><?php echo wp_kses_post(phpversion()); ?></td>
799 + </tr>
800 + <tr>
801 + <th>Loaded Extensions</th>
802 + <td><?php echo wp_kses_post(implode(', ', get_loaded_extensions())); ?></td>
803 + </tr>
804 + </table>
805 + </div>
569 806 <?php
570 807 }
571 808 }