/
inlineEdit.js
97 lines (85 loc) · 3.42 KB
/
inlineEdit.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/*
Copyright 2008-2009 University of Cambridge
Copyright 2008-2010 University of Toronto
Copyright 2008-2009 University of California, Berkeley
Copyright 2010-2011 OCAD University
Licensed under the Educational Community License (ECL), Version 2.0 or the New
BSD license. You may not use this file except in compliance with one these
Licenses.
You may obtain a copy of the ECL 2.0 License and BSD License at
https://source.fluidproject.org/svn/LICENSE.txt
*/
/*global jQuery, fluid, demo*/
// JSLint options
/*jslint white: true, undef: true, newcap: true, nomen: true, regexp: true, bitwise: true, browser: true, forin: true, maxerr: 100, indent: 4 */
var demo = demo || {};
(function ($, fluid) {
demo.initRichInlineEdit = function () {
/**
* Create cancel and save buttons for a rich inline editor.
* @param {Object} editor
*/
var makeButtons = function (editor) {
$(".demo-save", editor.container).click(function () {
editor.finish();
return false;
});
$(".demo-cancel", editor.container).click(function () {
editor.cancel();
return false;
});
};
// Create a TinyMCE-based Rich Inline Edit component.
var tinyEditor = fluid.inlineEdit.tinyMCE("#demo-richInlineEdit-container-tinyMCE", {
tinyMCE: {
width: 1024,
theme: "advanced",
theme_advanced_toolbar_location : "top"
},
componentDecorators: {
type: "fluid.undoDecorator",
options: {
selectors: demo.initRichInlineEdit.selectors,
renderer: demo.initRichInlineEdit.undoRenderer
}
},
strings: {
textEditButton: "Edit"
},
tooltipText: "Use the edit link to make changes"
});
makeButtons(tinyEditor);
// Create an CKEditor 3.x-based Rich Inline Edit component.
var ckEditor = fluid.inlineEdit.CKEditor("#demo-richInlineEdit-container-ckEditor", {
componentDecorators: {
type: "fluid.undoDecorator",
options: {
selectors: demo.initRichInlineEdit.selectors,
renderer: demo.initRichInlineEdit.undoRenderer
}
},
strings: {
textEditButton: "Edit"
},
tooltipText: "Use the edit link to make changes"
});
makeButtons(ckEditor);
};
demo.initRichInlineEdit.selectors = {
undoContainer: ".demo-undoContainer",
undoControl: ".demo-undoControl",
redoContainer: ".demo-redoContainer",
redoControl: ".demo-redoControl"
};
demo.initRichInlineEdit.undoRenderer = function (that, targetContainer) {
var markup =
"<span class='flc-undo demo-inlineEdit-inlinePadding'>" +
"<span class='demo-undoContainer' role='button'><a href='#' class='demo-undoControl'>Undo edit</a></span>" +
"<span class='demo-redoContainer' role='button'><a href='#' class='demo-redoControl'>Redo edit</a></span>" +
"</span>";
var markupNode = $(markup);
var button = $("a", targetContainer);
button.after(markupNode);
return markupNode;
};
})(jQuery, fluid);