Archive Project

src/controllers/chapters.js

@@ -0,0 +1,74 @@
+const chaptersController = new TKPageSliderController({
+    id: 'chapters',
+    previousPageButton: '.carousel-previous',
+    nextPageButton: '.carousel-next',
+    outlets: [{name: 'label', selector: '.carousel-label'}],
+    title: _('Chapters')
+});
+
+chaptersController.viewDidLoad = function () {
+    this.view.appendChild(TKUtils.buildElement({
+        type: 'emptyDiv',
+        className: 'carousel-previous button'
+    }));
+    this.view.appendChild(TKUtils.buildElement({
+        type: 'emptyDiv',
+        className: 'carousel-next button'
+    }));
+    this.view.appendChild(TKUtils.buildElement({
+        type: 'emptyDiv',
+        className: 'carousel-label'
+    }));
+    this.slidingViewData = {
+        sideElementsVisible: 4,
+        distanceBetweenElements: 800,
+        sideOffsetBefore: 0,
+        sideOffsetAfter: 0,
+        elements: this.createThumbnails(),
+        incrementalLoading: true
+    };
+
+    bookletController.registerForDisplayUpdates(this);
+};
+
+chaptersController.viewDidAppear = function () {
+    this.updateDisplay();
+};
+
+chaptersController.updateDisplay = function () {
+    if (this.highlightedPageIndex !== (bookletController.getChapter() - 1)) {
+        this.highlightedPageIndex = bookletController.getChapter() - 1;
+    }
+};
+
+/* ==================== Creating Pages ==================== */
+
+chaptersController.createThumbnails = function () {
+    let elements = [];
+    for (let i = 1; i <= appData.chapters.length; i++) {
+        let padded_index = (i < 10) ? '0' + i : i;
+        let url = 'images/chapters/chapter' + padded_index + '.jpg';
+        elements.push({
+            type: 'container',
+            children: [{
+                type: 'container', children: [
+                    {type: 'image', src: url},
+                    {type: 'image', src: 'images/interface/buttonPlayCircle.png'}
+                ]
+            }]
+        });
+    }
+    return elements;
+};
+
+/* ==================== Pages Navigation ==================== */
+
+// called when the user focuses another page
+chaptersController.pageWasHighlighted = function (index) {
+    this.label.textContent = appData.chapters[index];
+};
+
+// called when the user activates the focused pages
+chaptersController.pageWasSelected = function (index) {
+    bookletController.playChapter(index + 1);
+};

src/controllers/data.js.mustache

