Edit button on file pages

lib/specifications/files/get-edit-url.js

@@ -0,0 +1,22 @@
+/**
+ * Generate a link for editing a file in a Git repo.
+ */
+'use strict';
+
+var handlebars = require('hbs').handlebars;
+
+module.exports = function getEditUrl(projectData, filePath) {
+  var editUrlTemplate;
+
+  if (!projectData.config.editUrlFormat) {
+    return;
+  }
+
+  editUrlTemplate = handlebars.compile(projectData.config.editUrlFormat);
+  return editUrlTemplate({
+    repoUrl: projectData.repoUrl,
+    repoUrlWithoutGitSuffix: projectData.repoUrl.replace(/\.git$/i, ''),
+    branchName: projectData.currentShortBranchName,
+    pathToFile: filePath
+  });
+};

public/css/main.css

@@ -101,8 +101,14 @@ button.call-to-action:active {
   box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
 }
 
-button.back-button::before {
-  content: '\21A9';
+
+/* File editing buttons and links */
+.feature-edit {
+  float: right;
+  box-shadow: 0 0 0.4em 0.2em orange;
+}
+.feature-edit button {
+  margin: 0;
 }
 
 /* Other interactice things */

public/css/project.css

@@ -249,6 +249,7 @@ h2.directory-path {
   font-size: 0.9em;
   float: right;
   margin: 0.5em;
+  box-shadow: 0 0 0.3em 0.2em orange;
 }
 
 .feature-summary {

routes/feature.js

@@ -6,12 +6,11 @@ var url = require('url');
 var express = require('express');
 var router = express.Router();
 
-
 var getProjectData = require('../lib/specifications/projects/project').getData;
 var getFileContent = require('../lib/specifications/projects/project').getFileContent;
 
 var processFiles = require('../lib/specifications/files/process-files');
-
+var getEditUrl = require('../lib/specifications/files/get-edit-url');
 
 var appConfig = require('../lib/configuration/app-config').get();
 
@@ -58,7 +57,9 @@ router.get(/([^\/]+)\/([\w\W]+)/, function (req, res, next) {
   var file;
 
   getProjectData(projectData, ref)
-  .then(function (projectData) {
+  .then(function (_projectData) {
+    projectData = _projectData;
+
     var filePathToFileObject = processFiles.getFilePathToFileObject(appConfig.projectRoute, projectData, getFileContent);
     return filePathToFileObject(filePath);
   })
@@ -80,6 +81,9 @@ router.get(/([^\/]+)\/([\w\W]+)/, function (req, res, next) {
       file.plainFileUrl = url.format(originalUrl);
     }
 
+    // Add an edit link to the file.
+    file.editUrl = getEditUrl(projectData, file.filePath);
+
     if (file.isFeatureFile && !renderPlainFile) {
 
       // Determine if a particular scenario was targeted and mark

routes/project.js

@@ -5,13 +5,12 @@ var path = require('path');
 var express = require('express');
 var router = express.Router();
 
-var handlebars = require('hbs').handlebars;
-
 var arrrayToTree = require('file-tree');
 var TreeModel = require('tree-model');
 
 var processFiles = require('../lib/specifications/files/process-files');
 var filterFeaturesAndScenarios = require('../lib/specifications/files/feature-files/tags').filterFeaturesAndScenarios;
+var getEditUrl = require('../lib/specifications/files/get-edit-url');
 
 var getProject = require('../lib/specifications/projects/project').get;
 var getProjectData = require('../lib/specifications/projects/project').getData;
@@ -295,21 +294,12 @@ function groupFilesByDirectory(fileTree) {
 function addEditLinks(projectData) {
   if (projectData.config.editUrlFormat) {
     projectData.files.forEach(function(file) {
-      var editUrlTemplate = handlebars.compile(projectData.config.editUrlFormat);
-      var editUrl = editUrlTemplate({
-        repoUrl: projectData.repoUrl,
-        repoUrlWithoutGitSuffix: projectData.repoUrl.replace(/\.git$/i, ''),
-        branchName: projectData.currentShortBranchName,
-        pathToFile: file.filePath
-      });
-
-      file.editUrl = editUrl;
+      file.editUrl = getEditUrl(projectData, file.filePath);
     });
   }
   return projectData;
 }
 
-
 /**
  * Pass errors to the next Express middleware for handling.
  * @param  {Function} next Express Router Next function.

views/error.hbs

@@ -7,7 +7,7 @@
     <p>Please <a href="https://github.com/oss-specs/specs/issues">raise an issue</a> including the messages below<p>
   </header>
   <section class="content-controls">
-    <button class="back-button call-to-action" onclick="window.history.back()"></button>
+    {{> back_button}}
   </section>
   <section>
     <h2>{{status}}</h2>

views/feature.hbs

@@ -6,7 +6,7 @@
 <main>
   {{#if file.error}}
     <section class="content-controls">
-      <button class="back-button call-to-action" onclick="window.history.back()"></button>
+      {{> back_button}}
     </section>
     <section class="feature">
       <header>
@@ -16,8 +16,9 @@
       <p>{{file.error.message}}</p>
     </section>
   {{else}}
-    <section class="content-controls">
-      <button class="back-button call-to-action" onclick="window.history.back()"></button>
+    <section class="content-controls group">
+      {{> edit_button url=file.editUrl isLink=true}}
+      {{> back_button}}
       <button id="expand-collapse-details" class="call-to-action"><span>Expand/Collapse Details</span></button>
       <button id="expand-collapse-tags" class="call-to-action collapsible collapse"><span>Expand/Collapse Tags</span></button>
     </section>

views/four-oh-four.hbs

@@ -6,7 +6,7 @@
     <h1>404</h1>
   </header>
   <section class="content-controls">
-    <button class="back-button call-to-action" onclick="window.history.back()"></button>
+    {{> back_button}}
   </section>
   <section>
     <p>Oops, that page doesn't seem to exist.</p>

views/general-file.hbs

@@ -6,7 +6,8 @@
     <h1>File contents</h1>
   </header>
   <section class="content-controls">
-    <button class="back-button call-to-action" onclick="window.history.back()"></button>
+    {{> edit_button url=file.editUrl isLink=true}}
+    {{> back_button}}
   </section>
   <section>
     <p class="file-contents">

views/markdown-file.hbs

@@ -4,7 +4,8 @@
 {{> layout_start_body}}
 <main>
   <section class="content-controls">
-    <button class="back-button call-to-action" onclick="window.history.back()"></button>
+    {{> edit_button url=file.editUrl isLink=true}}
+    {{> back_button}}
   </section>
   <section class="markdown-body">{{{file.html}}}</section>
 </main>

views/partials/back-button.hbs

@@ -0,0 +1 @@
+<button class="back-button call-to-action" onclick="window.history.back()">Back</button>

views/partials/edit-button.hbs

@@ -1,3 +1,7 @@
 {{#if url}}
-  <button class="feature-edit call-to-action" data-edit-url="{{url}}">Edit</button>
+  {{#if isLink}}
+    <a class="feature-edit" href="{{url}}"><button class="call-to-action">Edit</button></a>
+  {{else}}
+    <button class="feature-edit call-to-action" data-edit-url="{{url}}">Edit</button>
+  {{/if}}
 {{/if}}

views/partials/project-file-markdown.hbs

@@ -1,6 +1,7 @@
 <li>
   <a class="spec-link" href="{{this.route}}?ref={{currentBranchName}}">
-    <section class="file-container">
+    <section class="file-container group">
+      {{> edit_button url=this.editUrl}}
       <section class="file-details">
         <p class="file-name">
           {{#if this.empty}}

views/partials/project-file.hbs

@@ -1,6 +1,7 @@
 <li>
   <a class="spec-link" href="{{this.route}}?ref={{currentBranchName}}">
-    <section class="file-container">
+    <section class="file-container group">
+      {{> edit_button url=this.editUrl}}
       <section class="file-details">
         <p class="file-name">
           {{#if this.empty}}

views/project.hbs

@@ -35,7 +35,7 @@
           <div class="loader-container"><div class="loader dark"></div></div>
         </section>
         <section class="content-controls">
-          <button class="back-button call-to-action" onclick="window.history.back()"></button>
+          {{> back_button}}
           <button id="expand-collapse-file-lists" class="call-to-action"><span>Expand/Collapse All</span></button>
           {{#if hasProjectViews}}
             <div class="config-views">