Created
March 16, 2016 14:56
-
-
Save bluecat76/4d2cecff41dc53d10ada to your computer and use it in GitHub Desktop.
Minimal dialog example for summernote v0.8.1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function (factory) { | |
/* global define */ | |
if (typeof define === 'function' && define.amd) { | |
// AMD. Register as an anonymous module. | |
define(['jquery'], factory); | |
} else if (typeof module === 'object' && module.exports) { | |
// Node/CommonJS | |
module.exports = factory(require('jquery')); | |
} else { | |
// Browser globals | |
factory(window.jQuery); | |
} | |
}(function ($) { | |
// minimal dialog plugin | |
$.extend($.summernote.plugins, { | |
/** | |
* @param {Object} context - context object has status of editor. | |
*/ | |
'minidiag': function (context) { | |
var self = this; | |
// ui has renders to build ui elements. | |
// - you can create a button with `ui.button` | |
var ui = $.summernote.ui; | |
var $editor = context.layoutInfo.editor; | |
var options = context.options; | |
// add context menu button | |
context.memo('button.minidiag', function () { | |
return ui.button({ | |
contents: '<i class="fa fa-file-o"/>', | |
tooltip: 'mini dialog', | |
click: context.createInvokeHandler('minidiag.showDialog') | |
}).render(); | |
}); | |
// This method will be called when editor is initialized by $('..').summernote(); | |
// You can create elements for plugin | |
self.initialize = function () { | |
var $container = options.dialogsInBody ? $(document.body) : $editor; | |
var body = '<div class="form-group row-fluid">' + | |
'<h2>minimal dialog body</h2>' + | |
'</div>'; | |
var footer = '<button href="#" class="btn btn-primary ext-minidiag-btn">OK</button>'; | |
self.$dialog = ui.dialog({ | |
title: 'minimal dialog title', | |
fade: options.dialogsFade, | |
body: body, | |
footer: footer | |
}).render().appendTo($container); | |
}; | |
// This methods will be called when editor is destroyed by $('..').summernote('destroy'); | |
// You should remove elements on `initialize`. | |
self.destroy = function () { | |
self.$dialog.remove(); | |
self.$dialog = null; | |
}; | |
self.showDialog = function () { | |
self | |
.openDialog() | |
.then(function (dialogData) { | |
// [workaround] hide dialog before restore range for IE range focus | |
ui.hideDialog(self.$dialog); | |
context.invoke('editor.restoreRange'); | |
// do something with dialogData | |
console.log("dialog returned: ", dialogData) | |
// ... | |
}) | |
.fail(function () { | |
context.invoke('editor.restoreRange'); | |
}); | |
}; | |
self.openDialog = function () { | |
return $.Deferred(function (deferred) { | |
var $dialogBtn = self.$dialog.find('.ext-minidiag-btn'); | |
ui.onDialogShown(self.$dialog, function () { | |
context.triggerEvent('dialog.shown'); | |
$dialogBtn | |
.click(function (event) { | |
event.preventDefault(); | |
deferred.resolve({ action: 'mini dialog OK clicked...' }); | |
}); | |
}); | |
ui.onDialogHidden(self.$dialog, function () { | |
$dialogBtn.off('click'); | |
if (deferred.state() === 'pending') { | |
deferred.reject(); | |
} | |
}); | |
ui.showDialog(self.$dialog); | |
}); | |
}; | |
} | |
}); | |
})); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment