Improved favorites/all toggle visibility a little

Addresses #6

dist/app.bundle.js

-!function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),r(3),r(1);class n{constructor(e){var t=["url","playlist","image_sm","image_lg","stationName","slug","description"];for(let r=0;r<t.length;r++)void 0!==e[t[r]]?this[t[r]]=e[t[r]]:this[t[r]]=!1}getStationLink(){return!!this.slug&&`https://somafm.com/player/#/now-playing/${this.slug}`}parsePlaylist(e){var t=this;return new Promise(function(r,n){e=e.split("\n");for(let n=0;n<e.length;n++){let i=e[n].split("=");"File1"===i[0]&&(t.url=i[1],r(t.url))}n()})}loadUrl(){var e=this;return new Promise(function(t,r){e.url&&t(e.url),e.playlist||r("No playlist set"),fetch(e.playlist,{mode:"cors"}).then(n=>{n.text().then(n=>{e.parsePlaylist(n).then(e=>{t(e)},e=>{r(e)})})})})}play(){this.loadUrl().then(e=>{var t=document.getElementById("player");t.setAttribute("src",e),t.play()},e=>{console.error(e)})}}var i=[],a=document.getElementById("soma"),s=a.querySelector(".channel-list"),o=new class{constructor(e="local"){this.storage="local"==e?window.localStorage:window.sessionStorage}save(e,t){t=JSON.stringify(t),this.storage.setItem(e,t)}saveInObject(e,t,r){var n=this.get(e,{});n[t]=r,this.save(e,n)}saveInArray(e,t){var r=this.get(e,[]);r.indexOf(t)<0&&(r.push(t),this.save(e,r))}remove(e,t=null){var r=this.get(e);r&&(null===t?this.storage.removeItem(e):r==t&&this.storage.removeItem(e))}removeFromObject(e,t,r=null){var n=this.get(e);n&&void 0!==n[t]&&(null===r?delete n[t]:n[t]==r&&delete n[t],this.save(e,n))}removeFromArray(e,t){var r=this.get(e);r&&(r.indexOf(t)<0||(r.splice(r.indexOf(t),1),this.save(e,r)))}get(e,t=!1){var r=this.storage.getItem(e);return r?JSON.parse(r):t}getFromObject(e,t){var r=this.get(e,{});return void 0!==r[t]&&r[t]}isInArray(e,t){return this.get(e,[]).indexOf(t)>-1}},l=function(e){if(void 0===i[e])return!1;var t=i[e];window.history.pushState({},`Now Playing: ${t.stationName}`,`#${e}`);var r=a.querySelector(".station-image");a.querySelector("h2 span").innerHTML=t.stationName,r.setAttribute("src",t.image_lg),a.querySelector(".station-thumbnail").setAttribute("src",t.image_sm),void 0===t.imageColor?r.addEventListener("load",function(){var e=(new ColorThief).getPalette(this);e.length&&(t.imageColor=`rgb( ${e[0][0]}, ${e[0][1]}, ${e[0][2]} )`,document.querySelector("body").style.backgroundColor=t.imageColor)},{once:!0}):document.querySelector("body").style.backgroundColor=t.imageColor,a.querySelector(".station-description").innerHTML=t.description,t.getStationLink()&&a.querySelector(".station-link").setAttribute("href",t.getStationLink()),document.querySelector("head title").innerHTML=`Soma: ${t.stationName}`;var n=document.querySelectorAll(".channel-list li");for(let e=0;e<n.length;e++)n[e].classList.remove("current-station");var s=document.getElementById(e);if(s){for(var o=s.parentElement;"LI"!==o.nodeName;)o=o.parentElement;o.classList.add("current-station")}};function c(e){return e.replace("<![CDATA[","").replace("]]>","").trim()}new Promise(function(e){fetch("http://somafm.com/channels.xml",{mode:"cors"}).then(t=>{t.text().then(t=>{t=(new DOMParser).parseFromString(t,"text/xml"),e(t)})})}).then(e=>{var t=e.getElementsByTagName("channel");for(let e=0;e<t.length;e++){let r=t[e].getAttribute("id");i[r]=new n({slug:r,stationName:c(t[e].querySelector("title").innerHTML),playlist:t[e].querySelector('fastpls[format="mp3"]').innerHTML,description:c(t[e].querySelector("description").innerHTML)}),t[e].querySelector("largeimage")&&(i[r].image_lg=t[e].querySelector("largeimage").innerHTML),t[e].querySelector("image")&&(i[r].image_sm=t[e].querySelector("image").innerHTML)}for(let e in i){if(!i.hasOwnProperty(e))continue;let t=i[e],n=document.createElement("li"),a=document.createElement("a"),c=document.createElement("img"),u=document.createElement("span");c.setAttribute("src",t.image_sm),u.classList.add("star"),u.addEventListener("click",function(t){t.stopImmediatePropagation(),this.classList.contains("on")?(this.classList.remove("on"),o.removeFromArray("favorites",e)):(this.classList.add("on"),o.saveInArray("favorites",e))});var r=o.get("only-favorites");o.isInArray("favorites",e)?u.classList.add("on"):r&&n.classList.add("hidden"),a.setAttribute("id",e),a.innerHTML=t.stationName,a.setAttribute("href",`#${e}`),a.addEventListener("click",function(e){e.preventDefault(),e.stopImmediatePropagation();var t=this.getAttribute("id");l(t),i[t].play()}),n.addEventListener("click",function(e){this.querySelector("a").click()}),n.dataset.searchtext=t.stationName.toLowerCase(),n.appendChild(c),n.appendChild(a),n.appendChild(u),s.appendChild(n)}if(""!==window.location.hash){var a=window.location.hash.replace("#","");l(a),i[a].loadUrl().then(e=>{document.getElementById("player").setAttribute("src",e)})}});var u=document.querySelector('input[name="search"]'),d=new class{constructor(){var e=document.createElement("style");e.setAttribute("id","filter-by-search"),this.styleEl=e,document.querySelector("head").appendChild(e),this.searchtext=""}_getStyleEl(){return this.styleEl}_getSearchRule(){return this.searchtext?`.js-filter-by-search li:not([data-searchtext*="${this.searchtext}"]) { display:none !important;}`:""}search(e){this.searchtext=e.toLowerCase(),this._getStyleEl().innerHTML=this._getSearchRule()}};u.addEventListener("keyup",function(){d.search(this.value)}),document.getElementById("js-show-only-favorites").addEventListener("click",function(){var e=document.querySelectorAll(".channel-list li .star");for(let t=0;t<e.length;t++){let r=e[t].parentElement;for(;"LI"!==r.nodeName;)r=r.parentElement;e[t].classList.contains("on")?r.classList.remove("hidden"):r.classList.add("hidden")}o.save("only-favorites",!0)}),document.getElementById("js-show-all").addEventListener("click",function(){var e=document.querySelectorAll(".channel-list li");for(let t=0;t<e.length;t++)e[t].classList.remove("hidden");o.remove("only-favorites")})},function(e,t,r){e.exports=r.p+"2851f1302cc66a5d01469144badd1498.js"},,function(e,t,r){}]);
+!function(e){var t={};function r(n){if(t[n])return t[n].exports;var s=t[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,r),s.l=!0,s.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),r(3),r(1);class n{constructor(e){var t=["url","playlist","image_sm","image_lg","stationName","slug","description"];for(let r=0;r<t.length;r++)void 0!==e[t[r]]?this[t[r]]=e[t[r]]:this[t[r]]=!1}getStationLink(){return!!this.slug&&`https://somafm.com/player/#/now-playing/${this.slug}`}parsePlaylist(e){var t=this;return new Promise(function(r,n){e=e.split("\n");for(let n=0;n<e.length;n++){let s=e[n].split("=");"File1"===s[0]&&(t.url=s[1],r(t.url))}n()})}loadUrl(){var e=this;return new Promise(function(t,r){e.url&&t(e.url),e.playlist||r("No playlist set"),fetch(e.playlist,{mode:"cors"}).then(n=>{n.text().then(n=>{e.parsePlaylist(n).then(e=>{t(e)},e=>{r(e)})})})})}play(){this.loadUrl().then(e=>{var t=document.getElementById("player");t.setAttribute("src",e),t.play()},e=>{console.error(e)})}}var s=[],a=document.getElementById("soma"),i=a.querySelector(".channel-list"),o=new class{constructor(e="local"){this.storage="local"==e?window.localStorage:window.sessionStorage}save(e,t){t=JSON.stringify(t),this.storage.setItem(e,t)}saveInObject(e,t,r){var n=this.get(e,{});n[t]=r,this.save(e,n)}saveInArray(e,t){var r=this.get(e,[]);r.indexOf(t)<0&&(r.push(t),this.save(e,r))}remove(e,t=null){var r=this.get(e);r&&(null===t?this.storage.removeItem(e):r==t&&this.storage.removeItem(e))}removeFromObject(e,t,r=null){var n=this.get(e);n&&void 0!==n[t]&&(null===r?delete n[t]:n[t]==r&&delete n[t],this.save(e,n))}removeFromArray(e,t){var r=this.get(e);r&&(r.indexOf(t)<0||(r.splice(r.indexOf(t),1),this.save(e,r)))}get(e,t=!1){var r=this.storage.getItem(e);return r?JSON.parse(r):t}getFromObject(e,t){var r=this.get(e,{});return void 0!==r[t]&&r[t]}isInArray(e,t){return this.get(e,[]).indexOf(t)>-1}},l=new Promise(function(e){fetch("https://somafm.com/channels.xml",{mode:"cors"}).then(t=>{t.text().then(t=>{t=(new DOMParser).parseFromString(t,"text/xml"),e(t)})})}),c=function(e){if(void 0===s[e])return!1;var t=s[e];window.history.pushState({},`Now Playing: ${t.stationName}`,`#${e}`);var r=a.querySelector(".station-image");a.querySelector("h2 span").innerHTML=t.stationName,r.setAttribute("src",t.image_lg),a.querySelector(".station-thumbnail").setAttribute("src",t.image_sm),void 0===t.imageColor?r.addEventListener("load",function(){var e=(new ColorThief).getPalette(this);e.length&&(t.imageColor=`rgb( ${e[0][0]}, ${e[0][1]}, ${e[0][2]} )`,document.querySelector("body").style.backgroundColor=t.imageColor)},{once:!0}):document.querySelector("body").style.backgroundColor=t.imageColor,a.querySelector(".station-description").innerHTML=t.description,t.getStationLink()&&a.querySelector(".station-link").setAttribute("href",t.getStationLink()),document.querySelector("head title").innerHTML=`Soma: ${t.stationName}`;var n=document.querySelectorAll(".channel-list li");for(let e=0;e<n.length;e++)n[e].classList.remove("current-station");var i=document.getElementById(e);if(i){for(var o=i.parentElement;"LI"!==o.nodeName;)o=o.parentElement;o.classList.add("current-station")}};function d(e){return e.replace("<![CDATA[","").replace("]]>","").trim()}var u=o.get("only-favorites");u?document.getElementById("js-show-only-favorites").classList.add("js-active"):document.getElementById("js-show-all").classList.add("js-active"),l.then(e=>{var t=e.getElementsByTagName("channel");for(let e=0;e<t.length;e++){let r=t[e].getAttribute("id");s[r]=new n({slug:r,stationName:d(t[e].querySelector("title").innerHTML),playlist:t[e].querySelector('fastpls[format="mp3"]').innerHTML,description:d(t[e].querySelector("description").innerHTML)}),t[e].querySelector("largeimage")&&(s[r].image_lg=t[e].querySelector("largeimage").innerHTML),t[e].querySelector("image")&&(s[r].image_sm=t[e].querySelector("image").innerHTML)}for(let e in s){if(!s.hasOwnProperty(e))continue;let t=s[e],r=document.createElement("li"),n=document.createElement("a"),a=document.createElement("img"),l=document.createElement("span");a.setAttribute("src",t.image_sm),l.classList.add("star"),l.addEventListener("click",function(t){t.stopImmediatePropagation(),this.classList.contains("on")?(this.classList.remove("on"),o.removeFromArray("favorites",e)):(this.classList.add("on"),o.saveInArray("favorites",e))}),o.isInArray("favorites",e)?l.classList.add("on"):u&&r.classList.add("hidden"),n.setAttribute("id",e),n.innerHTML=t.stationName,n.setAttribute("href",`#${e}`),n.addEventListener("click",function(e){e.preventDefault(),e.stopImmediatePropagation();var t=this.getAttribute("id");c(t),s[t].play()}),r.addEventListener("click",function(e){this.querySelector("a").click()}),r.dataset.searchtext=t.stationName.toLowerCase(),r.appendChild(a),r.appendChild(n),r.appendChild(l),i.appendChild(r)}if(""!==window.location.hash){var r=window.location.hash.replace("#","");c(r),s[r].loadUrl().then(e=>{document.getElementById("player").setAttribute("src",e)})}});var m=document.querySelector('input[name="search"]'),h=new class{constructor(){var e=document.createElement("style");e.setAttribute("id","filter-by-search"),this.styleEl=e,document.querySelector("head").appendChild(e),this.searchtext=""}_getStyleEl(){return this.styleEl}_getSearchRule(){return this.searchtext?`.js-filter-by-search li:not([data-searchtext*="${this.searchtext}"]) { display:none !important;}`:""}search(e){this.searchtext=e.toLowerCase(),this._getStyleEl().innerHTML=this._getSearchRule()}};m.addEventListener("keyup",function(){h.search(this.value)});var v={favorites:document.getElementById("js-show-only-favorites"),all:document.getElementById("js-show-all")};v.favorites.addEventListener("click",function(){var e=document.querySelectorAll(".channel-list li .star");for(let t=0;t<e.length;t++){let r=e[t].parentElement;for(;"LI"!==r.nodeName;)r=r.parentElement;e[t].classList.contains("on")?r.classList.remove("hidden"):r.classList.add("hidden")}o.save("only-favorites",!0),this.classList.add("js-active"),v.all.classList.remove("js-active")}),v.all.addEventListener("click",function(){var e=document.querySelectorAll(".channel-list li");for(let t=0;t<e.length;t++)e[t].classList.remove("hidden");o.remove("only-favorites"),this.classList.add("js-active"),v.favorites.classList.remove("js-active")})},function(e,t,r){e.exports=r.p+"2851f1302cc66a5d01469144badd1498.js"},,function(e,t,r){}]);
 //# sourceMappingURL=app.bundle.js.map
