Skip to content

Commit

Permalink
Merge pull request #2 from szego/side-by-side/editing-and-toggling
Browse files Browse the repository at this point in the history 
Add SBS in edit mode, add on/off toggling
  • Loading branch information
@shu8
shu8 committed Oct 17, 2015
2 parents d2343fb + 849d392 commit f7ac4ae
Showing 1 changed file with 203 additions and 25 deletions.
228 changes: 203 additions & 25 deletions side-by-side-editing.user.js
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,222 @@
// ==UserScript==
// @name Side By Side Editing
// @name SE Side By Side Editing
// @namespace http://stackexchange.com/users/4337810/
// @version 1.0
// @description A userscript that adds the option to have the preview and editor side-by-side when asking/answering questions
// @author ᔕᖺᘎᕊ (http://stackexchange.com/users/4337810/)
// @version 1.1
// @description A userscript for Stack Exchange sites that adds the option to have the preview and editor side-by-side when posting and editing questions and answers
// @match *://*.stackexchange.com/*
// @match *://*.stackoverflow.com/*
// @match *://*.superuser.com/*
// @match *://*.serverfault.com/*
// @match *://*.askubuntu.com/*
// @match *://*.stackapps.com/*
// @match *://*.mathoverflow.net/*
// @grant none
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant GM_addStyle
// ==/UserScript==

