Add URL slugs to the CloudPebble IDE JavaScript

ide/static/ide/js/cloudpebble.js

@@ -38,6 +38,7 @@ CloudPebble.Init = function() {
         CloudPebble.Settings.Init();
         CloudPebble.GitHub.Init();
         CloudPebble.Documentation.Init();
+        CloudPebble.Locations.Init();
 
         CloudPebble.ProgressBar.Hide();
 

ide/static/ide/js/compile.js

@@ -162,6 +162,8 @@ CloudPebble.Compile = (function() {
             return;
         }
 
+        CloudPebble.Locations.Set('compile');
+
         update_build_history(pane);
         CloudPebble.Sidebar.SetActivePane(pane, 'compile');
         CloudPebble.ProgressBar.Show();
@@ -702,6 +704,8 @@ CloudPebble.Compile = (function() {
         },
         Init: function() {
             init();
+
+            CloudPebble.Locations.Add('compile', show_compile_pane);
         },
         RunBuild: function(callback) {
             run_build(callback);

ide/static/ide/js/editor.js

@@ -6,10 +6,12 @@ CloudPebble.Editor = (function() {
     var is_fullscreen = false;
 
     var add_source_file = function(file) {
-        CloudPebble.Sidebar.AddSourceFile(file, function() {
+        CloudPebble.Locations.Add("file/" + file.id,function() {
             edit_source_file(file);
         });
 
+        CloudPebble.Sidebar.AddSourceFile(file);
+
         project_source_files[file.name] = file;
         // If we're adding that one JS file, remove the link to add it.
         // (this arguably intrudes upon the sidebar's domain, but...)
@@ -19,6 +21,7 @@ CloudPebble.Editor = (function() {
     };
 
     var edit_source_file = function(file) {
+        CloudPebble.Locations.Set('file/' + file.id);
         // See if we already had it open.
         CloudPebble.Sidebar.SuspendActive();
         if(CloudPebble.Sidebar.Restore('source-'+file.id)) {

ide/static/ide/js/github.js

@@ -10,6 +10,8 @@ CloudPebble.GitHub = (function() {
 
     var show_github_pane = function() {
         if(!USER_SETTINGS.github) return;
+        CloudPebble.Locations.Set('github');
+
         CloudPebble.Sidebar.SuspendActive();
         if(CloudPebble.Sidebar.Restore("github")) {
             return;
@@ -242,6 +244,8 @@ CloudPebble.GitHub = (function() {
                 $('#sidebar-pane-github').addClass('disabled');
                 CloudPebble.Sidebar.SetPopover('github', '', 'GitHub integration can be enabled in your user settings by linking a GitHub account.')
             }
+
+            CloudPebble.Locations.Add('github', show_github_pane);
         },
         Show: function() {
             show_github_pane();

ide/static/ide/js/locations.js

@@ -0,0 +1,43 @@
+CloudPebble.Locations = (function() {
+    var slugs = {};
+
+    var activate_current = function() {
+        var location = get_location();
+
+        if(slugs[location]) {
+            slugs[location]();
+        }
+    };
+
+    var get_location = function() {
+        var location = window.location.hash;
+
+        return location.substr(1);
+    };
+
+    var set_location = function(slug) {
+        if(slug == get_location()) return;
+
+        window.location.hash = slug;
+    };
+
+    return {
+        Init: function() {
+            activate_current();
+
+            $(window).on('hashchange', function() {
+                activate_current();
+            });
+        },
+        Add: function(slug, func) {
+            if(get_location() == slug) {
+                func();
+            }
+
+            slugs[slug] = func;
+        },
+        Set: function(slug) {
+            set_location(slug);
+        }
+    }
+})()

ide/static/ide/js/resources.js

@@ -2,9 +2,12 @@ CloudPebble.Resources = (function() {
     var project_resources = {};
 
     var add_resource = function(resource) {
-        var li = CloudPebble.Sidebar.AddResource(resource, function() {
+        CloudPebble.Locations.Add('res/' + resource.id, function() {
             edit_resource(resource);
         });
+
+        var li = CloudPebble.Sidebar.AddResource(resource);
+
         update_resource(resource);
         CloudPebble.Settings.AddResource(resource);
     };
@@ -136,6 +139,7 @@ CloudPebble.Resources = (function() {
     };
 
     var edit_resource = function(resource) {
+        //CloudPebble.Locations.Set('res/' + resource.id);
         CloudPebble.Sidebar.SuspendActive();
         if(CloudPebble.Sidebar.Restore('resource-' + resource.id)) return;
         ga('send', 'event', 'resource', 'open');
@@ -319,6 +323,7 @@ CloudPebble.Resources = (function() {
     };
 
     var create_new_resource = function() {
+        CloudPebble.Locations.Set('new/resource');
         CloudPebble.Sidebar.SuspendActive();
         if(CloudPebble.Sidebar.Restore('new-resource')) return;
         var pane = prepare_resource_pane();
@@ -359,6 +364,8 @@ CloudPebble.Resources = (function() {
         },
         Init: function() {
             init();
+
+            CloudPebble.Locations.Add('new/resource', create_new_resource);
         },
         Create: function() {
             create_new_resource();

ide/static/ide/js/settings.js

@@ -3,10 +3,13 @@ CloudPebble.Settings = (function() {
     var shared_pane = null;
 
     var show_settings_pane = function() {
+        CloudPebble.Locations.Set('settings');
+
         CloudPebble.Sidebar.SuspendActive();
         if(CloudPebble.Sidebar.Restore("settings")) {
             return;
         }
+
         ga('send', 'event', 'project', 'load settings');
         var pane = settings_template;
         shared_pane = pane;
@@ -268,6 +271,7 @@ CloudPebble.Settings = (function() {
         },
         Init: function() {
             settings_template = $('#settings-pane-template').remove().removeClass('hide');
+            CloudPebble.Locations.Add('settings', show_settings_pane);
         },
         AddResource: function(resource) {
             add_resource(resource);

ide/static/ide/js/sidebar.js

@@ -95,25 +95,25 @@ CloudPebble.Sidebar = (function() {
             set_main_pane(pane, id, restore_function, destroy_function);
             set_active_menu_entry(id);
         },
-        AddResource: function(resource, on_click) {
+        AddResource: function(resource) {
             var end = $('#end-resources-' + resource.kind);
             if(!end.length) {
                 // Create an appropriate section
                 var res_end = $('#end-resources');
                 end = $('<li id="end-resources-' + resource.kind + '" class="divider">');
                 res_end.before(end);
             }
-            var link = $('<a href="#"></a>').text(resource.file_name).click(on_click);
+            var link = $('<a></a>').text(resource.file_name).attr('href', '#res/' + resource.id);
             var li = $('<li id="sidebar-pane-resource-' + resource.id + '">');
             li.append(link);
             end.before(li);
             return li;
         },
-        AddSourceFile: function(file, on_click) {
+        AddSourceFile: function(file) {
             var end = $('#end-source-files');
-            var link = $('<a href="#"></a>');
+            var link = $('<a></a>');
             link.text(file.name + ' ');
-            link.click(on_click);
+            link.attr('href', '#file/' + file.id);
             var li = $('<li id="sidebar-pane-source-'+file.id+'">');
             li.append(link);
             end.before(li);
@@ -137,9 +137,6 @@ CloudPebble.Sidebar = (function() {
         },
         Init: function() {
             $('#sidebar-pane-new-resource').click(CloudPebble.Resources.Create);
-            $('#sidebar-pane-compile > a').click(CloudPebble.Compile.Show);
-            $('#sidebar-pane-settings > a').click(CloudPebble.Settings.Show);
-            $('#sidebar-pane-github > a').click(CloudPebble.GitHub.Show);
             $('#new-source-file').click(CloudPebble.Editor.Create);
             $('#new-js-file').click(CloudPebble.Editor.DoJSFile);
             init();

ide/templates/ide/project.html

@@ -36,9 +36,9 @@ <h1 class="cloudpebble-logo" style="padding-left: 40px;">
             <div>
                 <ul class="nav-list" id="sidebar">
                     <li class="nav-header project-name">{{ project.name }}</li>
-                    <li class="nav-header" id="sidebar-pane-settings"><a href="#">Settings</a></li>
-                    <li class="nav-header" id="sidebar-pane-compile"><a href="#">Compilation</a></li>
-                    <li id="sidebar-pane-github" class="nav-header native-only {%if not project.owner.github%}disabled{%endif%}"><a href="#">GitHub</a></li>
+                    <li class="nav-header" id="sidebar-pane-settings"><a href="#settings">Settings</a></li>
+                    <li class="nav-header" id="sidebar-pane-compile"><a href="#compile">Compilation</a></li>
+                    <li id="sidebar-pane-github" class="nav-header native-only {%if not project.owner.github%}disabled{%endif%}"><a href="#github">GitHub</a></li>
                     <li class="nav-header nav-section">Source files <button class="btn btn-small native-only" id="new-source-file">Add C</button> <button class="btn btn-small native-only" id="new-js-file">JS</button></li>
                     <li class="native-only" id="end-source-files"></li>
                     <li class="nav-header nav-section native-only">Resources <button class="btn btn-small" id="sidebar-pane-new-resource">Add new</button></li>
@@ -682,6 +682,7 @@ <h3>Doing a thing…</h3>
 <script src="{% static 'ide/js/csrf.js' %}" type="text/javascript"></script>
 <script src="{% static 'ide/js/cloudpebble.js' %}" type="text/javascript"></script>
 <script src="{% static 'ide/js/sidebar.js' %}" type="text/javascript"></script>
+<script src="{% static 'ide/js/locations.js' %}" type="text/javascript"></script>x
 <script src="{% static 'ide/js/radix.js' %}" type="text/javascript"></script>
 <script src="{% static 'ide/js/editor.js' %}" type="text/javascript"></script>
 <script src="{% static 'ide/js/syntax.js' %}" type="text/javascript"></script>