[gimp-web/header-image] Add rotating header image javascript

[Pat David <patdavid src gnome org>]

commit 16cd97310c19a17a2a0fa0d98c9c7885aec395e2
Author: Pat David <patdavid gmail com>
Date:   Mon Jan 16 09:32:28 2017 -0600

    Add rotating header image javascript
    
    Added js to randomly rotate header image on page load.
    Should fail gracefully w/o js to show the same header img.

 .../images/frontpage/headers/Niagara_Rainbow.jpg   |  Bin 0 -> 297756 bytes
 .../images/frontpage/headers}/cotton.jpg           |  Bin 234621 -> 234621 bytes
 content/js/rotateHeaderImg.js                      |  106 ++++++++++++++++++++
 themes/newgimp/static/css/home.css                 |    3 +-
 themes/newgimp/templates/home.html                 |    9 ++-
 5 files changed, 115 insertions(+), 3 deletions(-)
---
diff --git a/content/images/frontpage/headers/Niagara_Rainbow.jpg 
b/content/images/frontpage/headers/Niagara_Rainbow.jpg
new file mode 100644
index 0000000..9a46c69
Binary files /dev/null and b/content/images/frontpage/headers/Niagara_Rainbow.jpg differ
diff --git a/content/js/rotateHeaderImg.js b/content/js/rotateHeaderImg.js
new file mode 100644
index 0000000..84036e1
--- /dev/null
+++ b/content/js/rotateHeaderImg.js
@@ -0,0 +1,106 @@
+/*
+ * Simple Header Image Randomization
+ * ---------------------------------
+ *
+ *  Just add objects to the `imglist` var below.
+ *  If you don't have data, use an empty set "".
+ *  
+ *  name: Image author name/attribution
+ *  title: The title of the work (if applicable)
+ *  file: Path to the image (ie: /images/frontpage/headers/FILE.jpg)
+ *          Try to keep the image around 2048px wide
+ *          and aggressively compress to keep it under 300kb
+ *          the smaller the better for load times
+ *  license: cc-by-sa by default
+ *          options:
+ *                  cc-by
+ *                  cc-by-sa
+ *                  cc-by-sa-nc
+ *                  cc-by-nd
+ *          _Strongly_ suggest we stick to cc-by or cc-by-sa.
+ */
+
+var imglist = [
+    {
+        "author": "Ville Pätsi",
+        "authorURL": "http://shadowdrama.net/";,
+        "title": "Niagara Rainbow",
+        "sourceURL": "https://www.flickr.com/photos/shadowdrama/20786243805";,
+        "file": "/images/frontpage/headers/Niagara_Rainbow.jpg",
+        "license": "cc-by-sa"
+    },{
+        "author": "Pat David",
+        "authorURL": "https://pixls.us";,
+        "title": "After the Cotton",
+        "sourceURL": "https://www.flickr.com/photos/patdavid/10614802615";,
+        "file": "/images/frontpage/headers/cotton.jpg",
+        "license": "cc-by-sa"
+    }
+]
+
+
+var imgBanner = document.getElementById('banner');
+var imgAttr = document.getElementById('headerImgAttr');
+var title = imgAttr.getElementsByClassName('headerTitle')[0];
+var author = imgAttr.getElementsByClassName('headerAuthor')[0];
+var lic = imgAttr.getElementsByClassName('headerLicense')[0];
+
+var image = imglist[ Math.floor( Math.random() * (imglist.length) )  ];
+
+var himage = new Image();
+
+himage.onload = function() {
+    // Loading the style as a node into the dom
+    // on the head element (CSP might bork if we do it to the 
+    // element directly as inline (even after load?)
+    var css = "#banner {"
+    css += "background-image: linear-gradient(rgba(44,52,80,0.5), rgba(44,62,80,0.5)), url('"+ image.file 
+"');";
+    css += "background-size: cover;";
+    css += "background-position: 0;";
+    css += "}";
+
+    var style = document.createElement('style');
+    style.type = 'text/css';
+    style.appendChild( document.createTextNode( css ) );
+    document.head.appendChild( style );
+}
+
+himage.src = image.file;
+
+if( typeof( image.title ) !== undefined ){
+    title.innerText = image.title;
+    title.title = image.title;
+}
+
+if( typeof( image.sourceURL ) !== undefined ){
+    title.href = image.sourceURL;
+}
+
+if( typeof( image.author ) !== undefined ){
+    author.innerText = image.author;
+}
+
+if( typeof( image.authorURL ) !== undefined ){
+    author.href = image.authorURL;
+}
+
+if( typeof( image.license ) !== undefined ){
+    switch( image.license ){
+        case 'cc-by':
+            lic.href = "https://creativecommons.org/licenses/by/4.0/";;
+            lic.getElementsByClassName('cc')[0].innerText = 'cb';
+            break;
+        case 'cc-by-sa':
+            lic.href = "https://creativecommons.org/licenses/by-sa/4.0/";;
+            lic.getElementsByClassName('cc')[0].innerText = 'cba';
+            break;
+        case 'cc-by-sa-nc':
+            lic.href = "https://creativecommons.org/licenses/by-nc-sa/4.0/";;
+            lic.getElementsByClassName('cc')[0].innerText = 'cban';
+            break;
+        case 'cc-by-nd':
+            lic.href = "https://creativecommons.org/licenses/by-nd/4.0/";;
+            lic.getElementsByClassName('cc')[0].innerText = 'cbad';
+            break;
+    }
+}
diff --git a/themes/newgimp/static/css/home.css b/themes/newgimp/static/css/home.css
index caae95b..2b746b7 100644
--- a/themes/newgimp/static/css/home.css
+++ b/themes/newgimp/static/css/home.css
@@ -14,9 +14,10 @@ p {
 
 #banner {
     min-height: 350px;
-    background-image: linear-gradient(rgba(44,52,80,0.5), rgba(44,62,80,0.5)), 
url('/theme/images/Niagara_Rainbow.jpg');
+    background-image: linear-gradient(rgba(44,52,80,0.5), rgba(44,62,80,0.5));
     background-position: 0;
     background-size: cover;
+    transition: opacity 0.5s ease;
 }
 
 #banner h1 {
