forked from alphagov/whitehall
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Highlight change note field when publishing subsequent editions.
As suggested by @jasoncale, use javascript to make change note field more prominent. We hide the real form and insert a publishing button link which when clicked shows the form and highlights the change note field. Currently using the standard `field_with_errors` class for highlighting - not sure how sensible that is.
- Loading branch information
1 parent
cc058e3
commit 5e4dcc3
Showing
4 changed files
with
105 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
(function ($) { | ||
var _enableChangeNoteHighlighting = function() { | ||
var form = $(this); | ||
var changeNoteLabels = form.find("label[for=document_change_note]"); | ||
var changeNoteTextareas = form.find("textarea#document_change_note"); | ||
var changeNoteElements = changeNoteLabels.add(changeNoteTextareas); | ||
|
||
if ((changeNoteLabels.length > 0) && (changeNoteTextareas.length > 0)) { | ||
var buttonValue = form.find("input[type=submit]")[0].value; | ||
var publishButtonLink = $("<a/>").text(buttonValue).addClass("button").attr("href", "#document_publishing"); | ||
|
||
publishButtonLink.click(function() { | ||
publishButtonLink.hide(); | ||
$(changeNoteElements).wrap($("<div class='field_with_errors' />")); | ||
form.show(); | ||
}); | ||
|
||
form.hide(); | ||
form.before(publishButtonLink); | ||
}; | ||
} | ||
|
||
$.fn.extend({ | ||
enableChangeNoteHighlighting: _enableChangeNoteHighlighting | ||
}); | ||
})(jQuery); | ||
|
||
jQuery(function($) { | ||
$("#document_publishing").enableChangeNoteHighlighting(); | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
module("No change note label or field present", { | ||
setup: function() { | ||
this.publishingForm = $("<form />"); | ||
|
||
$("#qunit-fixture").append(this.publishingForm); | ||
this.publishingForm.enableChangeNoteHighlighting(); | ||
} | ||
}); | ||
|
||
test("should not hide form", function() { | ||
ok($(this.publishingForm).is(":visible")); | ||
}); | ||
|
||
module("Change note label and field present with publish button", { | ||
setup: function() { | ||
this.publishingForm = $("<form />"); | ||
this.changeNoteLabel = $("<label for='document_change_note' />") | ||
this.changeNoteTextarea = $("<textarea id='document_change_note' />"); | ||
this.publishingForm.append(this.changeNoteLabel); | ||
this.publishingForm.append(this.changeNoteTextarea); | ||
this.publishingForm.append("<input type='submit' value='Publish'/>"); | ||
|
||
$("#qunit-fixture").append(this.publishingForm); | ||
this.publishingForm.enableChangeNoteHighlighting(); | ||
} | ||
}); | ||
|
||
test("should hide form", function() { | ||
ok($(this.publishingForm).is(":hidden")); | ||
}); | ||
|
||
test("should insert a publish button link before the form", function() { | ||
equal(this.publishingForm.prev("a.button[href='#document_publishing']").text(), "Publish"); | ||
}); | ||
|
||
test("should hide publish button when the publish button link is clicked", function() { | ||
this.publishingForm.prev("a.button").click(); | ||
ok(this.publishingForm.prev("a.button").is(":hidden")); | ||
}); | ||
|
||
test("should wrap change note label in validation error class when the publish button link is clicked", function() { | ||
this.publishingForm.prev("a.button").click(); | ||
ok(this.changeNoteLabel.parents().hasClass("field_with_errors")); | ||
}); | ||
|
||
test("should wrap change note textarea in validation error class when the publish button link is clicked", function() { | ||
this.publishingForm.prev("a.button").click(); | ||
ok(this.changeNoteTextarea.parents().hasClass("field_with_errors")); | ||
}); | ||
|
||
test("should show form when the publish button link is clicked", function() { | ||
this.publishingForm.prev("a.button").click(); | ||
ok($(this.publishingForm).is(":visible")); | ||
}); | ||
|
||
module("Change note label and field present with force publish button", { | ||
setup: function() { | ||
this.publishingForm = $("<form />"); | ||
this.changeNoteLabel = $("<label for='document_change_note' />") | ||
this.changeNoteTextarea = $("<textarea id='document_change_note' />"); | ||
this.publishingForm.append(this.changeNoteLabel); | ||
this.publishingForm.append(this.changeNoteTextarea); | ||
this.publishingForm.append("<input type='submit' value='Force Publish'/>"); | ||
|
||
$("#qunit-fixture").append(this.publishingForm); | ||
this.publishingForm.enableChangeNoteHighlighting(); | ||
} | ||
}); | ||
|
||
test("should insert a force publish button link before the form", function() { | ||
equal(this.publishingForm.prev("a.button[href='#document_publishing']").text(), "Force Publish"); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters