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