@@ -0,0 +1,25 @@
+let appData = {
+    feature: {
+        XID: "{{{ XID }}}",
+        title: "{{{ meta.title }}}",
+        artist: "{{{ meta.artist }}}"
+    },
+    audioLoop: {
+        src: "audio/background.m4a",
+        loop: true
+    },
+    chapters: [
+        {{#chapters}}"{{{.}}}",{{/chapters}}
+    ],
+    features: [
+        {{#features}}
+            {
+                title: "{{{title}}}",
+                description: "{{{description}}}",
+                src: "{{{src}}}",
+                imageName: "{{{imageName}}}",
+                duration: "{{{duration}}}"
+            },
+        {{/features}}
+    ]
+};

src/controllers/features.js

@@ -0,0 +1,87 @@
+let featuresHelper = {};
+
+featuresHelper.createFeatureController = function (feature, index) {
+    let controller = new TKController({
+        id: 'selection-' + index
+    });
+    controller.viewDidLoad = function () {
+        this.view.classList.add('selection');
+        this.view.appendChild(TKUtils.buildElement({
+            type: 'container',
+            children: [
+                {
+                    type: 'image',
+                    src: 'images/' + feature.imageName
+                }, {
+                    type: 'image',
+                    src: 'images/interface/buttonPlayCircle.png',
+                    className: 'play-overlay'
+                }]
+        }));
+        this.view.appendChild(TKUtils.buildElement({
+            type: 'div',
+            className: 'title',
+            content: feature.title
+        }));
+        this.view.appendChild(TKUtils.buildElement({
+            type: 'div',
+            className: 'description',
+            content: feature.description
+        }));
+        this.view.querySelector('.play-overlay').addEventListener('click', () => {
+            console.log(feature);
+            bookletController.playNonLibraryContent({src: feature.src, string: feature.title});
+        })
+    };
+    return controller;
+}
+;
+
+let featuresController = new TKTabController({
+    id: 'features',
+    tabsSelector: '.list .list-item',
+    controllers: appData.features.map(featuresHelper.createFeatureController),
+    title: _('Features')
+});
+
+featuresController.viewDidLoad = function () {
+    const vignetteElement = TKUtils.buildElement({
+        type: 'emptyDiv',
+        className: 'vignette'
+    });
+    this.view.appendChild(vignetteElement);
+    this.view.addClassName('list-on-right');
+    this.buildFeaturesList(appData.features);
+};
+
+featuresController.buildFeaturesList = function (features) {
+    let featureElements = features.map(feature => {
+        return {
+            type: 'container',
+            className: 'list-item',
+            children: [
+                {type: 'image', src: 'images/' + feature.imageName},
+                {
+                    type: 'container',
+                    className: 'list-item-body',
+                    children: [
+                        {type: 'div', className: 'title', content: feature.title},
+                        {type: 'div', className: 'duration', content: formatTime(feature.duration)}
+                    ]
+                }
+            ]
+        }
+    });
+    this.view.appendChild(TKUtils.buildElement({
+        type: 'container',
+        className: 'list',
+        children: [
+            {type: 'div', className: 'list-title', content: _('Features')},
+            {
+                type: 'container',
+                className: 'list-content',
+                children: featureElements
+            }
+        ]
+    }));
+};

src/controllers/home.js

@@ -0,0 +1,32 @@
+const homeController = new TKController({
+    id: 'home',
+    actions: [
+        {selector: '.play', action: bookletController.playFeature}
+    ],
+    navigatesTo: [
+        {selector: '.features', controller: 'features'}
+    ],
+    highlightedElement: '.play'
+});
+
+homeController.viewDidLoad = function () {
+    let mainMenuItems = [];
+    mainMenuItems.push({
+        type: 'div',
+        className: 'play button',
+        content: _('Play')
+    });
+    if (typeof appData.features !== 'undefined' && appData.features.length > 0) {
+        mainMenuItems.push({
+            type: 'div',
+            className: 'features button',
+            content: _('Features')
+        })
+    }
+
+    this.view.appendChild(TKUtils.buildElement({
+        type: 'container',
+        className: 'main-menu',
+        children: mainMenuItems
+    }));
+};

src/controllers/navigation.js

@@ -0,0 +1,31 @@
+window.addEventListener('load', () => {
+    let backButtonElement = document.querySelector('#header .back');
+    backButtonElement.innerHTML = _('Back');
+    TKNavigationController.sharedNavigation.backButton = '.back';
+});
+
+bookletController.navigationControllerWillShowController = function (navigationController, controller) {
+    function showBackgroundForController() {
+        let imagePath = 'images/';
+        if (navigationController.rootController !== controller) {
+            imagePath += controller.id + '/'
+        }
+        imagePath += 'background.png';
+        controller.view.style.backgroundImage = "url('" + imagePath + "')";
+    }
+
+    function toggleHeader() {
+        let headerElement = document.getElementById('header');
+        let titleElement = headerElement.querySelector('.title');
+        if (controller === navigationController.rootController) {
+            headerElement.addClassName('hidden');
+        } else {
+            titleElement.innerHTML = controller.title;
+            headerElement.removeClassName('hidden');
+        }
+    }
+
+    toggleHeader();
+    showBackgroundForController();
+};
+

src/controllers/strings.js

@@ -0,0 +1,37 @@
+let STRINGS_DE = {
+    "Back": "Zurück",
+    "Play": "Wiedergabe",
+    "Chapters": "Kapitel",
+    "Features": "Bonusmaterial",
+    "Hr.": "Std.",
+    "Min.": "Min.",
+    "Sec.": "Sek."
+};
+
+function _(key) {
+    if (key in STRINGS_DE) {
+        return STRINGS_DE[key]
+    } else {
+        return key
+    }
+}
+
+function formatTime(timeString) {
+    const components = timeString.split(':').map(Number);
+    let formattedComponents = [];
+    if (components[0] > 0) {
+        formattedComponents.push(components[0]);
+        const name = components.length === 3 ? _('Hr.') : _('Min.');
+        formattedComponents.push(name);
+    }
+    if (components[1] > 0) {
+        formattedComponents.push(components[1]);
+        const name = components.length === 3 ? _('Min.') : _('Sec.');
+        formattedComponents.push(name);
+    }
+    if (formattedComponents.length < 4 && components.length >= 3 && components[2] > 0) {
+        formattedComponents.push(components[2]);
+        formattedComponents.push(_('Sec.'));
+    }
+    return formattedComponents.join(' ');
+}