Instantly share code, notes, and snippets.
Last active
March 7, 2017 00:33
-
Save gfscott/aa0807fdcacc1120a74de314b680bb20 to your computer and use it in GitHub Desktop.
Create a list of related links to go at the end of a story on CanadianBusiness.com
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
| <!doctype html> | |
| <html lang="en-CA"> | |
| <head> | |
| <title>Related Articles List Maker</title> | |
| <link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/58b0004e96c3048bd6c36b3fb18d7d489b260f2c/awesomplete.css"> | |
| <style> | |
| #search { | |
| display: block; | |
| margin-top: 10em; | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: 40em; | |
| } | |
| .awesomplete { | |
| display: block; | |
| width: 100%; | |
| } | |
| #tag { | |
| display: block; | |
| width: 100%; | |
| font-size: 1.4em; | |
| padding: 0.4em; | |
| } | |
| #go_button { | |
| margin-top: 0.5em; | |
| padding: 0.4em 1em;; | |
| font-size: 1.4em; | |
| border: 0; | |
| background-color: dodgerblue; | |
| color: #fff; | |
| } | |
| #preview { | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: 40em; | |
| } | |
| #loader { | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 1px; | |
| margin-top: 3em; | |
| opacity: 0; | |
| transition-property: opacity; | |
| transition-duration: 0.2s; | |
| } | |
| #loader.loading { | |
| opacity: 1; | |
| } | |
| @-webkit-keyframes ball-scale-ripple-multiple { | |
| 0% { | |
| -webkit-transform: scale(0.1); | |
| transform: scale(0.1); | |
| opacity: 1; } | |
| 70% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| opacity: 0.7; } | |
| 100% { | |
| opacity: 0.0; } } | |
| @keyframes ball-scale-ripple-multiple { | |
| 0% { | |
| -webkit-transform: scale(0.1); | |
| transform: scale(0.1); | |
| opacity: 1; } | |
| 70% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| opacity: 0.7; } | |
| 100% { | |
| opacity: 0.0; } } | |
| .ball-scale-ripple-multiple { | |
| position: relative; | |
| -webkit-transform: translateY(-25px); | |
| -ms-transform: translateY(-25px); | |
| transform: translateY(-25px); } | |
| .ball-scale-ripple-multiple > div:nth-child(0) { | |
| -webkit-animation-delay: -0.8s; | |
| animation-delay: -0.8s; } | |
| .ball-scale-ripple-multiple > div:nth-child(1) { | |
| -webkit-animation-delay: -0.6s; | |
| animation-delay: -0.6s; } | |
| .ball-scale-ripple-multiple > div:nth-child(2) { | |
| -webkit-animation-delay: -0.4s; | |
| animation-delay: -0.4s; } | |
| .ball-scale-ripple-multiple > div:nth-child(3) { | |
| -webkit-animation-delay: -0.2s; | |
| animation-delay: -0.2s; } | |
| .ball-scale-ripple-multiple > div { | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| position: absolute; | |
| top: -2px; | |
| left: -26px; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 100%; | |
| border: 2px solid #777; | |
| -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); | |
| animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); } | |
| </style> | |
| </head> | |
| <body> | |
| <form id="search"> | |
| <label for="search_tag">Search by tag name: | |
| <input type="text" name="search_tag" id="tag"> | |
| </label> | |
| <button type="submit" id="go_button">Create List</button> | |
| </form> | |
| <div id="preview" class="" contenteditable></div> | |
| <div id="loader" class="invisible"> | |
| <div class="ball-scale-ripple-multiple"> | |
| <div></div><div></div><div></div><div></div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.rawgit.com/LeaVerou/awesomplete/ed99eae60cfefd09fab38f73ef18b4fbb873253e/awesomplete.min.js"></script> | |
| <script src="https://cdn.rawgit.com/abdmob/x2js/473934b2e664e129003f8899e8130737e9de1a41/xml2json.min.js"></script> | |
| <script> | |
| ;(function(){ | |
| "use strict"; | |
| var theForm, theInput, thePreview, theTagList; | |
| theForm = ID("search"); | |
| theInput = ID("tag"); | |
| thePreview = ID("preview"); | |
| theTagList = [{label:"3d printing",value:"3d-printing"},{label:"advertising",value:"advertising"},{label:"advice",value:"advice"},{label:"ai",value:"ai"},{label:"alberta",value:"alberta"},{label:"alibaba",value:"alibaba"},{label:"alimentation couche tard",value:"alimentation-couche-tard"},{label:"alternative energy",value:"alternative-energy"},{label:"amazon",value:"amazon"},{label:"analytics",value:"analytics"},{label:"android",value:"android"},{label:"apparel",value:"apparel"},{label:"apple",value:"apple"},{label:"apple watch",value:"apple-watch"},{label:"apps",value:"apps"},{label:"artificial intelligence",value:"artificial-intelligence"},{label:"austerity",value:"austerity"},{label:"auto industry",value:"auto-industry"},{label:"automation",value:"automation"},{label:"bank of canada",value:"bank-of-canada"},{label:"banking",value:"banking"},{label:"banks",value:"banks"},{label:"beer",value:"beer"},{label:"bell",value:"bell"},{label:"big data",value:"big-data"},{label:"bill gates",value:"bill-gates"},{label:"bill morneau",value:"bill-morneau"},{label:"bitcoin",value:"bitcoin"},{label:"blackberry",value:"blackberry"},{label:"bombardier",value:"bombardier"},{label:"bonds",value:"bonds"},{label:"books",value:"books"},{label:"branding",value:"branding"},{label:"brands",value:"brands"},{label:"brazil",value:"brazil"},{label:"brexit",value:"brexit"},{label:"british columbia",value:"british-columbia"},{label:"broadband",value:"broadband"},{label:"budget",value:"budget"},{label:"burger king",value:"burger-king"},{label:"business ethics",value:"business-ethics"},{label:"canada goose",value:"canada-goose"},{label:"canada pension plan",value:"canada-pension-plan"},{label:"canada post",value:"canada-post"},{label:"canadian economy",value:"canadian-economy"},{label:"canadian jobs",value:"canadian-jobs"},{label:"careers",value:"careers"},{label:"cars",value:"cars"},{label:"ceos",value:"ceos"},{label:"charity",value:"charity"},{label:"china",value:"china"},{label:"climate change",value:"climate-change"},{label:"clothing",value:"clothing"},{label:"cloud computing",value:"cloud-computing"},{label:"coffee",value:"coffee"},{label:"commodities",value:"commodities"},{label:"communication",value:"communication"},{label:"competition",value:"competition"},{label:"computers",value:"computers"},{label:"construction",value:"construction"},{label:"consumer debt",value:"consumer-debt"},{label:"corporate boards",value:"corporate-boards"},{label:"corporate culture",value:"corporate-culture"},{label:"corporate governance",value:"corporate-governance"},{label:"corporate social responsibility",value:"corporate-social-responsibility"},{label:"corporate taxes",value:"corporate-taxes"},{label:"creativity",value:"creativity"},{label:"crime",value:"crime"},{label:"csr",value:"csr"},{label:"culture",value:"culture"},{label:"customer service",value:"customer-service"},{label:"data",value:"data"},{label:"data security",value:"data-security"},{label:"debt",value:"debt"},{label:"deficit spending",value:"deficit-spending"},{label:"deficits",value:"deficits"},{label:"demographics",value:"demographics"},{label:"design",value:"design"},{label:"digital advertising",value:"digital-advertising"},{label:"digital apps",value:"digital-apps"},{label:"digital currency",value:"digital-currency"},{label:"digital marketing",value:"digital-marketing"},{label:"digital media",value:"digital-media"},{label:"digital music",value:"digital-music"},{label:"digital retail",value:"digital-retail"},{label:"digital video",value:"digital-video"},{label:"directors",value:"directors"},{label:"diversity",value:"diversity"},{label:"dragons den",value:"dragons-den"},{label:"driverless cars",value:"driverless-cars"},{label:"drugs",value:"drugs"},{label:"ecommerce",value:"ecommerce"},{label:"economic growth",value:"economic-growth"},{label:"economics",value:"economics"},{label:"education",value:"education"},{label:"electronics",value:"electronics"},{label:"elon musk",value:"elon-musk"},{label:"email",value:"email"},{label:"emerging markets",value:"emerging-markets"},{label:"employee engagement",value:"employee-engagement"},{label:"employee retention",value:"employee-retention"},{label:"employee satisfaction",value:"employee-satisfaction"},{label:"employment",value:"employment"},{label:"enbridge",value:"enbridge"},{label:"encana",value:"encana"},{label:"energy",value:"energy"},{label:"entertainment",value:"entertainment"},{label:"entrepreneur",value:"entrepreneur"},{label:"entrepreneurs",value:"entrepreneurs"},{label:"entrepreneurship",value:"entrepreneurship"},{label:"environment",value:"environment"},{label:"ethics",value:"ethics"},{label:"europe",value:"europe"},{label:"exchange rates",value:"exchange-rates"},{label:"exports",value:"exports"},{label:"facebook",value:"facebook"},{label:"failure",value:"failure"},{label:"fashion",value:"fashion"},{label:"fast food",value:"fast-food"},{label:"finance",value:"finance"},{label:"fintech",value:"fintech"},{label:"first nations",value:"first-nations"},{label:"food",value:"food"},{label:"food industry",value:"food-industry"},{label:"foreign investment",value:"foreign-investment"},{label:"foreign trade",value:"foreign-trade"},{label:"fraud",value:"fraud"},{label:"free trade",value:"free-trade"},{label:"freshbooks",value:"freshbooks"},{label:"gambling",value:"gambling"},{label:"games",value:"games"},{label:"gaming",value:"gaming"},{label:"gas",value:"gas"},{label:"gdp",value:"gdp"},{label:"gender",value:"gender"},{label:"gender equality",value:"gender-equality"},{label:"gender roles",value:"gender-roles"},{label:"gold",value:"gold"},{label:"google",value:"google"},{label:"governance",value:"governance"},{label:"government",value:"government"},{label:"groupon",value:"groupon"},{label:"growth",value:"growth"},{label:"happiness",value:"happiness"},{label:"hbo",value:"hbo"},{label:"health",value:"health"},{label:"health care 2",value:"health-care-2"},{label:"hiring",value:"hiring"},{label:"hockey",value:"hockey"},{label:"hollywood",value:"hollywood"},{label:"hootsuite",value:"hootsuite"},{label:"house prices",value:"house-prices"},{label:"housing",value:"housing"},{label:"housing bubble",value:"housing-bubble"},{label:"housing market",value:"housing-market"},{label:"housing markets",value:"housing-markets"},{label:"hudsons bay",value:"hudsons-bay"},{label:"human resources",value:"human-resources"},{label:"immigration",value:"immigration"},{label:"income inequality",value:"income-inequality"},{label:"india",value:"india"},{label:"indochino",value:"indochino"},{label:"inflation",value:"inflation"},{label:"information technology",value:"information-technology"},{label:"infrastructure",value:"infrastructure"},{label:"innovations",value:"innovations"},{label:"insurance",value:"insurance"},{label:"intel",value:"intel"},{label:"interest rates",value:"interest-rates"},{label:"international trade",value:"international-trade"},{label:"internet",value:"internet"},{label:"internet of things",value:"internet-of-things"},{label:"investing",value:"investing"},{label:"investing ideas",value:"investing-ideas"},{label:"iphone",value:"iphone"},{label:"janet yellen",value:"janet-yellen"},{label:"japan",value:"japan"},{label:"jim balsillie",value:"jim-balsillie"},{label:"jobs",value:"jobs"},{label:"jobs in canada",value:"jobs-in-canada"},{label:"joe fresh",value:"joe-fresh"},{label:"john chen",value:"john-chen"},{label:"justin trudeau",value:"justin-trudeau"},{label:"kathleen wynne",value:"kathleen-wynne"},{label:"keystone xl",value:"keystone-xl"},{label:"kickstarter",value:"kickstarter"},{label:"labour",value:"labour"},{label:"law",value:"law"},{label:"lawyers",value:"lawyers"},{label:"lego",value:"lego"},{label:"liberal party",value:"liberal-party"},{label:"linkedin",value:"linkedin"},{label:"lululemon",value:"lululemon"},{label:"luxury",value:"luxury"},{label:"luxury consumers",value:"luxury-consumers"},{label:"management",value:"management"},{label:"manufacturing",value:"manufacturing"},{label:"mark carney",value:"mark-carney"},{label:"mark zuckerberg",value:"mark-zuckerberg"},{label:"marketing",value:"marketing"},{label:"markets",value:"markets"},{label:"mcdonalds",value:"mcdonalds"},{label:"media",value:"media"},{label:"medicine",value:"medicine"},{label:"mexico",value:"mexico"},{label:"microsoft",value:"microsoft"},{label:"millennials",value:"millennials"},{label:"mining",value:"mining"},{label:"mobile",value:"mobile"},{label:"mobile apps",value:"mobile-apps"},{label:"mobile payments",value:"mobile-payments"},{label:"monetary policy",value:"monetary-policy"},{label:"montreal",value:"montreal"},{label:"movies",value:"movies"},{label:"music",value:"music"},{label:"natural resources",value:"natural-resources"},{label:"netflix",value:"netflix"},{label:"nike",value:"nike"},{label:"nintendo",value:"nintendo"},{label:"northern gateway",value:"northern-gateway"},{label:"northern gateway pipeline",value:"northern-gateway-pipeline"},{label:"office culture",value:"office-culture"},{label:"office design",value:"office-design"},{label:"office etiquette",value:"office-etiquette"},{label:"office productivity",value:"office-productivity"},{label:"oil",value:"oil"},{label:"oil and gas",value:"oil-and-gas"},{label:"oil prices",value:"oil-prices"},{label:"oilsands",value:"oilsands"},{label:"olympics",value:"olympics"},{label:"omers ventures",value:"omers-ventures"},{label:"online shopping",value:"online-shopping"},{label:"ontario",value:"ontario"},{label:"parenting",value:"parenting"},{label:"pay",value:"pay"},{label:"paypal",value:"paypal"},{label:"pensions",value:"pensions"},{label:"performance",value:"performance"},{label:"pharmaceuticals",value:"pharmaceuticals"},{label:"phones",value:"phones"},{label:"politics",value:"politics"},{label:"potash",value:"potash"},{label:"potash corp",value:"potash-corp"},{label:"privacy",value:"privacy"},{label:"productivity",value:"productivity"},{label:"public relations",value:"public-relations"},{label:"publishing",value:"publishing"},{label:"quebec",value:"quebec"},{label:"quick serve restaurants",value:"quick-serve-restaurants"},{label:"railways",value:"railways"},{label:"real estate",value:"real-estate"},{label:"real estate bubble",value:"real-estate-bubble"},{label:"recession",value:"recession"},{label:"recruiting",value:"recruiting"},{label:"regulation",value:"regulation"},{label:"remote working",value:"remote-working"},{label:"renewable energy",value:"renewable-energy"},{label:"restaurant",value:"restaurant"},{label:"restaurants",value:"restaurants"},{label:"retail",value:"retail"},{label:"retirement",value:"retirement"},{label:"review",value:"review"},{label:"risk",value:"risk"},{label:"risk management",value:"risk-management"},{label:"robot",value:"robot"},{label:"robot cars",value:"robot-cars"},{label:"robotics",value:"robotics"},{label:"robots",value:"robots"},{label:"rogers",value:"rogers"},{label:"rogers communications",value:"rogers-communications"},{label:"rona",value:"rona"},{label:"russia",value:"russia"},{label:"salaries",value:"salaries"},{label:"sales",value:"sales"},{label:"salesforce",value:"salesforce"},{label:"samsung",value:"samsung"},{label:"science",value:"science"},{label:"scotiabank",value:"scotiabank"},{label:"sears canada",value:"sears-canada"},{label:"security",value:"security"},{label:"self driving cars",value:"self-driving-cars"},{label:"sex",value:"sex"},{label:"sexual harassment",value:"sexual-harassment"},{label:"shopify",value:"shopify"},{label:"silicon valley",value:"silicon-valley"},{label:"sleep",value:"sleep"},{label:"small business",value:"small-business"},{label:"smart cars",value:"smart-cars"},{label:"smartphone",value:"smartphone"},{label:"smartphones",value:"smartphones"},{label:"smartwatch",value:"smartwatch"},{label:"snapchat",value:"snapchat"},{label:"social media",value:"social-media"},{label:"social media marketing",value:"social-media-marketing"},{label:"software",value:"software"},{label:"sports",value:"sports"},{label:"starbucks",value:"starbucks"},{label:"startups",value:"startups"},{label:"statistics",value:"statistics"},{label:"stephen harper",value:"stephen-harper"},{label:"stephen poloz",value:"stephen-poloz"},{label:"steve jobs",value:"steve-jobs"},{label:"stock market",value:"stock-market"},{label:"stock markets",value:"stock-markets"},{label:"stock picks",value:"stock-picks"},{label:"stocks",value:"stocks"},{label:"streaming",value:"streaming"},{label:"streaming music",value:"streaming-music"},{label:"streaming video",value:"streaming-video"},{label:"succession planning",value:"succession-planning"},{label:"suncor",value:"suncor"},{label:"supply management",value:"supply-management"},{label:"sustainability",value:"sustainability"},{label:"tablet",value:"tablet"},{label:"tablets",value:"tablets"},{label:"target",value:"target"},{label:"target canada",value:"target-canada"},{label:"tax",value:"tax"},{label:"taxes",value:"taxes"},{label:"technology 2",value:"technology-2"},{label:"telecom",value:"telecom"},{label:"telecommunications",value:"telecommunications"},{label:"television",value:"television"},{label:"telus",value:"telus"},{label:"tesla",value:"tesla"},{label:"thalmic labs",value:"thalmic-labs"},{label:"tim cook",value:"tim-cook"},{label:"tim hortons",value:"tim-hortons"},{label:"toronto",value:"toronto"},{label:"tourism",value:"tourism"},{label:"tpp",value:"tpp"},{label:"trade",value:"trade"},{label:"training",value:"training"},{label:"trans pacific partnership",value:"trans-pacific-partnership"},{label:"transportation",value:"transportation"},{label:"travel",value:"travel"},{label:"tv",value:"tv"},{label:"twitter",value:"twitter"},{label:"uber",value:"uber"},{label:"unemployment",value:"unemployment"},{label:"unions",value:"unions"},{label:"vancouver",value:"vancouver"},{label:"vc",value:"vc"},{label:"venture capital",value:"venture-capital"},{label:"venture capitalists",value:"venture-capitalists"},{label:"vice media",value:"vice-media"},{label:"video games",value:"video-games"},{label:"walmart",value:"walmart"},{label:"warren buffett",value:"warren-buffett"},{label:"waterloo",value:"waterloo"},{label:"wealth",value:"wealth"},{label:"wearable technology",value:"wearable-technology"},{label:"wearables",value:"wearables"},{label:"web",value:"web"},{label:"windows",value:"windows"},{label:"wireless",value:"wireless"},{label:"women",value:"women"},{label:"work life balance",value:"work-life-balance"},{label:"workplace culture",value:"workplace-culture"},{label:"workplace environment",value:"workplace-environment"},{label:"workplace happiness",value:"workplace-happiness"},{label:"y combinator",value:"y-combinator"},{label:"yoga",value:"yoga"},{label:"youth unemployment",value:"youth-unemployment"},{label:"youtube",value:"youtube"}];; | |
| // focus on load | |
| window.addEventListener("load", function(){ | |
| theInput.focus(); | |
| }); | |
| new Awesomplete (theInput, { | |
| list: theTagList | |
| }); | |
| theForm.addEventListener("submit", function(event){ | |
| submitTheTag(theInput.value); | |
| loading(); | |
| event.preventDefault(); | |
| }); | |
| function submitTheTag(tag){ | |
| var sanitizedTag = tag.replace(/\s/, "-"); | |
| var url = buildUrl(sanitizedTag); | |
| getData(url, function(data){ | |
| layout(data); | |
| }); | |
| } | |
| function loading(){ | |
| // clear the preview pane | |
| thePreview.innerHTML = ""; | |
| var preview = document.getElementById("loader"); | |
| preview.classList.add("loading"); | |
| } | |
| function loaded(){ | |
| var preview = document.getElementById("loader"); | |
| preview.classList.remove("loading"); | |
| } | |
| // https://gist.github.com/gfscott/0808d797015ce62d99b8f77f09ebc675 | |
| function buildUrl(string){ | |
| return "https://gfs.io/related-list/JHskkk8vim54HAcbIgqZ.php?tag=" + string + "&domain=canadianbusiness.com" | |
| } | |
| function layout(json){ | |
| // clear the preview pane | |
| thePreview.innerHTML = ""; | |
| var hed, list; | |
| // first add the header bit | |
| hed = document.createElement("p"); | |
| hed.message = '<strong>MORE ABOUT <a href="http://www.canadianbusiness.com/tag/' + theInput.value.replace(/\s/, "-").toLowerCase() + '/">' + theInput.value.replace(/-/gi, " ").toUpperCase() + '</a>:</strong>'; | |
| hed.innerHTML = hed.message; | |
| thePreview.appendChild(hed); | |
| // then add the list items | |
| list = document.createElement("ul"); | |
| list.items = json; | |
| for ( var i = 0; i < 8; i++ ){ | |
| var li = document.createElement("li"); | |
| li.innerHTML = '<a href="' + json[i].link + '" target="_blank"><strong>' + json[i].title + '</strong></a>'; | |
| list.appendChild(li); | |
| } | |
| thePreview.appendChild(list); | |
| loaded(); | |
| } | |
| // HELPER FUNCTIONS | |
| // selector helper function | |
| function ID(string){ | |
| return document.getElementById(string); | |
| } | |
| // ----------------------------------------------------------------------------- | |
| // SIMPLE REUSABLE AJAX GET JSON FUNCTION | |
| // https://gist.github.com/gfscott/4c728a7700c691d5f0f819c2ad666a8d | |
| // A frequent thing I find myself writing in projects is a simple function to | |
| // get JSON via AJAX. This simple helper does that in a sensible way without | |
| // needing jQuery or a needlessly complex standalone Ajax library. Get data | |
| // so you can do stuff with it. That’s all it does. No POSTing, no crazy edge- | |
| // case error handling. | |
| function getData(url, callback) { | |
| "use strict"; | |
| var request = new XMLHttpRequest(); | |
| request.open('GET', url, true); | |
| request.onload = function() { | |
| if (request.status >= 200 && request.status < 400) { | |
| var jsonData = JSON.parse(request.responseText); | |
| callback(jsonData); | |
| } else { | |
| // server error | |
| console.error("There was an error connecting to the server. The error code was " + request.status); | |
| return; | |
| } | |
| }; | |
| request.onerror = function() { | |
| console.error( "There was an error connecting to the server." ); | |
| return; | |
| }; | |
| request.send(); | |
| } | |
| // USAGE: | |
| // | |
| // getJson("https://randomuser.me/api/", function(data){ | |
| // // Do stuff with the returned data | |
| // console.log(data.results[0].name.first); | |
| // }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment