Commit ebc9b9ec authored by Jake Paris's avatar Jake Paris

Improved favorites/all toggle visibility a little

Addresses #6
parent ecc1d886
!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
This diff is collapsed.
......@@ -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;
......
{"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
......@@ -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>
......
......@@ -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>
......
......@@ -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
......@@ -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);
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment