Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

done some styling work. autosuggest currently not really functional

  • Loading branch information...
commit 8336cfc35ac1c9c2612d06a29bf85f2edee56fac 1 parent f763e3b
@wolfv authored
View
7 README.md
@@ -2,8 +2,11 @@
Requires Silverstripe 3.0 and a modern browser.
-A simple, yet versatile field for nice textediting in the Silverstripe CMS.
+A simple, yet versatile field for nice textediting in the Silverstripe CMS. It's based on the ACE Editor.
Features:
-Suggest Link: `[Testlink](:` leads to a autosuggest-field.
+Suggest Link: `[Testlink](:` leads to an autosuggest-field.
+Suggest Image: `[Image Description](!` opens an image-autosuggest field.
+
+Credits for Markdown Logo go to Dustin Curtis. All other icons were made by Orman Clark [Premium Pixels](http://www.premiumpixels.com)
View
6 code/MarkdownField.php
@@ -16,7 +16,6 @@ function Field($properties = array()) {
$properties["FindLink"] = $this->Link() . '/getlinktoid';
$properties["Editor"] = $this->Link() . '/getEditor';
-
$obj = ($properties) ? $this->customise($properties) : $this;
return $obj->renderWith($this->getTemplate());
}
@@ -70,6 +69,11 @@ public function getEditor() {
Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js');
Requirements::javascript(THIRDPARTY_DIR . '/jquery-ui/jquery-ui.js');
Requirements::javascript(THIRDPARTY_DIR. '/jquery-entwine/dist/jquery.entwine-dist.js');
+
+ Requirements::javascript('sapphire/admin/javascript/ssui.core.js');
+ Requirements::javascript('sapphire/javascript/HtmlEditorField.js');
+
+
Requirements::javascript('markdown/javascript/lib/jquery.ui.autocomplete.html.js');
Requirements::javascript('markdown/javascript/lib/showdown.js');
Requirements::javascript('markdown/javascript/lib/ace/src/ace.js');
View
2  code/MarkdownParser.php
@@ -7,6 +7,6 @@
class MarkdownParser extends TextParser {
function parse() {
$text = MarkdownExtended($this->content);
- return hyphenation($text);
+ return $text;
}
}
View
94 css/md.css
@@ -1,12 +1,3 @@
-/* line 6, ../scss/md.sass */
-::-webkit-scrollbar { width: 5px; height: 5px; }
-
-/* line 10, ../scss/md.sass */
-::-webkit-scrollbar-track { background: white; -webkit-border-radius: 5px; }
-
-/* line 13, ../scss/md.sass */
-::-webkit-scrollbar-thumb { background: #aaaaaa; -webkit-border-radius: 5px; }
-
/* line 16, ../scss/md.sass */
.x { clear: both; }
@@ -14,54 +5,69 @@
div.field.markdown .middleColumn { position: relative; }
/* line 21, ../scss/md.sass */
-.markdown_Iframe { width: 100%; height: 520px; }
+.markdown-editor-iframe { width: 100%; height: 520px; }
-/* line 24, ../scss/md.sass */
+/* line 25, ../scss/md.sass */
+.markdown-editor-toolbar { position: absolute; padding: 5px; top: 0; left: 48px; width: 446px; background: whiteSmoke; }
+/* line 32, ../scss/md.sass */
+.markdown-editor-toolbar .logo { width: 32px; height: 20px; background: url('../images/markdown32x20.png?1340987236') no-repeat center; display: inline-block; float: left; margin-left: -45px; }
+/* line 39, ../scss/md.sass */
+.markdown-editor-toolbar .md-button { width: 20px; height: 16px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; border: solid 2px black; font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; text-align: center; float: left; cursor: pointer; margin-right: 5px; }
+/* line 49, ../scss/md.sass */
+.markdown-editor-toolbar .md-button.md-help { background: url('../images/info.png?1297166812') no-repeat center; }
+/* line 51, ../scss/md.sass */
+.markdown-editor-toolbar .md-button.md-preview { background: url('../images/eye.png?1297167108') no-repeat center; }
+/* line 53, ../scss/md.sass */
+.markdown-editor-toolbar .md-button.md-refresh { background: url('../images/reload.png?1297166840') no-repeat center; }
+/* line 55, ../scss/md.sass */
+.markdown-editor-toolbar .md-button.md-close { background: url('../images/close.png?1297166968') no-repeat center; }
+/* line 57, ../scss/md.sass */
+.markdown-editor-toolbar .md-button:hover { background-color: #aaaaaa; }
+
+/* line 59, ../scss/md.sass */
textarea.markdown { display: none; }
-/* line 26, ../scss/md.sass */
-#markdown_EditorWrapper { position: relative; float: left; height: 470px; margin-right: 40px; }
+/* line 61, ../scss/md.sass */
+#markdown_EditorHTML { overflow: hidden; }
-/* line 31, ../scss/md.sass */
-#markdown_Editor { position: absolute; top: 30px; left: 0; width: 512px; height: 470px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background: white; z-index: 100; }
+/* line 63, ../scss/md.sass */
+#markdown_EditorWrapper { position: relative; float: left; height: 470px; margin-right: 40px; }
-/* line 40, ../scss/md.sass */
-#markdown_ButtonBar { position: absolute; padding: 5px; top: 0; left: 54px; width: 446px; background: whiteSmoke; }
-/* line 47, ../scss/md.sass */
-#markdown_ButtonBar .markdown_button { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; font-size: 15px; text-align: center; padding: 3px; line-height: 15px; float: left; cursor: pointer; margin-right: 5px; }
-/* line 56, ../scss/md.sass */
-#markdown_ButtonBar .markdown_button:hover { -moz-box-shadow: 0 0 3px #777777; -webkit-box-shadow: 0 0 3px #777777; -o-box-shadow: 0 0 3px #777777; box-shadow: 0 0 3px #777777; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f5f5f5), color-stop(100%, #e5e5e5)); background-image: -webkit-linear-gradient(#f5f5f5, #e5e5e5); background-image: -moz-linear-gradient(#f5f5f5, #e5e5e5); background-image: -o-linear-gradient(#f5f5f5, #e5e5e5); background-image: -ms-linear-gradient(#f5f5f5, #e5e5e5); background-image: linear-gradient(#f5f5f5, #e5e5e5); border: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; }
+/* line 68, ../scss/md.sass */
+#markdown_Editor { position: absolute; top: 30px; left: 0; width: 512px; height: 470px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background: white; z-index: 100; }
-/* line 61, ../scss/md.sass */
+/* line 77, ../scss/md.sass */
#markdown_Value { display: none; }
-/* line 63, ../scss/md.sass */
-#markdown_Preview { position: relative; margin-top: 30px; width: 512px; height: 470px; background: white; float: left; overflow-y: scroll; opacity: 0; }
+/* line 79, ../scss/md.sass */
+#markdown_Preview { position: relative; margin-top: 30px; width: 502px; height: 460px; background: white; float: left; overflow-y: scroll; opacity: 0; padding: 5px; }
-/* line 72, ../scss/md.sass */
-#markdown_PreviewButton { padding: 3px 5px; cursor: pointer; border: none; }
-/* line 76, ../scss/md.sass */
-#markdown_PreviewButton:active, #markdown_PreviewButton:focus { background: #748d9d; }
-/* line 78, ../scss/md.sass */
-#markdown_PreviewButton:hover { background: #92a5b2; }
+/* line 89, ../scss/md.sass */
+.hidden-proxy-buttons { display: none; }
-/* line 80, ../scss/md.sass */
-#markdown_PreviewContent { overflow-y: scroll; padding: 10px; }
+/* line 91, ../scss/md.sass */
+#markdown_PreviewContent { overflow-y: hidden; padding: 5px; background: white; }
-/* line 84, ../scss/md.sass */
-.autocomplete { border: none; color: red; height: 15px; font-size: 12px; font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; background: white; padding: 0px; background: white; width: 200px; position: absolute; top: 10px; right: 100px; display: none; }
-/* line 98, ../scss/md.sass */
+/* line 95, ../scss/md.sass */
+.autocomplete { border: none; color: #3875d7; height: 15px; font-size: 12px; font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; background: white; padding: 0px; background: white; width: 200px; position: absolute; top: 10px; right: 100px; display: none; }
+/* line 109, ../scss/md.sass */
.autocomplete:focus { outline: none; border: none; }
-/* line 101, ../scss/md.sass */
-.ui-autocomplete { list-style-type: none; width: 200px; margin: 0; padding: 0; }
-/* line 106, ../scss/md.sass */
-.ui-autocomplete .ui-menu-item { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; padding: 0; display: block; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; font-size: 12px; line-height: 15px; border: none; background: #f3f3f3; }
-/* line 115, ../scss/md.sass */
+/* line 112, ../scss/md.sass */
+.ui-autocomplete { list-style-type: none; width: 200px; margin: 0; padding: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; }
+/* line 118, ../scss/md.sass */
+.ui-autocomplete .ui-menu-item { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; padding: 2px; display: block; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; font-size: 12px; line-height: 15px; background: #f9f9f9; clear: both; border-bottom: 1px solid #cccccc; }
+/* line 128, ../scss/md.sass */
+.ui-autocomplete .ui-menu-item:last-child { border-bottom: 0; }
+/* line 130, ../scss/md.sass */
+.ui-autocomplete .ui-menu-item .image_suggest_item { display: inline-block; }
+/* line 132, ../scss/md.sass */
.ui-autocomplete .ui-menu-item .autosuggest_breadcrumb { display: block; color: #999999; font-size: 10px; line-height: 10px; }
-/* line 120, ../scss/md.sass */
+/* line 137, ../scss/md.sass */
.ui-autocomplete .ui-menu-item .autosuggest_title { display: block; color: black; }
-/* line 123, ../scss/md.sass */
+/* line 140, ../scss/md.sass */
.ui-autocomplete .ui-menu-item a { display: block; }
-/* line 125, ../scss/md.sass */
-.ui-autocomplete .ui-menu-item .ui-state-hover { background: red; }
+/* line 142, ../scss/md.sass */
+.ui-autocomplete .ui-menu-item .ui-state-hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc)); background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: -ms-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-color: #3875d7; color: white; }
+/* line 146, ../scss/md.sass */
+.ui-autocomplete .ui-menu-item .image_suggest_img { margin-right: 5px; float: left; }
View
487 javascript/markdownEditor.js
@@ -19,237 +19,292 @@ function getContents() {
*/
-$('#markdown_Editor').entwine({
- Editor: null,
- AutoCompleteBuffer: null,
- onmatch: function() {
- window.editor = ace.edit(this[0]);
-
- this.setEditor(window.editor);
-
- var MarkdownMode = require("ace/mode/markdown").Mode;
- this.getEditor().getSession().setUseWrapMode(true);
- this.getEditor().getSession().setValue($('#markdown_Value').text());
- this.getEditor().getSession().setMode(new MarkdownMode());
- self = this;
- this.getEditor().on('change', function(arg, ev) {self.editorChange(arg, ev);});
-
- },
- editorChange: function(arg) {
- if(arg.data.text == ':' || arg.data.text == '!') {
- var e = this.getEditor();
- var r = e.getSelectionRange();
- var s = e.session.getTokenAt(r.end.row);
- if(s.value.substring(s.value.length, s.value.length - 3) == '](:') {
- $('#markdown_SiteTreeAutocomplete').activate();
- }
- else if(s.value.substring(s.value.length, s.value.length - 3) == '](!') {
- $('#markdown_ImageAutocomplete').activate();
+(function($) {
+
+ $.entwine('ss', function($){
+
+
+ $('#markdown_Editor').entwine({
+ Editor: null,
+ AutoCompleteBuffer: null,
+ onmatch: function() {
+ window.editor = ace.edit(this[0]);
+
+ this.setEditor(window.editor);
+
+ var MarkdownMode = require("ace/mode/markdown").Mode;
+ this.getEditor().getSession().setUseWrapMode(true);
+ this.getEditor().getSession().setValue($('#markdown_Value').text());
+ this.getEditor().getSession().setMode(new MarkdownMode());
+ self = this;
+ this.getEditor().on('change', function(arg, ev) {self.editorChange(arg, ev);});
+
+ },
+ editorChange: function(arg) {
+ if(arg.data.text == ':' || arg.data.text == '!') {
+ var e = this.getEditor();
+ var r = e.getSelectionRange();
+ var s = e.session.getTokenAt(r.end.row);
+ if(s.value.substring(s.value.length, s.value.length - 3) == '](:') {
+ $('#markdown_SiteTreeAutocomplete').activate();
+ }
+ else if(s.value.substring(s.value.length, s.value.length - 3) == '](!') {
+ $('#markdown_ImageAutocomplete').activate();
+ }
+ }
+ },
+ editorContent: function() {
+ return this.getEditor().getSession().getValue();
+ },
+ insertText: function(text, clearBefore) {
+ this.getEditor().remove('left');
+ this.getEditor().insert(text);
+ this.getEditor().focus();
+ },
+ focusEditor: function() {
+ this.getEditor().focus();
+ },
+ test: function() {
+ var ed = this.getEditor();
+
+ if (ed.selection.isEmpty()) {
+ ed.insert('test');
+ ed.navigateLeft(2);
+ }
+ else {
+ var originalRange = ed.getSelectionRange();
+ var range = ed.getSelectionRange();
+ var text = ed.session.getTextRange(range);
+ ed.session.replace(range, '*test*');
+ ed.selection.setSelectionRange(originalRange + 2);
+ }
+ ed.focus();
}
- }
- },
- editorContent: function() {
- return this.getEditor().getSession().getValue();
- },
- insertText: function(text, clearBefore) {
- this.getEditor().remove('left');
- this.getEditor().insert(text);
- this.getEditor().focus();
- },
- focusEditor: function() {
- this.getEditor().focus();
- },
- test: function() {
- var ed = this.getEditor();
-
- if (ed.selection.isEmpty()) {
- ed.insert('test');
- ed.navigateLeft(2);
- }
- else {
- var originalRange = ed.getSelectionRange();
- var range = ed.getSelectionRange();
- var text = ed.session.getTextRange(range);
- ed.session.replace(range, '*test*');
- ed.selection.setSelectionRange(originalRange + 2);
- }
- ed.focus();
- }
-});
-
-$('#markdown_PreviewContent').entwine({
- Timer: null,
- Converter: null,
- Editor: null,
- Open: false,
- onmatch: function() {
- this.setEditor($('#markdown_Editor'));
- this.setConverter(new Showdown.converter());
- //this.startWatching();
- },
- close: function() {
- this.parent().css('opacity', 0);
- //this.stopWatching();
- this.setOpen(false);
- },
- open: function() {
- this.parent().css('opacity', 1);
- //this.startWatching();
- this.setOpen(true);
- },
- refresh: function() {
- this.html(this.getConverter().makeHtml(this.getEditor().editorContent()));
-
- },
- reload: function() {
- self = this;
- if(!this.getOpen()) {
- this.parent().animate({ left : '490px', opacity: 1}, 500);
- this.setOpen(true);
- }
- else {
- this.animate({opacity: 0},200).addClass('loading');
- }
- $.post(
- "getconvertedhtml",{ text : self.getEditor().editorContent() },
- function(data) {
-
- self.html(data).animate({opacity: 1},200).removeClass('loading');
- self.find('pre').each(function(i, e){
- hljs.highlightBlock(e);
+ });
+
+ $('#markdown_PreviewContent').entwine({
+ Timer: null,
+ Converter: null,
+ Editor: null,
+ Open: false,
+ onmatch: function() {
+ this.setEditor($('#markdown_Editor'));
+ this.setConverter(new Showdown.converter());
+ this.bind('forceReload', function() {
+ console.log('at least.')
});
+ //this.startWatching();
+ },
+ close: function() {
+ this.parent().css('opacity', 0);
+ //this.stopWatching();
+ this.setOpen(false);
+ },
+ open: function() {
+ this.parent().css('opacity', 1);
+ //this.startWatching();
+ this.setOpen(true);
+ },
+ refresh: function() {
+ this.html(this.getConverter().makeHtml(this.getEditor().editorContent()));
+
+ },
+ reload: function() {
+ self = this;
+ console.log('was called')
+ if(!this.getOpen()) {
+ if($(document).width() < 500) {
+ this.parent().animate({ left : '490px', opacity: 1, zIndex: 200}, 500);
+ }
+ this.parent().animate({ left : '490px', opacity: 1}, 500);
+ this.setOpen(true);
+ }
+ else {
+ this.animate({opacity: 0},200).addClass('loading');
+ }
+ $.post(
+ "getconvertedhtml",{ text : self.getEditor().editorContent() },
+ function(data) {
+ self.html(data).animate({opacity: 1},200).removeClass('loading');
+ self.find('pre').each(function(i, e){
+ hljs.highlightBlock(e);
+ });
+ }
+ );
+ return;
+ },
+ startWatching: function() {
+ var self = this;
+ Timer = setInterval(function() {
+ self.refresh();
+ }, 1000);
+ },
+ stopWatching: function() {
+ clearInterval(this.getTimer());
}
- );
- return;
- },
- startWatching: function() {
- var self = this;
- Timer = setInterval(function() {
- self.refresh();
- }, 1000);
- },
- stopWatching: function() {
- clearInterval(this.getTimer());
- }
-});
-
-$('#markdown_PreviewButton').entwine({
- onclick: function() {
- $('#markdown_PreviewContent').reload();
- /*if($('#markdown_PreviewContent').getOpen())
- $('#markdown_PreviewContent').close();
- else
- $('#markdown_PreviewContent').open();
- */
- }
-});
-$('.markdown_italic').entwine({
- onclick: function() {
- $('#markdown_Editor').test();
- }
-});
-
-$('#markdown_SiteTreeAutocomplete').entwine({
- onmatch: function() {
- var linksuggest = $(this).attr('linksuggest');
- this.autocomplete({
- html: true,
- source: function( request, response ) {
- $.ajax({
- url: linksuggest,
- dataType: "json",
- data: {
- search: request.term
- },
- success: function( data ) {
- response( $.map( data, function( item ) {
- return {
- label: '<span class="autosuggest_title">' + item.Label + '</span>' +
- '<span class="autosuggest_breadcrumb">' + item.Breadcrumbs + '</span>',
- value: item.ID
+ });
+
+ // Proxy Buttons (somehow triggering custom events in the iframe is not working correct).
+ $('#markdown_PreviewButton').entwine({
+ onclick: function() {
+ $('#markdown_PreviewContent').reload();
+ }
+ });
+ $('#markdown_ClosePreviewButton').entwine({
+ onclick: function() {
+ $('#markdown_PreviewContent').close();
+ }
+ });
+
+ $('.markdown_italic').entwine({
+ onclick: function() {
+ $('#markdown_Editor').test();
+ }
+ });
+
+ $('.markdown_ssimage').entwine({
+ onmatch: function() {
+ console.log('asd');
+ },
+ onclick: function() {
+ console.log('asd');
+ }
+ });
+ $('#markdown_SiteTreeAutocomplete').entwine({
+ onmatch: function() {
+ var linksuggest = $(this).attr('linksuggest');
+ this.autocomplete({
+ html: true,
+ source: function( request, response ) {
+ $.ajax({
+ url: linksuggest,
+ dataType: "json",
+ data: {
+ search: request.term
+ },
+ success: function( data ) {
+ response( $.map( data, function( item ) {
+ return {
+ label: '<span class="autosuggest_title">' + item.Label + '</span>' +
+ '<span class="autosuggest_breadcrumb">' + item.Breadcrumbs + '</span>',
+ value: item.ID
+ }
+ }));
+ },
+ error: function(data) {
+ console.log(data);
}
- }));
+ });
+ },
+ minLength: 1,
+ select: function( event, ui ) {
+
+ },
+ open: function() {
+ $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
- error: function(data) {
- console.log(data);
+ close: function() {
+ $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
},
- minLength: 1,
- select: function( event, ui ) {
-
+ activate: function() {
+ var pos = $('.ace_cursor').first().position();
+ this.appendTo('.ace_content').css({top: pos.top, left: pos.left + 5}).show().focus();
+ this.val('');
+ },
+ onblur: function() {
+ this.deactivate();
},
- open: function() {
- $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+ deactivate: function() {
+ this.css('display', 'none');
+ $('#markdown_Editor').focusEditor();
},
- close: function() {
- $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+ onkeydown: function(e) {
+ if(e.keyCode == 9 || e.keyCode == 13 || e.keyCode == 27) {
+ e.preventDefault();
+ $.get(
+ $(this).attr('findlink'),
+ {ID: $(this).val()},
+ function(data) {
+ $('#markdown_Editor').insertText(data + ')', 1);
+ bj}
+ );
+ this.deactivate();
+ }
}
- });
- },
-});
-
-$('#markdown_ImageAutocomplete').entwine({
- onmatch: function() {
- var linksuggest = $(this).attr('linksuggest');
- this.autocomplete({
- html: true,
- source: function( request, response ) {
- $.ajax({
- url: linksuggest,
- dataType: "json",
- data: {
- search: request.term
- },
- success: function( data ) {
- response( $.map( data, function( item ) {
- return {
- label: '<img src='+item.ImageLink + '>' + item.Label,
- value: item.ID
+
+ });
+
+ $('#markdown_ImageAutocomplete').entwine({
+ onmatch: function() {
+ var linksuggest = $(this).attr('linksuggest');
+ this.autocomplete({
+ html: true,
+ source: function( request, response ) {
+ $.ajax({
+ url: linksuggest,
+ dataType: "json",
+ data: {
+ search: request.term
+ },
+ success: function( data ) {
+ response( $.map( data, function( item ) {
+ return {
+ label: '<span class="image_suggest_item">' +
+ '<span class="image_suggest_img">' +
+ '<img src=' + item.ImageLink + ' width="40"></span>'+
+ '<span class="image_suggest_title">' + item.Label + '</span><span class="x"></span></span>'
+ ,
+ value: item.ID
+ }
+ }));
+ return result(responseArray);
+ },
+ error: function(data) {
+ console.log(data);
}
- }));
- return result(responseArray);
+ });
},
- error: function(data) {
- console.log(data);
+ minLength: 1,
+ select: function( event, ui ) {
+
+ },
+ open: function() {
+ $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+ },
+ close: function() {
+ $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
- });
+ })
},
- minLength: 1,
- select: function( event, ui ) {
-
+ activate: function() {
+ var pos = $('.ace_cursor').first().position();
+ this.appendTo('.ace_content').css({top: pos.top, left: pos.left + 5}).show().focus();
+ this.val('');
},
- open: function() {
- $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+ onblur: function() {
+ this.deactivate();
},
- close: function() {
- $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+ deactivate: function() {
+ this.css('display', 'none');
+ $('#markdown_Editor').focusEditor();
+ },
+ onkeydown: function(e) {
+ if(e.keyCode == 9 || e.keyCode == 13 || e.keyCode == 27) {
+ e.preventDefault();
+ $.get(
+ $(this).attr('findlink'),
+ {ID: $(this).val()},
+ function(data) {
+ $('#markdown_Editor').insertText(data + ')', 1);
+ bj}
+ );
+ this.deactivate();
+ }
}
- })
- },
-
-});
-
-$('.autocomplete').entwine({
- activate: function() {
- var pos = $('.ace_cursor').first().position();
- this.appendTo('.ace_content').css({top: pos.top, left: pos.left + 5}).show().focus();
- this.val('');
- },
- onblur: function() {
- this.deactivate();
- },
- deactivate: function() {
- this.css('display', 'none');
- $('#markdown_Editor').focusEditor();
- },
- onkeydown: function(e) {
- if(e.keyCode == 9 || e.keyCode == 13 || e.keyCode == 27) {
- e.preventDefault();
- $.get(this.attr('findlink'), {ID: $(this).val()}, function(data) {
- $('#markdown_Editor').insertText(data + ')', 1);
- });
- this.deactivate();
- }
- }
-});
+
+ });
+
+ });
+})(jQuery)
View
110 javascript/markdownField.js
@@ -1,16 +1,114 @@
(function($) {
- $.entwine('md', function($){
- $('.markdown_Iframe').entwine({
- Frame: null,
+ $.entwine('ss', function($){
+
+ $('.markdown-editor-iframe').entwine({
+ EditorFrame: null,
onmatch: function() {
self = this;
- Frame = self[0].contentWindow;
+ this.setEditorFrame(self[0].contentWindow);
this.closest('form').bind('beforesave', function() {
- var value = Frame.editor.getSession().getValue();
+ var value = EditorFrame.editor.getSession().getValue();
self.parent().find('textarea.markdown').val(value);
});
}
});
+
+ $('.markdown-editor-toolbar').entwine({
+ Editor: null,
+ onmatch: function() {
+ this.setEditor(this.parent().find('.markdown-editor-iframe'));
+ console.log(this.Editor)
+ },
+ openLinkDialog: function() {
+ this.openDialog('link');
+ },
+ openMediaDialog: function() {
+ this.openDialog('media');
+ },
+ openDialog: function(type) {
+ var capitalize = function(text) {
+ return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
+ };
+
+ var url = $('#cms-editor-dialogs').data('url' + capitalize(type) + 'form'),
+ dialog = $('.htmleditorfield-' + type + 'dialog');
+
+ if(dialog.length) {
+ dialog.open();
+ } else {
+ // Show a placeholder for instant feedback. Will be replaced with actual
+ // form dialog once its loaded.
+ dialog = $('<div class="htmleditorfield-dialog htmleditorfield-' + type + 'dialog loading">');
+ $('body').append(dialog);
+ $.ajax({
+ url: url,
+ success: function(html) {
+ dialog.html(html);
+ dialog.trigger('dialogopen');
+ }
+ });
+ }
+ }
+
+ })
+ $('#MDEditorInsertImage').entwine({
+ onmatch: function() {
+
+ },
+ onclick: function() {
+ $('.markdown-editor-toolbar').openMediaDialog();
+ }
+ });
+ $('#MDEditorInsertLink').entwine({
+ onclick: function() {
+ $('.markdown-editor-toolbar').openLinkDialog();
+ }
+ })
+ $('#MDEditorHelp').entwine({
+ onclick: function() {
+ var type = 'MDHELP'
+ var dialog = $('.htmleditorfield-' + type + 'dialog');
+
+ if(dialog.length) {
+ dialog.open();
+ } else {
+ // Show a placeholder for instant feedback. Will be replaced with actual
+ // form dialog once its loaded.
+ dialog = $('<div class="htmleditorfield-dialog htmleditorfield-' + type + 'dialog loading">');
+ $('body').append(dialog);
+ var url = "https://raw.github.com/gist/976172/70f1e0db278340bd8167c98fb880979b4571e847/gistfile1.md";
+
+ dialog.html($('<iframe>').attr('src', url));
+ }
+ }
+ });
+ $('#MDEditorQuickPreview').entwine({
+ Open: false,
+ onclick: function() {
+ var iframe = this.parent().getEditor();
+ $(iframe).contents().find('#markdown_PreviewButton').trigger('click');
+ this.addClass('md-refresh')
+ if(this.getOpen() == false) {
+ this.parent().append($('<a>').addClass('md-button md-close').attr('title', 'Close the Preview window.'));
+ this.setOpen(true);
+ }
+ },
+ close: function() {
+ if(this.getOpen() == true) {
+ this.setOpen(false);
+ this.parent().find('.md-close').remove()
+ var iframe = this.parent().getEditor();
+ $(iframe).contents().find('#markdown_ClosePreviewButton').trigger('click');
+ this.removeClass('md-refresh')
+ }
+ }
+ });
+ $('.md-close').entwine({
+ onclick: function() {
+ this.parent().find('#MDEditorQuickPreview').close();
+ }
+ })
+
});
-})(jQuery)
+})(jQuery)
View
124 scss/md.sass
@@ -3,26 +3,63 @@
$font: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Droid Sans Mono', 'Consolas', monospace
$height: 470px
-::-webkit-scrollbar
- width: 5px
- height: 5px
-
-::-webkit-scrollbar-track
- background: #FFF
- -webkit-border-radius: 5px
-::-webkit-scrollbar-thumb
- background: #AAA
- -webkit-border-radius: 5px
+//::-webkit-scrollbar
+// width: 5px
+// height: 5px
+//
+//::-webkit-scrollbar-track
+// background: #FFF
+// -webkit-border-radius: 5px
+//::-webkit-scrollbar-thumb
+// background: #AAA
+// -webkit-border-radius: 5px
.x
clear: both
div.field.markdown
.middleColumn
position: relative
-.markdown_Iframe
+.markdown-editor-iframe
width: 100%
height: 520px
+
+.markdown-editor-toolbar
+ position: absolute
+ padding: 5px
+ top: 0
+ left: 48px
+ width: 446px
+ background: whiteSmoke
+ .logo
+ width: 32px
+ height: 20px
+ background: image-url('markdown32x20.png') no-repeat center
+ display: inline-block
+ float: left
+ margin-left: -45px
+ .md-button
+ width: 20px
+ height: 16px
+ +border-radius(3px)
+ border: solid 2px #000
+ font-family: $font
+ text-align: center
+ float: left
+ cursor: pointer
+ margin-right: 5px
+ &.md-help
+ background: image-url('info.png') no-repeat center
+ &.md-preview
+ background: image-url('eye.png') no-repeat center
+ &.md-refresh
+ background: image-url('reload.png') no-repeat center
+ &.md-close
+ background: image-url('close.png') no-repeat center
+ &:hover
+ background-color: #AAA
textarea.markdown
display: none
+#markdown_EditorHTML
+ overflow: hidden
#markdown_EditorWrapper
position: relative
float: left
@@ -37,53 +74,27 @@ textarea.markdown
+border-radius(4px)
background: #FFF
z-index: 100
-#markdown_ButtonBar
- position: absolute
- padding: 5px
- top: 0
- left: 54px
- width: 446px
- background: whiteSmoke
- .markdown_button
- font-family: $font
- font-size: 15px
- text-align: center
- padding: 3px
- line-height: 15px
- float: left
- cursor: pointer
- margin-right: 5px
- &:hover
- +box-shadow(0 0 3px #777)
- +background-image(linear-gradient(#F5F5F5, #E5E5E5))
- border: none
- +border-radius(2px)
#markdown_Value
display: none
#markdown_Preview
position: relative
margin-top: 30px
- width: 512px
- height: $height
+ width: 502px
+ height: $height - 10
background: #FFF
float: left
overflow-y: scroll
opacity: 0
-#markdown_PreviewButton
- padding: 3px 5px
- cursor: pointer
- border: none
- &:active, &:focus
- background: darken(#B0BEC7, 20%)
- &:hover
- background: darken(#B0BEC7, 10%)
+ padding: 5px
+.hidden-proxy-buttons
+ display: none
#markdown_PreviewContent
- overflow-y: scroll
- padding: 10px
-
+ overflow-y: hidden
+ padding: 5px
+ background: #FFF
.autocomplete
border: none
- color: #F00
+ color: #3875d7
height: 15px
font-size: 12px
font-family: $font
@@ -102,16 +113,22 @@ textarea.markdown
list-style-type: none
width: 200px
margin: 0
- padding: 0
+ padding: 2px
+ +border-radius(2px)
.ui-menu-item
font-family: $font
- padding: 0
+ padding: 2px
display: block
+border-radius(0)
font-size: 12px
line-height: 15px
- border: none
- background: #F3F3F3
+ background: #F9F9F9
+ clear: both
+ border-bottom: 1px solid #CCC
+ &:last-child
+ border-bottom: 0
+ .image_suggest_item
+ display: inline-block
.autosuggest_breadcrumb
display: block
color: #999
@@ -123,4 +140,9 @@ textarea.markdown
a
display: block
.ui-state-hover
- background: #F00
+ +background-image(linear-gradient(top, #3875d7 20%, #2a62bc 90%))
+ background-color: #3875d7
+ color: #FFF
+ .image_suggest_img
+ margin-right: 5px
+ float: left
View
20 templates/MarkdownEditor.ss
@@ -1,27 +1,19 @@
-<html>
+<html id="markdown_EditorHTML">
<head></head>
<body>
<div id="markdown_Value">$Value</div>
<div id="markdown_EditorWrapper">
- <div id="markdown_ButtonBar">
- <div class="markdown_button markdown_italic">
- i
- </div>
- <div class="markdown_button markdown_bold">
- b
- </div>
- <div class="markdown_Button" id="markdown_PreviewButton">
- Preview
- </div>
- </div>
<div id="markdown_Editor"></div>
</div>
-
+ <div class="hidden-proxy-buttons">
+ <div id="markdown_PreviewButton"></div>
+ <div id="markdown_ClosePreviewButton"></div>
+ </div>
<div id="markdown_Preview">
<div id="markdown_PreviewContent" class="typography">
</div>
</div>
-
+
<div class="x"></div>
<div id="markdown_Helper">
<input id="markdown_SiteTreeAutocomplete" class="autocomplete" linksuggest="$LinkSuggest" findlink="$FindLink">
View
8 templates/forms/MarkdownField.ss
@@ -1,3 +1,9 @@
<textarea $AttributesHTML>$Value</textarea>
-<iframe class="markdown_Iframe" src="$Editor"></iframe>
+<div class="markdown-editor-toolbar">
+ <span class="logo">
+ </span>
+ <a href="#" class="md-button md-help" id="MDEditorHelp" title="Cheatsheet"></a>
+ <a class="md-button md-preview" id="MDEditorQuickPreview" title="Get a quick Preview of your Markdown"></a>
+</div>
+<iframe class="markdown-editor-iframe" src="$Editor"></iframe>
<div class="clear"></div>
Please sign in to comment.
Something went wrong with that request. Please try again.