allow loading of yaml with url param textb=<textb_url>

This commit is contained in:
Sanjay Bhangar 2018-03-27 17:56:21 +05:30
parent 0a4825e14b
commit 8794207e1d
4 changed files with 125 additions and 549 deletions

View File

@ -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) {

View File

@ -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

File diff suppressed because one or more lines are too long

90
lib/json-to-html.js Normal file
View 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
}
}
})();