polyscript/index.html at main · adamawoolley/polyscript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Polyscript</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
          <nav class="noselect sticky">
              <form autocomplete="off" action="">
                <div class="autocomplete" title="Search new chapter" id="chapter-input-container">
                  <input id="chapter-input" type="text" name="chapter" v-model="input" v-bind:placeholder="placeholder" v-on:keyup.enter="handleInput">
                  <span type="submit" id="input-button" class="noselect" v-on:click="handleInput">
                    &#10132;
                  </span>
                </div>
              </form>
            <label id="input-error-chapter" v-if="inputErrorChapter">{{ inputErrorBookInfo }} only goes up to chapter {{ inputErrorChapterInfo }}</label>
            <label id="input-error-book" v-if="inputErrorBook">{{ inputErrorBookInfo }} is not a valid book</label>
            <select id="new-lang" title="Add a new language" v-model="newLang" v-on:change="addLang" v-if="!newLang">
              <option value="" selected disabled>&#10133;</option>
              <option v-for="lang in Object.keys(langsInfo)" v-if="!chapters.find(element => element.lang == lang) && !noContentLangs.includes(lang)" v-bind:value="lang">{{ langsInfo[lang] }}</option>
            </select>
          </nav>
          <div id="previous-chapter" title="Previous chapter" class="noselect" v-on:click="previousChapter">
            <span id="previous-chapter-button">&#8249;</span>
          </div>
          <div id="next-chapter" title="Next chapter" class="noselect" v-on:click="nextChapter">
            <span id="next-chapter-button">&#8250;</span>
          </div>
          <div id="scripture-container" class="grid-container" v-if="chapters && chapters.length > 0" v-bind:style="'grid-template-rows: repeat('+chapters[0].divLength+', auto);'">
            <template v-if="chapters" v-for="language in chapters">
              <div class="chapter-lang-container noselect sticky" title="Delete language" v-bind:style="'grid-column-start: '+chapters.indexOf(language)+1+';'" v-on:click="removeLang=language.lang;delLang();">
                <p class="chapter-lang"><span v-if="language.verses==0">No content for: </span>{{ langsInfo[language.lang] }}</p>
                <p class="chapter-lang-delete">&#128465;</p>
              </div>
              <template v-if="language.verses!=0">
                <p class="book-title" v-bind:style="'grid-column-start: '+chapters.indexOf(language)+1+';'" v-html="language.bookTitle || ''"></p>
                <p class="book-subtitle" v-bind:style="'grid-column-start: '+chapters.indexOf(language)+1+';'" v-html="language.bookSubtitle || ''"></p>
                <p class="book-summary" v-bind:style="'grid-column-start: '+chapters.indexOf(language)+1+'; text-align: '+textAlign(language.lang)+';'" v-html="language.bookSummary || ''"></p>
                <p class="chapter-comprising" v-bind:style="'grid-column-start: '+chapters.indexOf(language)+1+'; text-align: '+textAlign(language.lang)+';'" v-html="language.chapterComprising || ''"></p>
                <p class="chapter-title" v-bind:style="'grid-column-start: '+chapters.indexOf(language)+1+';'" v-html="language.chapterTitle || ''"></p>
                <p class="chapter-summary" v-bind:style="'grid-column-start: '+chapters.indexOf(language)+1+'; text-align: '+textAlign(language.lang)+';'" v-html="language.chapterSummary || ''"></p>
                <template v-for="verse in language.verses">
                  <p class="verse" v-bind:style="'grid-column-start: '+chapters.indexOf(language)+1+'; text-align: '+textAlign(language.lang)+';'" v-html="verse"></p>
                </template>
                <p id="balance" v-if="language.divLength % 2 == 1"></p>
              </template>
              <template v-if="language.verses==0">
                <p class="filler" v-for="i in fillLength" v-bind:style="'grid-column-start: '+chapters.indexOf(language)+1+'; text-align: '+textAlign(language.lang)+';'"></p>
                <p id="balance" v-if="fillLength % 2 == 0"></p>
              </template>
            </template>
          </div>
          <div v-else>
            <img src="squiggle.png" alt="Looping Arrow">
          </div>
          <div id="scrape-container">
          </div>
          <footer>
            <div class="float-left">
              All content comes from <a href="https://churchofjesuschrist.org/study/scriptures" target="_blank" rel="noopener noreferrer">The Church of Jesus Christ of Latter-Day Saints</a>.
            </div>
            <div class="float-right">
                 <a href="https://github.com/adamawoolley/polyscript" target="_blank" rel="noopener noreferrer">The code for this site</a>. <a href="mailto:adamawoolley@gmail.com?subject=Polyscript" target="_blank" rel="noopener noreferrer">Contact me</a>.
            </div>
          </footer>
        </div>
        <script src="info.js"></script>
        <script src="script.js"></script>
    </body>
</html>