fix: split up javascript files

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.6.2 –
+### Fixed
+- Split up javascript file
+  [#67](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/67) @onny
+
 ## 0.6.2 – 2018-08-11
 ### Added
 - Remember last menu state

js/main.js

@@ -1,21 +1,7 @@
 var MODULE = (function (radio) {
 
-  var last_volume = 0;
-
   $(document).ready(function () {
 
-      // Player icon pause/stop
-      var vid = document.getElementById("player");
-      vid.onwaiting = function () {
-          $('#playbutton').attr("class", "buffering");
-      };
-       vid.onplaying = function () {
-          $('#playbutton').attr("class", "pause");
-      };
-      vid.onpause = function () {
-         $('#playbutton').attr("class", "play");
-      };
-
       // Scroll event handler
       $(window).scroll(function(){
         var station_list = $("#app-content-files");
@@ -45,22 +31,6 @@ var MODULE = (function (radio) {
   searchTimeout = null;
   var scheduled;
 
-  radio.isElementOverflowing = function(element) {
-  	var overflowX = element.offsetWidth < element.scrollWidth,
-  		overflowY = element.offsetHeight < element.scrollHeight;
-
-  	return (overflowX || overflowY);
-  }
-
-  radio.wrapContentsInMarquee = function(element) {
-    var marquee = document.createElement('marquee'),
-    contents = element.innerText;
-
-    marquee.innerText = contents;
-    element.innerHTML = '';
-    element.appendChild(marquee);
-  }
-
   /* ==============
   //   EVENTS    //
   /===============*/
@@ -94,16 +64,6 @@ var MODULE = (function (radio) {
     radio.action_favorite(stationid);
   });
 
-  /* Playbutton click */
-  $('#playbutton').click(function() {
-    var music = document.getElementById('player');
-    if (music.paused && $("#player").attr("src") != "") {
-      music.play();
-    } else {
-      music.pause();
-    }
-  });
-
   /* ==============
   //   ACTIONS    //
   /===============*/
@@ -167,19 +127,6 @@ var MODULE = (function (radio) {
     });
   };
 
-  radio.action_play = function(stationid){
-    $.ajax({
-      method: "GET",
-      url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid,
-      dataType: 'json',
-      success: function(data){
-        var streamurl = data['url'];
-        $("#player").attr("src", streamurl);
-        $('#player').trigger('play');
-      }
-    });
-  };
-
   radio.render_results = function(data){
 
     var baseUrl = OC.generateUrl('/apps/radio');
@@ -303,133 +250,5 @@ var MODULE = (function (radio) {
     radio.switch_menu(0);
   });
 
-  radio.debounce = function(func, wait, immediate) {
-    var timeout;
-    return function() {
-      var context = this,
-        args = arguments;
-      var later = function() {
-        timeout = null;
-        if (!immediate) func.apply(context, args);
-      };
-      var callNow = immediate && !timeout;
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-      if (callNow) func.apply(context, args);
-    };
-  };
-
-  // Volume slider
-  $('#volumeslider').slider({
-    orientation: "horizontal",
-    value: player.volume,
-    min: 0,
-    max: 1,
-    range: 'min',
-    animate: true,
-    step: .1,
-    slide: function(e, ui) {
-      player.volume = ui.value;
-      if (ui.value < 0.1) {
-        $("#volumeicon").removeClass();
-        $("#volumeicon").attr("class","silent");
-      }
-      if (ui.value > 0.5) {
-        $("#volumeicon").removeClass();
-        $("#volumeicon").attr("class","full");
-      }
-      if (ui.value <= 0.5 && ui.value >= 0.1) {
-        $("#volumeicon").removeClass();
-        $("#volumeicon").attr("class","mid");
-      }
-    }
-  });
-
-  $("#volumeslider").on("slidestop", radio.debounce(function(e, ui) {
-      radio.save_volume_state(ui.value);
-    }, 700)
-  );
-
-$("#volumeicon").on("click", function(e) {
-  if (player.volume > 0) {
-    last_volume = player.volume;
-    player.volume = 0;
-    $('#volumeslider').slider('value',0);
-    radio.save_volume_state(0);
-  } else {
-    if (!last_volume == 0) {
-      player.volume = last_volume;
-      $('#volumeslider').slider('value',last_volume);
-      radio.save_volume_state(last_volume);
-    } else {
-      player.volume = 1;
-      $('#volumeslider').slider('value',1);
-      radio.save_volume_state(1);
-    }
-  }
-  if (player.volume < 0.1) {
-    $("#volumeicon").removeClass();
-    $("#volumeicon").attr("class","silent");
-  }
-  if (player.volume > 0.5) {
-    $("#volumeicon").removeClass();
-    $("#volumeicon").attr("class","full");
-  }
-  if (player.volume <= 0.5 && player.volume >= 0.1) {
-    $("#volumeicon").removeClass();
-    $("#volumeicon").attr("class","mid");
-  }
-});
-
-  radio.load_volume_state = function(){
-    var volume_state = 0;
-    var baseUrl = OC.generateUrl('/apps/radio/getVolumeState');
-    $.get(baseUrl, function ( data ) {
-      if ("volume_state" in data) {
-        volume_state = data["volume_state"];
-        if (volume_state == "") {
-          player.volume = 1;
-          last_volume = 1;
-          $('#volumeslider').slider('value',1);
-        } else {
-          last_volume = volume_state;
-          player.volume = Number(volume_state);
-          $('#volumeslider').slider('value',Number(volume_state));
-          if (volume_state < 0.1) {
-            $("#volumeicon").removeClass();
-            $("#volumeicon").attr("class","silent");
-          }
-          if (volume_state > 0.5) {
-            $("#volumeicon").removeClass();
-            $("#volumeicon").attr("class","full");
-          }
-          if (volume_state <= 0.5 && volume_state >= 0.1) {
-            $("#volumeicon").removeClass();
-            $("#volumeicon").attr("class","mid");
-          }
-        }
-      }
-      return true;
-    });
-  }
-
-  radio.save_volume_state = function(volume_state) {
-    var baseUrl = OC.generateUrl('/apps/radio/saveVolumeState');
-    var settings = {
-      "volume_state": volume_state
-    };
-    $.ajax({
-            url: baseUrl,
-            method: 'POST',
-            contentType: 'application/json',
-            data: JSON.stringify(settings)
-    }).done(function(data){
-      return true;
-    });
-  }
-
-  // Load volume state
-  radio.load_volume_state();
-
   return radio;
 }(MODULE || {}));

js/player.js

@@ -0,0 +1,185 @@
+var MODULE = (function (radio) {
+
+  var last_volume = 0;
+
+  // Player icon pause/stop
+  var vid = document.getElementById("player");
+  vid.onwaiting = function () {
+      $('#playbutton').attr("class", "buffering");
+  };
+   vid.onplaying = function () {
+      $('#playbutton').attr("class", "pause");
+  };
+  vid.onpause = function () {
+     $('#playbutton').attr("class", "play");
+  };
+
+  radio.isElementOverflowing = function(element) {
+  	var overflowX = element.offsetWidth < element.scrollWidth,
+  		overflowY = element.offsetHeight < element.scrollHeight;
+
+  	return (overflowX || overflowY);
+  }
+
+  radio.wrapContentsInMarquee = function(element) {
+    var marquee = document.createElement('marquee'),
+    contents = element.innerText;
+
+    marquee.innerText = contents;
+    element.innerHTML = '';
+    element.appendChild(marquee);
+  }
+
+  /* Playbutton click */
+  $('#playbutton').click(function() {
+    var music = document.getElementById('player');
+    if (music.paused && $("#player").attr("src") != "") {
+      music.play();
+    } else {
+      music.pause();
+    }
+  });
+
+  radio.action_play = function(stationid){
+    $.ajax({
+      method: "GET",
+      url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid,
+      dataType: 'json',
+      success: function(data){
+        var streamurl = data['url'];
+        $("#player").attr("src", streamurl);
+        $('#player').trigger('play');
+      }
+    });
+  };
+
+  radio.debounce = function(func, wait, immediate) {
+    var timeout;
+    return function() {
+      var context = this,
+        args = arguments;
+      var later = function() {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
+      };
+      var callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+      if (callNow) func.apply(context, args);
+    };
+  };
+
+  // Volume slider
+  $('#volumeslider').slider({
+    orientation: "horizontal",
+    value: player.volume,
+    min: 0,
+    max: 1,
+    range: 'min',
+    animate: true,
+    step: .1,
+    slide: function(e, ui) {
+      player.volume = ui.value;
+      if (ui.value < 0.1) {
+        $("#volumeicon").removeClass();
+        $("#volumeicon").attr("class","silent");
+      }
+      if (ui.value > 0.5) {
+        $("#volumeicon").removeClass();
+        $("#volumeicon").attr("class","full");
+      }
+      if (ui.value <= 0.5 && ui.value >= 0.1) {
+        $("#volumeicon").removeClass();
+        $("#volumeicon").attr("class","mid");
+      }
+    }
+  });
+
+  $("#volumeslider").on("slidestop", radio.debounce(function(e, ui) {
+      radio.save_volume_state(ui.value);
+    }, 700)
+  );
+
+  $("#volumeicon").on("click", function(e) {
+    if (player.volume > 0) {
+      last_volume = player.volume;
+      player.volume = 0;
+      $('#volumeslider').slider('value',0);
+      radio.save_volume_state(0);
+    } else {
+      if (!last_volume == 0) {
+        player.volume = last_volume;
+        $('#volumeslider').slider('value',last_volume);
+        radio.save_volume_state(last_volume);
+      } else {
+        player.volume = 1;
+        $('#volumeslider').slider('value',1);
+        radio.save_volume_state(1);
+      }
+    }
+    if (player.volume < 0.1) {
+      $("#volumeicon").removeClass();
+      $("#volumeicon").attr("class","silent");
+    }
+    if (player.volume > 0.5) {
+      $("#volumeicon").removeClass();
+      $("#volumeicon").attr("class","full");
+    }
+    if (player.volume <= 0.5 && player.volume >= 0.1) {
+      $("#volumeicon").removeClass();
+      $("#volumeicon").attr("class","mid");
+    }
+  });
+
+  radio.load_volume_state = function(){
+    var volume_state = 0;
+    var baseUrl = OC.generateUrl('/apps/radio/getVolumeState');
+    $.get(baseUrl, function ( data ) {
+      if ("volume_state" in data) {
+        volume_state = data["volume_state"];
+        if (volume_state == "") {
+          player.volume = 1;
+          last_volume = 1;
+          $('#volumeslider').slider('value',1);
+        } else {
+          last_volume = volume_state;
+          player.volume = Number(volume_state);
+          $('#volumeslider').slider('value',Number(volume_state));
+          if (volume_state < 0.1) {
+            $("#volumeicon").removeClass();
+            $("#volumeicon").attr("class","silent");
+          }
+          if (volume_state > 0.5) {
+            $("#volumeicon").removeClass();
+            $("#volumeicon").attr("class","full");
+          }
+          if (volume_state <= 0.5 && volume_state >= 0.1) {
+            $("#volumeicon").removeClass();
+            $("#volumeicon").attr("class","mid");
+          }
+        }
+      }
+      return true;
+    });
+  }
+
+  radio.save_volume_state = function(volume_state) {
+    var baseUrl = OC.generateUrl('/apps/radio/saveVolumeState');
+    var settings = {
+      "volume_state": volume_state
+    };
+    $.ajax({
+            url: baseUrl,
+            method: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify(settings)
+    }).done(function(data){
+      return true;
+    });
+  }
+
+  // Load volume state
+  radio.load_volume_state();
+
+  return radio;
+}(MODULE || {}));

templates/main.php

@@ -2,6 +2,7 @@
   style('radio', 'main');
   script('radio', 'main');
   script('radio', 'navigation');
+  script('radio', 'player');  
 ?>
 
     <div id="content" class="app-files" role="main">