function sideBySideEditing() {
$('#sidebar').hide();
GM_addStyle (' \
#sidebar.sbs-on { \
display: none !important; \
} \
\
#content.sbs-on { \
width: 1360px !important; \
} \
\
.draft-saved.sbs-on { \
margin-left: 35px !important; \
} \
\
.draft-discarded.sbs-on { \
margin-left: 35px !important; \
} \
\
.draft-saved.sbs-on.sbs-newq { \
margin-left: 40px !important; \
height: 15px !important; \
float: left !important; \
} \
\
.draft-discarded.sbs-on.sbs-newq { \
margin-left: 40px !important; \
height: 15px !important; \
float: left !important; \
} \
\
.votecell.sbs-on { \
display: none !important; \
} \
\
.hide-preview.sbs-on { \
margin-left: 35px !important; \
} \
\
.edit-comment-p1.sbs-on { \
float: left !important; \
} \
\
.edit-comment-p2.sbs-on { \
float: left !important; \
margin-left: 10px !important; \
} \
\
.post-editor.sbs-on { \
width: 1360px !important; \
} \
\
.wmd-button-bar.sbs-on { \
float: none !important; \
} \
\
.wmd-container.sbs-on { \
float: left !important; \
} \
\
.wmd-preview.sbs-on { \
clear: none !important; \
float: right !important; \
} \
\
.wmd-preview.sbs-on.sbs-newq { \
margin-top: 10px !important; \
} \
\
.tag-editor-p.sbs-on.sbs-newq { \
float: left !important; \
} \
\
.form-item.sbs-on.sbs-newq { \
float: left !important; \
} \
');

/**
* Toggles side-by-side editing on and off.
* @param {string} toAppend - Should either be empty or be of the form '-#',
* where # is the id of the question/answer whose
* sbs mode is being toggled.
*/
function sideBySideEditing(toAppend) {
//variables to reduce DOM searches
var wmdinput = $('#wmd-input' + toAppend);
var wmdpreview = $('#wmd-preview' + toAppend);
var posteditor = $('#post-editor' + toAppend);
var draftsaved = $('#draft-saved' + toAppend);
var draftdiscarded = $('#draft-discarded' + toAppend);

$('#wmd-button-bar' + toAppend).toggleClass('sbs-on');

$("#content").width(1360);
$("#post-editor").removeClass("post-editor");
$("#post-editor").width(1360);
$(".community-option").css("float","right");
$(".wmd-container").css("float","right");
$(".wmd-preview").css({"clear":"none","margin-left":"20px","float":"left"});
$('.wmd-button-bar').css('float', 'none');

if($(location).attr('href').indexOf('/questions/ask') > -1 ) { //extra CSS for 'ask' page
$('.wmd-preview').css('margin-top', '20px');
$('#tag-suggestions').parent().prependTo('.form-submit.cbt');
draftsaved.toggleClass('sbs-on');
draftdiscarded.toggleClass('sbs-on');
posteditor.toggleClass('sbs-on');
wmdinput.parent().toggleClass('sbs-on'); //wmdinput.parent() has class wmd-container
wmdpreview.toggleClass('sbs-on');

if(toAppend.length > 0) { //options specific to making edits on existing questions/answers
posteditor.find('.hide-preview').toggleClass('sbs-on');

//hack: float nuttiness for "Edit Summary" box
var editcommentp1 = $('#edit-comment' + toAppend).parent().parent().parent().parent().parent();
editcommentp1.toggleClass('edit-comment-p1 sbs-on');
editcommentp1.parent().toggleClass('edit-comment-p2 sbs-on');
} else if(window.location.pathname.indexOf('questions/ask') > -1) { //extra CSS for 'ask' page
wmdpreview.toggleClass('sbs-newq');
draftsaved.toggleClass('sbs-newq');
draftdiscarded.toggleClass('sbs-newq');
$('.tag-editor').parent().toggleClass('tag-editor-p sbs-on sbs-newq');
$('#question-only-section').children('.form-item').toggleClass('sbs-on sbs-newq');

//swap the order of things to prevent draft saved/discarded messages from
// moving the preview pane around
if(wmdpreview.hasClass('sbs-on')) {
draftsaved.before(wmdpreview);
} else {
draftdiscarded.after(wmdpreview);
}
}

if(wmdpreview.hasClass('sbs-on')) { //sbs was toggled on
$('#sidebar').addClass('sbs-on');
$('#content').addClass('sbs-on');

if(toAppend.length > 0) { //current sbs toggle is for an edit
$('.votecell').addClass('sbs-on');
}

//stretch the text input window to match the preview length
// - "215" came from trial and error
// - Can this be done using toggleClass?
var previewHeight = wmdpreview.height();
if(previewHeight > 215) { //default input box is 200px tall, only scale if necessary
wmdinput.height(previewHeight - 15);
}
} else { //sbs was toggled off
//check if sbs is off for all existing questions and answers
if($('.question').find('.wmd-preview.sbs-on').length == 0 && $('.answer').find('.wmd-preview.sbs-on').length == 0) {
$('.votecell').removeClass('sbs-on');

if ( !($('#wmd-preview').hasClass('sbs-on')) ) { //sbs is off for everything
$('#sidebar').removeClass('sbs-on');
$('#content').removeClass('sbs-on');
}
}

//return input text window to original size
// - Can this be done using toggleClass?
wmdinput.height(200);
}
}

function addButton() {
/**
* Adds the "Toggle Side-By-Side Editing" button to the UI, as well as the
* associated click listeners.
* @param {jQuery} jNode - A jQuery object which points to the "redo" button
* from the SE composition/editing pane sent by the
* waitForKeyElements() call.
*/
function addButton(jNode) {
var itemid = jNode[0].id.replace( /^\D+/g, '');
var toAppend = (itemid.length > 0 ? '-' + itemid : ''); //helps select tags specific to the question/answer being
// edited (or new question/answer being written)
setTimeout(function() {
var sbsBtn = "<li class='wmd-button' title='side-by-side editing' style='left: 500px;'><span id='wmd-sbs-button' style='background-image: none;'>SBS</span></li>";
$('[id^="wmd-redo-button"]').after(sbsBtn);
$('#wmd-sbs-button').on('click', function() {
sideBySideEditing();
});
var sbsBtn = '<li class="wmd-button" title="side-by-side-editing" style="left: 415px;width: 170px;"> \
<div id="wmd-sbs-button' + toAppend + '" style="background-image: none;"> \
Toggle Side-By-Side Editing</div></li>';
jNode.after(sbsBtn);

//add click listener to sbsBtn
jNode.next().on('click', function() {
sideBySideEditing(toAppend);
});

//add click listeners for "Save Edits" and "cancel" buttons
// - also gets added to the "Post New Question" and "Post New Answer" button as an innocuous (I think) side effect
$('#post-editor' + toAppend).siblings('.form-submit').children().on('click', function() {
if($(this).parent().siblings('.sbs-on').length > 0) { //sbs was on, so turn it off
sideBySideEditing(toAppend);
}
});
}, 1000)
}

addButton();
if(window.location.pathname.indexOf('questions/ask') < 0) { //not posting a new question
//get question and answer IDs for keeping track of the event listeners
var anchorList = $('#answers').children("a"); //answers have anchor tags before them of the form <a name="#">,
// where # is the answer ID
var numAnchors = anchorList.length;
var itemIDs = [];

for(i = 1; i <= numAnchors-2; i++) { //the first and last anchors aren't answers
itemIDs.push(anchorList[i].name);
}
itemIDs.push( $('.question').data('questionid') );

//event listeners for adding the sbs toggle buttons for editing existing questions or answers
for(i = 0; i <= numAnchors-2; i++) {
waitForKeyElements('#wmd-redo-button-' + itemIDs[i], addButton);
}
}

//event listener for adding the sbs toggle button for posting new questions or answers
waitForKeyElements('#wmd-redo-button', addButton);

0 comments on commit f7ac4ae

Please sign in to comment.