Most of the editor css, working editor
This commit is contained in:
Eston Bond
+124
-1
@@ -1,4 +1,127 @@
|
|||||||
/*
|
/*
|
||||||
editor.css
|
editor.css
|
||||||
Wiki editor formatting
|
Wiki editor formatting
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
#gollum-editor {
|
||||||
|
border: 1px solid #e4e4e4;
|
||||||
|
background: #f9f9f9;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 1em;
|
||||||
|
|
||||||
|
border-radius: 1em;
|
||||||
|
-moz-border-radius: 1em;
|
||||||
|
-webkit-border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gollum-editor form fieldset {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @control editor-view-tab */
|
||||||
|
#gollum-editor #gollum-editor-type-switcher {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @control function-bar */
|
||||||
|
#gollum-editor #gollum-editor-function-bar {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 0 0.5em 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gollum-editor #gollum-editor-function-bar.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gollum-editor #gollum-editor-function-bar a.function-button {
|
||||||
|
background: #f7f7f7;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
height: 25px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0 0.5em 0 0;
|
||||||
|
/* text-indent: -5000px; */
|
||||||
|
text-shadow: 0 1px 0 #fff;
|
||||||
|
width: 25px;
|
||||||
|
|
||||||
|
border-radius: 0.3em;
|
||||||
|
-moz-border-radius: 0.3em;
|
||||||
|
-webkit-border-radius: 0.3em;
|
||||||
|
|
||||||
|
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f4f4f4', endColorstr='#ececec');
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#ececec));
|
||||||
|
background: -moz-linear-gradient(top, #f4f4f4, #ececec);
|
||||||
|
}
|
||||||
|
|
||||||
|
#gollum-editor #gollum-editor-function-bar a.function-button:hover {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#599bdc', endColorstr='#3072b3');
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#599bdc), to(#3072b3));
|
||||||
|
background: -moz-linear-gradient(top, #599bdc, #3072b3);
|
||||||
|
}
|
||||||
|
|
||||||
|
#gollum-editor #gollum-editor-function-bar span.function-divider {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
width: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* @section form-fields */
|
||||||
|
|
||||||
|
#gollum-editor textarea#gollum-editor-body {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
font-size: 1.3em;
|
||||||
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.8em;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
padding: 0.5em; /* I don't really like mixing pct & em here… */
|
||||||
|
width: 98%;
|
||||||
|
height: 20em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gollum-editor input#gollum-editor-submit {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
border: 1px solid #d4d4d4;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.4em 1em;
|
||||||
|
|
||||||
|
text-shadow: 0 1px 0 #fff;
|
||||||
|
|
||||||
|
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f4f4f4', endColorstr='#ececec');
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#ececec));
|
||||||
|
background: -moz-linear-gradient(top, #f4f4f4, #ececec);
|
||||||
|
|
||||||
|
border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gollum-editor input#gollum-editor-submit:hover {
|
||||||
|
background: #3072b3;
|
||||||
|
border-color: #518cc6 #518cc6 #2a65a0;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#599bdc', endColorstr='#3072b3');
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#599bdc), to(#3072b3));
|
||||||
|
background: -moz-linear-gradient(top, #599bdc, #3072b3);
|
||||||
|
}
|
||||||
@@ -343,6 +343,18 @@ a:hover, a:visited {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* @section edit */
|
||||||
|
.edit h1 {
|
||||||
|
color: #999;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit h1 strong {
|
||||||
|
color: #000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* @control minibutton */
|
/* @control minibutton */
|
||||||
ul.actions {
|
ul.actions {
|
||||||
|
|||||||
+5
-14
@@ -21,15 +21,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="wiki-content">
|
<div id="wiki-content">
|
||||||
<div class="has-rightbar">
|
<div class="has-rightbar">
|
||||||
<div id="wiki-body">
|
|
||||||
<div id="inline-comment">
|
|
||||||
<ul>
|
|
||||||
<li><a href="javascript:void(0);" id="block1"
|
|
||||||
class="has-activity">4</a></li>
|
|
||||||
<li><a href="javascript:void(0);" id="block2"
|
|
||||||
class="no-activity"> </a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="gollum-editor">
|
<div id="gollum-editor">
|
||||||
<form name="gollum-editor" action="#" method="post">
|
<form name="gollum-editor" action="#" method="post">
|
||||||
<ul id="gollum-editor-type-switcher">
|
<ul id="gollum-editor-type-switcher">
|
||||||
@@ -42,14 +33,14 @@
|
|||||||
<a href="#" id="function-underline" class="function-button">
|
<a href="#" id="function-underline" class="function-button">
|
||||||
Underline</a>
|
Underline</a>
|
||||||
<a href="#" id="function-code" class="function-button">Code</a>
|
<a href="#" id="function-code" class="function-button">Code</a>
|
||||||
<span class="function-divider"></span>
|
<span class="function-divider"> </span>
|
||||||
<a href="#" id="function-ul" class="function-button">Unordered List</a>
|
<a href="#" id="function-ul" class="function-button">Unordered List</a>
|
||||||
<a href="#" id="function-ol" class="function-button">Ordered List</a>
|
<a href="#" id="function-ol" class="function-button">Ordered List</a>
|
||||||
<a href="#" id="function-blockquote" class="function-button">
|
<a href="#" id="function-blockquote" class="function-button">
|
||||||
Blockquote</a>
|
Blockquote</a>
|
||||||
<span class="function-divider"></span>
|
<span class="function-divider"> </span>
|
||||||
<a href="#" id="function-link" class="function-button">Link</a>
|
<a href="#" id="function-link" class="function-button">Link</a>
|
||||||
<a href="#" id="function-image" class="function-image">Image</a>
|
<a href="#" id="function-image" class="function-button">Image</a>
|
||||||
</div>
|
</div>
|
||||||
<fieldset id="gollum-editor-fields">
|
<fieldset id="gollum-editor-fields">
|
||||||
<textarea id="gollum-editor-body"
|
<textarea id="gollum-editor-body"
|
||||||
@@ -60,7 +51,6 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="footer">
|
<div id="footer">
|
||||||
<p id="last-edit">Last edited by <span class="username">username</span>, 13:20:21 GMT</p>
|
<p id="last-edit">Last edited by <span class="username">username</span>, 13:20:21 GMT</p>
|
||||||
@@ -69,6 +59,7 @@
|
|||||||
|
|
||||||
<script type="text/javascript" src="js/jquery.js"></script>
|
<script type="text/javascript" src="js/jquery.js"></script>
|
||||||
<script type="text/javascript" src="js/gollum.js"></script>
|
<script type="text/javascript" src="js/gollum.js"></script>
|
||||||
<script type="text/javascript" src="js/gollum.editor.js"></script>
|
<script type="text/javascript" src="js/gollum-editor/gollum.editor.js"></script>
|
||||||
|
<script type="text/javascript" src="js/gollum-editor/langs/markdown.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -0,0 +1,393 @@
|
|||||||
|
/**
|
||||||
|
* gollum.editor.js
|
||||||
|
* A jQuery plugin that creates the Gollum Editor.
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
* $.GollumEditor(); on DOM ready.
|
||||||
|
*/
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
// Editor options
|
||||||
|
var DefaultOptions = {
|
||||||
|
MarkupType: 'markdown',
|
||||||
|
EditorMode: 'code',
|
||||||
|
HasFunctionBar: true,
|
||||||
|
Debug: true
|
||||||
|
};
|
||||||
|
var ActiveOptions = {};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* $.GollumEditor
|
||||||
|
*
|
||||||
|
* You don't need to do anything. Just run this on DOM ready.
|
||||||
|
*/
|
||||||
|
$.GollumEditor = function( IncomingOptions ) {
|
||||||
|
|
||||||
|
ActiveOptions = $.extend( DefaultOptions, IncomingOptions );
|
||||||
|
|
||||||
|
debug('GollumEditor loading');
|
||||||
|
|
||||||
|
if ( EditorHas.baseEditorMarkup() ) {
|
||||||
|
// Initialise the function bar by loading proper definitions
|
||||||
|
if ( EditorHas.functionBar() ) {
|
||||||
|
var htmlSetMarkupLang =
|
||||||
|
$('#gollum-editor-body').attr('data-markup-lang');
|
||||||
|
|
||||||
|
if ( htmlSetMarkupLang ) {
|
||||||
|
ActiveOptions.MarkupType = htmlSetMarkupLang;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !LanguageDefinition.isLoadedFor(ActiveOptions.MarkupType) ) {
|
||||||
|
debug('Loading language definition for ' + ActiveOptions.MarkupType);
|
||||||
|
LanguageDefinition.loadFor( ActiveOptions.MarkupType,
|
||||||
|
function(data, textStatus) {
|
||||||
|
console.log( data, textStatus );
|
||||||
|
if ( textStatus != 'success' ) {
|
||||||
|
debug('Language definition could not be loaded for markup '
|
||||||
|
+ 'type ' + ActiveOptions.MarkupType);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// activate the function bar
|
||||||
|
debug('Activating function bar');
|
||||||
|
FunctionBar.activate();
|
||||||
|
} );
|
||||||
|
} else {
|
||||||
|
// loaded language already
|
||||||
|
debug('Activating function bar');
|
||||||
|
FunctionBar.activate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// EditorHas.functionBar
|
||||||
|
}
|
||||||
|
// EditorHas.baseEditorMarkup
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* $.GollumEditor.defineLanguage
|
||||||
|
* Defines a set of language actions that Gollum can use.
|
||||||
|
* Used by the definitions in langs/ to register language definitions.
|
||||||
|
*/
|
||||||
|
$.GollumEditor.defineLanguage = function( language_name, languageObject ) {
|
||||||
|
console.log('Defining language for ' + language_name);
|
||||||
|
if ( typeof languageObject == 'object' )
|
||||||
|
LanguageDefinition.define( language_name, languageObject );
|
||||||
|
else
|
||||||
|
debug('GollumEditor.defineLanguage: definition for ' + language_name
|
||||||
|
+ ' is not an object');
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* debug
|
||||||
|
* Prints debug information to console.log if debug output is enabled.
|
||||||
|
*
|
||||||
|
* @param mixed Whatever you want to dump to console.log
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
var debug = function(m) {
|
||||||
|
if ( ActiveOptions.Debug && console
|
||||||
|
&& typeof console.log == 'function' ) {
|
||||||
|
console.log( m );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* LanguageDefinition
|
||||||
|
* Language definition file handler
|
||||||
|
* Loads language definition files as necessary.
|
||||||
|
*/
|
||||||
|
var LanguageDefinition = {
|
||||||
|
|
||||||
|
_ACTIVE_LANG: '',
|
||||||
|
_LOADED_LANGS: [],
|
||||||
|
_LANG: {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines a language
|
||||||
|
*
|
||||||
|
* @param name string The name of the language
|
||||||
|
* @param name object The definition object
|
||||||
|
*/
|
||||||
|
define: function( name, definitionObject ) {
|
||||||
|
LanguageDefinition._ACTIVE_LANG = name;
|
||||||
|
LanguageDefinition._LOADED_LANGS.push( name );
|
||||||
|
LanguageDefinition._LANG[name] = definitionObject;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* gets a definition object for a specified attribute
|
||||||
|
*
|
||||||
|
* @param string attr The specified attribute.
|
||||||
|
* @param string specified_lang The language to pull a definition for.
|
||||||
|
* @return object if exists, null otherwise
|
||||||
|
*/
|
||||||
|
getDefinitionFor: function( attr, specified_lang ) {
|
||||||
|
if ( !specified_lang ) {
|
||||||
|
specified_lang = LanguageDefinition._ACTIVE_LANG;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( LanguageDefinition.isLoadedFor(specified_lang) &&
|
||||||
|
LanguageDefinition._LANG[specified_lang][attr] &&
|
||||||
|
typeof LanguageDefinition._LANG[specified_lang][attr] == 'object' ) {
|
||||||
|
return LanguageDefinition._LANG[specified_lang][attr];
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* loadFor
|
||||||
|
* Asynchronously loads a definition file for the current markup.
|
||||||
|
* Definition files are necessary to use the code editor.
|
||||||
|
*
|
||||||
|
* @param string markup_name The markup name you want to load
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
loadFor: function( markup_name, on_complete ) {
|
||||||
|
// attempt to load the definition for this language
|
||||||
|
var script_uri = 'js/gollum-editor/langs/' + markup_name + '.js';
|
||||||
|
$.ajax({
|
||||||
|
url: script_uri,
|
||||||
|
dataType: 'script',
|
||||||
|
complete: function( xhr, textStatus ) {
|
||||||
|
if ( typeof on_complete == 'function' ) {
|
||||||
|
on_complete( xhr, textStatus );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* isLoadedFor
|
||||||
|
* Checks to see if a definition file has been loaded for the
|
||||||
|
* specified markup language.
|
||||||
|
*
|
||||||
|
* @param string markup_name The name of the markup.
|
||||||
|
* @return boolean
|
||||||
|
*/
|
||||||
|
isLoadedFor: function( markup_name ) {
|
||||||
|
if ( LanguageDefinition._LOADED_LANGS.length == 0 ) return false;
|
||||||
|
|
||||||
|
for ( var i=0; i < LanguageDefinition._LOADED_LANGS.length; i++ ) {
|
||||||
|
if ( LanguageDefinition._LOADED_LANGS[i] == markup_name )
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* EditorHas
|
||||||
|
* Various conditionals to check what features of the Gollum Editor are
|
||||||
|
* active/operational.
|
||||||
|
*/
|
||||||
|
var EditorHas = {
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* EditorHas.baseEditorMarkup
|
||||||
|
* True if the basic editor form is in place.
|
||||||
|
*
|
||||||
|
* @return boolean
|
||||||
|
*/
|
||||||
|
baseEditorMarkup: function() {
|
||||||
|
return ( $('#gollum-editor').length &&
|
||||||
|
$('#gollum-editor-body').length );
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* EditorHas.functionBar
|
||||||
|
* True if the Function Bar markup exists.
|
||||||
|
*
|
||||||
|
* @return boolean
|
||||||
|
*/
|
||||||
|
functionBar: function() {
|
||||||
|
return ( ActiveOptions.HasFunctionBar &&
|
||||||
|
$('#gollum-editor-function-bar').length );
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* EditorHas.ff4Environment
|
||||||
|
* True if in a Firefox 4.0 Beta environment.
|
||||||
|
*
|
||||||
|
* @return boolean
|
||||||
|
*/
|
||||||
|
ff4Environment: function() {
|
||||||
|
var ua = new RegExp(/Firefox\/4.0b/);
|
||||||
|
return ( ua.test( navigator.userAgent ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FunctionBar
|
||||||
|
*
|
||||||
|
* Things the function bar does.
|
||||||
|
*/
|
||||||
|
var FunctionBar = {
|
||||||
|
|
||||||
|
isActive: false,
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FunctionBar.activate
|
||||||
|
* Activates the function bar, attaching all click events
|
||||||
|
* and displaying the bar.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
activate: function() {
|
||||||
|
$('#gollum-editor-function-bar a.function-button')
|
||||||
|
.click( FunctionBar.evtFunctionButtonClick );
|
||||||
|
// show bar as active
|
||||||
|
$('#gollum-editor-function-bar').addClass( 'active' );
|
||||||
|
FunctionBar.isActive = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FunctionBar.evtFunctionButtonClick
|
||||||
|
* Event handler for the function buttons. Traps the click and
|
||||||
|
* executes the proper language action.
|
||||||
|
*
|
||||||
|
* @param jQuery.Event jQuery event object.
|
||||||
|
*/
|
||||||
|
evtFunctionButtonClick: function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var def = LanguageDefinition.getDefinitionFor( $(this).attr('id') );
|
||||||
|
if ( typeof def == 'object' ) {
|
||||||
|
FunctionBar.executeAction( def );
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FunctionBar.executeAction
|
||||||
|
* Executes a language-specific defined action for a function button.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
executeAction: function( definitionObject ) {
|
||||||
|
// get the selected text from the textarea
|
||||||
|
var txt = $('#gollum-editor-body').val();
|
||||||
|
// hmm, I'm not sure this will work in a textarea
|
||||||
|
var selPos = FunctionBar
|
||||||
|
.getFieldSelectionPosition( $('#gollum-editor-body') );
|
||||||
|
var selText = FunctionBar.getFieldSelection( $('#gollum-editor-body') );
|
||||||
|
var repText = selText;
|
||||||
|
|
||||||
|
// execute a replacement function if one exists
|
||||||
|
if ( definitionObject.exec &&
|
||||||
|
typeof definitionObject.exec == 'function' ) {
|
||||||
|
repText = definitionObject.exec (
|
||||||
|
txt, selText, $('#gollum-editor-body') );
|
||||||
|
}
|
||||||
|
|
||||||
|
// execute a search/replace if they exist
|
||||||
|
var searchExp = /([^\n]+)/gi;
|
||||||
|
if ( definitionObject.search &&
|
||||||
|
typeof definitionObject.search == 'object' ) {
|
||||||
|
debug('Replacing search Regex');
|
||||||
|
searchExp = definitionObject.search;
|
||||||
|
debug( searchExp );
|
||||||
|
}
|
||||||
|
|
||||||
|
// replace text
|
||||||
|
if ( definitionObject.replace &&
|
||||||
|
typeof definitionObject.replace == 'string' ) {
|
||||||
|
debug('Running replacement - using ' + definitionObject.replace);
|
||||||
|
repText = repText.replace( searchExp, definitionObject.replace );
|
||||||
|
}
|
||||||
|
|
||||||
|
// append if necessary
|
||||||
|
if ( definitionObject.append &&
|
||||||
|
typeof definitionObject.append == 'string' ) {
|
||||||
|
repText += definitionObject.append;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (repText)
|
||||||
|
FunctionBar.replaceFieldSelection( $('#gollum-editor-body'),
|
||||||
|
repText );
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* getFieldSelectionPosition
|
||||||
|
* Retrieves the selection range for the textarea.
|
||||||
|
*
|
||||||
|
* @return object the .start and .end offsets in the string
|
||||||
|
*/
|
||||||
|
getFieldSelectionPosition: function( $field ) {
|
||||||
|
if ($field.length) {
|
||||||
|
return {
|
||||||
|
start: $field[0].selectionStart,
|
||||||
|
end: $field[0].selectionEnd
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* getFieldSelection
|
||||||
|
* Returns the currently selected substring of the textarea.
|
||||||
|
*
|
||||||
|
* @param jQuery A jQuery object for the textarea.
|
||||||
|
* @return string Selected string.
|
||||||
|
*/
|
||||||
|
getFieldSelection: function( $field ) {
|
||||||
|
var selStr = '';
|
||||||
|
var selPos;
|
||||||
|
|
||||||
|
if ( $field.length ) {
|
||||||
|
selPos = FunctionBar.getFieldSelectionPosition( $field );
|
||||||
|
selStr = $field.val().substring( selPos.start, selPos.end );
|
||||||
|
debug('Selected: ' + selStr + ' (' + selPos.start + ', '
|
||||||
|
+ selPos.end + ')');
|
||||||
|
return selStr;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* replaceFieldSelection
|
||||||
|
* Replaces the currently selected substring of the textarea with
|
||||||
|
* a new string.
|
||||||
|
*
|
||||||
|
* @param jQuery A jQuery object for the textarea.
|
||||||
|
* @param string The string to replace the current selection with.
|
||||||
|
*/
|
||||||
|
replaceFieldSelection: function( $field, replaceText ) {
|
||||||
|
var selPos = FunctionBar.getFieldSelectionPosition( $field );
|
||||||
|
var fullStr = $field.val();
|
||||||
|
|
||||||
|
$field.val( fullStr.substring(0, selPos.start) + replaceText +
|
||||||
|
fullStr.substring(selPos.end));
|
||||||
|
|
||||||
|
if ( $field[0].setSelectionRange ) {
|
||||||
|
$field[0].focus();
|
||||||
|
$field[0].setSelectionRange( selPos.start,
|
||||||
|
selPos.start + replaceText.length );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
|
|
||||||
|
jQuery(document).ready(function() {
|
||||||
|
$.GollumEditor();
|
||||||
|
});
|
||||||
@@ -1,260 +0,0 @@
|
|||||||
/**
|
|
||||||
* gollum.editor.js
|
|
||||||
* A jQuery plugin that creates the Gollum Editor.
|
|
||||||
*
|
|
||||||
* Usage:
|
|
||||||
* $.GollumEditor(); on DOM ready.
|
|
||||||
**/
|
|
||||||
/* (function($) { */
|
|
||||||
|
|
||||||
var GollumDefaults = {
|
|
||||||
MarkupType: 'markdown',
|
|
||||||
EditorMode: 'code',
|
|
||||||
HasFunctionBar: true,
|
|
||||||
Debug: true
|
|
||||||
};
|
|
||||||
|
|
||||||
var ActiveOptions = {};
|
|
||||||
|
|
||||||
$.GollumEditor = function(options) {
|
|
||||||
|
|
||||||
ActiveOptions = $.extend(GollumDefaults, options);
|
|
||||||
debug('GollumEditor loading');
|
|
||||||
|
|
||||||
if ( EditorHas.baseEditorMarkup() ) {
|
|
||||||
|
|
||||||
// Initialise the function bar by loading proper definitions
|
|
||||||
if ( EditorHas.functionBar() ) {
|
|
||||||
var htmlSetMarkupLang =
|
|
||||||
$('#gollum-editor-body').attr('data-markup-lang');
|
|
||||||
|
|
||||||
if ( htmlSetMarkupLang ) {
|
|
||||||
ActiveOptions.MarkupType = htmlSetMarkupLang;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !LanguageDefinition.isLoadedFor(ActiveOptions.MarkupType) ) {
|
|
||||||
debug('Loading language definition for ' + ActiveOptions.MarkupType);
|
|
||||||
LanguageDefinition.loadFor(ActiveOptions.MarkupType,
|
|
||||||
function(data, textStatus) {
|
|
||||||
if (textStatus != 'success') {
|
|
||||||
debug('Language definition could not be loaded for markup '
|
|
||||||
+ 'type ' + ActiveOptions.MarkupType);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// activate the function bar
|
|
||||||
FunctionBar.activate();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$.GollumEditor.defineLanguage = function( language_name, languageObject ) {
|
|
||||||
if ( typeof languageObject == 'object' )
|
|
||||||
LanguageDefinition.define( language_name, languageObject );
|
|
||||||
else
|
|
||||||
debug('GollumEditor.defineLanguage: definition for ' + language_name
|
|
||||||
+ ' is not an object');
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* debug
|
|
||||||
* Prints debug information to console.log if debug output is enabled.
|
|
||||||
*
|
|
||||||
* @param mixed Whatever you want to dump to console.log
|
|
||||||
* @return void
|
|
||||||
**/
|
|
||||||
var debug = function(m) {
|
|
||||||
if ( ActiveOptions.Debug && console
|
|
||||||
&& typeof console.log == 'function' ) {
|
|
||||||
console.log(m);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* LanguageDefinition
|
|
||||||
* Language definition file handler
|
|
||||||
* Loads language definition files as necessary.
|
|
||||||
**/
|
|
||||||
var LanguageDefinition = {
|
|
||||||
|
|
||||||
_ACTIVE_LANG: '',
|
|
||||||
_LOADED_LANGS: [],
|
|
||||||
_LANG: {},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Defines a language
|
|
||||||
**/
|
|
||||||
define: function( name, definitionObject ) {
|
|
||||||
LanguageDefinition._LANG[name] = definitionObject;
|
|
||||||
LanguageDefinition._ACTIVE_LANG = name;
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* gets a definition object for a specified attribute
|
|
||||||
*
|
|
||||||
* @param string attr The specified attribute.
|
|
||||||
* @param string specified_lang The language to pull a definition for.
|
|
||||||
* @return object if exists, null otherwise
|
|
||||||
**/
|
|
||||||
getDefinitionFor: function( attr, specified_lang ) {
|
|
||||||
if ( !specified_lang ) {
|
|
||||||
specified_lang = LanguageDefinition._ACTIVE_LANG;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( LanguageDefinition.isLoadedFor(specified_lang) &&
|
|
||||||
LanguageDefinition._LANG[specified_lang][attr] &&
|
|
||||||
typeof LanguageDefinition_LANG[specified_lang][attr] == 'object' ) {
|
|
||||||
return LanguageDefinition._LANG[specified_lang][attr];
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* loadFor
|
|
||||||
* Asynchronously loads a definition file for the current markup.
|
|
||||||
* Definition files are necessary to use the code editor.
|
|
||||||
*
|
|
||||||
* @param string markup_name The markup name you want to load
|
|
||||||
* @return void
|
|
||||||
**/
|
|
||||||
loadFor: function( markup_name, on_complete ) {
|
|
||||||
// attempt to load the definition for this language
|
|
||||||
var script_uri = 'js/gollum-editor/langs/' + markup_name + '.js';
|
|
||||||
$.ajax({
|
|
||||||
url: script_uri,
|
|
||||||
dataType: 'script',
|
|
||||||
complete: function(xhr, textStatus) {
|
|
||||||
if (textStatus == 'success') {
|
|
||||||
LanguageDefinition._LOADED_LANGS.push(markup_name);
|
|
||||||
}
|
|
||||||
if (typeof on_complete == 'function') {
|
|
||||||
on_complete(xhr, textStatus, markup_name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* isLoadedFor
|
|
||||||
* Checks to see if a definition file has been loaded for the
|
|
||||||
* specified markup language.
|
|
||||||
*
|
|
||||||
* @param string markup_name The name of the markup.
|
|
||||||
* @return boolean
|
|
||||||
**/
|
|
||||||
isLoadedFor: function( markup_name ) {
|
|
||||||
if ( LanguageDefinition._LOADED_LANGS.length == 0 ) return false;
|
|
||||||
|
|
||||||
for (var i=0; i < LanguageDefinition._LOADED_LANGS.length; i++) {
|
|
||||||
if ( LanguageDefinition._LOADED_LANGS[i] == markup_name )
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* EditorHas
|
|
||||||
* Various conditionals to check what features of the Gollum Editor are
|
|
||||||
* active/operational.
|
|
||||||
**/
|
|
||||||
var EditorHas = {
|
|
||||||
|
|
||||||
baseEditorMarkup: function() {
|
|
||||||
return ( $('#gollum-editor').length &&
|
|
||||||
$('#gollum-editor-body').length );
|
|
||||||
},
|
|
||||||
|
|
||||||
functionBar: function() {
|
|
||||||
return ( ActiveOptions.HasFunctionBar &&
|
|
||||||
$('#gollum-editor-function-bar').length );
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* FunctionBar
|
|
||||||
*
|
|
||||||
* Things the function bar does.
|
|
||||||
**/
|
|
||||||
var FunctionBar = {
|
|
||||||
|
|
||||||
isActive: false,
|
|
||||||
|
|
||||||
activate: function() {
|
|
||||||
$('#gollum-editor-function-bar a.function-button')
|
|
||||||
.click(FunctionBar.evtFunctionButtonClick);
|
|
||||||
// show bar as active
|
|
||||||
$('#gollum-editor-function-bar').addClass('active');
|
|
||||||
FunctionBar.isActive = true;
|
|
||||||
},
|
|
||||||
|
|
||||||
evtFunctionButtonClick: function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var def = LanguageDefinition.getDefinitionFor( $(this).attr() );
|
|
||||||
if ( def ) {
|
|
||||||
FunctionBar.executeAction( def );
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
executeAction: function( definitionObject ) {
|
|
||||||
// get the selected text from the textarea
|
|
||||||
var txt = $('#gollum-editor-body').val();
|
|
||||||
// hmm, I'm not sure this will work in a textarea
|
|
||||||
var selText = $('#gollum-editor-body').getSelection();
|
|
||||||
var repText = null;
|
|
||||||
|
|
||||||
// exec a function if it exists first
|
|
||||||
if ( definitionObject.exec &&
|
|
||||||
typeof definitionObject.exec == 'function' ) {
|
|
||||||
definitionObject(txt, selText, $('#gollum-editor-body'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// exec search/replace if both exist
|
|
||||||
if ( definitionObject.replace &&
|
|
||||||
typeof definitionObject.replace == 'string' ) {
|
|
||||||
|
|
||||||
var searchRegex = /(.*)/gi;
|
|
||||||
if ( definitionObject.search &&
|
|
||||||
( typeof definitionObject.search == 'string' ||
|
|
||||||
typeof definitionObject.search == 'regexp' )) {
|
|
||||||
searchRegex = definitionObject.search;
|
|
||||||
} else {
|
|
||||||
debug('Invalid search regex, using default');
|
|
||||||
}
|
|
||||||
|
|
||||||
repText = selText.replace(searchRegex, definitionObject.replace);
|
|
||||||
} else {
|
|
||||||
debug('Invalid replacement string');
|
|
||||||
}
|
|
||||||
|
|
||||||
// now, add append if it exists
|
|
||||||
if ( definitionObject.append &&
|
|
||||||
typeof definitionObject.append == 'string' ) {
|
|
||||||
repText += definitionObject.append;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (repText)
|
|
||||||
$('#gollum-editor-body').replaceSelection(repText);
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/* })(jQuery); */
|
|
||||||
|
|
||||||
jQuery(document).ready(function() {
|
|
||||||
$.GollumEditor();
|
|
||||||
});
|
|
||||||
+1
-1
@@ -20,7 +20,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="wiki-content">
|
<div id="wiki-content">
|
||||||
<div class="has-rightbar has-footer">
|
<div class=" has-footer">
|
||||||
<div id="wiki-body">
|
<div id="wiki-body">
|
||||||
<div id="inline-comment">
|
<div id="inline-comment">
|
||||||
<ul>
|
<ul>
|
||||||
|
|||||||
Reference in New Issue
Block a user