This is an example of a CKEditor edit control. Edit the text, resize the control or browser window, scroll around, click...
@@ -22,7 +23,7 @@
diff --git a/samples/common.js b/samples/common.js
new file mode 100644
index 0000000..738c8de
--- /dev/null
+++ b/samples/common.js
@@ -0,0 +1,140 @@
+/**
+ * Class to receive grammar checking service notification
+ *
+ * This implementation handles the status icon in the lower-right corner of the host element.
+ */
+class BesStatusIconEventSink {
+ /**
+ * Called when grammar checking service is registered
+ *
+ * @param {BesService} service Grammar checking service
+ */
+ register(service) {
+ this.statusDiv = document.createElement('div')
+ this.statusDiv.classList.add('bes-status-div')
+ this.statusIcon = document.createElement('div')
+ this.statusIcon.classList.add('bes-status-icon')
+ this.statusDiv.appendChild(this.statusIcon)
+ this.setStatusDivPosition(service)
+ service.textElement.parentNode.insertBefore(
+ this.statusDiv,
+ service.textElement.nextSibling
+ )
+ }
+
+ /**
+ * Called when grammar checking service is unregistered
+ *
+ * @param {BesService} service Grammar checking service
+ */
+ unregister(service) {
+ this.statusDiv.remove()
+ this.statusIcon.remove()
+ }
+
+ /**
+ * Called to report repositioning
+ *
+ * @param {BesService} service Grammar checking service
+ */
+ reposition(service) {
+ this.setStatusDivPosition(service)
+ }
+
+ /**
+ * Called to report resizing
+ *
+ * @param {BesService} service Grammar checking service
+ */
+ resize(service) {
+ this.setStatusDivPosition(service)
+ }
+
+ /**
+ * Repositions status DIV element.
+ *
+ * @param {BesService} service Grammar checking service
+ */
+ setStatusDivPosition(service) {
+ const rect = service.textElement.getBoundingClientRect()
+ const scrollbarWidth =
+ service.textElement.offsetWidth - service.textElement.clientWidth
+ this.statusDiv.style.left = `${rect.right - 40 - scrollbarWidth}px`
+ const scrollbarHeight =
+ service.textElement.offsetHeight - service.textElement.clientHeight
+ this.statusDiv.style.top = `${rect.bottom - 30 - scrollbarHeight}px`
+ }
+
+ /**
+ * Called to report grammar proofing started
+ *
+ * @param {BesService} service Grammar checking service
+ */
+ startProofing(service) {
+ this.updateStatusIcon('bes-status-loading', 'Besana preverja pravopis.')
+ }
+
+ /**
+ * Called to report grammar-checking failed (as 500 Internal server error, timeout, etc.)
+ *
+ * @param {BesService} service Grammar checking service
+ * @param {Response} response HTTP response
+ */
+ failedProofing(service, response) {
+ this.updateStatusIcon(
+ 'bes-status-error',
+ `Pri preverjanju pravopisa je prišlo do napake ${response.status} ${response.statusText}.`
+ )
+ }
+
+ /**
+ * Called to report grammar-checking run is ended
+ *
+ * @param {BesService} service Grammar checking service
+ */
+ endProofing(service) {
+ if (service.proofingError) {
+ this.updateStatusIcon(
+ 'bes-status-error',
+ `Pri obdelavi odgovora pravopisnega strežnika je prišlo do napake: ${service.proofingError}`
+ )
+ } else if (service.proofingMatches > 0)
+ this.updateStatusIcon(
+ 'bes-status-mistakes',
+ `Število napak: ${service.proofingMatches}`
+ )
+ else this.updateStatusIcon('bes-status-success', 'V besedilu ni napak.')
+ }
+
+ /**
+ * Sets status icon style and title.
+ *
+ * @param {String} status CSS class name to set status icon to
+ * @param {String} title Title of the status icon
+ */
+ updateStatusIcon(status, title) {
+ const statuses = [
+ 'bes-status-loading',
+ 'bes-status-success',
+ 'bes-status-mistakes',
+ 'bes-status-error'
+ ]
+ statuses.forEach(statusClass => {
+ this.statusIcon.classList.remove(statusClass)
+ })
+ this.statusIcon.classList.add(status)
+ this.statusDiv.title = title
+ }
+}
+
+class BesCKStatusIconEventSink extends BesStatusIconEventSink {
+ /**
+ * Repositions status DIV element.
+ *
+ * @param {BesService} service Grammar checking service
+ */
+ setStatusDivPosition(service) {
+ this.statusDiv.style.right = `10px`
+ this.statusDiv.style.bottom = `10px`
+ }
+}
diff --git a/samples/div-contenteditable-plaintext-only.html b/samples/div-contenteditable-plaintext-only.html
index 040a08a..cbc94f0 100644
--- a/samples/div-contenteditable-plaintext-only.html
+++ b/samples/div-contenteditable-plaintext-only.html
@@ -8,10 +8,11 @@
+
This is an example of a simple <div contenteditable="plaintext-only"> edit control. Edit the text, resize the control or browser window, scroll around, click...
-
Tukaj vpišite besedilo ki ga želite popraviti.
+
Tukaj vpišite besedilo ki ga želite popraviti.
Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.
@@ -21,5 +22,8 @@ Na mizo nisem položil knjigo.
Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.