Add unified diff to edit conflict page + tweak line height

This commit is contained in:
Starbeamrainbowlabs 2016-05-01 15:06:27 +01:00
parent 7aabf91d1e
commit 7035fa66ec
4 changed files with 85 additions and 27 deletions

View File

@ -290,7 +290,7 @@ $settings->sessionprefix = preg_replace("/[^0-9a-z]/i", "", strtolower($settings
// A string of css to include. Will be included in the <head> of every page // A string of css to include. Will be included in the <head> of every page
// inside a <style> tag. This may also be a url - urls will be referenced via a // inside a <style> tag. This may also be a url - urls will be referenced via a
// <link rel='stylesheet' /> tag. // <link rel='stylesheet' /> tag.
$settings->css = "body { margin: 2rem 0; font-family: sans-serif; color: #111111; background: #eee8f2; } $settings->css = "body { margin: 2rem 0; background: #eee8f2; line-height: 1.45em; color: #111111; font-family: sans-serif; }
nav { display: flex; background-color: #8a62a7; color: #ffa74d; } nav { display: flex; background-color: #8a62a7; color: #ffa74d; }
nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); } nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
@ -347,13 +347,12 @@ a.redlink:visited { color: rgb(130, 15, 15); #8b1a1a }
.search-result > h2 { margin-left: 2rem; } .search-result > h2 { margin-left: 2rem; }
label:not(.link-display-label) { display: inline-block; min-width: 7rem; } label:not(.link-display-label) { display: inline-block; min-width: 7rem; }
input[type=text]:not(.link-display), input[type=password], textarea { margin: 0.5rem 0.8rem; } input[type=text]:not(.link-display), input[type=password], textarea { margin: 0.5rem 0; }
input[type=text], input[type=password], textarea, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; } input[type=text], input[type=password], textarea, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; }
textarea { min-height: 35rem; font-size: 1.25rem; } textarea { min-height: 35rem; line-height: 1.3em; font-size: 1.25rem; }
textarea, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; } textarea, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; }
textarea ~ input[type=submit] { margin: 0.5rem 0.8rem; padding: 0.5rem; font-weight: bolder; } textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight: bolder; }
.editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; } .editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; }
.editing_message { margin: 0.8rem; }
.file-gallery { margin: 0.5em; padding: 0.5em; list-style-type: none; } .file-gallery { margin: 0.5em; padding: 0.5em; list-style-type: none; }
.file-gallery > li { display: inline-block; min-width: attr(data-gallery-width); padding: 1em; text-align: center; } .file-gallery > li { display: inline-block; min-width: attr(data-gallery-width); padding: 1em; text-align: center; }
@ -385,6 +384,10 @@ summary { cursor: pointer; }
.significant { font-weight: bolder; font-size: 1.1rem; } .significant { font-weight: bolder; font-size: 1.1rem; }
.deletion, .deletion > .editor { text-decoration: line-through; } .deletion, .deletion > .editor { text-decoration: line-through; }
.highlighted-diff { white-space: pre-wrap; }
.diff-added { background-color: rgba(31, 171, 36, 0.6); color: rgba(23, 125, 27, 1); }
.diff-removed { background-color: rgba(255, 96, 96, 0.6); color: rgba(191, 38, 38, 1); }
.newpage::before { content: \"N\"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; } .newpage::before { content: \"N\"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; }
.upload::before { content: \"\\1f845\"; margin: 0 0.1em 0 -1.1em; } .upload::before { content: \"\\1f845\"; margin: 0 0.1em 0 -1.1em; }
@ -3293,7 +3296,7 @@ register_module([
register_module([ register_module([
"name" => "Page editor", "name" => "Page editor",
"version" => "0.13.2", "version" => "0.14",
"author" => "Starbeamrainbowlabs", "author" => "Starbeamrainbowlabs",
"description" => "Allows you to edit pages by adding the edit and save actions. You should probably include this one.", "description" => "Allows you to edit pages by adding the edit and save actions. You should probably include this one.",
"id" => "page-edit", "id" => "page-edit",
@ -3366,7 +3369,7 @@ register_module([
<input type='hidden' name='prev-content-hash' value='" . sha1($pagetext) . "' /> <input type='hidden' name='prev-content-hash' value='" . sha1($pagetext) . "' />
<textarea name='content' autofocus tabindex='1'>$pagetext</textarea> <textarea name='content' autofocus tabindex='1'>$pagetext</textarea>
<input type='text' name='tags' value='$page_tags' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' /> <input type='text' name='tags' value='$page_tags' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' />
<p class='editing_message'>$settings->editing_message</p> <p class='editing-message'>$settings->editing_message</p>
<input name='submit-edit' type='submit' value='Save Page' tabindex='3' /> <input name='submit-edit' type='submit' value='Save Page' tabindex='3' />
</form>"; </form>";
exit(page_renderer::render_main("$title - $settings->sitename", $content)); exit(page_renderer::render_main("$title - $settings->sitename", $content));
@ -3456,16 +3459,42 @@ register_module([
{ {
$content .= "<p><strong>Warning: You are not logged in! Your IP address <em>may</em> be recorded.</strong></p>"; $content .= "<p><strong>Warning: You are not logged in! Your IP address <em>may</em> be recorded.</strong></p>";
} }
$content .= "<p>An edit conflict has arisen because someone else has saved an edit to $env->page since you started editing it. Both texts are shown below. To continue, please merge your changes with the existing content. Note that only the text in the existing content box will be saved.</p> $content .= "<p>An edit conflict has arisen because someone else has saved an edit to $env->page since you started editing it. Both texts are shown below, along the differences between the 2 conflicting revisions. To continue, please merge your changes with the existing content. Note that only the text in the existing content box will be kept when you press the \"Resolve Conflict\" button at the bottom of the page.</p>
<form method='post' action='index.php?action=save&page=" . rawurlencode($page) . "&action=save' class='editform'>
<form method='post' action='index.php?action=save&page=" . rawurlencode($page) . "&action=save' class='editform'>
<h2>Existing content</h2> <h2>Existing content</h2>
<textarea name='content' autofocus tabindex='1'>$existingPageData</textarea> <textarea id='original-content' name='content' autofocus tabindex='1'>$existingPageData</textarea>
<h2>Differences</h2>
<div id='highlighted-diff' class='highlighted-diff'></div>
<!--<pre class='highlighted-diff-wrapper'><code id='highlighted-diff'></code></pre>-->
<h2>Your content</h2> <h2>Your content</h2>
<textarea>$pagedata</textarea> <textarea id='new-content'>$pagedata</textarea>
<input type='text' name='tags' value='" . $_POST["tags"] . "' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' /> <input type='text' name='tags' value='" . $_POST["tags"] . "' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' />
<p class='editing_message'>$settings->editing_message</p> <p class='editing_message'>$settings->editing_message</p>
<input name='submit-edit' type='submit' value='Resolve Conflict' tabindex='3' /> <input name='submit-edit' type='submit' value='Resolve Conflict' tabindex='3' />
</form>"; </form>";
// Insert a reference to jsdiff to generate the diffs
$diffScript = <<<'DIFFSCRIPT'
window.addEventListener("load", function(event) {
var destination = document.getElementById("highlighted-diff"),
diff = JsDiff.diffWords(document.getElementById("original-content").value, document.getElementById("new-content").value),
output = "";
diff.forEach(function(change) {
var classes = "token";
if(change.added) classes += " diff-added";
if(change.removed) classes += " diff-removed";
output += `<span class='${classes}'>${change.value}</span>`;
});
destination.innerHTML = output;
});
DIFFSCRIPT;
$content .= "\n<script src='https://cdnjs.cloudflare.com/ajax/libs/jsdiff/2.2.2/diff.min.js'></script>
<script>$diffScript</script>\n";
exit(page_renderer::render_main("Edit Conflict - $env->page - $settings->sitename", $content)); exit(page_renderer::render_main("Edit Conflict - $env->page - $settings->sitename", $content));
} }
@ -4159,7 +4188,7 @@ register_module([
register_module([ register_module([
"name" => "Page viewer", "name" => "Page viewer",
"version" => "0.12.1", "version" => "0.13",
"author" => "Starbeamrainbowlabs", "author" => "Starbeamrainbowlabs",
"description" => "Allows you to view pages. You really should include this one.", "description" => "Allows you to view pages. You really should include this one.",
"id" => "page-view", "id" => "page-view",

View File

@ -100,11 +100,11 @@
}, },
{ {
"name": "Page editor", "name": "Page editor",
"version": "0.13.2", "version": "0.14",
"author": "Starbeamrainbowlabs", "author": "Starbeamrainbowlabs",
"description": "Allows you to edit pages by adding the edit and save actions. You should probably include this one.", "description": "Allows you to edit pages by adding the edit and save actions. You should probably include this one.",
"id": "page-edit", "id": "page-edit",
"lastupdate": 1460201129, "lastupdate": 1462111205,
"optional": false "optional": false
}, },
{ {
@ -172,11 +172,11 @@
}, },
{ {
"name": "Page viewer", "name": "Page viewer",
"version": "0.12.1", "version": "0.13",
"author": "Starbeamrainbowlabs", "author": "Starbeamrainbowlabs",
"description": "Allows you to view pages. You really should include this one.", "description": "Allows you to view pages. You really should include this one.",
"id": "page-view", "id": "page-view",
"lastupdate": 1462015525, "lastupdate": 1462110488,
"optional": false "optional": false
}, },
{ {

View File

@ -1,7 +1,7 @@
<?php <?php
register_module([ register_module([
"name" => "Page editor", "name" => "Page editor",
"version" => "0.13.2", "version" => "0.14",
"author" => "Starbeamrainbowlabs", "author" => "Starbeamrainbowlabs",
"description" => "Allows you to edit pages by adding the edit and save actions. You should probably include this one.", "description" => "Allows you to edit pages by adding the edit and save actions. You should probably include this one.",
"id" => "page-edit", "id" => "page-edit",
@ -74,7 +74,7 @@ register_module([
<input type='hidden' name='prev-content-hash' value='" . sha1($pagetext) . "' /> <input type='hidden' name='prev-content-hash' value='" . sha1($pagetext) . "' />
<textarea name='content' autofocus tabindex='1'>$pagetext</textarea> <textarea name='content' autofocus tabindex='1'>$pagetext</textarea>
<input type='text' name='tags' value='$page_tags' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' /> <input type='text' name='tags' value='$page_tags' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' />
<p class='editing_message'>$settings->editing_message</p> <p class='editing-message'>$settings->editing_message</p>
<input name='submit-edit' type='submit' value='Save Page' tabindex='3' /> <input name='submit-edit' type='submit' value='Save Page' tabindex='3' />
</form>"; </form>";
exit(page_renderer::render_main("$title - $settings->sitename", $content)); exit(page_renderer::render_main("$title - $settings->sitename", $content));
@ -164,16 +164,42 @@ register_module([
{ {
$content .= "<p><strong>Warning: You are not logged in! Your IP address <em>may</em> be recorded.</strong></p>"; $content .= "<p><strong>Warning: You are not logged in! Your IP address <em>may</em> be recorded.</strong></p>";
} }
$content .= "<p>An edit conflict has arisen because someone else has saved an edit to $env->page since you started editing it. Both texts are shown below. To continue, please merge your changes with the existing content. Note that only the text in the existing content box will be saved.</p> $content .= "<p>An edit conflict has arisen because someone else has saved an edit to $env->page since you started editing it. Both texts are shown below, along the differences between the 2 conflicting revisions. To continue, please merge your changes with the existing content. Note that only the text in the existing content box will be kept when you press the \"Resolve Conflict\" button at the bottom of the page.</p>
<form method='post' action='index.php?action=save&page=" . rawurlencode($page) . "&action=save' class='editform'>
<form method='post' action='index.php?action=save&page=" . rawurlencode($page) . "&action=save' class='editform'>
<h2>Existing content</h2> <h2>Existing content</h2>
<textarea name='content' autofocus tabindex='1'>$existingPageData</textarea> <textarea id='original-content' name='content' autofocus tabindex='1'>$existingPageData</textarea>
<h2>Differences</h2>
<div id='highlighted-diff' class='highlighted-diff'></div>
<!--<pre class='highlighted-diff-wrapper'><code id='highlighted-diff'></code></pre>-->
<h2>Your content</h2> <h2>Your content</h2>
<textarea>$pagedata</textarea> <textarea id='new-content'>$pagedata</textarea>
<input type='text' name='tags' value='" . $_POST["tags"] . "' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' /> <input type='text' name='tags' value='" . $_POST["tags"] . "' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' />
<p class='editing_message'>$settings->editing_message</p> <p class='editing_message'>$settings->editing_message</p>
<input name='submit-edit' type='submit' value='Resolve Conflict' tabindex='3' /> <input name='submit-edit' type='submit' value='Resolve Conflict' tabindex='3' />
</form>"; </form>";
// Insert a reference to jsdiff to generate the diffs
$diffScript = <<<'DIFFSCRIPT'
window.addEventListener("load", function(event) {
var destination = document.getElementById("highlighted-diff"),
diff = JsDiff.diffWords(document.getElementById("original-content").value, document.getElementById("new-content").value),
output = "";
diff.forEach(function(change) {
var classes = "token";
if(change.added) classes += " diff-added";
if(change.removed) classes += " diff-removed";
output += `<span class='${classes}'>${change.value}</span>`;
});
destination.innerHTML = output;
});
DIFFSCRIPT;
$content .= "\n<script src='https://cdnjs.cloudflare.com/ajax/libs/jsdiff/2.2.2/diff.min.js'></script>
<script>$diffScript</script>\n";
exit(page_renderer::render_main("Edit Conflict - $env->page - $settings->sitename", $content)); exit(page_renderer::render_main("Edit Conflict - $env->page - $settings->sitename", $content));
} }

View File

@ -287,7 +287,7 @@ $settings->sessionprefix = preg_replace("/[^0-9a-z]/i", "", strtolower($settings
// A string of css to include. Will be included in the <head> of every page // A string of css to include. Will be included in the <head> of every page
// inside a <style> tag. This may also be a url - urls will be referenced via a // inside a <style> tag. This may also be a url - urls will be referenced via a
// <link rel='stylesheet' /> tag. // <link rel='stylesheet' /> tag.
$settings->css = "body { margin: 2rem 0; font-family: sans-serif; color: #111111; background: #eee8f2; } $settings->css = "body { margin: 2rem 0; background: #eee8f2; line-height: 1.45em; color: #111111; font-family: sans-serif; }
nav { display: flex; background-color: #8a62a7; color: #ffa74d; } nav { display: flex; background-color: #8a62a7; color: #ffa74d; }
nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); } nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
@ -344,13 +344,12 @@ a.redlink:visited { color: rgb(130, 15, 15); #8b1a1a }
.search-result > h2 { margin-left: 2rem; } .search-result > h2 { margin-left: 2rem; }
label:not(.link-display-label) { display: inline-block; min-width: 7rem; } label:not(.link-display-label) { display: inline-block; min-width: 7rem; }
input[type=text]:not(.link-display), input[type=password], textarea { margin: 0.5rem 0.8rem; } input[type=text]:not(.link-display), input[type=password], textarea { margin: 0.5rem 0; }
input[type=text], input[type=password], textarea, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; } input[type=text], input[type=password], textarea, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; }
textarea { min-height: 35rem; font-size: 1.25rem; } textarea { min-height: 35rem; line-height: 1.3em; font-size: 1.25rem; }
textarea, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; } textarea, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; }
textarea ~ input[type=submit] { margin: 0.5rem 0.8rem; padding: 0.5rem; font-weight: bolder; } textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight: bolder; }
.editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; } .editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; }
.editing_message { margin: 0.8rem; }
.file-gallery { margin: 0.5em; padding: 0.5em; list-style-type: none; } .file-gallery { margin: 0.5em; padding: 0.5em; list-style-type: none; }
.file-gallery > li { display: inline-block; min-width: attr(data-gallery-width); padding: 1em; text-align: center; } .file-gallery > li { display: inline-block; min-width: attr(data-gallery-width); padding: 1em; text-align: center; }
@ -382,6 +381,10 @@ summary { cursor: pointer; }
.significant { font-weight: bolder; font-size: 1.1rem; } .significant { font-weight: bolder; font-size: 1.1rem; }
.deletion, .deletion > .editor { text-decoration: line-through; } .deletion, .deletion > .editor { text-decoration: line-through; }
.highlighted-diff { white-space: pre-wrap; }
.diff-added { background-color: rgba(31, 171, 36, 0.6); color: rgba(23, 125, 27, 1); }
.diff-removed { background-color: rgba(255, 96, 96, 0.6); color: rgba(191, 38, 38, 1); }
.newpage::before { content: \"N\"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; } .newpage::before { content: \"N\"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; }
.upload::before { content: \"\\1f845\"; margin: 0 0.1em 0 -1.1em; } .upload::before { content: \"\\1f845\"; margin: 0 0.1em 0 -1.1em; }