More typescripting

public/AppController.js

@@ -17,7 +17,7 @@ appModel.on("change", function (model) {
     }
     router.navigate(path);
 });
-$("#searchForm").submit(function (e) {
+$("#searchForm").on("submit", function (e) {
     e.preventDefault();
     let filterTerm = filterBoxView.val();
     appModel.set({ filterTerm });

public/AppRouter.js

@@ -6,7 +6,7 @@ let AppRouter = Backbone.Router.extend({
     }
 });
 let router = new AppRouter;
-router.on("route:user", user => appModel.set({ user }));
+router.on("route:user", (user) => appModel.set({ user }));
 router.on("route:search", (user, filterTerm) => appModel.set({
     user,
     filterTerm

public/index.js

@@ -1,4 +1,4 @@
-$("#userForm").submit(function (e) {
+$("#userForm").on("submit", function (e) {
     e.preventDefault();
     let username = $("#userInput").val();
     document.location.href = `graph.html#/user/${username}`;

public/views/FeedbackDialogView.js

@@ -1,2 +1,2 @@
-$("#feedback").click(() => $("#feedback-dialog").toggle());
-$("#feedback-dialog .close").click(() => $("#feedback-dialog").hide());
+$("#feedback").on("click", () => $("#feedback-dialog").toggle());
+$("#feedback-dialog .close").on("click", () => $("#feedback-dialog").hide());

public/views/FlotScrobbleGraphView.js

@@ -59,7 +59,7 @@ var plot_flot_series = function (flot_series, minTime, maxTime) {
             mode: "time",
             timeformat: "%d %b %y",
             tickLength: 0,
-            zoomRange: [ONE_DAY_IN_MS, maxTime - minTime],
+            zoomRange: [ONE_DAY_IN_MS, maxTime.getTime() - minTime.getTime()],
             panRange: [minTime, maxTime],
             position: "top"
         },

public/views/LegendView.js

@@ -26,4 +26,4 @@ class LegendView extends Backbone.View {
 const legendView = new LegendView({
     el: "#legend_wrap",
 });
-legendModel.on("change:artistColors", (model, artistColors) => legendView.render());
+legendModel.on("change:artistColors", () => legendView.render());

public/views/ShareDialogView.js

@@ -1,5 +1,5 @@
 $("#share_link").click(() => $("#share_link").select());
 $("#share_link").val(document.URL);
 $(window).on("hashchange", () => $("#share_link").val(document.URL));
-$("#share-btn").click(() => $("#share-dialog").toggle());
-$("#share-dialog .close").click(() => $("#share-dialog").hide());
+$("#share-btn").on("click", () => $("#share-dialog").toggle());
+$("#share-dialog .close").on("click", () => $("#share-dialog").hide());

public/views/ToolTipView.js

@@ -55,7 +55,7 @@ $("#flot_container").on("plothover plotclick", function (event, pos, item) {
         toolTipView.visible = false;
     }
 });
-$("#flot_container").mouseout(function () {
+$("#flot_container").on("mouseout", function () {
     toolTipView.remove();
     // @ts-ignore
     if (window.plot != null) {

src/AppController.ts

@@ -19,7 +19,7 @@ appModel.on("change", function (model) {
   router.navigate(path);
 });
 
-$("#searchForm").submit(function (e) {
+$("#searchForm").on("submit", function (e) {
   e.preventDefault();
   let filterTerm = filterBoxView.val();
   appModel.set({ filterTerm });

src/AppRouter.ts

@@ -7,9 +7,9 @@ let AppRouter = Backbone.Router.extend({
 });
 let router = new AppRouter;
 
-router.on("route:user", user => appModel.set({ user }));
+router.on("route:user", (user: string) => appModel.set({ user }));
 
-router.on("route:search", (user, filterTerm) =>
+router.on("route:search", (user: string, filterTerm: string) =>
   appModel.set({
     user,
     filterTerm

src/index.ts

@@ -1,4 +1,4 @@
-$("#userForm").submit(function (e) {
+$("#userForm").on("submit", function (e) {
   e.preventDefault();
   let username = $("#userInput").val();
   document.location.href = `graph.html#/user/${username}`;

src/models/AppModel.ts

@@ -1,7 +1,7 @@
 // Global state that I couldn't find a more specific place for
 // It's all used to form the path of the URL.
 class AppModel extends Backbone.Model {
-  user() {
+  user(): string | null {
     return this.get("user");
   }
   initialize() {

src/models/RequestQueue.ts

@@ -7,10 +7,10 @@
 const rate_limit_ms = 500;
 
 class RequestQueue extends Backbone.Model {
-  queue = [];
+  queue: LastFMRequest[] = [];
   currentlyEmptyingQueue = false;
 
-  add(req) {
+  add(req: LastFMRequest) {
     this.queue.push(req);
     if (!this.currentlyEmptyingQueue) {
       this.doAnotherRequest();

src/views/DrawingThrobberView.ts

@@ -12,4 +12,4 @@ class DrawingThrobberView extends Backbone.View {
 
 const drawingThrobberView = new DrawingThrobberView();
 
-graphViewModel.on("change:isDrawing", (model, isDrawing) => drawingThrobberView.render());
+graphViewModel.on("change:isDrawing", (model: any, isDrawing: boolean) => drawingThrobberView.render());

src/views/FeedbackDialogView.ts

@@ -1,2 +1,2 @@
-$("#feedback").click(() => $("#feedback-dialog").toggle());
-$("#feedback-dialog .close").click(() => $("#feedback-dialog").hide());
+$("#feedback").on("click", () => $("#feedback-dialog").toggle());
+$("#feedback-dialog .close").on("click", () => $("#feedback-dialog").hide());

src/views/FilterBoxView.ts

@@ -15,7 +15,7 @@ const filterBoxView = new FilterBoxView({
   el: "#searchForm",
 });
 
-graphViewModel.on("change:isDrawn", (model, isDrawn) => {
+graphViewModel.on("change:isDrawn", (model: any, isDrawn: boolean) => {
   filterBoxView.isDrawn = isDrawn;
   filterBoxView.render()
 });

src/views/FlotScrobbleGraphView.ts

@@ -56,7 +56,7 @@ var construct_flot_series = function (scrobbles: Scrobble[]) {
   return series;
 };
 
-var plot_flot_series = function (flot_series, minTime, maxTime) {
+var plot_flot_series = function (flot_series, minTime: Date, maxTime: Date) {
   let ONE_DAY_IN_MS = 1000 * 60 * 60 * 24;
   // Don't have types for this old version of flot.
   // @ts-ignore
@@ -67,7 +67,7 @@ var plot_flot_series = function (flot_series, minTime, maxTime) {
       mode: "time",
       timeformat: "%d %b %y",
       tickLength: 0,
-      zoomRange: [ONE_DAY_IN_MS, maxTime - minTime],
+      zoomRange: [ONE_DAY_IN_MS, maxTime.getTime() - minTime.getTime()],
       panRange: [minTime, maxTime],
       position: "top"
     },

src/views/LegendView.ts

@@ -29,4 +29,4 @@ const legendView = new LegendView({
   el: "#legend_wrap",
 });
 
-legendModel.on("change:artistColors", (model, artistColors) => legendView.render());
+legendModel.on("change:artistColors", () => legendView.render());

src/views/ShareDialogView.ts

@@ -3,5 +3,5 @@ $("#share_link").click(() => $("#share_link").select());
 $("#share_link").val(document.URL);
 $(window).on("hashchange", () => $("#share_link").val(document.URL));
 
-$("#share-btn").click(() => $("#share-dialog").toggle());
-$("#share-dialog .close").click(() => $("#share-dialog").hide());
+$("#share-btn").on("click", () => $("#share-dialog").toggle());
+$("#share-dialog .close").on("click", () => $("#share-dialog").hide());

src/views/ToolTipView.ts

@@ -58,7 +58,7 @@ $("#flot_container").on("plothover plotclick", function (event, pos, item) {
   }
 });
 
-$("#flot_container").mouseout(function () {
+$("#flot_container").on("mouseout", function () {
   toolTipView.remove();
   // @ts-ignore
   if (window.plot != null) {