From 0fa33422a4e9463aeb5f76fcd2f1093576485ceb Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Tue, 3 Nov 2015 08:48:36 +1100 Subject: [PATCH] Input monitor docs, prevent duplicate tab-close buttons Recompile assets --- modules/system/assets/js/lang/lang.ro.js | 2 +- modules/system/assets/js/lang/lang.ru.js | 2 +- .../system/assets/ui/docs/input-monitor.md | 55 ++++++++++++++++++- .../system/assets/ui/docs/input-trigger.md | 6 +- modules/system/assets/ui/js/input.monitor.js | 36 ++---------- modules/system/assets/ui/js/tab.js | 10 ++-- modules/system/assets/ui/storm-min.js | 8 +-- 7 files changed, 72 insertions(+), 47 deletions(-) diff --git a/modules/system/assets/js/lang/lang.ro.js b/modules/system/assets/js/lang/lang.ro.js index 6726980f9..60a6e4184 100644 --- a/modules/system/assets/js/lang/lang.ro.js +++ b/modules/system/assets/js/lang/lang.ro.js @@ -5,5 +5,5 @@ if ($.oc === undefined) $.oc = {} if ($.oc.langMessages === undefined) $.oc.langMessages = {} $.oc.langMessages['ro'] = $.extend( $.oc.langMessages['ro'] || {}, - {"markdowneditor":{"formatting":"Formatting","quote":"Quote","code":"Code","header1":"Header 1","header2":"Header 2","header3":"Header 3","header4":"Header 4","header5":"Header 5","header6":"Header 6","bold":"Bold","italic":"Italic","unorderedlist":"Unordered List","orderedlist":"Ordered List","video":"Video","image":"Image","link":"Link","horizontalrule":"Insert Horizontal Rule","fullscreen":"Full screen","preview":"Preview"},"mediamanager":{"insert_link":"Insert Media Link","insert_image":"Insert Media Image","insert_video":"Insert Media Video","insert_audio":"Insert Media Audio","invalid_file_empty_insert":"Please select file to insert a links to.","invalid_file_single_insert":"Please select a single file.","invalid_image_empty_insert":"Please select image(s) to insert.","invalid_video_empty_insert":"Please select a video file to insert.","invalid_audio_empty_insert":"Please select an audio file to insert."},"alert":{"confirm_button_text":"OK","cancel_button_text":"Cancel"}} + {"markdowneditor":{"formatting":"Formatare","quote":"Citat","code":"Cod","header1":"Antet 1","header2":"Antet 2","header3":"Antet 3","header4":"Antet 4","header5":"Antet 5","header6":"Antet 6","bold":"\u00cengro\u0219at","italic":"Italic","unorderedlist":"List\u0103 neordonat\u0103","orderedlist":"List\u0103 ordonat\u0103","video":"Video","image":"Imagine","link":"Link","horizontalrule":"Introdu linie orizontal\u0103","fullscreen":"Umple ecranul","preview":"Previzualizeaz\u0103"},"mediamanager":{"insert_link":"Introdu link","insert_image":"Introdu image","insert_video":"Introdu video","insert_audio":"Introdu audio","invalid_file_empty_insert":"Selecteaz\u0103 un fi\u0219ier c\u0103tre care s\u0103 se fac\u0103 leg\u0103tura.","invalid_file_single_insert":"Selecteaz\u0103 un singur fi\u0219ier.","invalid_image_empty_insert":"Alege imaginile pentru a fi introduse.","invalid_video_empty_insert":"Alege un fi\u0219ier video pentru a fi introdus.","invalid_audio_empty_insert":"Alege un fi\u0219ier video pentru a fi introdus."},"alert":{"confirm_button_text":"OK","cancel_button_text":"Anuleaz\u0103"}} ); \ No newline at end of file diff --git a/modules/system/assets/js/lang/lang.ru.js b/modules/system/assets/js/lang/lang.ru.js index dd8992d19..388fe7a5d 100644 --- a/modules/system/assets/js/lang/lang.ru.js +++ b/modules/system/assets/js/lang/lang.ru.js @@ -5,5 +5,5 @@ if ($.oc === undefined) $.oc = {} if ($.oc.langMessages === undefined) $.oc.langMessages = {} $.oc.langMessages['ru'] = $.extend( $.oc.langMessages['ru'] || {}, - {"markdowneditor":{"formatting":"Formatting","quote":"Quote","code":"Code","header1":"Header 1","header2":"Header 2","header3":"Header 3","header4":"Header 4","header5":"Header 5","header6":"Header 6","bold":"Bold","italic":"Italic","unorderedlist":"Unordered List","orderedlist":"Ordered List","video":"Video","image":"Image","link":"Link","horizontalrule":"Insert Horizontal Rule","fullscreen":"Full screen","preview":"Preview"},"mediamanager":{"insert_link":"Insert Media Link","insert_image":"Insert Media Image","insert_video":"Insert Media Video","insert_audio":"Insert Media Audio","invalid_file_empty_insert":"Please select file to insert a links to.","invalid_file_single_insert":"Please select a single file.","invalid_image_empty_insert":"Please select image(s) to insert.","invalid_video_empty_insert":"Please select a video file to insert.","invalid_audio_empty_insert":"Please select an audio file to insert."},"alert":{"confirm_button_text":"OK","cancel_button_text":"Cancel"}} + {"markdowneditor":{"formatting":"\u0424\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435","quote":"\u0426\u0438\u0442\u0430\u0442\u0430","code":"\u041a\u043e\u0434","header1":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a 1","header2":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a 2","header3":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a 3","header4":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a 4","header5":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a 5","header6":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a 6","bold":"\u0416\u0438\u0440\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442","italic":"\u041a\u0443\u0440\u0441\u0438\u0432","unorderedlist":"\u041d\u0435\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a","orderedlist":"\u041d\u0443\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a","video":"\u0412\u0438\u0434\u0435\u043e","image":"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435","link":"\u0421\u0441\u044b\u043b\u043a\u0430","horizontalrule":"\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0447\u0435\u0440\u0442\u0443","fullscreen":"\u041f\u043e\u043b\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d","preview":"\u041f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440"},"mediamanager":{"insert_link":"\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043c\u0435\u0434\u0438\u0430-\u0441\u0441\u044b\u043b\u043a\u0443","insert_image":"\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043c\u0435\u0434\u0438\u0430-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435","insert_video":"\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043c\u0435\u0434\u0438\u0430-\u0432\u0438\u0434\u0435\u043e","insert_audio":"\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043c\u0435\u0434\u0438\u0430-\u0430\u0443\u0434\u0438\u043e","invalid_file_empty_insert":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0441\u0441\u044b\u043b\u043a\u0438.","invalid_file_single_insert":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b.","invalid_image_empty_insert":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438.","invalid_video_empty_insert":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043e \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438.","invalid_audio_empty_insert":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0443\u0434\u0438\u043e \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438."},"alert":{"confirm_button_text":"\u041e\u043a","cancel_button_text":"\u041e\u0442\u043c\u0435\u043d\u0430"}} ); \ No newline at end of file diff --git a/modules/system/assets/ui/docs/input-monitor.md b/modules/system/assets/ui/docs/input-monitor.md index 40ad9f8c3..01ebf0c6f 100644 --- a/modules/system/assets/ui/docs/input-monitor.md +++ b/modules/system/assets/ui/docs/input-monitor.md @@ -1,8 +1,59 @@ # Input Monitoring -This will monitor the user input for unsaved changes and show a confirmation box if the user attempts to leave the page. +This will monitor the user input for unsaved changes and show a confirmation box if the user attempts to leave the page. The script adds the "oc-data-changed" class to the form element when the form data is changed. + +```html +
+ ... +
+``` ### Example -TBA +Click the "Mark changed" button and "Reload page". +
+ + + + + +
+ + + +
+ +## Supported data attributes + +- data-change-monitor - enables the plugin form a form +- data-window-close-confirm - confirmation message to show when a browser window is closing and there is unsaved data + +## Supported events + +- change - marks the form data as "changed". The event can be triggered on any element within a form or on a form itself. +- unchange.oc.changeMonitor - marks the form data as "unchanged". The event can be triggered on any element within a form or on a form itself. +- pause.oc.changeMonitor - temporary pauses the change monitoring. The event can be triggered on any element within a form or on a form itself. +- resume.oc.changeMonitor - resumes the change monitoring. The event can be triggered on any element within a form or on a form itself. + +## Triggered events + +- changed.oc.changeMonitor - triggered when the form data changes. +- unchanged.oc.changeMonitor - triggered when the form data unchanges. + +## JavaScript API + +```js +$('#form').changeMonitor() +``` diff --git a/modules/system/assets/ui/docs/input-trigger.md b/modules/system/assets/ui/docs/input-trigger.md index 62b5eb7b0..58fa36793 100644 --- a/modules/system/assets/ui/docs/input-trigger.md +++ b/modules/system/assets/ui/docs/input-trigger.md @@ -38,7 +38,7 @@ The API allows to change elements' visibility or status (enabled/disabled) basin -## Supported data attributes: +## Supported data attributes - data-trigger-action, values: show, hide, enable, disable, empty - data-trigger: a CSS selector for elements that trigger the action (checkboxes) @@ -69,12 +69,12 @@ Multie value conditions are supported: data-trigger-condition="value[foo][bar]" ``` -### Supported events: +### Supported events - oc.triggerOn.update - triggers the update. Trigger this event on the element the plugin is bound to to force it to check the condition and update itself. This is useful when the page content is updated with AJAX. - oc.triggerOn.afterUpdate - triggered after the element is updated -### JavaScript API: +### JavaScript API ```html $('#mybutton').triggerOn({ diff --git a/modules/system/assets/ui/js/input.monitor.js b/modules/system/assets/ui/js/input.monitor.js index e6bd1704e..9e7335917 100644 --- a/modules/system/assets/ui/js/input.monitor.js +++ b/modules/system/assets/ui/js/input.monitor.js @@ -1,35 +1,7 @@ /* - * The form change monitor API. + * The form change monitor API. * - * This plugin allows to monitor changes in a form. - * The script adds the "oc-data-changed" class to the form element when the form data is changed. - * - * Supported data attributes: - * - data-change-monitor - enables the plugin form a form - * - data-window-close-confirm - confirmation message to show when a browser window is closing and there is unsaved data - * - * Example:
- * - * Supported events: - * - change - marks the form data as "changed". The event can be triggered on any - * element within a form or on a form itself. - * - unchange.oc.changeMonitor - marks the form data as "unchanged". The event can be triggered on any - * element within a form or on a form itself. - * - pause.oc.changeMonitor - temporary pauses the change monitoring. The event can be triggered on any - * element within a form or on a form itself. - * - resume.oc.changeMonitor - resumes the change monitoring. The event can be triggered on any - * element within a form or on a form itself. - * - * Triggered events: - * - changed.oc.changeMonitor - triggered when the form data changes. - * - unchanged.oc.changeMonitor - triggered when the form data unchanges. - * - * JavaScript API: - * $('#form').changeMonitor() + * - Documentation: ../docs/input-monitor.md */ +function ($) { "use strict"; @@ -55,8 +27,8 @@ ChangeMonitor.prototype.init = function() { this.$el.on('change', this.proxy(this.change)) this.$el.on('unchange.oc.changeMonitor', this.proxy(this.unchange)) - this.$el.on('pause.oc.changeMonitor ', this.proxy(this.pause)) - this.$el.on('resume.oc.changeMonitor ', this.proxy(this.resume)) + this.$el.on('pause.oc.changeMonitor', this.proxy(this.pause)) + this.$el.on('resume.oc.changeMonitor', this.proxy(this.resume)) this.$el.on('keyup input paste', 'input, textarea:not(.ace_text-input)', this.proxy(this.onInputChange)) $('input:not([type=hidden]), textarea:not(.ace_text-input)', this.$el).each(function() { diff --git a/modules/system/assets/ui/js/tab.js b/modules/system/assets/ui/js/tab.js index d1a22c9cf..51bc152de 100644 --- a/modules/system/assets/ui/js/tab.js +++ b/modules/system/assets/ui/js/tab.js @@ -105,10 +105,12 @@ var pane = $('> .tab-pane', this.$pagesContainer).eq(tabIndex).attr('id', targetId) - $(li).append($('×').click(function(){ - $(this).trigger('close.oc.tab') - return false - })) + if (!$('span.tab-close', li).length) { + $(li).append($('×').click(function(){ + $(this).trigger('close.oc.tab') + return false + })) + } pane.data('tab', li) diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js index 3387a36d1..681f251b7 100644 --- a/modules/system/assets/ui/storm-min.js +++ b/modules/system/assets/ui/storm-min.js @@ -2706,8 +2706,8 @@ ChangeMonitor.prototype=Object.create(BaseProto) ChangeMonitor.prototype.constructor=ChangeMonitor ChangeMonitor.prototype.init=function(){this.$el.on('change',this.proxy(this.change)) this.$el.on('unchange.oc.changeMonitor',this.proxy(this.unchange)) -this.$el.on('pause.oc.changeMonitor ',this.proxy(this.pause)) -this.$el.on('resume.oc.changeMonitor ',this.proxy(this.resume)) +this.$el.on('pause.oc.changeMonitor',this.proxy(this.pause)) +this.$el.on('resume.oc.changeMonitor',this.proxy(this.resume)) this.$el.on('keyup input paste','input, textarea:not(.ace_text-input)',this.proxy(this.onInputChange)) $('input:not([type=hidden]), textarea:not(.ace_text-input)',this.$el).each(function(){$(this).data('oldval.oc.changeMonitor',$(this).val());}) if(this.options.windowCloseConfirm) @@ -3188,8 +3188,8 @@ var html=$anchor.html() $anchor.html('') $anchor.append($('').append($('').html(html))) var pane=$('> .tab-pane',this.$pagesContainer).eq(tabIndex).attr('id',targetId) -$(li).append($('×').click(function(){$(this).trigger('close.oc.tab') -return false})) +if(!$('span.tab-close',li).length){$(li).append($('×').click(function(){$(this).trigger('close.oc.tab') +return false}))} pane.data('tab',li) this.$el.trigger('initTab.oc.tab',[{'pane':pane,'tab':li}])} Tab.prototype.addTab=function(title,content,identifier,tabClass){var