From: Michael McMahon <michael@fsf.org>
Date: Tue, 19 Nov 2019 14:59:15 +0000 (-0500)
Subject: Add fundraiser modal window
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=45e0e3bfb4b335796f949de9c573bb5996106c4a;p=libreplanet-static.git

Add fundraiser modal window
---

diff --git a/2020/includes/banner.html b/2020/includes/banner.html
index d2375481..2a5eb804 100644
--- a/2020/includes/banner.html
+++ b/2020/includes/banner.html
@@ -6,6 +6,421 @@
       style="overflow: hidden; margin: 0; border: 0 none; display: block;">
     </iframe>
 
+    <!-- Place modal window here -->
+
+    <!-- begin fsf-modal-window-elem campaign element -->
+            <link type="text/css" rel="stylesheet" href="https://static.fsf.org/nosvn/fonts/fa/css/font-awesome.min.css">
+            <style>
+#fsf-modal-window-elem-container div {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+@media screen and (min-width: 700px) {
+
+    #fsf-modal-window-elem-outer-v-center {
+        display: table;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
+    #fsf-modal-window-elem-inner-v-center {
+        display: table-cell;
+        vertical-align: middle;
+    }
+
+    #fsf-modal-window-elem {
+        width: 687px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    #fsf-modal-window-elem-right-column {
+        float: right;
+        width: 280px;
+        padding-left: 20px;
+    }
+
+    #fsf-modal-window-elem-left-column {
+        width: 100%;
+        float: left;
+        margin-right: -280px;
+    }
+
+    #fsf-modal-window-elem-text {
+        margin-right: 280px;
+    }
+}
+
+@media screen and (max-width: 699px) {
+
+    #fsf-modal-window-elem {
+
+        -ms-box-orient: horizontal;
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -moz-flex;
+        display: -webkit-flex;
+        display: flex;
+
+        -webkit-flex-flow: row wrap;
+        flex-flow: row wrap;
+    }
+
+    #fsf-modal-window-elem {
+        width: 80vw;
+        margin-left: 10vw;
+        margin-right: 10vw;
+        margin-top: 40px;
+        margin-bottom: 40px;
+    }
+
+    #fsf-modal-window-elem-right-column {
+        width: 100%;
+        order: 1;
+    }
+
+    #fsf-modal-window-elem-left-column {
+        width: 100%;
+        order: 2;
+    }
+
+    #fsf-modal-window-elem-text {
+        margin-top: 20px;
+    }
+}
+
+@media screen and (max-width: 360px) {
+    .long-button-text {
+        font-size: 25px !important;
+    }
+}
+
+#fsf-modal-window-elem-container {
+    position: fixed;
+    z-index: 10000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.8);
+
+    font-weight: normal;
+}
+
+#fsf-modal-window-elem a, a:active, a:focus {
+    outline: none;
+    border-bottom: 0px;
+}
+
+#fsf-modal-window-elem {
+    overflow: auto;
+    zoom: 1;
+    padding: 20px;
+    border-style: solid;
+    border-width: 5px;
+    border-color: #ff00ff;
+    border-radius: 20px;
+    box-shadow: 0px 0px 10px #111111;
+    background-color: #19003a;
+}
+
+#fsf-modal-window-elem-header {
+    width: 100%;
+}
+
+#fsf-modal-window-elem-header h2 {
+    font-family: sans-serif,"Helvetica",Arial;
+    font-weight: bold;
+    font-size: 24px;
+    color: #edd400;
+    text-shadow: 0px 0px 8px #00378c;
+    padding-bottom: 20px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    border: none;
+}
+
+#fsf-modal-window-elem-close-button {
+    float: right;
+    height: 40px;
+    margin-right: -20px;
+    margin-top: -20px;
+    padding: 11px;
+    color: #888;
+    cursor: pointer;
+}
+
+#fsf-modal-window-elem-close-button:hover {
+    color: #aaf;
+}
+
+#fsf-modal-window-elem-right-column {
+    text-align: center;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+}
+
+#fsf-modal-window-elem-buttons div {
+    height:53.333px;
+    line-height: 53.333px;
+    margin-left:auto;
+    margin-right:auto;
+    display:block;
+}
+
+#fsf-modal-window-elem-buttons {
+}
+
+#fsf-modal-window-elem-buttons a {
+    width: 100%;
+    display: block;
+    text-align:center;
+    font-size:35px;
+    color:#FFFFFF;
+    text-decoration: none;
+    font-family: sans-serif,"Helvetica",Arial;
+    font-weight: normal;
+}
+
+#fsf-modal-window-elem-maybe-later {
+    margin-top: 5px;
+    margin-bottom: -5px;
+}
+
+#fsf-modal-window-elem-maybe-later a {
+    color: #367c93;
+    line-height: 20px;
+    text-decoration: none;
+    cursor: pointer;
+    font-weight: normal;
+    font-family: sans-serif,"Helvetica",Arial;
+    font-size: 16px;
+}
+
+#fsf-modal-window-elem-text {
+}
+
+#fsf-modal-window-elem-text a {
+    color: #edd400;
+    font-weight: 700;
+    text-decoration: none;
+}
+
+#fsf-modal-window-elem-text a:hover {
+    color: #fd8e1b;
+}
+
+#fsf-modal-window-elem-text a:focus {
+    color: #fd8e1b;
+}
+
+#fsf-modal-window-elem-text a:active {
+    color: #ffac30;
+}
+
+#fsf-modal-window-elem-text p {
+    font-family: sans-serif,"Helvetica",Arial;
+    font-size: 18px;
+    font-weight: normal;
+    margin: 0px 0px 10px 0px;
+    line-height: 20px;
+    color: #ffffff;
+    text-shadow: 0px 0px 8px #4600ba;
+}
+            </style>
+            <div id="fsf-modal-window-elem-container" style="display: none;">
+                <div id="fsf-modal-window-elem-outer-v-center">
+                    <div id="fsf-modal-window-elem-inner-v-center">
+                        <div id="fsf-modal-window-elem">
+                            <div id="fsf-modal-window-elem-header">
+                                <div id="fsf-modal-window-elem-close-button" onclick="//fsfModalWindowElemDontShowForAWhile();">
+                                    <i class="fa fa-close"></i>
+                                </div>
+                                <h2>Join us and make an impact!</h2>
+                            </div>
+                            <div id="fsf-modal-window-elem-left-column">
+                                <div id="fsf-modal-window-elem-text">
+
+<p>
+
+Our associate members are the heart of the FSF's commitment to a society where software respects our freedom and dignity. Every individual that takes a stand will help us reach our goal to welcome 600 new free software advocates by December 31st.
+
+</p>
+
+<p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?pk_campaign=frfall2019&pk_kwd=learn-more&pk_source=modal">READ MORE</a> | <a href="https://my.fsf.org/join?pk_campaign=frfall2019&pk_source=modal2">JOIN</a></span></p>
+
+                                </div>
+                            </div>
+                            <div id="fsf-modal-window-elem-right-column">
+                                <div id="fsf-modal-window-elem-buttons" style="border-radius: 20px; box-shadow: 0px 0px 5px #0c2b2b;">
+                                    <div style="background-color:#ff00ff; border-top-right-radius: 20px; border-top-left-radius: 20px;">
+                                      <a style="text-shadow: 0px 0px 8px #b300b3;" href="https://my.fsf.org/join?pk_campaign=frfall2019&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-check-circle">&nbsp;</i>Join</a>
+                                    </div>
+
+                                    <div style="background-color:#930093">
+                                      <a style="text-shadow: 0px 0px 8px #460046;" href="https://my.fsf.org/renew?pk_campaign=frfall2019&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-refresh"></i> Renew</a>
+                                    </div>
+
+                                    <div style="background-color:#42009a; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; margin-bottom: 2px">
+                                      <a style="text-shadow: 0px 0px 8px #22004e;" href="https://my.fsf.org/donate?pk_campaign=frfall2019&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-money"></i> Donate</a>
+                                    </div>
+                                </div>
+                                <!--
+                                <div id="fsf-modal-window-elem-maybe-later">
+                                    <a onclick="//fsfModalWindowElemMaybeLater();">maybe later</a>
+                                </div>
+                                -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <script type="text/javascript">
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0
+
+// licensed GPLv3-or-later by Andrew Engelbrecht
+
+var startTime, endTime, switchTextTime;
+
+startTime = new Date('2019-11-18T04:00:00Z');
+switchTextTime = new Date('2019-12-12T04:00:00Z');
+endTime = new Date('2020-01-01T04:00:00Z');
+
+// possibly switch the text that is displayed in the modal window, depending
+// upon the current date.
+function fsfModalWindowElemMaybeSwitchText () {
+
+    var now;
+
+    now = new Date();
+    if (now.getTime() < switchTextTime.getTime()) {
+        return; // don't switch the dbd text
+    }
+
+    // switch dbd text
+    document.getElementById("fsf-modal-window-elem-text").innerHTML =' \
+\
+<p>Our associate members are the heart of the FSF\'s commitment to a society where software respects our freedom and dignity. Every individual that takes a stand will help us reach our goal to welcome 600 new free software advocates by December 31st.</p> \
+\
+<p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?pk_campaign=frfall2019&pk_kwd=learn-more&pk_source=modal">READ MORE</a> | <a href="https://my.fsf.org/join?pk_campaign=frfall2019&pk_source=modal2">JOIN</a></span></p>';
+}
+
+// show fsf-modal-window-elem if it hasn't been previously closed by
+// the user, nor recently hit "maybe later",
+// and the campaign is still happening
+function fsfModalWindowElemMaybeShow () {
+
+    var pattern, noShowFsfModalWindowElementP, now;
+
+//    now = new Date();
+//    if (now.getTime() < startTime.getTime() || now.getTime() > endTime.getTime()) {
+//        return; // don't show the fsf-modal-window-elem
+//    }
+
+    // see if cookie says not to show element
+    pattern = /showFsfFall2019FundraiserModalWindowElementP\s*=\s*false/;
+    noShowFsfModalWindowElementP = pattern.test(document.cookie);
+
+//// uncomment here to enable modal window hiding
+    if (!noShowFsfModalWindowElementP) {
+        setTimeout(function () {
+            // display the element
+            document.getElementById("fsf-modal-window-elem-container").style.display="block";
+        }, 0);
+    }
+}
+
+// call this first to set the proper text
+fsfModalWindowElemMaybeSwitchText();
+// call this right away to avoid flicker
+fsfModalWindowElemMaybeShow();
+
+
+// get the time `plusDays` in the future.
+// can be a fraction.
+function daysInFuture (plusDays) {
+    var now, future;
+
+    now = new Date();
+    future = new Date(now.getTime() + Math.floor(1000 * 60 * 60 * 24 * plusDays));
+    return future.toGMTString();
+}
+
+// hide the fsf-modal-window-elem
+function fsfModalWindowElemHide () {
+    document.getElementById("fsf-modal-window-elem-container").style.display="none";
+}
+// optionally hide elem and set a cookie to keep the fsf-modal-window-elem hidden for the next `forDays`.
+function fsfModalWindowElemDontShowForDays (forDays, hideNow) {
+    if (hideNow === true) {
+        fsfModalWindowElemHide();
+    }
+    //document.cookie = "showFsfFall2019FundraiserModalWindowElementP=false; path=/; domain=.fsf.org; expires=" + daysInFuture(forDays);
+    document.cookie = "showFsfFall2019FundraiserModalWindowElementP=false; path=/; expires=" + daysInFuture(forDays);
+}
+
+// hide the element from now to two weeks after closing it
+function fsfModalWindowElemDontShowForAWhile () {
+    fsfModalWindowElemDontShowForDays(14, true);
+}
+// hide the element from now to past the date of the campaign
+//function fsfModalWindowElemDontShowAgain () {
+//    fsfModalWindowElemDontShowForDays(120, true);
+//}
+// don't show the element for a while
+//function fsfModalWindowElemMaybeLater () {
+//    fsfModalWindowElemDontShowForDays(1, true);
+//}
+// keep the element visible for now, but don't show it for a while
+function fsfModalWindowElemFollowedLink () {
+    fsfModalWindowElemDontShowForDays(14, false);
+}
+
+// close popup if user clicks trasparent part
+document.getElementById("fsf-modal-window-elem-container").addEventListener("click", function(event){
+    fsfModalWindowElemDontShowForAWhile();
+});
+// don't close popup if clicking non-trasparent part (with the text and buttons)
+document.getElementById("fsf-modal-window-elem").addEventListener("click", function(event){
+    event.stopPropagation();
+});
+// close popup if user clicks X icon
+document.getElementById("fsf-modal-window-elem-close-button").addEventListener("click", function(event){
+    fsfModalWindowElemDontShowForAWhile();
+});
+//// close popup if user clicks maybe-later div
+//document.getElementById("fsf-modal-window-elem-maybe-later").addEventListener("click", function(event){
+//    fsfModalWindowElemMaybeLater();
+//});
+// disable popup if user clicks one of the main buttons
+document.getElementById("fsf-modal-window-elem-buttons").addEventListener("click", function(event){
+    fsfModalWindowElemFollowedLink();
+});
+// disable popup if user clicks one of the "Read more" link
+document.getElementById("fsf-modal-window-text-link").addEventListener("click", function(event){
+    fsfModalWindowElemFollowedLink();
+});
+// close popup if user presses escape key 
+window.addEventListener("keydown",  function  (event)  {
+    switch  (event.key)  {
+        case  "Escape":
+            fsfModalWindowElemDontShowForAWhile();
+            break;
+        default:
+            return;
+    }
+},  true);
+
+// @license-end
+                </script>
+            </div>
+            <!-- end fsf-modal-window-elem campaign element -->
+
     <div id="wrapper"> <!-- start of wrapper -->
       <div class="lp-banner hidden-xs"> <!--start of lp banner -->
 		<div class="container"> <!-- start of container -->