Fixed canvas width issue
This commit is contained in:
Jamie Peabody
386
doc/index.html
386
doc/index.html
@@ -1,193 +1,193 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" /><title>Mergely Manual</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="description" content="Merge and Diff your documents with diff online and share" />
|
||||
<meta name="keywords" content="diff,merge,compare,jsdiff,comparison,difference,file,text,unix,patch,algorithm,saas,longest common subsequence" />
|
||||
<meta name="author" content="Jamie Peabody" />
|
||||
<link rel="shortcut icon" href="http://www.mergely.com/favicon.ico" />
|
||||
<link rel="canonical" href="http://www.mergely.com" />
|
||||
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
|
||||
|
||||
<style type="text/css">
|
||||
body { font-family: Droid Sans, Arial, sans-serif; }
|
||||
pre.code { border: 1px solid #37AFFF; background-color: #efefef; padding: 12px; }
|
||||
dt { color: #3FA6EA; font-weight: bold; }
|
||||
dd { margin-bottom: 1em; }
|
||||
h1 { margin-top: 0px; }
|
||||
.code { border-radius: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<div id="body">
|
||||
<div id="bodycontent" style="margin-right:0px;">
|
||||
<h1>Mergely Reference Manual</h1>
|
||||
|
||||
<h2>Overview</h2>
|
||||
<p>
|
||||
The core of mergely is a javascript-based diff and customizable markup engine.
|
||||
Mergely provides a rich API that enables integration into your own application. It
|
||||
can be used as a diff tool (read-only) or as both a diff and merge
|
||||
tool for plain text, CSS, HTML, XML, javascript, PHP, C, C++, etc.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<h2>Basic Usage</h2>
|
||||
<p>
|
||||
Mergely requires <a href="http://jquery.com">jQuery</a> and <a href="http://codemirror.net">CodeMirror</a>.
|
||||
A supported implementation of CodeMirror is provided in the Mergely download.
|
||||
</p>
|
||||
<p>
|
||||
To use Mergely, you need to first load the required javascript and css files:
|
||||
</p>
|
||||
<pre class="code">
|
||||
<script type="text/javascript"
|
||||
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../lib/codemirror.min.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../lib/codemirror.css" />
|
||||
|
||||
<script type="text/javascript" src="../lib/mergely.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../lib/mergely.css" />
|
||||
</pre>
|
||||
<p>
|
||||
Then, create a div for the editor:
|
||||
</p>
|
||||
<pre class="code">
|
||||
<div id="compare"><div>
|
||||
</pre>
|
||||
<p>
|
||||
Then, initialize the 'compare' div with the mergely jquery plugin, setting
|
||||
options as required:
|
||||
</p>
|
||||
<pre class="code">
|
||||
$(document).ready(function () {
|
||||
$('#compare').mergely({
|
||||
cmsettings: { readOnly: false, lineNumbers: true },
|
||||
lhs: function(setValue) {
|
||||
setValue('the quick red fox\njumped over the hairy dog');
|
||||
},
|
||||
rhs: function(setValue) {
|
||||
setValue('the quick brown fox\njumped over the lazy dog');
|
||||
}
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
|
||||
<h2>Options</h2>
|
||||
<p>
|
||||
The following options are available on initialization:
|
||||
</p>
|
||||
<dl>
|
||||
<dt>autoresize</dt>
|
||||
<dd>Enables/disables the auto-resizing of the editor. Defaults to <span class="code">true</span>.</dd>
|
||||
<dt>cmsettings</dt>
|
||||
<dd>CodeMirror settings (see <a href="http://codemirror.net/doc/manual.html#option_value">CodeMirror</a>). Defaults to <span class="code">{mode: 'application/xml', readOnly: false, lineWrapping: false, lineNumbers: true}</span>.</dd>
|
||||
<dt>editor_width</dt>
|
||||
<dd>Starting width. Defaults to <span class="code">'400px'</span>.</dd>
|
||||
<dt>editor_height</dt>
|
||||
<dd>Starting height. Defaults to <span class="code">'400px'</span>.</dd>
|
||||
<dt>resize_timeout</dt>
|
||||
<dd>The timeout, after a resize, before Mergely auto-resizes. Only used when autoresize enabled. Defaults to <span class="code">500</span>.</dd>
|
||||
<dt>change_timeout</dt>
|
||||
<dd>The timeout, after a text change, before Mergely calcualtes a diff. Only used when readonly enabled. Defaults to <span class="code">500</span>.</dd>
|
||||
<dt>fgcolor</dt>
|
||||
<dd>The foreground color that mergely marks changes with on the canvas. Defaults to <span class="code">'#4ba3fa'</span></dd>
|
||||
<dt>bgcolor</dt>
|
||||
<dd>The background color that mergely fills the margin canvas with. Defaults to <span class="code">'#eeeeee'<span></dd>
|
||||
<dt>fadein</dt>
|
||||
<dd>A jQuery fade-in value to enable the editor to fade in. Set to empty string to disable. Defaults to <span class="code">'fast'<span></dd>
|
||||
</dl>
|
||||
|
||||
<h2>Callbacks</h2>
|
||||
<p>
|
||||
The following callbacks are available on initialization:
|
||||
<p>
|
||||
<dl>
|
||||
<dt>lhs(setValue)</dt>
|
||||
<dd>Allows the opportunity to set the value of the left-hand editor on initialization. A handle to a <span class="code">setValue</span> function is passed as an argument.</dd>
|
||||
<dt>rhs(setValue)</dt>
|
||||
<dd>Allows the opportunity to set the value of the right-hand editor on initialization. A handle to a <span class="code">setValue</span> function is passed as an argument.</dd>
|
||||
<dt>height(h)</dt>
|
||||
<dd>Allows the opportunity to adjust the height when then the editor is resized. Return the adjusted height.</dd>
|
||||
<dt>width(w)</dt>
|
||||
<dd>Allows the opportunity to adjust the width when the editor is resized. Return the adjusted width.</dd>
|
||||
<dt>loaded()</dt>
|
||||
<dd>A callback to indicate that Mergely has finished initializing and is loaded.</dd>
|
||||
<dt>resized()</dt>
|
||||
<dd>A callback to indicate that Mergely has been resized.</dd>
|
||||
</dl>
|
||||
|
||||
<h2>Methods</h2>
|
||||
<p>
|
||||
The following methods are available after initialization:
|
||||
<p>
|
||||
<dl>
|
||||
<dt>$(selector).mergely('lhs', value)</dt>
|
||||
<dd>Set the value of the left-hand editor. Best used with ajax.</dd>
|
||||
<dt>$(selector).mergely('rhs', value)</dt>
|
||||
<dd>Set the value of the right-hand editor. Best used with ajax.</dd>
|
||||
<dt>$(selector).mergely('swap')</dt>
|
||||
<dd>Swap the content of the left and right editors.</dd>
|
||||
<dt>$(selector).mergely('merge', side)</dt>
|
||||
<dd>Merge from <span class="code">side</span> to the opposite side.</dd>
|
||||
<dt>$(selector).mergely('get', side)</dt>
|
||||
<dd>Gets the editor contents.</dd>
|
||||
<dt>$(selector).mergely('clear', side)</dt>
|
||||
<dd>Clears the editor contents.</dd>
|
||||
<dt>$(selector).mergely('search', side, text)</dt>
|
||||
<dd>Search the editor for <span class="code">text</span>. Repeating the call will find the next available token.</dd>
|
||||
<dt>$(selector).resize()</dt>
|
||||
<dd>Resize the editor.</dd>
|
||||
</dl>
|
||||
|
||||
<h2>Styles</h2>
|
||||
<p>
|
||||
The following styles will allow you to brand your own editor:
|
||||
</p>
|
||||
<dl>
|
||||
<dt>.mergely-column</dt>
|
||||
<dd>The editors.</dd>
|
||||
<dt>.mergely-active</dt>
|
||||
<dd>The active editor.</dd>
|
||||
<dt>mergely-c-start</dt>
|
||||
<dd>Styles the starting line of a change.</dd>
|
||||
<dt>mergely-c-end</dt>
|
||||
<dd>Styles the ending line of a change.</dd>
|
||||
<dt>mergely-a-start</dt>
|
||||
<dd>Styles the starting line of an addition.</dd>
|
||||
<dt>mergely-a-mid</dt>
|
||||
<dd>Styles the middle text region of an addition.</dd>
|
||||
<dt>mergely-a-end</dt>
|
||||
<dd>Styles the ending line of an addition.</dd>
|
||||
<dt>mergely-d-start</dt>
|
||||
<dd>Styles the starting line of a deletion.</dd>
|
||||
<dt>mergely-d-mid</dt>
|
||||
<dd>Styles the middle text region of a deletion.</dd>
|
||||
<dt>mergely-d-end</dt>
|
||||
<dd>Styles the ending line of a deletion.</dd>
|
||||
<dt>mergely-c-rem</dt>
|
||||
<dd>Styles the middle text region of a deletion.</dd>
|
||||
<dt>mergely-c-add</dt>
|
||||
<dd>Styles the middle text region of an addition.</dd>
|
||||
<dt>mergely-a-start-lhs</dt>
|
||||
<dd>Styles the start of an addition on the left-hand side.</dd>
|
||||
<dt>mergely-a-end-lhs</dt>
|
||||
<dd>Styles the end of an addition on the left-hand side.</dd>
|
||||
<dt>mergely-d-start-rhs</dt>
|
||||
<dd>Styles the start of an deletion on the right-hand side.</dd>
|
||||
<dt>mergely-d-end-rhs</dt>
|
||||
<dd>Styles the start of an deletion on the right-hand side.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" /><title>Mergely Manual</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="description" content="Merge and Diff your documents with diff online and share" />
|
||||
<meta name="keywords" content="diff,merge,compare,jsdiff,comparison,difference,file,text,unix,patch,algorithm,saas,longest common subsequence" />
|
||||
<meta name="author" content="Jamie Peabody" />
|
||||
<link rel="shortcut icon" href="http://www.mergely.com/favicon.ico" />
|
||||
<link rel="canonical" href="http://www.mergely.com" />
|
||||
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
|
||||
|
||||
<style type="text/css">
|
||||
body { font-family: Droid Sans, Arial, sans-serif; }
|
||||
pre.code { border: 1px solid #37AFFF; background-color: #efefef; padding: 12px; }
|
||||
dt { color: #3FA6EA; font-weight: bold; }
|
||||
dd { margin-bottom: 1em; }
|
||||
h1 { margin-top: 0px; }
|
||||
.code { border-radius: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<div id="body">
|
||||
<div id="bodycontent" style="margin-right:0px;">
|
||||
<h1>Mergely Reference Manual</h1>
|
||||
|
||||
<h2>Overview</h2>
|
||||
<p>
|
||||
The core of mergely is a javascript-based diff and customizable markup engine.
|
||||
Mergely provides a rich API that enables integration into your own application. It
|
||||
can be used as a diff tool (read-only) or as both a diff and merge
|
||||
tool for plain text, CSS, HTML, XML, javascript, PHP, C, C++, etc.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<h2>Basic Usage</h2>
|
||||
<p>
|
||||
Mergely requires <a href="http://jquery.com">jQuery</a> and <a href="http://codemirror.net">CodeMirror</a>.
|
||||
A supported implementation of CodeMirror is provided in the Mergely download.
|
||||
</p>
|
||||
<p>
|
||||
To use Mergely, you need to first load the required javascript and css files:
|
||||
</p>
|
||||
<pre class="code">
|
||||
<script type="text/javascript"
|
||||
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../lib/codemirror.min.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../lib/codemirror.css" />
|
||||
|
||||
<script type="text/javascript" src="../lib/mergely.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../lib/mergely.css" />
|
||||
</pre>
|
||||
<p>
|
||||
Then, create a div for the editor:
|
||||
</p>
|
||||
<pre class="code">
|
||||
<div id="compare"><div>
|
||||
</pre>
|
||||
<p>
|
||||
Then, initialize the 'compare' div with the mergely jquery plugin, setting
|
||||
options as required:
|
||||
</p>
|
||||
<pre class="code">
|
||||
$(document).ready(function () {
|
||||
$('#compare').mergely({
|
||||
cmsettings: { readOnly: false, lineNumbers: true },
|
||||
lhs: function(setValue) {
|
||||
setValue('the quick red fox\njumped over the hairy dog');
|
||||
},
|
||||
rhs: function(setValue) {
|
||||
setValue('the quick brown fox\njumped over the lazy dog');
|
||||
}
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
|
||||
<h2>Options</h2>
|
||||
<p>
|
||||
The following options are available on initialization:
|
||||
</p>
|
||||
<dl>
|
||||
<dt>autoresize</dt>
|
||||
<dd>Enables/disables the auto-resizing of the editor. Defaults to <span class="code">true</span>.</dd>
|
||||
<dt>cmsettings</dt>
|
||||
<dd>CodeMirror settings (see <a href="http://codemirror.net/doc/manual.html#option_value">CodeMirror</a>). Defaults to <span class="code">{mode: 'application/xml', readOnly: false, lineWrapping: false, lineNumbers: true}</span>.</dd>
|
||||
<dt>editor_width</dt>
|
||||
<dd>Starting width. Defaults to <span class="code">'400px'</span>.</dd>
|
||||
<dt>editor_height</dt>
|
||||
<dd>Starting height. Defaults to <span class="code">'400px'</span>.</dd>
|
||||
<dt>resize_timeout</dt>
|
||||
<dd>The timeout, after a resize, before Mergely auto-resizes. Only used when autoresize enabled. Defaults to <span class="code">500</span>.</dd>
|
||||
<dt>change_timeout</dt>
|
||||
<dd>The timeout, after a text change, before Mergely calcualtes a diff. Only used when readonly enabled. Defaults to <span class="code">500</span>.</dd>
|
||||
<dt>fgcolor</dt>
|
||||
<dd>The foreground color that mergely marks changes with on the canvas. Defaults to <span class="code">'#4ba3fa'</span></dd>
|
||||
<dt>bgcolor</dt>
|
||||
<dd>The background color that mergely fills the margin canvas with. Defaults to <span class="code">'#eeeeee'<span></dd>
|
||||
<dt>fadein</dt>
|
||||
<dd>A jQuery fade-in value to enable the editor to fade in. Set to empty string to disable. Defaults to <span class="code">'fast'<span></dd>
|
||||
</dl>
|
||||
|
||||
<h2>Callbacks</h2>
|
||||
<p>
|
||||
The following callbacks are available on initialization:
|
||||
<p>
|
||||
<dl>
|
||||
<dt>lhs(setValue)</dt>
|
||||
<dd>Allows the opportunity to set the value of the left-hand editor on initialization. A handle to a <span class="code">setValue</span> function is passed as an argument.</dd>
|
||||
<dt>rhs(setValue)</dt>
|
||||
<dd>Allows the opportunity to set the value of the right-hand editor on initialization. A handle to a <span class="code">setValue</span> function is passed as an argument.</dd>
|
||||
<dt>height(h)</dt>
|
||||
<dd>Allows the opportunity to adjust the height when then the editor is resized. Return the adjusted height.</dd>
|
||||
<dt>width(w)</dt>
|
||||
<dd>Allows the opportunity to adjust the width when the editor is resized. Return the adjusted width.</dd>
|
||||
<dt>loaded()</dt>
|
||||
<dd>A callback to indicate that Mergely has finished initializing and is loaded.</dd>
|
||||
<dt>resized()</dt>
|
||||
<dd>A callback to indicate that Mergely has been resized.</dd>
|
||||
</dl>
|
||||
|
||||
<h2>Methods</h2>
|
||||
<p>
|
||||
The following methods are available after initialization:
|
||||
<p>
|
||||
<dl>
|
||||
<dt>$(selector).mergely('lhs', value)</dt>
|
||||
<dd>Set the value of the left-hand editor. Best used with ajax.</dd>
|
||||
<dt>$(selector).mergely('rhs', value)</dt>
|
||||
<dd>Set the value of the right-hand editor. Best used with ajax.</dd>
|
||||
<dt>$(selector).mergely('swap')</dt>
|
||||
<dd>Swap the content of the left and right editors.</dd>
|
||||
<dt>$(selector).mergely('merge', side)</dt>
|
||||
<dd>Merge from <span class="code">side</span> to the opposite side.</dd>
|
||||
<dt>$(selector).mergely('get', side)</dt>
|
||||
<dd>Gets the editor contents.</dd>
|
||||
<dt>$(selector).mergely('clear', side)</dt>
|
||||
<dd>Clears the editor contents.</dd>
|
||||
<dt>$(selector).mergely('search', side, text)</dt>
|
||||
<dd>Search the editor for <span class="code">text</span>. Repeating the call will find the next available token.</dd>
|
||||
<dt>$(selector).resize()</dt>
|
||||
<dd>Resize the editor.</dd>
|
||||
</dl>
|
||||
|
||||
<h2>Styles</h2>
|
||||
<p>
|
||||
The following styles will allow you to brand your own editor:
|
||||
</p>
|
||||
<dl>
|
||||
<dt>.mergely-column</dt>
|
||||
<dd>The editors.</dd>
|
||||
<dt>.mergely-active</dt>
|
||||
<dd>The active editor.</dd>
|
||||
<dt>mergely-c-start</dt>
|
||||
<dd>Styles the starting line of a change.</dd>
|
||||
<dt>mergely-c-end</dt>
|
||||
<dd>Styles the ending line of a change.</dd>
|
||||
<dt>mergely-a-start</dt>
|
||||
<dd>Styles the starting line of an addition.</dd>
|
||||
<dt>mergely-a-mid</dt>
|
||||
<dd>Styles the middle text region of an addition.</dd>
|
||||
<dt>mergely-a-end</dt>
|
||||
<dd>Styles the ending line of an addition.</dd>
|
||||
<dt>mergely-d-start</dt>
|
||||
<dd>Styles the starting line of a deletion.</dd>
|
||||
<dt>mergely-d-mid</dt>
|
||||
<dd>Styles the middle text region of a deletion.</dd>
|
||||
<dt>mergely-d-end</dt>
|
||||
<dd>Styles the ending line of a deletion.</dd>
|
||||
<dt>mergely-c-rem</dt>
|
||||
<dd>Styles the middle text region of a deletion.</dd>
|
||||
<dt>mergely-c-add</dt>
|
||||
<dd>Styles the middle text region of an addition.</dd>
|
||||
<dt>mergely-a-start-lhs</dt>
|
||||
<dd>Styles the start of an addition on the left-hand side.</dd>
|
||||
<dt>mergely-a-end-lhs</dt>
|
||||
<dd>Styles the end of an addition on the left-hand side.</dd>
|
||||
<dt>mergely-d-start-rhs</dt>
|
||||
<dd>Styles the start of an deletion on the right-hand side.</dd>
|
||||
<dt>mergely-d-end-rhs</dt>
|
||||
<dd>Styles the start of an deletion on the right-hand side.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user