sanj
/
padmaEmbeds
1
0
Fork 0
Code Issues 4 Pull Requests 1 Releases Wiki Activity
Browse Source

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

fetch-textb
Sanjay Bhangar 6 years ago
parent
0a4825e14b
commit
8794207e1d
4 changed files with 125 additions and 549 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      example/example.js
  2. 551
      example/index.html
  3. 1
      lib/js-yaml.min.js
  4. 90
      lib/json-to-html.js

32
example/example.js
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) {

551
example/index.html
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
View File

File diff suppressed because one or more lines are too long

90
lib/json-to-html.js
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
}
}
})();
Write Preview
Loading…
Cancel
Save