From 675a5a8935e295532bfb43f4f95f8829a6e2dc21 Mon Sep 17 00:00:00 2001 From: zaporylie Date: Sun, 15 Feb 2015 00:46:25 +0100 Subject: [PATCH] Fix #1: keep js and css in separate files --- index.html | 270 +++-------------------------------------------------- script.js | 118 +++++++++++++++++++++++ style.css | 120 ++++++++++++++++++++++++ 3 files changed, 252 insertions(+), 256 deletions(-) create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html index 62aaffc..5c5ce3b 100644 --- a/index.html +++ b/index.html @@ -9,263 +9,26 @@ + + - - - - - - + + + + + + - - - - - - - - - + + + + + +
@@ -285,10 +48,5 @@
- diff --git a/script.js b/script.js new file mode 100644 index 0000000..d546047 --- /dev/null +++ b/script.js @@ -0,0 +1,118 @@ +var appConsts = { + productname: "myWord", + productnameForDisplay: "myword.io", + domain: "myword.io", + version: "0.47" +} +var defaultImageUrl = "http://scripting.com/2015/02/12/beatles.png"; + +function everySecond () { +} +function initGoogleAnalytics () { + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-39531990-1', appConsts.domain); + ga('send', 'pageview'); +} +function startup () { + var urlparam = decodeURIComponent (getURLParameter ("url")), urlEssay = "essay.json", jstruct, imgurl = defaultImageUrl;; + var markdown = new Markdown.Converter (), now = new Date (), flmarkdown; + console.log ("startup"); + $("#idVersionNumber").html ("v" + appConsts.version + ""); + initGoogleAnalytics (); + if (urlparam != "null") { + urlEssay = urlparam; + } + readHttpFile (urlEssay, function (s) { + try { + jstruct = JSON.parse (s); + } + catch (err) { + alertDialog (err + ". Try using jsonlint to find the error in the JSON file."); + return; + } + + flmarkdown = getBoolean (jstruct.flMarkdown); //2/13/15 by DW + + //image + if (jstruct.img != undefined) { + imgurl = jstruct.img; + } + $("#idBackgroundImage").css ("background-image", "url(" + imgurl + ")"); + //title + if (jstruct.title != undefined) { + $("#idPageTitle").html (jstruct.title); + document.title = appConsts.productnameForDisplay + ": " + jstruct.title; + } + //fonts + if (jstruct.titlefont != undefined) { + $("#idPageTopText").css ("font-family", jstruct.titlefont); + } + if (jstruct.bodyfont != undefined) { + $("#idEssayText").css ("font-family", jstruct.bodyfont); + } + + //byline + if (jstruct.authorname != undefined) { + var author = jstruct.authorname, byline; + if (jstruct.authorwebsite != undefined) { + author = "" + author + ""; + } + byline = "By " + author; + if (jstruct.when != undefined) { + var whenstring; + if (sameDay (new Date (jstruct.when), now)) { + whenstring = " at "; + } + else { + whenstring = " on "; + } + byline += whenstring + viewDate (jstruct.when); + } + $("#idPageByline").html (byline + "."); + } + //description + if (jstruct.description != undefined) { + $("#idPageDescription").html (jstruct.description); + } + //essay text + var essaytext = ""; + function dolist (thelist) { + for (var i = 0; i < thelist.length; i++) { + var sub = thelist [i]; + if (typeof sub == "string") { + if (flmarkdown) { + essaytext += sub + "\n\n"; + } + else { + essaytext += "

" + sub + "

"; + } + } + else { + if (sub.title != undefined) { + essaytext += "
" + sub.title + "
"; + } + if (sub.subs != undefined) { + dolist (sub.subs); + } + } + } + } + dolist (jstruct.subs); + + if (flmarkdown) { + console.log ("startup: essay text before Markdown processing == " + essaytext); + essaytext = "
" + markdown.makeHtml (essaytext) + "
"; + } + + $("#idEssayText").html (essaytext); + }); + self.setInterval (function () {everySecond ()}, 1000); +} + +$(document).ready (function () { + startup (); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..e2b994d --- /dev/null +++ b/style.css @@ -0,0 +1,120 @@ +body { + font-family: Ubuntu; + font-size: 18px; + background-color: whitesmoke; +} +.divPageBody { + width: 60%; + margin-top: 90px; + margin-left: auto; + margin-right: auto; +} +.divBackgroundImage { + position: absolute; + width: 100%; + height: 400px; + margin-left: 0; + margin-top: 0; + border-top: 1px solid silver; + z-index: 10; + + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.divPageTopText { + width: 70%; + margin-left: auto; + margin-right: auto; + margin-top: 160px; +} +.divPageTopText a { + color: white; +} +.divPageTitle { + font-size: 50px; + letter-spacing: -0.02em; + font-weight: 700; + font-style: normal; + letter-spacing: -0.04em; + line-height: 1.1; + margin-bottom: 8px; + color: white; + text-shadow: 1px 1px black; +} +.divPageByline { + font-size: 18px; + color: white; + margin-bottom: .5em; + text-shadow: 1px 1px black; +} +.divPageDescription { + font-size: 24px; + color: white; + margin-top: .5em; + height: 3em; + text-shadow: 1px 1px black; +} +.divEssayText { + font-family: "Georgia"; + font-size: 24px; + line-height: 145%; + width: 55%; + margin-top: 125px; + margin-left: auto;; + margin-right: auto; + margin-bottom: 400px; +} +.divSubhead { + font-family: "Ubuntu"; + font-weight: bold; + margin-top: 1em; + margin-bottom: .15em; +} +.divMarkdownText h4 { + font-size: 24px; + margin-top: 1.25em; + margin-bottom: .75em; +} +.divVersionNumber { + position: absolute; + top: 0; + right:0; + font-size: 13px; + padding: 5px; + color: white; + z-index: 20; +} +.divVersionNumber a { + color: white; +} + +@media only screen +and (min-device-width : 320px) +and (max-device-width : 480px) { + .divPageTopText { + width: 80%; + margin-top: 110px; + } + .divPageTitle { + font-size: 44px; + } + .divPageDescription { + font-size: 18px; + line-height: 110%; + } + .divEssayText { + width: 80%; + margin-top: 125px; + margin-left: auto;; + margin-right: auto; + margin-bottom: 400px; + } + .divVersionNumber { + position: absolute; + padding: 2px; + } +}