This repository has been archived by the owner on Oct 15, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 942
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #843 from duckduckgo/jd/guidebox_media
guidebox: convert to media template
- Loading branch information
Showing
7 changed files
with
137 additions
and
183 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <div> | ||
| <span><a class="btn btn--primary" href="{{smart_url}}"> | ||
| <span class="btn--text"> Watch Now </span> | ||
| </a></span> | ||
| {{#unless is_free_content}} <span class="paid"> Paid Content </span>{{/unless}} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,43 @@ | ||
| .zci--guidebox li.ddgc_item img { | ||
| max-width: 100% !important; | ||
| max-height: 68px !important; | ||
| .zci__more-at__icon{ | ||
| padding-bottom: 0.3em; | ||
| } | ||
|
|
||
| .zci--guidebox div.image_wrap { | ||
| .detail--guidebox .price{ | ||
| position: relative; | ||
| top: -0.5em; | ||
| font-size: 0.9em; | ||
| color: #777777; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| .zci--guidebox .gb_info { | ||
| white-space: nowrap; | ||
| word-wrap: break-word; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| margin: 0px !important | ||
| .detail--guidebox .paid{ | ||
| color: #c9481c; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .zci--guidebox .button { | ||
| display: inline-block; | ||
| border-radius: 3px; | ||
| padding: 3px 9px; | ||
| background: #fefefe; | ||
| border: 1px solid #bbb; | ||
| color: black; | ||
| margin-right: 10px; | ||
| .is-mobile .detail--guidebox .price{ | ||
| display: none; | ||
| } | ||
|
|
||
| .zci--guidebox .button:hover { | ||
| border: 1px solid #80b5ff; | ||
| cursor: pointer; | ||
| text-decoration: none; | ||
| .is-mobile .detail--guidebox .btn--primary{ | ||
| position: absolute; | ||
| bottom: 1.1em; | ||
| } | ||
|
|
||
| .zci--guidebox #ddgc_detail p { | ||
| margin-bottom: 10px; | ||
| .detail--guidebox .detail__body--pr{ | ||
| border-left: 0px; | ||
| } | ||
|
|
||
| .zci--guidebox .grey { | ||
| color: grey; | ||
| .detail--guidebox .detail__desc{ | ||
| padding-bottom: 1.3em; | ||
| } | ||
|
|
||
| .zci--guidebox .red { | ||
| color: #B57367 | ||
| .is-mobile .detail--guidebox .paid{ | ||
| position: absolute; | ||
| padding-left: 7.5em; | ||
| bottom: 1.8em; | ||
| } | ||
|
|
||
| .zci--guidebox .small { | ||
| font-size: 13px; | ||
| .detail--guidebox .btn--primary{ | ||
| margin-right: 0.75em; | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,141 +1,115 @@ | ||
| function ddg_spice_guidebox_getid (api_result) { | ||
| "use strict"; | ||
| (function(env){ | ||
| "use strict"; | ||
| env.ddg_spice_guidebox_getid = function(api_result) { | ||
|
|
||
| if (!api_result.results) { | ||
| return; | ||
| } | ||
|
|
||
| var SKIP_ARRAY = ["online","tv","episode","episodes","free","guidebox","watch","full"], | ||
| results = api_result.results.result, | ||
| relevant; | ||
|
|
||
| // Check which show is relevant to our query. | ||
| $.each(results, function(key, result) { | ||
| if (DDG.isRelevant(result.title, SKIP_ARRAY, 3) && !relevant) { | ||
| relevant = result; | ||
| if (!api_result || !api_result.results) { | ||
| return Spice.failed('guidebox'); | ||
| } | ||
| }); | ||
|
|
||
| // Exit if we didn't find anything relevant. | ||
| if (!relevant) { | ||
| return; | ||
| } | ||
|
|
||
| // Prevent jQuery from appending "_={timestamp}" in our url. | ||
| $.ajaxSetup({ | ||
| cache: true | ||
| }); | ||
| var SKIP_ARRAY = ["online","tv","episode","episodes","free","guidebox","watch","full"], | ||
| results = api_result.results.result, | ||
| relevant; | ||
|
|
||
| var script = $('[src*="/js/spice/guidebox/getid/"]')[0], | ||
| source = decodeURIComponent($(script).attr("src")), | ||
| matched = source.match(/\/js\/spice\/guidebox\/getid\/([a-zA-Z0-9\s]+)/), | ||
| query = matched[1]; | ||
| // Check which show is relevant to our query. | ||
| $.each(results, function(key, result) { | ||
| if (DDG.isRelevant(result.title, SKIP_ARRAY, 3) && !relevant) { | ||
| relevant = result; | ||
| } | ||
| }); | ||
|
|
||
| var metadata = { | ||
| res_title : relevant.title, | ||
| network : relevant.network, | ||
| more : relevant.url, | ||
| query : query, | ||
| }; | ||
|
|
||
| ddg_spice_guidebox_getid.metadata = metadata; | ||
| $.getScript("/js/spice/guidebox/lastshows/series/" + relevant.id); | ||
| } | ||
|
|
||
| function ddg_spice_guidebox_lastshows (api_result) { | ||
| "use strict"; | ||
|
|
||
| var metadata = ddg_spice_guidebox_getid.metadata; | ||
| // Exit if we didn't find anything relevant. | ||
| if (!relevant) { | ||
| return; | ||
| } | ||
|
|
||
| function toArray(obj) { | ||
| var result = []; | ||
| if($.isArray(obj)) { | ||
| return obj; | ||
| } else { | ||
| $.each(obj, function(key, value) { | ||
| result[key] = value; | ||
| }); | ||
| return result; | ||
| } | ||
| // Prevent jQuery from appending "_={timestamp}" in our url. | ||
| $.ajaxSetup({ | ||
| cache: true | ||
| }); | ||
|
|
||
| var metadata = { | ||
| res_title : relevant.title, | ||
| network : relevant.network, | ||
| more : relevant.url | ||
| }; | ||
|
|
||
| var url = '/js/spice/guidebox/lastshows/series/' + relevant.id; | ||
|
|
||
| $.getJSON(url, function(api_result) { | ||
|
|
||
| if(!api_result){ | ||
| return Spice.failed('guidebox'); | ||
| } | ||
|
|
||
| var isMobile = $('.is-mobile').length; | ||
|
|
||
| Spice.add({ | ||
| id: 'guidebox', | ||
| name: 'TV', | ||
| data: toArray(api_result.results.result), | ||
| meta: { | ||
| sourceName: "Guidebox", | ||
| sourceUrl: metadata.more, | ||
| itemType: 'episodes of ' + metadata.res_title | ||
| }, | ||
| templates: { | ||
| group: 'media', | ||
| options: { | ||
| variant: "video", | ||
| price: true, | ||
| buy: Spice.guidebox_getid.buy | ||
| } | ||
| }, | ||
| normalize: function(item){ | ||
| var subtitle_tile = "Season "+ item.season_number+ ", #" + item.episode_number; | ||
| var subtitle_detail = "(Season "+ item.season_number+ ", #" + item.episode_number+")"; | ||
|
|
||
| var abstract_length = (isMobile ? 175 : 500); | ||
| var abstract = Handlebars.helpers.ellipsis(item.overview, abstract_length); | ||
|
|
||
| var aired = "Originally aired "+ Handlebars.helpers.guideBox_getDate(item.first_aired) | ||
| + " on "+ metadata.network; | ||
|
|
||
| return { | ||
| image: item.thumbnail_304x171, | ||
| img: item.thumbnail_400x225, | ||
| title: item.episode_name, | ||
| ratingText: subtitle_tile, | ||
| heading: item.episode_name + subtitle_detail, | ||
| url: item.smart_url, | ||
| abstract: abstract, | ||
| price: aired | ||
| } | ||
| }, | ||
| relevancy: { | ||
| primary: [ | ||
| {required: 'episode_name'}, | ||
| {required: 'season_number'}, | ||
| {required: 'overview'} | ||
| ] | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| Spice.add({ | ||
| data : toArray(api_result.results.result), | ||
| header1 : metadata.res_title + " (TV - " + metadata.network + ")", | ||
| sourceName : "Guidebox", | ||
| sourceUrl : metadata.more, | ||
| view: "Tiles", | ||
| id : "guidebox", | ||
| templates : { | ||
| items : api_result.results.result, | ||
| item: Spice.guidebox_getid.guidebox_getid, | ||
| detail: Spice.guidebox_getid.guidebox_getid_details, | ||
| li_width : 120, | ||
| li_height : 105 | ||
| function toArray(obj) { | ||
| var result = []; | ||
| if($.isArray(obj)) { | ||
| return obj; | ||
| } else { | ||
| $.each(obj, function(key, value) { | ||
| result[key] = value; | ||
| }); | ||
| return result; | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| Handlebars.registerHelper("checkSeason", function(season_number, episode_number, options) { | ||
| "use strict"; | ||
|
|
||
| if(season_number !== "0") { | ||
| return options.fn({ | ||
| season_number: season_number, | ||
| episode_number: episode_number | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| Handlebars.registerHelper("getQuery", function() { | ||
| "use strict"; | ||
|
|
||
| return ddg_spice_guidebox_getid.metadata.query; | ||
| }); | ||
|
|
||
| Handlebars.registerHelper("getTitle", function() { | ||
| "use strict"; | ||
|
|
||
| return ddg_spice_guidebox_getid.metadata.res_title; | ||
| }); | ||
|
|
||
| Handlebars.registerHelper("getDate", function(first_aired) { | ||
| "use strict"; | ||
| Handlebars.registerHelper("guideBox_getDate", function(first_aired) { | ||
|
|
||
| var aired = DDG.getDateFromString(first_aired), | ||
| var aired = DDG.getDateFromString(first_aired), | ||
| days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], | ||
| months = [ 'January','February','March','April','May','June','July','August','September','October','November','December']; | ||
|
|
||
| return days[aired.getDay()] + ", " + months[aired.getMonth()] + " " + aired.getDate() + ", " + aired.getFullYear() | ||
| }); | ||
|
|
||
| Handlebars.registerHelper("pluralize", function(string, options) { | ||
| "use strict"; | ||
|
|
||
| if (options.hash && options.hash.singular && options.hash.plural){ | ||
| var arr = string.split("|"); | ||
| return arr.length > 1 ? options.hash.plural : options.hash.singular | ||
| } | ||
| return ""; | ||
| }); | ||
|
|
||
| Handlebars.registerHelper("split", function(string) { | ||
| "use strict"; | ||
|
|
||
| return string.replace(/^\||\|$/g, "").replace(/\|/g, ", "); | ||
| }); | ||
|
|
||
| Handlebars.registerHelper("creators", function(options) { | ||
| "use strict"; | ||
|
|
||
| if (this.writers.length || this.directors.length){ | ||
| return options.fn(this) | ||
| } | ||
| return ""; | ||
| }); | ||
|
|
||
| Handlebars.registerHelper("get_network", function(options) { | ||
| "use strict"; | ||
|
|
||
| return ddg_spice_guidebox_getid.metadata.network; | ||
| }); | ||
| return days[aired.getDay()] + ", " + months[aired.getMonth()] + " " + aired.getDate() + ", " + aired.getFullYear() | ||
| }); | ||
| }(this)); |
15 changes: 0 additions & 15 deletions
15
share/spice/guidebox/getid/guidebox_getid_details.handlebars
This file was deleted.
Oops, something went wrong.