Skip to content

Commit

Permalink
refactoring popover buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@easylogic
easylogic committed Sep 23, 2015
1 parent 15cf5ba commit 52ab589
Show file tree
Hide file tree
Showing 6 changed files with 142 additions and 89 deletions.
92 changes: 92 additions & 0 deletions src/js/bs3/module/Button.js
View file
Expand Up @@ -32,6 +32,12 @@ define([

this.initialize = function () {

this.makeToolbarButton();
this.makeImagePopoverButton();
this.makeLinkPopoverButton();
};

this.makeToolbarButton = function () {
summernote.addButton('style', function () {
return ui.buttonGroup([
ui.button({
Expand Down Expand Up @@ -365,6 +371,92 @@ define([

};

/**
* image : [
['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
['float', ['floatLeft', 'floatRight', 'floatNone' ]],
['remove', ['removeMedia']]
],
*/
this.makeImagePopoverButton = function () {

// Image Size Buttons
summernote.addButton('imageSize100', function (summernote) {
return ui.button({
contents: '<span class="note-fontsize-10">100%</span>',
tooltip: lang.image.resizeFull,
click: summernote.createInvokeHandler('editor.resize', '1')
}).render();
});
summernote.addButton('imageSize50', function (summernote) {
return ui.button({
contents: '<span class="note-fontsize-10">50%</span>',
tooltip: lang.image.resizeHalf,
click: summernote.createInvokeHandler('editor.resize', '0.5')
}).render();
});
summernote.addButton('imageSize25', function (summernote) {
return ui.button({
contents: '<span class="note-fontsize-10">25%</span>',
tooltip: lang.image.resizeQuarter,
click: summernote.createInvokeHandler('editor.resize', '0.25')
}).render();
});

// Float Buttons
summernote.addButton('floatLeft', function (summernote) {
return ui.button({
contents: '<i class="fa fa-align-left"/>',
tooltip: lang.image.floatLeft,
click: summernote.createInvokeHandler('editor.floatMe', 'left')
}).render();
});

summernote.addButton('floatRight', function (summernote) {
return ui.button({
contents: '<i class="fa fa-align-right"/>',
tooltip: lang.image.floatRight,
click: summernote.createInvokeHandler('editor.floatMe', 'right')
}).render();
});

summernote.addButton('floatNone', function (summernote) {
return ui.button({
contents: '<i class="fa fa-align-justify"/>',
tooltip: lang.image.floatNone,
click: summernote.createInvokeHandler('editor.floatMe', 'none')
}).render();
});

// Remove Buttons

summernote.addButton('removeMedia', function (summernote) {
return ui.button({
contents: '<i class="fa fa-trash-o"/>',
tooltip: lang.image.remove,
click: summernote.createInvokeHandler('editor.removeMedia')
}).render();
});
};

this.makeLinkPopoverButton = function () {
summernote.addButton('linkDialogShow', function (summernote) {
return ui.button({
contents: '<i class="fa fa-link"/>',
tooltip: lang.link.edit,
click: summernote.createInvokeHandler('linkDialog.show')
}).render();
});

summernote.addButton('unlink', function (summernote) {
return ui.button({
contents: '<i class="fa fa-unlink"/>',
tooltip: lang.link.unlink,
click: summernote.createInvokeHandler('editor.unlink')
}).render();
});
};

this.updateCurrentStyle = function () {
var styleInfo = summernote.invoke('editor.currentStyle');
this.updateBtnStates({
Expand Down
51 changes: 6 additions & 45 deletions src/js/bs3/module/ImagePopover.js
View file
Expand Up @@ -9,63 +9,24 @@ define([

var $note = summernote.layoutInfo.note;
var $editingArea = summernote.layoutInfo.editingArea;
var lang = summernote.options.langInfo;
var options = summernote.options;

var $popover = ui.popover({
className: 'note-image-popover',
children: [
ui.buttonGroup([
ui.button({
contents: '<span class="note-fontsize-10">100%</span>',
tooltip: lang.image.resizeFull,
click: summernote.createInvokeHandler('editor.resize', '1')
}),
ui.button({
contents: '<span class="note-fontsize-10">50%</span>',
tooltip: lang.image.resizeHalf,
click: summernote.createInvokeHandler('editor.resize', '0.5')
}),
ui.button({
contents: '<span class="note-fontsize-10">25%</span>',
tooltip: lang.image.resizeQuarter,
click: summernote.createInvokeHandler('editor.resize', '0.25')
})
]),
ui.buttonGroup([
ui.button({
contents: '<i class="fa fa-align-left"/>',
tooltip: lang.image.floatLeft,
click: summernote.createInvokeHandler('editor.floatMe', 'left')
}),
ui.button({
contents: '<i class="fa fa-align-right"/>',
tooltip: lang.image.floatRight,
click: summernote.createInvokeHandler('editor.floatMe', 'right')
}),
ui.button({
contents: '<i class="fa fa-align-justify"/>',
tooltip: lang.image.floatNone,
click: summernote.createInvokeHandler('editor.floatMe', 'none')
})
]),
ui.buttonGroup([
ui.button({
contents: '<i class="fa fa-trash-o"/>',
tooltip: lang.image.remove,
click: summernote.createInvokeHandler('editor.removeMedia')
})
])
]
className: 'note-image-popover'
}).render();

$editingArea.append($popover);

this.initialize = function () {

summernote.generateButtons($popover.find(".popover-content"), options.popover.image);

$note.on('summernote.keyup summernote.mouseup summernote.change', function (customEvent, event) {
self.update(event.target);
}).on('summernote.scroll', function () {
self.update(summernote.invoke('editor.restoreTarget'));
});

};

this.posFromPlaceholder = function (placeholder) {
Expand Down
20 changes: 5 additions & 15 deletions src/js/bs3/module/LinkPopover.js
View file
Expand Up @@ -9,28 +9,18 @@ define([

var $note = summernote.layoutInfo.note;
var $editingArea = summernote.layoutInfo.editingArea;
var lang = summernote.options.langInfo;
var options = summernote.options;

var $popover = ui.popover({
children: [
ui.buttonGroup([
ui.button({
contents: '<i class="fa fa-link"/>',
tooltip: lang.link.edit,
click: summernote.createInvokeHandler('linkDialog.show')
}),
ui.button({
contents: '<i class="fa fa-unlink"/>',
tooltip: lang.link.unlink,
click: summernote.createInvokeHandler('editor.unlink')
})
])
]
className: 'note-link-popover'
}).render();

$editingArea.append($popover);

this.initialize = function () {

summernote.generateButtons($popover.find(".popover-content"), options.popover.link);

$note.on('summernote.keyup summernote.mouseup summernote.change', function (customEvent, event) {
self.update(event.target);
}).on('summernote.scroll', function () {
Expand Down
30 changes: 2 additions & 28 deletions src/js/bs3/module/Toolbar.js
View file
@@ -1,9 +1,5 @@
define([
'jquery'
], function ($) {
define([ ], function () {
var Toolbar = function (summernote) {
var ui = $.summernote.ui;

var $note = summernote.layoutInfo.note;
var $toolbar = summernote.layoutInfo.toolbar;
var options = summernote.options;
Expand All @@ -15,7 +11,7 @@ define([
if (!options.toolbar.length) {
$toolbar.hide();
} else {
this.makeToolbar();
summernote.generateButtons($toolbar, options.toolbar);
}
$note.on('summernote.keyup summernote.mouseup summernote.change', function () {
summernote.invoke('button.updateCurrentStyle');
Expand All @@ -24,28 +20,6 @@ define([
summernote.invoke('button.updateCurrentStyle');
};

this.makeToolbar = function () {
for (var groupIndex = 0, groupLength = options.toolbar.length; groupIndex < groupLength; groupIndex++) {
var group = options.toolbar[groupIndex];
var groupName = group[0];
var buttonList = group[1];

var $groupElement = ui.buttonGroup().render();
$groupElement.addClass('note-' + groupName);

for (var buttonIndex = 0, buttonLength = buttonList.length; buttonIndex < buttonLength; buttonIndex++) {
var buttonName = buttonList[buttonIndex];
var button = summernote.buttons[buttonName];

if (button) {
$groupElement.append(typeof button === 'function' ? button.call(this, summernote) : button);
}

}
$toolbar.append($groupElement);
}
};

this.destroy = function () {
$toolbar.children().remove();
};
Expand Down
11 changes: 11 additions & 0 deletions src/js/bs3/settings.js
View file
Expand Up @@ -165,6 +165,17 @@ define([
['help', ['help']]
],

popover : {
image : [
['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
['float', ['floatLeft', 'floatRight', 'floatNone' ]],
['remove', ['removeMedia']]
],
link : [
['link', ['linkDialogShow', 'unlink']]
]
},

width: null,
height: null,

Expand Down
27 changes: 26 additions & 1 deletion src/js/summernote.js
View file
Expand Up @@ -23,7 +23,7 @@ define([
this.layoutInfo = ui.createLayout($note);

Object.keys(this.options.buttons).forEach(function (key) {
var button = new self.options.buttons[key];
var button = self.options.buttons[key];
self.addButton(key, button);
});

Expand Down Expand Up @@ -85,6 +85,31 @@ define([
delete this.buttons[key];
};

this.generateButtons = function ($container, buttonArray) {
buttonArray = buttonArray || [];

for (var groupIndex = 0, groupLength = buttonArray.length; groupIndex < groupLength; groupIndex++) {
var group = buttonArray[groupIndex];
var groupName = group[0];
var buttonList = group[1];

var $groupElement = ui.buttonGroup().render();
$groupElement.addClass('note-' + groupName);

for (var buttonIndex = 0, buttonLength = buttonList.length; buttonIndex < buttonLength; buttonIndex++) {
var buttonName = buttonList[buttonIndex];
var button = this.buttons[buttonName];

if (button) {
$groupElement.append(typeof button === 'function' ? button.call(this, this) : button);
}

}
$container.append($groupElement);
}

};

this.createInvokeHandler = function (namespace, value) {
return function (event) {
event.preventDefault();
Expand Down

0 comments on commit 52ab589

Please sign in to comment.