Permalink
Browse files

Switched to ACE - Editor, improvements in Image & Link adding

  • Loading branch information...
1 parent 528baee commit 38ce007acbda3b01c93ba0f2fdf53b64d089012c @wolfv committed Feb 1, 2012
Showing with 194 additions and 1,548 deletions.
  1. +40 −5 code/MarkdownField.php
  2. +52 −12 css/md.css
  3. +0 −161 javascript/md.js
  4. +0 −1,302 javascript/showdown.js
  5. +0 −34 javascript/showdown_license.txt
  6. +100 −27 scss/md.sass
  7. +2 −7 templates/forms/MarkdownField.ss
View
@@ -2,18 +2,21 @@
class MarkdownField extends TextareaField {
protected $template = 'MarkdownField';
-
+ static $editortheme = 'twilight';
function Field($properties = array()) {
Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js');
- Requirements::javascript('markdown/javascript/showdown.js');
- Requirements::javascript('markdown/javascript/md.js');
- Requirements::themedCSS('typography');
+ Requirements::javascript('markdown/javascript/markdownField.js');
Requirements::css('markdown/css/md.css');
+
if($this->disabled) $attributes['disabled'] = 'disabled';
$properties["class"] = "markdown_Input";
+
$properties["LinkSuggest"] = $this->Link() . '/linksuggest';
$properties["ImageSuggest"] = $this->Link() . '/imagesuggest';
$properties["FindLink"] = $this->Link() . '/getlinktoid';
+
+ $properties["Editor"] = $this->Link() . '/getEditor';
+
$obj = ($properties) ? $this->customise($properties) : $this;
return $obj->renderWith($this->getTemplate());
}
@@ -22,15 +25,47 @@ function linksuggest() {
$search = $this->request["search"];
$data = DataList::create('SiteTree')->filter(array("Title:StartsWith" => $search));
$data_array = $data->toNestedArray();
-
return json_encode($data_array);
}
function getlinktoid() {
$id = $this->request["ID"];
$data = DataList::create('SiteTree')->byID($id);
+ return $data->Link();
+ }
+ function imagesuggest() {
+ $search = $this->request["search"];
+ $data = DataList::create('File')->filter(array("Title:PartialMatch" => $search));
+ $data_array = $data->toNestedArray();
+ return json_encode($data_array);
+ }
+
+ function getimagelinktoid() {
+ $id = $this->request["ID"];
+ $data = DataList::create('File')->byID($id);
return $data->Link();
}
+ public function getEditor() {
+ Requirements::clear();
+ 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('markdown/javascript/lib/showdown.js');
+ Requirements::javascript('markdown/javascript/lib/ace/src/ace.js');
+ Requirements::javascript('markdown/javascript/lib/ace/src/mode-markdown.js');
+ Requirements::javascript('markdown/javascript/lib/ace/src/theme-' . self::$editortheme . '.js');
+ Requirements::javascript('markdown/javascript/markdownEditor.js');
+ Requirements::themedCSS('typography');
+ Requirements::css('markdown/css/md.css');
+ //Requirements::css(THIRDPARTY_DIR . '/jquery-ui-themes/smoothness/jquery-ui.css');
+
+ $properties["LinkSuggest"] = 'linksuggest';
+ $properties["ImageSuggest"] = 'imagesuggest';
+ $properties["FindLink"] = 'getlinktoid';
+ $properties["FindImageLink"] = 'getimagelinktoid';
+
+ return $this->customise($properties)->renderWith('MarkdownEditor');
+ }
}
View
@@ -1,17 +1,57 @@
-/* line 3, ../scss/md.sass */
-div.field.markdown { position: relative; }
+/* line 5, ../scss/md.sass */
+::-webkit-scrollbar { width: 5px; height: 5px; }
-/* line 6, ../scss/md.sass */
-.field textarea.markdown, .markdown_CaretHelper { -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; background: white; padding: 10px; float: left; height: 500px; font-family: monospace; width: 500px; overflow: auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; line-height: 1.5em; }
+/* line 9, ../scss/md.sass */
+::-webkit-scrollbar-track { background: white; -webkit-border-radius: 5px; }
-/* line 17, ../scss/md.sass */
-.markdown_preview { height: 478px; width: 40%; background: white; float: left; padding: 10px; border: 1px solid #cccccc; border-left: none; overflow: auto; }
+/* line 12, ../scss/md.sass */
+::-webkit-scrollbar-thumb { background: #aaaaaa; -webkit-border-radius: 5px; }
-/* line 26, ../scss/md.sass */
-#markdown_CaretPosition { background: red; }
+/* line 15, ../scss/md.sass */
+.x { clear: both; }
-/* line 28, ../scss/md.sass */
-.markdown_CaretHelper { position: absolute; top: 0; left: 204; opacity: 0; z-index: -100; }
+/* line 18, ../scss/md.sass */
+div.field.markdown .middleColumn { position: relative; }
-/* line 34, ../scss/md.sass */
-#markdown_AutoSuggestLinks { width: 200px; height: 20px; border: 1px solid black; padding: 3px; }
+/* line 20, ../scss/md.sass */
+.markdown_Iframe { width: 100%; height: 520px; }
+
+/* line 23, ../scss/md.sass */
+textarea.markdown { display: none; }
+
+/* line 25, ../scss/md.sass */
+#markdown_EditorWrapper { position: relative; float: left; height: 500px; margin-right: 40px; }
+
+/* line 30, ../scss/md.sass */
+#markdown_Editor { position: absolute; top: 30px; left: 0; width: 512px; height: 500px; -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 39, ../scss/md.sass */
+#markdown_ButtonBar { position: absolute; top: 0; left: 45px; width: 300px; }
+/* line 44, ../scss/md.sass */
+#markdown_ButtonBar .markdown_button { width: 15px; text-align: center; height: 15px; padding: 3px; border: 1px solid #cccccc; background: #eeeeee; float: left; cursor: pointer; margin-right: 5px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #f6f6f6)); background-image: -webkit-linear-gradient(top, #dddddd, #f6f6f6); background-image: -moz-linear-gradient(top, #dddddd, #f6f6f6); background-image: -o-linear-gradient(top, #dddddd, #f6f6f6); background-image: -ms-linear-gradient(top, #dddddd, #f6f6f6); background-image: linear-gradient(top, #dddddd, #f6f6f6); }
+
+/* line 55, ../scss/md.sass */
+#markdown_Value { display: none; }
+
+/* line 57, ../scss/md.sass */
+#markdown_Preview { position: relative; top: 0; left: 510px; width: 512px; height: 500px; background: white; float: left; overflow-y: scroll; }
+
+/* line 66, ../scss/md.sass */
+#markdown_PreviewButton { opacity: 0.6; position: absolute; top: 18px; left: 510px; padding: 3px 5px; background: #b0bec7; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
+
+/* line 74, ../scss/md.sass */
+#markdown_PreviewContent { overflow-y: scroll; padding: 10px; }
+
+/* line 77, ../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 91, ../scss/md.sass */
+.autocomplete:focus { outline: none; border: none; }
+
+/* line 94, ../scss/md.sass */
+.ui-autocomplete { list-style-type: none; width: 200px; margin: 0; padding: 0; }
+/* line 99, ../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; height: 15px; border: none; background: #f3f3f3; }
+/* line 108, ../scss/md.sass */
+.ui-autocomplete .ui-menu-item a { display: block; }
+/* line 110, ../scss/md.sass */
+.ui-autocomplete .ui-menu-item .ui-state-hover { background: red; }
View
@@ -1,161 +0,0 @@
-(function($) {
-
- $.entwine('md', function($){
-
- /**
- * The "content" area contains all of the section specific UI (excluding the menu).
- * This area can be a form itself, as well as contain one or more forms.
- * For example, a page edit form might fill the whole area,
- * while a ModelAdmin layout shows a search form on the left, and edit form on the right.
- */
- $('textarea.markdown').entwine({
- onmatch: function() {
-
- /* Properties */
-
- Parser = null;
- Interval = null;
-
- ModeLinkAutoComplete = false;
- AutoCompleteVisible = false;
-
- Parser = new Showdown.converter();
- PreviewPane = this.parent().find('.markdown_preview');
- PreviewPane.html(Parser.makeHtml(this.val()));
-
- var self = this;
-
- this._super();
- },
- onfocusin: function() {
- self = this;
- Interval = setInterval(function() {
- PreviewPane.html(Parser.makeHtml(self.val()));
- }, 1000);
- },
- onredraw: function() {
- console.log('button draw');
- },
- onunmatch: function() {
- if(typeof Interval != 'undefined')
- clearInterval(Interval);
- },
- onscroll: function() {
-
- },
- onkeydown: function(e) {
- var tab = 9;
- if(e.keyCode == tab) {
- e.preventDefault();
- this.insertText(" ", e.target.selectionStart, e.target.selectionEnd);
- }
- },
- onkeyup: function(e) {
- if(e.keyCode == 186) {
- var startPos = e.target.selectionStart;
- if(e.target.value.substring(startPos-3, startPos) == "](:"){
- ModeLinkAutoComplete = startPos;
- AutoCompleteBuffer = "";
- }
- }
- if(ModeLinkAutoComplete)
- {
- if(!AutoCompleteVisible) {
- endPos = e.target.selectionEnd;
-
- var value = this.val()
- value = value.substring(0, startPos) + '<span id="markdown_CaretPosition">a</span>' + value.substring(endPos,value.length);
- value = value.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '<br />');
-
- $('.markdown_helper .markdown_CaretHelper').html(value);
- $('.markdown_helper .markdown_CaretHelper').scrollTop(this.scrollTop());
-
- var position = $('.markdown_helper .markdown_CaretHelper #markdown_CaretPosition').position();
-
- AutoCompleteVisible = true;
-
- self = this;
-
- $('#markdown_AutoSuggestLinks')
- .css({
- 'position' : 'absolute',
- 'z-index' : 2000,
- 'left' : position.left + 200,
- 'top' : position.top - 5
- })
- .show()
- .focus()
- .keydown(
- function(e) {
- if(e.keyCode == 9 || e.keyCode == 13) {
- e.preventDefault();
- $.get(self.attr('findlink'), {ID: $(this).val()}, function(data) {
- self.insertText(data + ')', startPos - 1, endPos)
- });
- $(this).hide();
- ModeLinkAutoComplete = false;
- AutoCompleteVisible = false;
- return false;
- }
- })
- .blur(
- function() {
- $(this).hide();
- ModeLinkAutoComplete = false;
- AutoCompleteVisible = false;
- }
- );
- }
- }
- },
- insertText: function(text, startPos, endPos) {
- obj = this[0];
- var scrollTop = obj.scrollTop;
- var value = obj.value;
- value = value.substring(0, startPos) + text + value.substring(endPos,value.length);
- obj.value = value;
- obj.selectionStart = startPos + text.length;
- obj.selectionEnd = startPos + text.length;
- obj.scrollTop = scrollTop;
- }
- });
- $('#markdown_AutoSuggestLinks').entwine({
- onmatch: function() {
- this.autocomplete({
- source: function( request, response ) {
- $.ajax({
- url: $('textarea.markdown').attr('linksuggest'),
- dataType: "json",
- data: {
- search: request.term
- },
- success: function( data ) {
- response( $.map( data, function( item ) {
- return {
- label: item.Title,
- 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" );
- },
- close: function() {
- $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
- }
- });
- },
- });
-
- });
-
-})(jQuery);
Oops, something went wrong.

0 comments on commit 38ce007

Please sign in to comment.