@@ -190,14 +190,70 @@ require(["core/pubsubhub"], (respecEvents) => {
190
190
191
191
// Add playground links
192
192
for ( const link of document . querySelectorAll ( "a.playground" ) ) {
193
- // First pre element of aside
194
- const pre = link . closest ( "aside" ) . querySelector ( "pre" ) ;
193
+ let pre ;
194
+ if ( link . dataset . resultFor ) {
195
+ // Referenced pre element
196
+ pre = document . querySelector ( link . dataset . resultFor + ' > pre' ) ;
197
+ } else {
198
+ // First pre element of aside
199
+ pre = link . closest ( "aside" ) . querySelector ( "pre" ) ;
200
+ }
195
201
const content = unComment ( document , pre . textContent )
196
- . replace ( / ( \* \* \* \* | # # # # ) / g, '' ) ;
202
+ . replace ( / \* \* \* \* / g, '' )
203
+ . replace ( / # # # # ( [ ^ # ] * ) # # # # / g, '' ) ;
197
204
link . setAttribute ( 'aria-label' , 'playground link' ) ;
205
+ link . innerText = "Open in playground" ;
206
+
207
+ // startTab defaults to "expand"
208
+ const linkQueryParams = {
209
+ startTab : "tab-expand" ,
210
+ "json-ld" : content
211
+ }
212
+
213
+ if ( link . dataset . compact !== undefined ) {
214
+ linkQueryParams . startTab = "tab-" + "compacted" ;
215
+ linkQueryParams . context = '{}' ;
216
+ }
217
+
218
+ if ( link . dataset . flatten !== undefined ) {
219
+ linkQueryParams . startTab = "tab-" + "flattened" ;
220
+ linkQueryParams . context = '{}' ;
221
+ }
222
+
223
+ if ( link . dataset . frame !== undefined ) {
224
+ linkQueryParams . startTab = "tab-" + "framed" ;
225
+ const frameContent = unComment ( document , document . querySelector ( link . dataset . frame + ' > pre' ) . innerText )
226
+ . replace ( / \* \* \* \* / g, '' )
227
+ . replace ( / # # # # ( [ ^ # ] * ) # # # # / g, '' ) ;
228
+ linkQueryParams . frame = frameContent ;
229
+ }
230
+
231
+ // Set context
232
+ if ( link . dataset . context ) {
233
+ const contextContent = unComment ( document , document . querySelector ( link . dataset . context + ' > pre' ) . innerText )
234
+ . replace ( / \* \* \* \* / g, '' )
235
+ . replace ( / # # # # ( [ ^ # ] * ) # # # # / g, '' ) ;
236
+ linkQueryParams . context = contextContent ;
237
+ }
238
+
198
239
link . setAttribute ( 'href' ,
199
- 'https://json-ld.org/playground-dev/#startTab=tab-expanded&json-ld=' +
200
- encodeURI ( content ) ) ;
240
+ 'https://json-ld.org/playground-dev/#' +
241
+ Object . keys ( linkQueryParams ) . map ( k => `${ encodeURIComponent ( k ) } =${ encodeURIComponent ( linkQueryParams [ k ] ) } ` )
242
+ . join ( '&' ) ) ;
243
+
244
+ // Wrap in a button
245
+ const button = document . createElement ( 'button' ) ;
246
+ link . parentNode . insertBefore ( button , link ) ;
247
+ button . appendChild ( link ) ;
248
+ }
249
+
250
+ // Add highlighting and remove comment from pre elements
251
+ for ( const pre of document . querySelectorAll ( "pre" ) ) {
252
+ // First pre element of aside
253
+ const content = pre . innerHTML
254
+ . replace ( / \* \* \* \* ( [ ^ * ] * ) \* \* \* \* / g, '<span class="hl-bold">$1</span>' )
255
+ . replace ( / # # # # ( [ ^ # ] * ) # # # # / g, '<span class="comment">$1</span>' ) ;
256
+ pre . innerHTML = content ;
201
257
}
202
258
} ) ;
203
259
} ) ;
@@ -222,9 +278,7 @@ function reindent(text) {
222
278
223
279
function updateExample ( doc , content ) {
224
280
// perform transformations to make it render and prettier
225
- return _esc ( reindent ( unComment ( doc , content ) ) )
226
- . replace ( / \* \* \* \* ( [ ^ * ] * ) \* \* \* \* / g, '<span class="hl-bold">$1</span>' )
227
- . replace ( / # # # # ( [ ^ # ] * ) # # # # / g, '<span class="comment">$1</span>' ) ;
281
+ return _esc ( reindent ( unComment ( doc , content ) ) ) ;
228
282
}
229
283
230
284
0 commit comments