diff --git a/themes/newgimp/templates/home.html b/themes/newgimp/templates/home.html
index 53caff9..e2cafde 100644
--- a/themes/newgimp/templates/home.html
+++ b/themes/newgimp/templates/home.html
@@ -244,8 +244,11 @@
         <div class="container">
             <div class="row clearfix">
                 <div class="column half">
-                    <p>
-                        <em>Header</em> background image: <a 
href="https://www.flickr.com/photos/shadowdrama/20786243805/in/dateposted/"; title='Niagara Rainbow'>Niagara 
Rainbow</a> by <a href="http://shadowdrama.net/";>Ville Pätsi</a> (<a 
href="https://creativecommons.org/licenses/by-sa/4.0/"; title="Creative Commons Attribution-ShareAlike"><span 
class='cc'>cba</span></a>)
+                    <p id='headerImgAttr'>
+                        <em>Header</em> image: <a class='headerTitle' 
href="https://www.flickr.com/photos/shadowdrama/20786243805/in/dateposted/"; title='Niagara Rainbow'>Niagara 
Rainbow</a> 
+                        by 
+                        <a class='headerAuthor' href="http://shadowdrama.net/";>Ville Pätsi</a> 
+                        (<a class='headerLicense' href="https://creativecommons.org/licenses/by-sa/4.0/"; 
title="Creative Commons Attribution-ShareAlike"><span class='cc'>cba</span></a>)
                     </p>
 
                     <p>
@@ -272,4 +275,6 @@
     </section>
 
 
+    <!-- <script async src='/images/headers.json'></script> -->
+    <script async src='/js/rotateHeaderImg.js'></script>
 {% endblock content %}