Beginnings of new editor
This commit is contained in:
Eston Bond
@@ -0,0 +1,4 @@
|
||||
/*
|
||||
editor.css
|
||||
Wiki editor formatting
|
||||
*/
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="css/gollum.css" media="all">
|
||||
<link rel="stylesheet" type="text/css" href="css/editor.css" media="all">
|
||||
<title>Page Name — Site Name</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wiki-wrapper" class="edit">
|
||||
<div id="head">
|
||||
<h1>Editing <strong>Page Title</strong></h1>
|
||||
<ul class="actions">
|
||||
<li class="minibutton"><a href="javascript:void(0);"
|
||||
class="action-edit-page">Edit Page</a></li>
|
||||
<li class="minibutton"><a href="javascript:void(0);"
|
||||
class="action-page-history">Page History</a></li>
|
||||
<li class="minibutton" class="action-discussion">
|
||||
<a href="javascript:void(0);">Discussion <span>(10)<span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="wiki-content">
|
||||
<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">
|
||||
<form name="gollum-editor" action="#" method="post">
|
||||
<ul id="gollum-editor-type-switcher">
|
||||
<li><a href="#" id="type-switch-code" class="active">Code</a></li>
|
||||
<li><a href="#" id="type-switch-rt">Easy Mode</a></li>
|
||||
</ul>
|
||||
<div id="gollum-editor-function-bar">
|
||||
<a href="#" id="function-bold" class="function-button">Bold</a>
|
||||
<a href="#" id="function-italic" class="function-button">Italic</a>
|
||||
<a href="#" id="function-underline" class="function-button">
|
||||
Underline</a>
|
||||
<a href="#" id="function-code" class="function-button">Code</a>
|
||||
<span class="function-divider"></span>
|
||||
<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-blockquote" class="function-button">
|
||||
Blockquote</a>
|
||||
<span class="function-divider"></span>
|
||||
<a href="#" id="function-link" class="function-button">Link</a>
|
||||
<a href="#" id="function-image" class="function-image">Image</a>
|
||||
</div>
|
||||
<fieldset id="gollum-editor-fields">
|
||||
<textarea id="gollum-editor-body"
|
||||
data-markup-lang="markdown"></textarea>
|
||||
<span class="aural"><br></span>
|
||||
<input type="submit" id="gollum-editor-submit" value="Save">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p id="last-edit">Last edited by <span class="username">username</span>, 13:20:21 GMT</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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.editor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
// meh
|
||||
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* 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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 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 = {
|
||||
|
||||
_LOADED_LANGS: [],
|
||||
|
||||
/**
|
||||
* 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');
|
||||
this.isActive = true;
|
||||
},
|
||||
|
||||
evtFunctionButtonClick: function(e) {
|
||||
alert('eee');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/* })(jQuery); */
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
$.GollumEditor();
|
||||
});
|
||||
Reference in New Issue
Block a user