allow loading of yaml with url param textb=<textb_url>
This commit is contained in:
parent
0a4825e14b
commit
8794207e1d
|
|
@ -188,8 +188,38 @@ var slides = [],
|
|||
activeAudio,
|
||||
timeout;
|
||||
|
||||
let textbUrl = new URLSearchParams(window.location.search).get('textb') || 'https://textb.org/r/housingplaylist2/'
|
||||
|
||||
// use raw version of page
|
||||
textbUrl = textbUrl.replace('/t/', '/r/')
|
||||
if (!textbUrl.endsWith('/')) textbUrl += '/'
|
||||
|
||||
fetch(textbUrl)
|
||||
.then(response => response.text())
|
||||
.then(loadYaml)
|
||||
.then(init)
|
||||
.catch(err => {
|
||||
console.log('error', err)
|
||||
alert('error loading YAML')
|
||||
})
|
||||
|
||||
|
||||
function loadYaml(txt) {
|
||||
const html = txt.split('\n\n')
|
||||
.filter(chunk => chunk.trim())
|
||||
.map(chunk => {
|
||||
const obj = jsyaml.load(chunk)
|
||||
return obj
|
||||
})
|
||||
.map(jsonToHTML)
|
||||
.join('')
|
||||
document.body.innerHTML = `
|
||||
<div class="base"></div>
|
||||
${html}
|
||||
`
|
||||
return true
|
||||
}
|
||||
|
||||
init()
|
||||
|
||||
function init() {
|
||||
document.querySelectorAll('.slide').forEach(function(slide, idx) {
|
||||
|
|
|
|||
|
|
@ -1,554 +1,9 @@
|
|||
<meta charset="utf-8">
|
||||
<script src="../lib/PandoraEmbed.js"></script>
|
||||
<link type="text/css" href="example.css" rel="stylesheet" />
|
||||
<div class="base">
|
||||
</div>
|
||||
|
||||
<!-- Start Slides -->
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
FROM JANTA COLONY TO JANTA COLONY
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
At first, three stories from the year 1950 in Bombay
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="2">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
ONE
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="3">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AFL/0,0,6580,3763#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="8">
|
||||
|
||||
<div class="title">
|
||||
The Greater Bombay Tenant's Association is formed in April 1950
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AFL/0,0,6580,3763#embed"
|
||||
data-url_1="https://pad.ma/documents/AFL/1933,24,3578,977#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="15">
|
||||
|
||||
<div class="title">
|
||||
It demands the "rationing" of living space in Bombay
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AFL/1933,24,3578,977#embed"
|
||||
data-url_1="https://pad.ma/documents/AFL/1568,1461,3352,2401#embed" > </div>
|
||||
|
||||
|
||||
<div class="audio" data-volume="0.05" data-continue="true"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="15">
|
||||
|
||||
<div class="title">
|
||||
One week later, 250 people removed from Mahim causeway
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/ADZ/0,0,6554,5409#embed"
|
||||
data-url_1="https://pad.ma/documents/ADZ/3836,2088,6401,3440#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="4">
|
||||
|
||||
<div class="title">
|
||||
occupy Samudra Mahal in Worli
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEA#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEB#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="10">
|
||||
|
||||
<div class="title">
|
||||
It is reoccupied one day later.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AED/381,0,6178,3090#embed"
|
||||
data-url_1="https://pad.ma/documents/AED/1088,4231,4018,5776#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="8">
|
||||
|
||||
<div class="title">
|
||||
5 days after that, a govt. conference on the "squatter issue" was held.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEE/278,3664,3352,5477#embed"
|
||||
data-url_1="https://pad.ma/documents/AEE/778,5104,2231,6034#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
It refers to the 1949 survey of homeless done by TISS as its main source.
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="10">
|
||||
|
||||
<div class="title">
|
||||
Three months later, a proposal is made to create a "Poor Man's Colony" in Mankhurd.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEK/0,0,6671,6170#embed"
|
||||
data-url_1="https://pad.ma/documents/AEK/0,2620,2925,4162#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
For 4,000 families, "Between Sion and Trombay"
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEK/0,2620,2925,4162#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
In an area known as Manbudruk, in Farsi, big brother of Mankhurd.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEP/0,0,1538,1378#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
In another year the squatter population has doubled to 75,000
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEZ/916,3015,6633,6030#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="8">
|
||||
|
||||
<div class="title">
|
||||
On December there are evictions of 1,700 huts at Sion Circle, out of which 500 moved to Mankhurd.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEZ/916,3015,6633,6030#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
The following year there are many people who refuse to be transported to Mankhurd.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEW/0,0,4024,3608#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
On a national level, in 1954 Nehru had decided he was against paying compensation in such cases.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AFA/0,0,1830,1302#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="9">
|
||||
|
||||
<div class="title">
|
||||
A better idea, he is quoted in TOI, is "to burn them".
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AFB/0,0,1856,1306#embed"
|
||||
data-url_1="https://pad.ma/documents/AFB/706,653,1834,1306#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="3">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="6">
|
||||
|
||||
<div class="title">
|
||||
Meanwhile in April 1950, the limits of Bombay city have been officially extended.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AHX#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="10">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEL/853,169,5855,2620#embed"
|
||||
data-url_1="https://pad.ma/documents/AEL/830,2505,5832,4956#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="3">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
OK, Lets watch a three minute version of Raj Kapoor's Sree 420
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://indiancine.ma/AKDP/player/BFS#embed" data-volume="0.6"> </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://indiancine.ma/AKDP/player/BFR#embed" data-volume="0.6"> </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="10">
|
||||
|
||||
<div class="title">
|
||||
Abbas
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AFC/0,926,1866,2154#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
In Mani Kaul Satah se Uthata
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://indiancine.ma/VEW/player/CLW#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
In Guru Dutt's first film. Mr and Mrs 55
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://indiancine.ma/AKCY/player/EZ#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
This is Shastri Nagar, Bandra, where 16 years later Anand Patwardhan would shoot Hamara Shehar.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://indiancine.ma/AKBH/player/DV#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://indiancine.ma/AKBH/player/DX#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
Cut to: Vidhu Vinod Chopra's first film, on Mankhurd Children's Home.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://indiancine.ma/AMGS/player/IV#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="6">
|
||||
|
||||
<div class="title">
|
||||
A Deonar Farm Road rumour: One Evening in the mid-fifties, Homi Bhabha, Raj Kapoor and Jamshedji Tata were having tea. With Nehru.
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="audio" data-url="https://indiancine.ma/AKBH/player/EC#embed" data-volume="0.5" data-continue="true"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="10">
|
||||
|
||||
<div class="title">
|
||||
All three shared their cultural, scientific and industrial vision with Nehru, who gave them in turn land for RK Studios, BARC and TISS.
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="5">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AIA/0,56,2448,1688#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="10">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEG/0,1327,3493,3311#embed"
|
||||
data-url_1="https://pad.ma/documents/AEG/202,0,3752,1983#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="8">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEI/851,0,5596,2652#embed"
|
||||
data-url_1="https://pad.ma/documents/AEI/0,0,6096,5303#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="slide" data-duration="7">
|
||||
|
||||
<div class="title">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="video" data-url_0="https://pad.ma/documents/AEJ/0,0,5691,5296#embed" > </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- End slides -->
|
||||
|
||||
<!-- YAML parser from: https://github.com/nodeca/js-yaml-->
|
||||
<script src="../lib/js-yaml.min.js"></script>
|
||||
|
||||
<script src="../lib/json-to-html.js"></script>
|
||||
<script src="example.js"></script>
|
||||
|
|
|
|||
1
lib/js-yaml.min.js
vendored
Normal file
1
lib/js-yaml.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
90
lib/json-to-html.js
Normal file
90
lib/json-to-html.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
|
||||
(function() {
|
||||
|
||||
window.jsonToHTML = getHTML
|
||||
|
||||
function getHTML(slideData) {
|
||||
let video = audio = ''
|
||||
if (!slideData.title) slideData.title = ''
|
||||
title = `
|
||||
<div class="title">
|
||||
${slideData.title}
|
||||
</div>
|
||||
`
|
||||
if (slideData.video) {
|
||||
video = getVideoHtml(slideData.video)
|
||||
}
|
||||
|
||||
if (slideData.audio) {
|
||||
audio = getAudioHtml(slideData.audio)
|
||||
}
|
||||
|
||||
const duration = `data-duration="${slideData.duration ? slideData.duration : 5}"`
|
||||
return `
|
||||
<div class="slide" ${duration}>
|
||||
${title}
|
||||
${video}
|
||||
${audio}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
function getVideoHtml(videoData) {
|
||||
let urls = []
|
||||
let volume = ''
|
||||
if (typeof(videoData) === 'string') {
|
||||
urls.push(videoData)
|
||||
} else { // video is an object
|
||||
if (videoData.hasOwnProperty('url')) {
|
||||
urls.push(videoData.url)
|
||||
} else if (videoData.hasOwnProperty('zoom')) {
|
||||
urls = videoData.zoom
|
||||
}
|
||||
if (videoData.volume) {
|
||||
volume = `data-volume="${videoData.volume}"`
|
||||
}
|
||||
}
|
||||
const urlsHtml = urls.map((url, index) => {
|
||||
return `data-url_${index}="${makeEmbed(url)}"`
|
||||
}).join('\n')
|
||||
return `
|
||||
<div class="video" ${urlsHtml} ${volume}> </div>
|
||||
`
|
||||
}
|
||||
|
||||
function getAudioHtml(audioData) {
|
||||
let url = continueStr = volume = ''
|
||||
|
||||
// short circuit to return an empty div if audioData is null or not an object
|
||||
// this is useful for user to specify empty audio track to cause existing
|
||||
// audio to pause
|
||||
if (!audioData || !(typeof(audioData === 'object'))) {
|
||||
return `<div class="audio></div>`
|
||||
}
|
||||
|
||||
if (audioData.url) {
|
||||
url = `data-url="${makeEmbed(audioData.url)}"`
|
||||
}
|
||||
|
||||
if (audioData.volume) {
|
||||
volume = `data-volume="${audioData.volume}"`
|
||||
}
|
||||
|
||||
if (audioData['continue']) {
|
||||
continueStr = `data-continue="true"`
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="audio" ${url} ${volume} ${continueStr}></div>
|
||||
`
|
||||
}
|
||||
|
||||
function makeEmbed(url) {
|
||||
if (!url.endsWith('#embed')) {
|
||||
return `${url}#embed`
|
||||
} else {
|
||||
return url
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user