\ No newline at end of file

dist/app.css

@@ -109,8 +109,11 @@ input[name="search"] {
       display: inline-block;
       font-size: .9em;
       color: #8cbfd9;
-      padding: .3em .7em;
+      padding: .5em 1em;
       margin-right: .5em; }
+      .station-list .actions a.js-active {
+        font-weight: bold;
+        background-color: rgba(128, 128, 128, 0.1); }
   @media (min-width: 1000px) {
     .station-list {
       min-height: 100vh;

dist/app.css.map

-{"version":3,"sources":["webpack:///./src/style.scss"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,qBAAqB;;AAErB;AACA;AACA;AACA;AACA,qBAAqB;;AAErB;AACA;AACA;AACA;AACA,qBAAqB;;AAErB;AACA;AACA;AACA,yBAAyB;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,EAAE;;AAE1B;AACA;AACA,yCAAyC;AACzC;AACA;AACA;AACA,+BAA+B,EAAE;;AAEjC;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB;AACvB;AACA;AACA,iDAAiD;AACjD;AACA,wBAAwB;AACxB;AACA;AACA,wBAAwB;AACxB;AACA;AACA,qBAAqB;AACrB;AACA,oBAAoB;;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB;;AAEzB;AACA;AACA;AACA,oBAAoB;AACpB;AACA;AACA,uDAAuD;AACvD;AACA;AACA,oBAAoB;AACpB;AACA;AACA;AACA;AACA;AACA,yBAAyB;AACzB;AACA;AACA;AACA,2BAA2B,EAAE;;AAE7B;AACA;AACA,iCAAiC;AACjC;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA,yBAAyB,EAAE;;AAE3B;AACA,oBAAoB;AACpB;AACA;AACA;AACA,mBAAmB,EAAE;;AAErB;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA,uBAAuB,EAAE;;AAEzB;AACA,gBAAgB;;AAEhB;AACA;AACA;AACA;AACA;AACA,aAAa,EAAE;;AAEf;AACA,gBAAgB;;AAEhB;AACA;AACA;AACA;AACA,cAAc;;AAEd;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA,uBAAuB,EAAE;;AAEzB;AACA;AACA;AACA,sBAAsB;AACtB;AACA;AACA,oBAAoB,EAAE;AACtB;AACA;AACA,oBAAoB,EAAE;;AAEtB;AACA;AACA;AACA;AACA;AACA,cAAc;AACd;AACA,kBAAkB;;AAElB;AACA;AACA;AACA;AACA;AACA,kBAAkB;AAClB;AACA,wBAAwB;;AAExB;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA,kBAAkB,EAAE","file":"app.css","sourcesContent":["@font-face {\n  font-family: \"Cocogoose\";\n  src: url(ee56e6fb8331ee7376b3495d4adaf348.ttf) format(\"truetype\");\n  font-weight: 700;\n  font-style: normal; }\n\n@font-face {\n  font-family: \"Cocogoose\";\n  src: url(d85c699a2cf2aa2c04d034bcea9aa8a9.ttf) format(\"truetype\");\n  font-weight: 400;\n  font-style: normal; }\n\n@font-face {\n  font-family: \"Cocogoose\";\n  src: url(65c9ff8b3678f9f7b81da31fe2e01082.ttf) format(\"truetype\");\n  font-weight: 400;\n  font-style: italic; }\n\n* {\n  position: relative;\n  z-index: 50;\n  box-sizing: border-box; }\n\nbody {\n  padding: 0;\n  margin: 0;\n  background: #1a1a1a;\n  background-image: url(7028fcf693621f0b5cea1df93e47ce41.png);\n  color: #f2f2f2;\n  transition: .5s background-color;\n  position: relative;\n  font-family: \"Cocogoose\";\n  font-size: 14px; }\n  @media (min-width: 1000px) {\n    body:after {\n      content: 'Soma FM';\n      position: fixed;\n      z-index: 0;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 50vh;\n      background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));\n      text-align: right;\n      font-size: 13vw;\n      font-weight: 700;\n      color: rgba(191, 191, 191, 0.1);\n      box-sizing: border-box;\n      padding-right: 1vw;\n      display: flex;\n      align-items: flex-end;\n      justify-content: flex-end;\n      line-height: .9em; } }\n\n#soma {\n  display: grid;\n  grid-template-rows: minmax(25vh, auto); }\n  @media (min-width: 1000px) {\n    #soma {\n      grid-template-columns: 300px 1fr 300px;\n      grid-template-rows: auto; } }\n\n.channel-list {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  color: #e6e6e6; }\n  .channel-list li {\n    padding: .7em .5em .7em .5em;\n    display: flex;\n    align-items: center;\n    transition: 0.2s border-color, 0.2s background-color;\n    cursor: pointer;\n    border: 1px solid transparent;\n    border-radius: 5px; }\n    .channel-list li:not(.current-station):hover, .channel-list li.current-station {\n      border-color: gray;\n      background-color: rgba(128, 128, 128, 0.2); }\n    .channel-list li.current-station {\n      font-weight: bold; }\n    .channel-list li img {\n      height: 60px;\n      margin-right: 1em; }\n    .channel-list li a {\n      text-decoration: none;\n      color: inherit; }\n    .channel-list li.hidden {\n      display: none; }\n\ninput[name=\"search\"] {\n  display: block;\n  margin: 1em 0 1.5em;\n  width: 80%;\n  font-size: .9em;\n  padding: .5em 1em;\n  box-sizing: border-box; }\n\n.station-list {\n  background: black;\n  padding: 2em 1em 1em;\n  grid-row-start: 2; }\n  .station-list h3 {\n    padding: 3px 0;\n    border-bottom: 1px dotted rgba(255, 255, 255, 0.5); }\n  .station-list .actions {\n    display: flex;\n    padding: .4em 0; }\n    .station-list .actions a {\n      display: inline-block;\n      font-size: .9em;\n      color: #8cbfd9;\n      padding: .3em .7em;\n      margin-right: .5em; }\n  @media (min-width: 1000px) {\n    .station-list {\n      min-height: 100vh;\n      grid-row-start: auto; } }\n\n.station-container {\n  padding: 1em;\n  background: rgba(0, 0, 0, 0.5); }\n  .station-container a {\n    color: inherit; }\n  @media (min-width: 1000px) {\n    .station-container {\n      position: sticky;\n      top: 2em;\n      border-radius: 5px; } }\n\n.station-column {\n  grid-row-start: 1; }\n  @media (min-width: 1000px) {\n    .station-column {\n      grid-row-start: auto;\n      padding: 2em; } }\n\n.station-image-column {\n  display: none; }\n  @media (min-width: 1000px) {\n    .station-image-column {\n      grid-row-start: auto;\n      display: block;\n      padding: 2em 1em; } }\n\nimg[src=\"\"] {\n  display: none; }\n\n@media (min-width: 1000px) {\n  img.station-image {\n    max-width: 100%;\n    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);\n    position: sticky;\n    top: 2em; } }\n\n.hide-when-empty:empty {\n  display: none; }\n\np.station-description {\n  margin: 1em 0;\n  color: #e6e6e6;\n  font-style: italic;\n  clear: both; }\n\nh2.station-title {\n  font-size: 1.8em;\n  padding: 0;\n  margin: 0 0 .5em; }\n  @media (min-width: 600px) {\n    h2.station-title {\n      font-size: 2.5em; } }\n\nimg.station-thumbnail {\n  float: right;\n  height: 50px;\n  margin: 0 8px 8px 0; }\n  @media (min-width: 600px) {\n    img.station-thumbnail {\n      height: 100px; } }\n  @media (min-width: 1000px) {\n    img.station-thumbnail {\n      display: none; } }\n\na.station-link {\n  display: block;\n  margin: .7em 0;\n  font-size: .9em;\n  text-align: right;\n  opacity: .8; }\n  a.station-link[href=\"\"] {\n    display: none; }\n\n.star {\n  height: 18px;\n  width: 18px;\n  clip-path: polygon(50% 0%, 66% 30%, 98% 35%, 73% 57%, 79% 91%, 50% 75%, 21% 91%, 27% 57%, 2% 35%, 34% 30%);\n  background: rgba(128, 128, 128, 0.7);\n  cursor: pointer; }\n  .star.on {\n    background: #ffd500; }\n\n.channel-list .star {\n  position: absolute;\n  top: 6px;\n  right: 6px; }\n  @media (max-width: 1000px) {\n    .channel-list .star {\n      height: 25px;\n      width: 25px; } }\n"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"sources":["webpack:///./src/style.scss"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,qBAAqB;;AAErB;AACA;AACA;AACA;AACA,qBAAqB;;AAErB;AACA;AACA;AACA;AACA,qBAAqB;;AAErB;AACA;AACA;AACA,yBAAyB;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,EAAE;;AAE1B;AACA;AACA,yCAAyC;AACzC;AACA;AACA;AACA,+BAA+B,EAAE;;AAEjC;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB;AACvB;AACA;AACA,iDAAiD;AACjD;AACA,wBAAwB;AACxB;AACA;AACA,wBAAwB;AACxB;AACA;AACA,qBAAqB;AACrB;AACA,oBAAoB;;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB;;AAEzB;AACA;AACA;AACA,oBAAoB;AACpB;AACA;AACA,uDAAuD;AACvD;AACA;AACA,oBAAoB;AACpB;AACA;AACA;AACA;AACA;AACA,yBAAyB;AACzB;AACA;AACA,mDAAmD;AACnD;AACA;AACA;AACA,2BAA2B,EAAE;;AAE7B;AACA;AACA,iCAAiC;AACjC;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA,yBAAyB,EAAE;;AAE3B;AACA,oBAAoB;AACpB;AACA;AACA;AACA,mBAAmB,EAAE;;AAErB;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA,uBAAuB,EAAE;;AAEzB;AACA,gBAAgB;;AAEhB;AACA;AACA;AACA;AACA;AACA,aAAa,EAAE;;AAEf;AACA,gBAAgB;;AAEhB;AACA;AACA;AACA;AACA,cAAc;;AAEd;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA,uBAAuB,EAAE;;AAEzB;AACA;AACA;AACA,sBAAsB;AACtB;AACA;AACA,oBAAoB,EAAE;AACtB;AACA;AACA,oBAAoB,EAAE;;AAEtB;AACA;AACA;AACA;AACA;AACA,cAAc;AACd;AACA,kBAAkB;;AAElB;AACA;AACA;AACA;AACA;AACA,kBAAkB;AAClB;AACA,wBAAwB;;AAExB;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA,kBAAkB,EAAE","file":"app.css","sourcesContent":["@font-face {\n  font-family: \"Cocogoose\";\n  src: url(ee56e6fb8331ee7376b3495d4adaf348.ttf) format(\"truetype\");\n  font-weight: 700;\n  font-style: normal; }\n\n@font-face {\n  font-family: \"Cocogoose\";\n  src: url(d85c699a2cf2aa2c04d034bcea9aa8a9.ttf) format(\"truetype\");\n  font-weight: 400;\n  font-style: normal; }\n\n@font-face {\n  font-family: \"Cocogoose\";\n  src: url(65c9ff8b3678f9f7b81da31fe2e01082.ttf) format(\"truetype\");\n  font-weight: 400;\n  font-style: italic; }\n\n* {\n  position: relative;\n  z-index: 50;\n  box-sizing: border-box; }\n\nbody {\n  padding: 0;\n  margin: 0;\n  background: #1a1a1a;\n  background-image: url(7028fcf693621f0b5cea1df93e47ce41.png);\n  color: #f2f2f2;\n  transition: .5s background-color;\n  position: relative;\n  font-family: \"Cocogoose\";\n  font-size: 14px; }\n  @media (min-width: 1000px) {\n    body:after {\n      content: 'Soma FM';\n      position: fixed;\n      z-index: 0;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 50vh;\n      background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));\n      text-align: right;\n      font-size: 13vw;\n      font-weight: 700;\n      color: rgba(191, 191, 191, 0.1);\n      box-sizing: border-box;\n      padding-right: 1vw;\n      display: flex;\n      align-items: flex-end;\n      justify-content: flex-end;\n      line-height: .9em; } }\n\n#soma {\n  display: grid;\n  grid-template-rows: minmax(25vh, auto); }\n  @media (min-width: 1000px) {\n    #soma {\n      grid-template-columns: 300px 1fr 300px;\n      grid-template-rows: auto; } }\n\n.channel-list {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  color: #e6e6e6; }\n  .channel-list li {\n    padding: .7em .5em .7em .5em;\n    display: flex;\n    align-items: center;\n    transition: 0.2s border-color, 0.2s background-color;\n    cursor: pointer;\n    border: 1px solid transparent;\n    border-radius: 5px; }\n    .channel-list li:not(.current-station):hover, .channel-list li.current-station {\n      border-color: gray;\n      background-color: rgba(128, 128, 128, 0.2); }\n    .channel-list li.current-station {\n      font-weight: bold; }\n    .channel-list li img {\n      height: 60px;\n      margin-right: 1em; }\n    .channel-list li a {\n      text-decoration: none;\n      color: inherit; }\n    .channel-list li.hidden {\n      display: none; }\n\ninput[name=\"search\"] {\n  display: block;\n  margin: 1em 0 1.5em;\n  width: 80%;\n  font-size: .9em;\n  padding: .5em 1em;\n  box-sizing: border-box; }\n\n.station-list {\n  background: black;\n  padding: 2em 1em 1em;\n  grid-row-start: 2; }\n  .station-list h3 {\n    padding: 3px 0;\n    border-bottom: 1px dotted rgba(255, 255, 255, 0.5); }\n  .station-list .actions {\n    display: flex;\n    padding: .4em 0; }\n    .station-list .actions a {\n      display: inline-block;\n      font-size: .9em;\n      color: #8cbfd9;\n      padding: .5em 1em;\n      margin-right: .5em; }\n      .station-list .actions a.js-active {\n        font-weight: bold;\n        background-color: rgba(128, 128, 128, 0.1); }\n  @media (min-width: 1000px) {\n    .station-list {\n      min-height: 100vh;\n      grid-row-start: auto; } }\n\n.station-container {\n  padding: 1em;\n  background: rgba(0, 0, 0, 0.5); }\n  .station-container a {\n    color: inherit; }\n  @media (min-width: 1000px) {\n    .station-container {\n      position: sticky;\n      top: 2em;\n      border-radius: 5px; } }\n\n.station-column {\n  grid-row-start: 1; }\n  @media (min-width: 1000px) {\n    .station-column {\n      grid-row-start: auto;\n      padding: 2em; } }\n\n.station-image-column {\n  display: none; }\n  @media (min-width: 1000px) {\n    .station-image-column {\n      grid-row-start: auto;\n      display: block;\n      padding: 2em 1em; } }\n\nimg[src=\"\"] {\n  display: none; }\n\n@media (min-width: 1000px) {\n  img.station-image {\n    max-width: 100%;\n    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);\n    position: sticky;\n    top: 2em; } }\n\n.hide-when-empty:empty {\n  display: none; }\n\np.station-description {\n  margin: 1em 0;\n  color: #e6e6e6;\n  font-style: italic;\n  clear: both; }\n\nh2.station-title {\n  font-size: 1.8em;\n  padding: 0;\n  margin: 0 0 .5em; }\n  @media (min-width: 600px) {\n    h2.station-title {\n      font-size: 2.5em; } }\n\nimg.station-thumbnail {\n  float: right;\n  height: 50px;\n  margin: 0 8px 8px 0; }\n  @media (min-width: 600px) {\n    img.station-thumbnail {\n      height: 100px; } }\n  @media (min-width: 1000px) {\n    img.station-thumbnail {\n      display: none; } }\n\na.station-link {\n  display: block;\n  margin: .7em 0;\n  font-size: .9em;\n  text-align: right;\n  opacity: .8; }\n  a.station-link[href=\"\"] {\n    display: none; }\n\n.star {\n  height: 18px;\n  width: 18px;\n  clip-path: polygon(50% 0%, 66% 30%, 98% 35%, 73% 57%, 79% 91%, 50% 75%, 21% 91%, 27% 57%, 2% 35%, 34% 30%);\n  background: rgba(128, 128, 128, 0.7);\n  cursor: pointer; }\n  .star.on {\n    background: #ffd500; }\n\n.channel-list .star {\n  position: absolute;\n  top: 6px;\n  right: 6px; }\n  @media (max-width: 1000px) {\n    .channel-list .star {\n      height: 25px;\n      width: 25px; } }\n"],"sourceRoot":""}
\ No newline at end of file

dist/index.html

@@ -15,8 +15,8 @@
 		<div class="station-list">
 			<h3>Stations</h3>
 			<nav class="actions">
-				<a href="#" id="js-show-only-favorites">favorites</a>
-				<a href="#" id="js-show-all">all</a>
+				<a href="#" id="js-show-only-favorites">Favorites</a>
+				<a href="#" id="js-show-all">All</a>
 			</nav>
 			<input type="text" name="search" id="station-search" placeholder="...search">
 			<ul class="channel-list js-filter-by-search"></ul>

src/index.html

@@ -15,8 +15,8 @@
 		<div class="station-list">
 			<h3>Stations</h3>
 			<nav class="actions">
-				<a href="#" id="js-show-only-favorites">favorites</a>
-				<a href="#" id="js-show-all">all</a>
+				<a href="#" id="js-show-only-favorites">Favorites</a>
+				<a href="#" id="js-show-all">All</a>
 			</nav>
 			<input type="text" name="search" id="station-search" placeholder="...search">
 			<ul class="channel-list js-filter-by-search"></ul>

src/index.js

@@ -13,7 +13,7 @@ var channelList = s.querySelector('.channel-list');
 var store = new Store();
 
 var fetchChannels = new Promise ( function(resolve) {
-	fetch('http://somafm.com/channels.xml',{
+	fetch('https://somafm.com/channels.xml',{
 		mode: 'cors'
 	}).then( resp => {
 		resp.text().then( xml => {
@@ -83,6 +83,13 @@ function removeComments (str){
 	return str;
 }
 
+var showOnlyFavorites = store.get('only-favorites');
+if( showOnlyFavorites )
+	document.getElementById('js-show-only-favorites').classList.add('js-active');
+else
+	document.getElementById('js-show-all').classList.add('js-active');
+
+
 fetchChannels.then( xml => {
 	var channelsFromXml = xml.getElementsByTagName('channel');
 	for( let i=0;i<channelsFromXml.length;i++){
@@ -126,7 +133,6 @@ fetchChannels.then( xml => {
 			}
 		});
 
-		var showOnlyFavorites = store.get('only-favorites');
 		if( store.isInArray('favorites', slug) ) {
 			star.classList.add('on');
 		} else if (showOnlyFavorites) {
@@ -175,7 +181,12 @@ searchInput.addEventListener('keyup', function() {
 	filterbysearch.search( this.value );
 });
 
-document.getElementById('js-show-only-favorites').addEventListener('click',function(){
+var channelFilters = {
+	favorites: document.getElementById('js-show-only-favorites'),
+	all: document.getElementById('js-show-all'),
+}
+
+channelFilters.favorites.addEventListener('click',function(){
 	var stars = document.querySelectorAll('.channel-list li .star');
 	for(let i=0;i<stars.length;i++){
 		let parent = stars[i].parentElement;
@@ -189,11 +200,16 @@ document.getElementById('js-show-only-favorites').addEventListener('click',funct
 		}
 	}
 	store.save('only-favorites',true);
+	this.classList.add('js-active');
+	channelFilters.all.classList.remove('js-active');
+
 });
-document.getElementById('js-show-all').addEventListener('click',function(){
+channelFilters.all.addEventListener('click',function(){
 	var channels = document.querySelectorAll('.channel-list li');
 	for(let i=0;i<channels.length;i++){
 		channels[i].classList.remove('hidden');
 	}
 	store.remove('only-favorites');
+	this.classList.add('js-active');
+	channelFilters.favorites.classList.remove('js-active');
 });
\ No newline at end of file

src/style.scss

@@ -128,8 +128,13 @@ input[name="search"] {
 			display: inline-block;
 			font-size: .9em;
 			color: hsl(200, 50%, 70%);
-			padding: .3em .7em;
+			padding: .5em 1em;
 			margin-right: .5em;
+
+			&.js-active {
+				font-weight: bold;
+				background-color: hsla(0, 0%, 50%, .1);
+			}
 		}
 	}