From 2f3b402c3444e518e6b69505db4487881aefeb94 Mon Sep 17 00:00:00 2001 From: Patrick Fairbank Date: Fri, 14 Sep 2018 00:22:44 -0700 Subject: [PATCH] Refactor sponsor slides to not require reloading the audience display to pick up changes. --- static/css/audience_display.css | 13 ++++++--- static/js/audience_display.js | 35 ++++++++++++----------- templates/audience_display.html | 14 ++++++++++ templates/setup_sponsor_slides.html | 43 +---------------------------- web/api.go | 4 +++ web/setup_sponsor_slides.go | 4 +++ 6 files changed, 51 insertions(+), 62 deletions(-) diff --git a/static/css/audience_display.css b/static/css/audience_display.css index 3e8e87f..6c3d947 100644 --- a/static/css/audience_display.css +++ b/static/css/audience_display.css @@ -369,6 +369,12 @@ html { #sponsor .carousel-inner, #sponsor .item { height: 100%; } +.sponsor-image-container { + width: 1000px; + height: 500px; + display: table-cell; + vertical-align: middle; +} #sponsor h1, #sponsor h2 { font-family: "FuturaLTBold"; margin: 0; @@ -386,13 +392,12 @@ html { } #sponsor h2 { font-size: 6em; - padding-top: 150px; + padding-top: 145px; + line-height: 110px; } #sponsor img { max-width: 800px; - height: 400px; - margin-top: 50px; - display: inline-block; + max-height: 400px; } #allianceSelectionCentering { position: absolute; diff --git a/static/js/audience_display.js b/static/js/audience_display.js index 53b747c..21499d2 100644 --- a/static/js/audience_display.js +++ b/static/js/audience_display.js @@ -8,6 +8,8 @@ var websocket; var transitionMap; var currentScreen = "blank"; var allianceSelectionTemplate = Handlebars.compile($("#allianceSelectionTemplate").html()); +var sponsorImageTemplate = Handlebars.compile($("#sponsorImageTemplate").html()); +var sponsorTextTemplate = Handlebars.compile($("#sponsorTextTemplate").html()); // Handles a websocket message to change which screen is displayed. var handleAudienceDisplayMode = function(targetScreen) { @@ -15,6 +17,10 @@ var handleAudienceDisplayMode = function(targetScreen) { return; } + if (targetScreen === "sponsor") { + initializeSponsorDisplay(); + } + transitions = transitionMap[currentScreen][targetScreen]; if (transitions == null) { // There is no direct transition defined; need to go to the blank screen first. @@ -356,22 +362,21 @@ var transitionSponsorToScore = function(callback) { // Loads sponsor slide data and builds the slideshow HTML. var initializeSponsorDisplay = function() { - $.getJSON("/api/sponsor_slides", function(sponsors) { - if (!sponsors) { - return; - } + $.getJSON("/api/sponsor_slides", function(slides) { + $("#sponsorContainer").empty(); - // Populate Tiles - $.each(sponsors, function(index){ - var active = 'active'; - if(index) - active = ''; - - if(sponsors[index]['Image'].length) - $('#sponsorContainer').append('

'+sponsors[index]['Subtitle']+'

'); - else - $('#sponsorContainer').append('

'+sponsors[index]['Line1']+'
'+sponsors[index]['Line2']+'

'+sponsors[index]['Subtitle']+'

'); + // Inject the HTML for each slide into the DOM. + $.each(slides, function(index, slide) { + slide.DisplayTimeMs = slide.DisplayTimeSec * 1000; + slide.First = index === 0; + var slideHtml; + if (slide.Image) { + slideHtml = sponsorImageTemplate(slide); + } else { + slideHtml = sponsorTextTemplate(slide); + } + $("#sponsorContainer").append(slideHtml); }); // Start Carousel @@ -416,8 +421,6 @@ $(function() { scorePosted: function(event) { handleScorePosted(event.data); } }); - initializeSponsorDisplay(); - // Map how to transition from one screen to another. Missing links between screens indicate that first we // must transition to the blank screen and then to the target screen. transitionMap = { diff --git a/templates/audience_display.html b/templates/audience_display.html index d8cdcd3..6897d42 100644 --- a/templates/audience_display.html +++ b/templates/audience_display.html @@ -167,6 +167,20 @@ {{"{{/each}}"}} + + diff --git a/templates/setup_sponsor_slides.html b/templates/setup_sponsor_slides.html index 4e3ac0c..a9888ea 100644 --- a/templates/setup_sponsor_slides.html +++ b/templates/setup_sponsor_slides.html @@ -57,52 +57,11 @@

- + {{end}} -
-
-
-
- -
- -
-
- - -
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
diff --git a/web/api.go b/web/api.go index 95b061a..d2551db 100644 --- a/web/api.go +++ b/web/api.go @@ -85,6 +85,10 @@ func (web *Web) sponsorSlidesApiHandler(w http.ResponseWriter, r *http.Request) return } + if sponsors == nil { + // Go marshals an empty slice to null, so explicitly create it so that it appears as an empty JSON array. + sponsors = make([]model.SponsorSlide, 0) + } jsonData, err := json.MarshalIndent(sponsors, "", " ") if err != nil { handleWebErr(w, err) diff --git a/web/setup_sponsor_slides.go b/web/setup_sponsor_slides.go index 41f0d17..d3401e9 100644 --- a/web/setup_sponsor_slides.go +++ b/web/setup_sponsor_slides.go @@ -27,6 +27,10 @@ func (web *Web) sponsorSlidesGetHandler(w http.ResponseWriter, r *http.Request) handleWebErr(w, err) return } + + // Append a blank slide to the end that can be used to add a new one. + sponsorSlides = append(sponsorSlides, model.SponsorSlide{DisplayTimeSec: 10}) + data := struct { *model.EventSettings SponsorSlides []model.SponsorSlide