// Copyright (c) 2013, Web Notes Technologies Pvt. Ltd.
// MIT License. See license.txt
// Options
// parent
// change (event)
// Properties
// set_input
// input
wn.provide("wn.editors");
wn.editors.BootstrapWYSIWYG = Class.extend({
init: function(opts) {
wn.require("lib/js/lib/bootstrap-wysiwyg.js");
this.opts = opts;
this.make_body();
this.make_bindings();
},
make_body: function() {
var me = this;
this.myid = "editor-" + wn.dom.set_unique_id();
$('\
\
\
\
').appendTo(this.opts.parent);
this.$parent = $(this.opts.parent);
this.$editor = $("#" + this.myid);
this.$parent.find(".btn-add-link").click(function() {
me.show_link_dialog();
return false;
})
this.$editor.on("keyup", function() { me.save_selection() });
this.$editor.on("mouseup", function() { me.save_selection() });
this.$textarea = this.$parent.find(".html-editor");
this.input = this.$editor.get(0);
},
set_focus: function() {
this.$editor.focus();
},
save_selection: function() {
this.saved_selection = wn.dom.save_selection();
},
show_link_dialog: function() {
var me = this;
var d = new wn.ui.Dialog({
title: "Add Link",
fields: [
{fieldtype: "Data", label:"Link", fieldname: "link", reqd: 1,
description:"example: http://example.com"},
{fieldtype: "Button", label:"Add", fieldname: "add"},
]
});
d.show();
d.fields_dict.link.set_input("http://");
$(d.fields_dict.add.input).click(function() {
var values = d.get_values();
if(values) {
d.hide();
wn.dom.restore_selection(me.saved_selection);
document.execCommand("CreateLink", false, values.link);
}
});
d.onhide = function() {
wn.dom.restore_selection(me.saved_selection);
}
},
make_bindings: function() {
var me = this;
var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
'Lucida Sans', 'Tahoma', 'Times', 'Times New Roman', 'Verdana'],
fontTarget = this.$parent.find('[title=Font]').siblings('.dropdown-menu');
$.each(fonts, function (idx, fontName) {
fontTarget.append($(''+
fontName + ''));
});
// magic-overlay
this.$parent.find('[data-role=magic-overlay]').each(function () {
var overlay = $(this), target = $(overlay.data('target'));
overlay.css('opacity', 0).css('position', 'absolute')
//.offset(target.offset())
.css("left", 157) // use this because in dialogs, can't find the offset
.width(38).height(33);
});
this.$editor
.wysiwyg()
.on("mouseup keyup mouseout", function() {
var value = $(this).html();
if(value==null) value="";
me.opts.change(value);
})
this.$textarea
.on("change", function() {
var value = $(this).val();
if(value==null) value="";
me.opts.change(value);
});
this.current_editor = this.$editor;
this.$parent.find(".btn-html").click(function() {
if($(this).prop("disabled")==true) return;
wn.require("lib/js/lib/beautify-html.js");
me.$textarea.val(html_beautify(me.$editor.cleanHtml()));
me.$parent.find(".for-rich-text").toggle(false);
me.$parent.find(".for-html").toggle(true);
me.$parent.find(".btn-html").addClass("btn-info").prop("disabled", true);
me.$parent.find(".btn-rich-text").removeClass("btn-info").prop("disabled", false);
me.current_editor = me.$textarea;
});
this.$parent.find(".btn-rich-text").click(function() {
if($(this).prop("disabled")==true) return;
me.$editor.html(me.$textarea.val());
me.$parent.find(".for-rich-text").toggle(true);
me.$parent.find(".for-html").toggle(false);
me.$parent.find(".btn-html").removeClass("btn-info").prop("disabled", false);
me.$parent.find(".btn-rich-text").addClass("btn-info").prop("disabled", true);
me.current_editor = me.$editor;
});
},
set_input: function(value) {
if(this.opts.field.inside_change_event)
return;
if(this.value!=value) {
this.value = value==null ? "" : value;
this.$editor.html(this.value);
this.$textarea.val(this.value);
}
},
get_value: function() {
if(this.current_editor==this.$editor)
return this.$editor.cleanHtml();
else
return this.$textarea.val();
}
})
wn.editors.ACE = Class.extend({
init: function(opts) {
this.opts = opts;
// setup ace
wn.require('lib/js/lib/ace/ace.js');
this.make();
this.bind_form_load();
},
make: function() {
$(this.opts.parent).css('border','1px solid #aaa');
this.pre = $("").appendTo(this.opts.parent).get(0);
this.input = {};
this.myid = wn.dom.set_unique_id(this.pre);
this.editor = ace.edit(this.myid);
if(this.opts.field.df.options=='Markdown' || this.opts.field.df.options=='HTML') {
wn.require('lib/js/lib/ace/mode-html.js');
var HTMLMode = require("ace/mode/html").Mode;
this.editor.getSession().setMode(new HTMLMode());
}
else if(this.opts.field.df.options=='Javascript') {
wn.require('lib/js/lib/ace/mode-javascript.js');
var JavascriptMode = require("ace/mode/javascript").Mode;
this.editor.getSession().setMode(new JavascriptMode());
}
else if(this.opts.field.df.options=='Python') {
wn.require('lib/js/lib/ace/mode-python.js');
var PythonMode = require("ace/mode/python").Mode;
this.editor.getSession().setMode(new PythonMode());
}
},
set_input: function(value) {
// during field refresh in run trigger, set_input is called
// if called during on_change, setting doesn't make sense
// and causes cursor to shift back to first position
if(this.opts.field.inside_change_event) return;
this.setting_value = true;
this.editor.getSession().setValue(value==null ? "" : value);
this.setting_value = false;
},
get_value: function() {
return this.editor.getSession().getValue();
},
set_focus: function() {
this.editor.focus();
},
bind_form_load: function() {
var me = this;
if(cur_frm) {
$(cur_frm.wrapper).bind('render_complete', function() {
me.editor.resize();
me.editor.getSession().on('change', function() {
if(me.setting_value) return;
me.opts.change(me.get_value())
})
});
}
},
set_focus: function() {
this.$editor.focus();
},
})