') ? ' ' : '') + : inputCtrl.val(); + }, + + setInputControlContent: function(content) { + var inputCtrl = this.get('inputControl'); + this.isAdaptableControl() + ? inputCtrl.prop('innerText', (this.isAdaptableControl('text') ? this.textControlContentTransformer(content) : content)) + : inputCtrl.val(content); + }, + + updateControlModel: function(valueKey) { + if (this.get('value') === valueKey) return; + if (valueKey && valueKey.trim) + valueKey = valueKey.trim(); + this.set('value', valueKey); + }, + + createShowAllButton: function() { + var that = this; + var button = guiHelpers.getButton(icons.dropdown, null, guiHelpers.classes.controls.inputButton) + .attr('tabIndex', -1) + .attr('title', translate.getString('showAll')) + .prop('disabled', this.get('disabled')) + .on('mousedown', + function() { + if (!that.get('isAllVisible')) { + that.set('isAllVisible', true); + that.set('keepPopupOpen', true); + var searchText = that.getInputControlContent(); + var regex = searchText + ? new RegExp(regexHelpers + .escapeRegExp(searchText), + 'gi') + : undefined; + that.rebuildPopup(that.get('dataSource'), regex); + } else { + that.hidePopup(); + } + }) + .on('blur', + function () { + that.set('keepPopupOpen', false); + that.handleBlur(); + }); + this.set('showAllButton', button); + return button; + }, + + buildPopup: function(dataSource, searchRegex) { + var that = this; + var popup = $('
- ');
+ popup.scroll(function () {
+ that.set('keepPopupOpen', true);
+ });
+ guiHelpers.setContextMenuZIndex(popup);
+
+
+ if (dataSource) {
+ $.each(dataSource,
+ function () {
+ if (!this.Key || !this.Value)
+ throw Error(
+ 'when setting "dataSource", dataSource must be an array with objects having "Key" and "Value" fields');
+
+ var entry = $('
- ');
+ // drop down styling
+ if (that.isAdaptableControl())
+ entry.css('white-space', 'pre-wrap');
+ entry.data('dataItem', this);
+ entry.click(function () {
+ that.confirm(entry, true);
+ });
+ // mark search results
+ if (searchRegex !== undefined) {
+ var hit;
+ var index = 0;
+ while ((hit = searchRegex.exec(this.Value)) != null) {
+ var textToHit = this.Value.substring(index, hit.index);
+ $('')
+ .text(textToHit)
+ .appendTo(entry);
+ $('')
+ .text(hit[0])
+ .appendTo(entry);
+ index = hit.index + hit[0].length;
+ }
+ if (index < this.Value.length) {
+ $('')
+ .text(this.Value.substring(index))
+ .appendTo(entry);
+ }
+ } else
+ entry.text(this.Value);
+ popup.append(entry);
+ });
+ }
+ this.set('popup', popup);
+ return popup;
+ },
+
+ openPopup: function () {
+ this.set('didActionHappen', true);
+ var that = this;
+ actionStack.registerComponentState('comboBox_open',
+ function() {
+ // create
+ that.get('popup').show();
+ that.set('isPopupVisible', true);
+ },
+ function() {
+ // destroy
+ if (!that.get('isDestroyed') && !that.get('isDestroying')) {
+ that.get('popup').hide();
+ that.set('isPopupVisible', false);
+ }
+ },
+ function() {
+ // confirm
+ if (!that.get('isDestroyed') && !that.get('isDestroying')) {
+ var focusedItem = that.get('focusedItem');
+ if (focusedItem) {
+ that.confirm(focusedItem, true);
+ }
+ }
+ });
+ },
+
+ hidePopup: function () {
+ if (this.get('isDestroyed') || this.get('isDestroying'))
+ return;
+
+ this.set('isAllVisible', false);
+ this.set('didActionHappen', true);
+ this.get('popup').hide();
+ this.set('focusedItem', undefined);
+ this.set('isPopupVisible', false);
+ actionStack.unregisterAction('comboBox_open');
+ },
+
+ confirm: function (item, close) {
+ if (this.get('isDestroyed') || this.get('isDestroying'))
+ return;
+ this.set('didActionHappen', true);
+ this.set('focusedItem', undefined);
+ var dataItem = item.data('dataItem');
+ var value = this.textControlContentTransformer(dataItem.Value || '');
+ this.setInputControlContent(value);
+ this.updateControlModel(dataItem.Key);
+ this.set('lastConfirmedValue', value);
+ this.set('lastValidSearch', value);
+ if (close)
+ this.hidePopup();
+ },
+
+ confirmInputValue: function () {
+ if (this.get('isDestroyed') || this.get('isDestroying'))
+ return;
+
+ this.set('didActionHappen', true);
+ this.set('focusedItem', undefined);
+ var value = this.getInputControlContent();
+ this.updateControlModel(value);
+ this.set('lastConfirmedValue', value);
+ },
+
+ handleKeyUp: function(e) {
+ var genesisCache = this.get('eventGenesisCache');
+
+ if (!genesisCache)
+ return;
+
+ // value has not changed, handle directional/selection keys instead
+ if (this.getInputControlContent() === genesisCache.value) {
+
+ // handle up and down keypress
+ if (keyboard.isYDirectionalKey(e)) {
+ var newPositions = getSelection();
+
+ // navigation key was pressed, either with ALT key or caret didn't change position, hence open popup
+ var showPopUp = this.get('isPopupVisible') || event.altKey ||
+ newPositions.focusNode === genesisCache.focusNode &&
+ newPositions.focusOffset == genesisCache.focusOffset &&
+ newPositions.anchorOffset == genesisCache.anchorOffset;
+
+ if (showPopUp) {
+ switch (e.which) {
+ case keyboard.downKey:
+ this.navigateList(true, e);
+ break;
+ case keyboard.upKey:
+ this.navigateList(false, e);
+ break;
+ }
+ }
+ return;
+
+ } else if (this.get('focusedItem') && (keyboard.isApplyChoiceKey(e) || e.which === keyboard.spaceKey)) {
+ // apply value of the marked item
+ this.confirm(this.get('focusedItem'), true);
+ return;
+ } else if (e.which === keyboard.escKey) {
+ // hide opened popup
+ this.hidePopup();
+ return;
+ }
+ } else if (this.getInputControlContent() !== genesisCache.value) {
+ // ignore post control keyup events
+ if (this.get('focusedItem') && keyboard.isApplyChoiceKey(e) || e.which === keyboard.altKey) {
+ this.setCaretPosition(e.target);
+ return;
+ }
+ }
+
+ this.set('lastConfirmedValue', '');
+ var searchText = this.getInputControlContent();
+ var dataSource = this.get('dataSource');
+
+ if (searchText === '') {
+ this.set('lastValidSearch', '');
+ this.confirm($('li').data('dataItem', {}), false);
+ this.rebuildPopup(dataSource);
+ return;
+ }
+
+ var regex = new RegExp(regexHelpers.escapeRegExp(searchText), 'gi');
+ var filteredSource = this.filterDataSource(dataSource, regex);
+
+
+ if (this.get('allowArbitraryText')) {
+ if (filteredSource.length === 0 && this.get('isPopupVisible')) {
+ this.hidePopup();
+ this.rebuildPopup(dataSource);
+ this.hidePopup();
+ }
+ ember.run.debounce(this, this.confirmInputValue, uiSettings.defaultDebouncing);
+ } else {
+ // run in another thread to save performance
+ var that = this;
+ setTimeout(function() {
+ that.correctInput(searchText, filteredSource, e);
+ },
+ 1);
+ }
+
+ if (filteredSource.length === 0)
+ return;
+ this.set('lastFilteredSource', filteredSource);
+ this.rebuildPopup(filteredSource, regex);
+ },
+
+ handleKeyDown: function(e) {
+ var selection = getSelection();
+
+ this.set('eventGenesisCache', {
+ anchorOffset: selection.anchorOffset,
+ focusOffset: selection.focusOffset,
+ value: this.getInputControlContent(),
+ focusNode: selection.focusNode
+ });
+
+ if (this.get('focusedItem') && keyboard.isPopUpNavigationKey(e) ||
+ this.get('isPopupVisible') && keyboard.isApplyChoiceKey(e)) {
+ // when navigating popup, prevent moving the caret in input or key inserts
+ e.preventDefault();
+ }
+ },
+
+ handleBlur: function () {
+ var that = this;
+ this.set('eventGenesisCache', null);
+ setTimeout(function () {
+ if (that.get('keepPopupOpen') === true) {
+ that.set('keepPopupOpen', false);
+ return;
+ }
+ if (!that.get('didActionHappen')) {
+ if (that.get('allowArbitraryText')) {
+ that.confirmInputValue();
+ that.hidePopup();
+ } else {
+ // if the value exists exact in the items of the combobox take it as valid choice
+ var dataSource = that.get('dataSource');
+ var searchText = that.getInputControlContent();
+ var foundItems = dataSource.filter(function(item) {
+ return item.Value === searchText;
+ });
+ if (foundItems.length > 0)
+ that.confirm($('li').data('dataItem', foundItems[0]), true);
+ else {
+ that.hidePopup();
+ // clear invalid search
+ that.setInputControlContent('');
+ that.set('lastValidSearch', '');
+ }
+ }
+ } else {
+ that.set('didActionHappen', false);
+ that.handleBlur();
+ }
+ }, 100);
+ },
+
+ navigateList: function(down, e) {
+ var popup = this.get('popup');
+ if (this.get('isPopupVisible') === false)
+ this.openPopup();
+
+ var focusedItem = this.get('focusedItem');
+ var newFocusedItem;
+
+ if (focusedItem) {
+ newFocusedItem = down
+ ? focusedItem.nextAll('li:visible').first()
+ : focusedItem.prevAll('li:visible').first();
+ } else {
+ newFocusedItem = popup.children().eq(0);
+ }
+
+ if (newFocusedItem.length > 0) {
+ if (focusedItem)
+ focusedItem.removeClass('itemHover');
+ newFocusedItem.addClass('itemHover');
+ this.set('focusedItem', newFocusedItem);
+ }
+ e.preventDefault();
+ },
+
+ filterDataSource: function(dataSource, regex) {
+ var filteredSource = dataSource.filter(function(item) {
+ return item.Value.search(regex) > -1;
+ });
+ return filteredSource;
+ },
+
+ rebuildPopup: function(dataSource, regex) {
+ var popup = this.get('popup');
+ this.set('focusedItem', undefined);
+ popup.remove();
+ popup = this.buildPopup(dataSource, regex);
+ this.$().append(popup);
+ this.openPopup();
+ var containerSelector = this.get('containerSelector');
+ if (!containerSelector)
+ containerSelector = '.dialogBody, .flexDialogBody';
+ guiHelpers.correctContextMenuPosition(popup, this.$(), containerSelector, true);
+ },
+
+ correctInput: function(searchText, filteredSource, event) {
+ // no search text is valid
+ if (searchText === '') {
+ return;
+ }
+
+ // invalid -> revert text and search again
+ if (filteredSource.length === 0) {
+ this.setInputControlContent(this.get('lastValidSearch'));
+ this.setCaretPosition(event.target, this.get('eventGenesisCache').focusOffset);
+ this.handleKeyUp(event);
+ return;
+ }
+
+ // valid -> check if the current casing is correct
+ var dataSource = this.get('dataSource');
+ var exactMatches = this
+ .filterDataSource(dataSource, new RegExp(regexHelpers.escapeRegExp(searchText), 'g'));
+ if (exactMatches.length === 0) {
+ var firstValue = filteredSource[0].Value;
+ var regex = new RegExp(regexHelpers.escapeRegExp(searchText), 'gi');
+ searchText = regex.exec(firstValue)[0];
+ this.setInputControlContent(searchText);
+ this.setCaretPosition(event.target);
+ }
+ // if there is only one result and everything has been entered -> confirm value only
+ if (filteredSource.length === 1) {
+
+ if (this.get('isPopupVisible') && keyboard.isApplyChoiceKey(event)) {
+
+ this.confirm($('li').data('dataItem', filteredSource[0]), true);
+ this.setCaretPosition(event.target);
+ var newSearchText = filteredSource[0].Value;
+ this.set('lastValidSearch', newSearchText);
+ return;
+ }
+ }
+
+ this.set('lastValidSearch', searchText);
+ },
+
+ disabledChanged: ember.observer('disabled',
+ function() {
+ var inputControl = this.get('inputControl');
+ var button = this.get('showAllButton');
+ if (inputControl)
+ inputControl.prop('disabled', this.get('disabled'));
+ if (button)
+ button.prop('disabled', this.get('disabled'));
+ }),
+
+ nameChanged: ember.observer('name',
+ function () {
+ var inputControl = this.get('inputControl');
+ if (inputControl)
+ inputControl.prop('name', this.get('name'));
+ })
+ }));
+});
\ No newline at end of file
diff --git a/test/apps/EmberApps/App/Components/contextMenuButtonComponent.js b/test/apps/EmberApps/App/Components/contextMenuButtonComponent.js
new file mode 100644
index 00000000..67dc38bc
--- /dev/null
+++ b/test/apps/EmberApps/App/Components/contextMenuButtonComponent.js
@@ -0,0 +1,47 @@
+define([
+ 'jquery',
+ 'ember',
+ 'application',
+ 'actionStack',
+ 'keyboard',
+ 'guiHelpers',
+ 'templates/components/contextMenuButtonComponent'
+], function ($, ember, app, actionStack, keyboard, guiHelpers) {
+ app.ContextMenuButtonComponent = ember.Component.extend({
+ tagName: '',
+
+ actions: {
+ buttonClicked: function() {
+ this.get('contextMenu').toggle();
+ }
+ },
+
+ didInsertElement: function () {
+ var that = this;
+ if (this.get('id') === undefined)
+ this.set('id', 'btnContextMenu');
+
+ var button = $('#' + this.get('id'));
+ ember.run.scheduleOnce('afterRender', function () {
+ var contextMenu = button.next('.contextMenu');
+ guiHelpers.setContextMenu(contextMenu, button, that.get('right'), true);
+ that.set('contextMenu', contextMenu);
+ actionStack.registerComponentState('showContextMenu',
+ undefined,
+ function () { that.get('contextMenu').hide(); });
+ if (that.get('shortcut')) {
+ keyboard.registerShortcut(that.get('shortcut'),
+ undefined,
+ function() {
+ contextMenu.toggle();
+ });
+ }
+ });
+ },
+
+ forcedClose: ember.observer('forceClose', function() {
+ if (this.get('forceClose') === true)
+ this.get('contextMenu').hide();
+ })
+ });
+});
\ No newline at end of file
diff --git a/test/apps/EmberApps/App/Components/crystalReportChooserComponent.js b/test/apps/EmberApps/App/Components/crystalReportChooserComponent.js
new file mode 100644
index 00000000..2bde1ad2
--- /dev/null
+++ b/test/apps/EmberApps/App/Components/crystalReportChooserComponent.js
@@ -0,0 +1,44 @@
+define([
+ 'jquery',
+ 'ember',
+ 'application',
+ 'guiHelpers',
+ 'settings',
+ 'icons',
+ 'translate',
+ 'api'
+], function ($, ember, app, guiHelpers, settings, icons, translate, api) {
+ app.CrystalReportChooserComponent = ember.Component.extend({
+ tagName: 'button',
+ type: 'button',
+ attributeBindings: ['type'],
+
+ didInsertElement: function () {
+ var reportInfo;
+ var element = this.$();
+ var keys = this.get('keys');
+ element.append(icons.pdf);
+ var context = this.get('context').toLowerCase();
+ if (settings.reports !== undefined) {
+ var reports = settings.reports[context];
+ if (reports) {
+ api.getAvailableCrystalReports(context, reports, keys, function (result) {
+ reportInfo = result;
+
+ if (reportInfo === undefined)
+ return;
+
+ guiHelpers.addContextMenuToButton(element, function (contextMenu) {
+ $.each(reportInfo, function () {
+ var link = guiHelpers.getLinkNewWindow(
+ api.getCrystalReportUrl(context, this.Id, keys),
+ this.Title);
+ contextMenu.append(link);
+ });
+ }, true, 'Ctrl+Shift+P', translate.getString('noReports'));
+ });
+ }
+ }
+ }
+ });
+});
\ No newline at end of file
diff --git a/test/apps/EmberApps/App/Components/crystalReportComponent.js b/test/apps/EmberApps/App/Components/crystalReportComponent.js
new file mode 100644
index 00000000..8f5da7f0
--- /dev/null
+++ b/test/apps/EmberApps/App/Components/crystalReportComponent.js
@@ -0,0 +1,29 @@
+define([
+ 'ember',
+ 'api',
+ 'guiHelpers',
+ 'icons'
+], function (ember, api, guiHelpers, icons) {
+ ClxApp.CrystalReportComponent = ember.Component.extend({
+ tagName: 'a',
+ attributeBindings: ['target'],
+
+ didInsertElement: function() {
+ var that = this;
+ var reportContext = this.get('reportContext');
+ var reportId = this.get('reportId');
+ var dataKey = this.get('dataKey');
+ var caption = this.get('caption');
+
+ api.getAvailableCrystalReports(reportContext, [reportId], [dataKey], function (result) {
+ if (result && result.length > 0 && (!that.get('storedPdf') || result[0].AllowedKeys.indexOf(dataKey) > -1)) {
+ that.$()
+ .addClass(guiHelpers.classes.report.pdfReport)
+ .addClass(guiHelpers.classes.dialog.textIcon)
+ .attr('href', '#/reports/' + reportContext + '/' + result[0].Id + '/' + dataKey)
+ .html(icons.pdf + (caption ? caption : result[0].Title));
+ }
+ });
+ }
+ });
+});
\ No newline at end of file
diff --git a/test/apps/EmberApps/App/Components/dateTextboxComponent.js b/test/apps/EmberApps/App/Components/dateTextboxComponent.js
new file mode 100644
index 00000000..3caf0be7
--- /dev/null
+++ b/test/apps/EmberApps/App/Components/dateTextboxComponent.js
@@ -0,0 +1,195 @@
+define([
+ 'jquery',
+ 'ember',
+ 'application',
+ 'icons',
+ 'globalize',
+ 'storage'
+], function ($, ember, app, icons, globalize, storage) {
+
+ // initialize jquery ui datepicker
+
+ //de
+ $.datepicker.regional['de'] = {
+ prevText: 'Zurück',
+ nextText: 'Vorwärts',
+ monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
+ dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+ firstDay: 1
+ };
+
+ //en
+ $.datepicker.regional['en'] = {
+ prevText: 'Previous',
+ nextText: 'Next;',
+ monthNames: ['January', 'February', 'March', 'April', 'Mai', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+ dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+ firstDay: 0
+ };
+
+ //fr
+ $.datepicker.regional['fr'] = {
+ prevText: 'Previus',
+ nextText: 'Suivant;',
+ monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
+ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
+ firstDay: 1
+ };
+
+
+ // actual module
+ app.DateTextboxComponent = ember.TextField.extend({
+ classNames: ['dateTextbox'],
+
+ initProperties: function(lang) {
+ if (this.get('hideButton') === undefined)
+ this.set('hideButton', false);
+ if (this.get('yearRange') === undefined)
+ this.set('yearRange', '-100:+20');
+ if (this.get('format') === undefined) {
+ var format = 'dd.mm.yy';
+ if (lang === 'en-US')
+ format = 'mm/dd/yy';
+ if (lang === 'en-GB')
+ format = 'dd/mm/yy';
+ this.set('format', format);
+ }
+ // overwrite properties
+ if (this.get('disabeld'))
+ this.set('hideButton', true);
+ },
+
+ initDatePickerDefaults: function(lang) {
+ switch (lang) {
+ case 'de-CH':
+ case 'de-DE':
+ $.datepicker.setDefaults($.datepicker.regional['de']);
+ break;
+ case 'fr-CH':
+ $.datepicker.setDefaults($.datepicker.regional['fr']);
+ break;
+ case 'en-US':
+ $.datepicker.setDefaults($.datepicker.regional['en']);
+ break;
+ }
+ },
+
+ didInsertElement: function () {
+ var that = this;
+ var lang = storage.userSettings.uiCulture();
+
+ this.initDatePickerDefaults(lang);
+ this.initProperties(lang);
+
+ ember.run.scheduleOnce('afterRender',
+ function () {
+ var element = that.$();
+ element.wrap(''); + + element.datepicker({ + showOn: 'button', + buttonImageOnly: false, + showAnim: 'slideDown', + dateFormat: that.get('format'), + changeYear: true, + yearRange: that.get('yearRange'), + onSelect: function (dateText) { + that.set('validValue', dateText); + that.set('value', dateText); + } + }) + .next('button') + .html(icons.calendar) + .attr('tabindex', -1); + + if (that.get('hideButton')) { + element.next('button').remove(); + element.addClass('noButton'); + } + + element.blur(function () { + that.handleBlur(); + }); + }); + }, + + handleBlur: function () { + var that = this; + setTimeout(function () { + var element = that.$(); + // showError method + var showError = function () { + that.toggleProperty('updateDate'); + var oldValue = that.formatDateString(that.get('date')); + that.set('value', oldValue); + element.val(oldValue); + element.addClass('validationError showError'); + setTimeout(function () { + element.removeClass('validationError showError'); + }, + 1000); + }; + // validate date + var dateString = element.val(); + if (dateString === '') { + if (that.get('required')) { + showError(); + } + return; + } + var date = globalize.parseDate(dateString); + + // validate for format dd.MM.yy + if (!date) { + var culture = globalize.culture(); + var pattern = culture.calendar.patterns['d']; + date = globalize.parseDate(dateString, pattern.replace('yyyy', 'yy')); + } + + if (date && date > new Date(1753, 1, 1)) { + that.set('validValue', globalize.format(date, 'd')); + element.change(); + } else + showError(); + }, 10); + }, + + value: ember.computed('date', 'updateDate', { + get: function() { + if (!this.get('date')) + return this.get('validValue'); + return this.formatDateString(this.get('date')); + }, + set: function(key, value) { + if (value === '') { + if (this.get('allowEmpty')) { + this.set('date', null); + return null; + } + + return this.get('validValue'); + } + try { + var date = globalize.parseDate(value, 'd'); + date.setMinutes(date.getMinutes() - date.getTimezoneOffset()); + var jsonDate = date.toJSON(); + if (date > new Date(1753, 1, 1)) { + if (jsonDate !== this.get('date')) { + this.set('date', jsonDate); + } + this.set('validValue', globalize.format(date, 'd')); + } + + return this.get('validValue'); + } catch (ex) { + return this.get('validValue'); + } + } + }), + + formatDateString: function(dateString) { + var date = new Date(dateString); + return globalize.format(date, 'd'); + } + }); +}); \ No newline at end of file diff --git a/test/apps/EmberApps/App/Components/detailDialogComponent.js b/test/apps/EmberApps/App/Components/detailDialogComponent.js new file mode 100644 index 00000000..f299e60c --- /dev/null +++ b/test/apps/EmberApps/App/Components/detailDialogComponent.js @@ -0,0 +1,258 @@ +define([ + 'jquery', + 'ember', + 'application', + 'storage', + 'settings', + 'keyboard', + 'guiHelpers', + 'icons', + 'api', + 'translate', + 'actionStack', + 'components/overlayDialogComponent', + 'eventoWidgets' +], function ($, ember, app, storage, settings, keyboard, guiHelpers, icons, api, translate, actionStack) { + app.DetailDialogComponent = app.OverlayDialogComponent.extend({ + layoutName: 'components/overlay-dialog', + classNames: ['detailDialog'], + + actions: { + transitionTab: function (context, params) { + // no idea why but some #each helpers have the context of the component when calling an action + // that's why we need to hand them over to the controller again.. + this.sendAction('transitionTab', context, params); + } + }, + + didInsertElement: function () { + this._super(); + this.validateProperties(); + + var that = this; + var element = this.$(); + var searchListSelector = this.get('searchListSelector'); + var pdfButton = this.get('addPDFButton'); + var dataClassId = this.get('dataClassId').toLowerCase(); + var dataKey = this.get('dataKey'); + + ember.run.scheduleOnce('afterRender', function () { + + var pictureDiv = $('.dialogIcon'); + + var icon = $(icons[dataClassId]); + // add the icon already and remove it when the image can load + pictureDiv.append(icon); + + if (dataClassId === 'person') + that.setPersonPicture(pictureDiv, icon, dataKey); + + that.set('tabs', element.find('.' + guiHelpers.classes.dialog.tab)); + that.set('tabContainer', element.find('.' + guiHelpers.classes.dialog.tabContainer)); + that.set('quickTabChoice', element.find('.' + guiHelpers.classes.dialog.quickTabsChoice)); + that.set('sectionTitle', element.find('.' + guiHelpers.classes.dialog.sectionTitle)); + that.set('dataTitle', element.find('.' + guiHelpers.classes.dialog.title)); + + that.initHistory(); + that.formatTabBar(); + that.addBackButton(); + if (pdfButton) + that.appendPDFButton(); + + if (searchListSelector !== undefined) + that.addButtonsFromSearch($(searchListSelector)); + + that.registerShortcuts(); + that.selectDefaultTab(); + + that.calculateDataTitleSize(); + }); + }, + + setPersonPicture: function(pictureDiv, icon, dataKey) { + // just add an img with the url and replace it with the icon if there is an error on load + var image = $('
'); + image.attr('src', api.getPersonPictureUrl(dataKey)); + // hide image as long as it is not loaded + image.hide(); + guiHelpers.setContextMenuZIndex(image); + image.attr('alt', this.get('controller.model.Title')); + image.error(function() { + $(this).remove(); + }) + .click(function() { + guiHelpers.animatePictureFullsize(image, true); + }) + .load(function() { + image.show(); + icon.remove(); + }); + image.appendTo(pictureDiv); + keyboard.registerShortcut('Ctrl+I', image); + }, + + validateProperties: function () { + if (!this.get('dataClassId') || !this.get('dataKey')) + console.error('"context" and "dataKey" properties must be set on detail-dialog'); + }, + + formatTabBar: function () { + var that = this; + var quickWidth = this.get('quickTabChoice').outerWidth(); + this.get('tabContainer').css({ + // add 1px to quickWidth because all the sizes are or might be in rem. that could lead to rounding issues and quickTabChoice will be to large to fit the bar + 'width': 'calc(100% - ' + (quickWidth + 1) + 'px' + }); + + var tabs = this.get('tabs'); + var tabWidth = 100 / tabs.length; + tabs.each(function () { + var tab1 = $(this); + tab1.css('width', tabWidth + '%') + .parent().click(function () { + + // clear level 1 actions + actionStack.clear(1); + + storage.dialogSettings.currentTabId(tab1.attr('id')); + + // handle dataTypeName for section title (before -) + var sectionTitle = that.get('sectionTitle'); + var sectionTitleText = sectionTitle.text(); + var indexOfDash = sectionTitleText.indexOf(' - '); + if (indexOfDash > 0) + sectionTitleText = sectionTitleText.substring(0, indexOfDash); + + sectionTitle.text(sectionTitleText + ' - ' + tab1.attr('title')); + }); + }); + }, + + initHistory: function () { + var newHistory = storage.dialogHistory(); + if (!newHistory) + newHistory = []; + newHistory.push({ + title: this.get('dataTitle').text(), + context: this.get('dataClassId'), + dataKey: this.get('dataKey') + }); + storage.dialogHistory(newHistory); + }, + + appendPDFButton: function () { + var that = this; + var context = this.get('dataClassId'); + var crInfos = {}; + // if there are reports add them to the report button + if (settings.reports !== undefined) { + var reports = settings.reports[context.toLowerCase()]; + if (reports) { + api.getAvailableCrystalReports(context, + reports, + '', + function (result) { + crInfos = result; + }); + } + } + // append pdf button + var pdfButton = guiHelpers + .getButton(icons.pdf, 'btnPdf') + .appendTo(this.$().find('.buttonContainer')); + + guiHelpers.addContextMenuToButton(pdfButton, + function(contextMenu) { + if (crInfos === undefined) + return; + $.each(crInfos, + function() { + var link = guiHelpers.getLinkNewWindow( + api.getCrystalReportUrl(that.get('dataClassId'), this.Id, that.get('dataKey')), + this.Title); + contextMenu.append(link); + }); + }, + true, + 'Ctrl+Shift+P', + translate.getString('noReports')); + + }, + + addBackButton: function () { + var that = this; + var backButton = guiHelpers.getButton(icons.back, 'btnBack'); + var history = storage.dialogHistory(); + if (history && history.length > 0) { + backButton.appendTo(this.$().find('.buttonContainer')); + guiHelpers.addContextMenuToButton(backButton, function (contextMenu) { + $.each(history, function (histIndex, hist) { + var div = guiHelpers.getDiv(undefined, hist.title); + div.click(function () { + // remove from history until selected + history.splice(histIndex, history.length - histIndex); + storage.dialogHistory(history); + // invoke back clicked + that.sendAction('back', hist.context, hist.dataKey); + }) + .appendTo(contextMenu); + }); + }, true); + } + }, + + addButtonsFromSearch: function (searchList) { + var buttonContainer = this.$().find('.buttonContainer'); + try { + buttonContainer.append(searchList.eventosearch('getButtonUp')); + buttonContainer.append(searchList.eventosearch('getButtonDown')); + } catch (ex) { + // only happens when button cannot be added + console.error('error setting up / down buttons: ' + ex); + } + }, + + registerShortcuts: function () { + var that = this; + keyboard.registerShortcut('Ctrl+T', null, function () { + that.get('quickTabChoice').click(); + }); + keyboard.registerShortcut('Ctrl+Right', null, function () { + that.get('tabContainer').find('a.active').next().click(); + }); + keyboard.registerShortcut('Ctrl+Left', null, function () { + that.get('tabContainer').find('a.active').prev().click(); + }); + }, + + selectDefaultTab: function () { + // select first or last selected tab if nothing selected + var tabContainer = this.get('tabContainer'); + var active = tabContainer.find('a.active'); + if (active.length === 0) { + var id = storage.dialogSettings.lastTabId(); + if (id) { + var tab = this.tabContainer.find('#' + id); + if (tab.length > 0) + tab.click(); + else + tabContainer.children().eq(0).click(); + } else + tabContainer.children().eq(0).click(); + storage.dialogSettings.lastTabId(''); + } else { + // click it anyway, because when refreshing or direct url call, it is not clicked.. + active.click(); + } + }, + + calculateDataTitleSize: function () { + var buttonContainerWidth = this.$().find('.buttonContainer').outerWidth(); + var dataTitle = this.get('dataTitle'); + var pos = dataTitle.position(); + var titleLeft = pos ? pos.left : 0; + var headerPadding = dataTitle.parent().outerWidth() - dataTitle.parent().width(); + dataTitle.css('width', 'calc(100% - ' + (buttonContainerWidth + titleLeft + headerPadding) + 'px)'); + } + }); +}); \ No newline at end of file diff --git a/test/apps/EmberApps/App/Components/eventoSearchComponent.js b/test/apps/EmberApps/App/Components/eventoSearchComponent.js new file mode 100644 index 00000000..8f89c96b --- /dev/null +++ b/test/apps/EmberApps/App/Components/eventoSearchComponent.js @@ -0,0 +1,72 @@ +define([ + 'jquery', + 'ember', + 'application', + 'eventoWidgets' +], function ($, ember, app) { + app.EventoSearchComponent = ember.Component.extend({ + + didInsertElement: function () { + var that = this; + var element = this.$(); + + var dataClassId = this.get('dataClassId'); + var designation = this.get('designation'); + var searchDefinition = this.get('searchDefinition'); + var showToolbar = this.get('showToolbar'); + if (showToolbar === undefined) + showToolbar = true; + var calculateHeight = this.get('calculateHeight'); + if (calculateHeight === undefined) + calculateHeight = true; + var isPrintMode = this.get('isPrintMode'); + var overlayTabindex = $('tr.dataRow').length + 100; + var data = this.get('data'); + var pkColumns = this.get('pkColumns'); + var fixedHeight = undefined; + if (this.get('fixHeightTo') !== undefined) + fixedHeight = $(this.get('fixHeightTo')).height(); + + if (fixedHeight) + calculateHeight = false; + + ember.run.scheduleOnce('afterRender', + function () { + element.eventosearch({ + dataClassId: dataClassId, + calculateHeight: calculateHeight, + designation: designation, + searchDefinition: searchDefinition, + isPrintMode: isPrintMode, + usePrintButton: false, + overlayTabindex: overlayTabindex, + showToolbar: showToolbar, + data: data, + pkColumns: pkColumns, + isOfflineMode: data !== undefined, + fixedHeight: fixedHeight, + rowChosen: function (id, dcId) { + that.sendAction('rowChosen', id, dcId); + }, + printModeCalled: function () { + that.sendAction('printModeCalled'); + } + }); + }); + }, + + anythingThatMattersChanged: ember.observer('dataClassId', 'designation', 'searchDefinition', 'data', function() { + this.willDestroyElement(); + this.didInsertElement(); + }), + + willDestroyElement: function () { + var element = this.$(); + + ember.run.scheduleOnce('afterRender', + function () { + element.eventosearch('destroy'); + }); + } + }); +}); \ No newline at end of file diff --git a/test/apps/EmberApps/App/Components/fileChooserComponent.js b/test/apps/EmberApps/App/Components/fileChooserComponent.js new file mode 100644 index 00000000..8294681c --- /dev/null +++ b/test/apps/EmberApps/App/Components/fileChooserComponent.js @@ -0,0 +1,114 @@ +define([ + 'ember', + 'icons', + 'actionStack', + 'guiHelpers', + 'translate', + 'templates/components/fileChooserComponent', + 'components/fileInputComponent' +], function (ember, icons, actionStack, guiHelpers, translate) { + ClxApp.FileChooserComponent = ember.Component.extend({ + tagName: 'span', + classNames: ['fileChooser'], + + actions: { + addFile: function () { + var that = this; + actionStack.registerWidgetState(function() { + that.set('showFileInput', true); + }, function () { + that.set('chosenFile', undefined); + that.set('showFileInput', false); + }); + }, + deleteFile: function () { + if (this.get('onDelete')) + this.sendAction('onDelete'); + this.set('showFileInput', false); + }, + cancelFile: function () { + actionStack.clear(1, true); + this.set('showFileInput', false); + }, + confirmFile: function () { + actionStack.clear(1, true); + var selectedFile = this.get('chosenFile'); + if (!selectedFile) + return; + if (this.get('onConfirm')) + this.sendAction('onConfirm', selectedFile, selectedFile.name); + this.set('showFileInput', false); + }, + chooseFile: function (files) { + if (files) + this.send('cancelFile'); + + if (this.get('onChoose')) + this.sendAction('onChoose', files[0]); + this.set('chosenFile', files[0]); + if (!this.get('showConfirmButton')) + this.send('confirmFile'); + }, + showModalFile: function() { + var that = this; + var dialog; + var img = new Image(); + img.src = that.get('fileUrl'); + img.onload = function() { + dialog.overlayDialog('fitDialog'); + }; + var deleteFileButton = guiHelpers.getTextButton(icons.deleteFile, translate.getString('deleteFoto')); + dialog = guiHelpers.openModalDialog(this.get('filename'), + function (body) { + var image = $(img); + body.append(image); + image.wrap('
'); + }, + function() {}, + this.get('disabled') ? undefined : deleteFileButton, + function() { + that.send('deleteFile'); + }, + guiHelpers.getTextButton(icons.close, translate.getString('close'))); + } + }, + + fileChosen: function() { + if (this.get('filename')) + return true; + return false; + }.property('filename'), + + fileAccept: function() { + var ext = this.getExtension(); + return ext ? '.' + ext : undefined; + }.property('filename', 'extension'), + + fileIcon: function() { + var ext = this.getExtension(); + if (!ext) + return ''; + + switch (ext.toUpperCase()) { + case 'PDF': + return icons.pdf; + case 'JPG': + this.set('showModal', true); + return icons.image; + default: + return ''; + } + }.property(), + + getExtension: function() { + var filename = this.get('filename'); + if (filename && filename.indexOf('.') > 0) {//must have at least one dot + var extArr = filename.split('.'); + if (extArr) + return extArr.pop(); + } + var ext = this.get('extension'); + return ext; + } + }); +}); \ No newline at end of file diff --git a/test/apps/EmberApps/App/Components/fileInputComponent.js b/test/apps/EmberApps/App/Components/fileInputComponent.js new file mode 100644 index 00000000..f34e7b7b --- /dev/null +++ b/test/apps/EmberApps/App/Components/fileInputComponent.js @@ -0,0 +1,17 @@ +define([ + 'ember' +], function (ember) { + ClxApp.FileInputComponent = ember.TextField.extend({ + type: 'file', + attributeBindings: ['accept'], + + didInsertElement: function() { + if (this.get('autofocus')) + this.$().focus(); + }, + + change: function (e) { + this.sendAction('action', e.target.files); + } + }); +}); \ No newline at end of file diff --git a/test/apps/EmberApps/App/Components/fixedHeaderTableComponent.js b/test/apps/EmberApps/App/Components/fixedHeaderTableComponent.js new file mode 100644 index 00000000..71f1802b --- /dev/null +++ b/test/apps/EmberApps/App/Components/fixedHeaderTableComponent.js @@ -0,0 +1,334 @@ +define([ + 'jquery', + 'ember', + 'application', + 'guiHelpers', + 'keyboard', + 'arrayHelpers' +], function ($, ember, app, guiHelpers, keyboard, arrayHelpers) { + app.FixedHeaderTableComponent = ember.Component.extend({ + tagName: 'table', + + didInsertElement: function() { + if (this.get('calculateHeight') === undefined) + this.set('calculateHeight', false); + if (this.get('sortedColumns') === undefined) + this.set('sortedColumns', []); + if (this.get('sort') === undefined) + this.set('sort', true); + + this.set('sortDirections', []); + this.set('actualCellWidths', []); + + this.initTable(); + this.createTableBody(); + + // resize header according to body after render (if the content has an influence on the td with) + this.adaptHeaderSizesToBody(); + }, + + //rowChosen: undefined + + + resize: function(deltaX, deltaY) { + if (deltaX !== 0) { + this.resizeTableEvenly(deltaX); + this.calculateActualWidths(); + this.setWidthToBodyCells(this.$()); + } + var bodyContainer = this.get('bodyContainer'); + bodyContainer.height(bodyContainer.height() + deltaY); + }, + + initTable: function() { + var that = this; + if (this.get('calculateHeight')) { + $(window).resize(function() { + that.calculateBodyHeightAndSetSize(); + that.calculateActualWidths(); + that.setWidthToBodyCells(that.$()); + }); + } + }, + + adaptHeaderSizesToBody: function() { + var table = this.$(); + var headerTable = this.get('headerTable'); + var firstRowCells = table.find('tr:first-child td'); + var headerCells = headerTable.find('th'); + $.each(headerCells, + function(index, cell) { + var bodyCell = firstRowCells.eq(index); + $(cell).width(bodyCell.width()); + }); + }, + + resizeHeaderCellEvenly: function(element, size, originalSize) { + var el = $(element); + var dataWidth = el.data('width'); + if (dataWidth === undefined) + dataWidth = originalSize.width; + + var delta = dataWidth - size.width; + var left = delta > 0; + var neighbours = left ? el.prev('th') : el.next('th'); + var count = neighbours.length; + + if (count > 0) { + var amount = Math.abs(delta); + var evenAmount = amount / (count + 1); + neighbours.each(function() { + var neighbour = $(this); + if (neighbour.data('resizable') === true) + neighbour.width(neighbour.width() - evenAmount); + }); + } + dataWidth = size.width; + el.data('width', dataWidth); + }, + + resizeTableEvenly: function(deltaX) { + // resize all but the last one + var headerCells = this.$().find('th'); + var count = headerCells.length - 1; + var amount = deltaX / count; + $.each(headerCells, + function() { + var cell = $(this); + if (cell.data('resizable') === true) + cell.width(cell.width() - amount); + }); + }, + + createBodyContainer: function() { + var bodyCont = guiHelpers.getDiv(guiHelpers.classes.table.bodyContainer); + if (this.get('noFixedHeader')) + bodyCont.addClass('noFixedHeader'); + return bodyCont; + }, + + calculateBodyHeightAndSetSize: function() { + var height = undefined; + var bodyContainer = this.get('bodyContainer'); + if (this.get('calculateHeight')) { + height = $(window).height() - bodyContainer.offset().top - guiHelpers.defaultWindowPadding; + // if there are follower elements, don't use default padding and try to substract their heights + var includeElementsAfterParentForCalculation = this.get('includeElementsAfterParentForCalculation'); + if (includeElementsAfterParentForCalculation) { + height += guiHelpers.defaultWindowPadding; + var followerHeights = 0; + bodyContainer.parent().nextAll(includeElementsAfterParentForCalculation).each(function() { + followerHeights += $(this).outerHeight(); + }); + height -= followerHeights; + } + } else if (this.get('fixedHeight') !== undefined) + height = this.options.fixedHeight - this.get('headerHeight'); + + if (height !== undefined) + bodyContainer.css('height', height + 'px'); + }, + + createTableBody: function() { + var bodyContainer = this.get('bodyContainer'); + var table = this.$(); + // if not yet, create body container now (e.g. when offline mode) + if (!bodyContainer) + bodyContainer = this.createBodyContainer(); + + // because rem can cause that the hidden part will hang out 1px because of rounding (this will give a double border, which is ugly). + // 0.3 will fix that problem and in the worst case just decrease the first "padding" of the cell + // by 1px + var headerHeight = table.find('th').first().outerHeight() + 0.3; // add a small amount + + // create a clone table and add it as the header. NOTE: Unlike most other tools for fix header tables + // we can't use the copy to display in the body, because there can be different controls attached to events + var headerTable = table.clone(true, true) + .insertBefore(table); + + // the original table will be in the body. with negative margin, we can hide the headers of the original table + table.css('margin-top', '-' + headerHeight + 'px') + // original table must be inside bodyContainer, without removing it from dom (events, ember) + .wrap(bodyContainer); + + // it might be, that the bodyContainer has visible overflow. therefor make the headers of the original table invisible + headerTable.find('th').css('color', 'transparent'); + + // we need to select the container again because jquery wrap() makes a copy of the element + bodyContainer = table.closest('.' + guiHelpers.classes.table.bodyContainer); + + // the clonetable does not need any body rows, because it only serves as table header. + headerTable.find('tbody').remove(); + + this.set('bodyContainer', bodyContainer); + this.set('headerHeight', headerHeight); + this.set('headerTable', headerTable); + + this.calculateBodyHeightAndSetSize(); + + // hide sorting triangles they can ruin the th height.. + table.find('.' + guiHelpers.classes.table.sortingDirection).remove(); + + if (this.get('sort')) + this.createSortControls(); + this.createResizeControls(); + + //recalculate cell width -> because of scrollbar, percent are not correct + this.calculateActualWidths(); + + this.setWidthToBodyCells(table); + }, + + createResizeControls: function() { + var that = this; + this.get('headerTable').find('th').each(function(index, th) { + var headerCell = $(th); + // don't add resize for icon column and last column + if (headerCell.hasClass(guiHelpers.classes.table.iconColumn)) + return true; + if (headerCell.next('th').length === 0) + return true; + + headerCell.resizable({ + handles: 'e', + resize: function(event, ui) { + if (!keyboard.ctrl) + that.resizeHeaderCellEvenly(ui.element, ui.size, ui.originalSize); + that.calculateActualWidths(); + that.setWidthToBodyCells(that.$()); + } + }); + }); + }, + + createSortControls: function() { + var that = this; + this.headerTable.addClass('sorting-header'); + this.headerTable.find('th[is-sortable]').each(function(index, th) { + var headerCell = $(th); + + // check if sorted columns have been defined + var sortedColumns = that.get('sortedColumns'); + if (sortedColumns.length > 0) { + if ($.inArray(index, sortedColumns) === -1) + return true; + } + + var headerText = guiHelpers.getDiv(guiHelpers.classes.table.headerText) + .addClass('sortAsc') + // actual header text div + .append(guiHelpers.getDiv(guiHelpers.classes.table.headerLabel) + .text(headerCell.text()) + .attr('title', headerCell.text())); + + headerCell.text(''); + headerCell.append(headerText); + + + headerText.click(function () { + var $triggerer = $(this).parent(); + var i = $triggerer.prevAll().length; + // if there is an icon column reduce by 1 + var sortDirections = that.get('sortDirections'); + var currentSortedIndex = that.get('currentSortedIndex'); + var currentSortedAsc = that.get('currentSortedAsc'); + var asc = sortDirections[i]; + + that.sortTable(i, asc, $triggerer.data('sort-property')); + sortDirections[i] = !asc; + + // set preview sorting direction again for those previously sorted and remove sorted class + if (i !== currentSortedIndex) { + that.get('headerTable').find('.' + guiHelpers.classes.table.sortingDirection) + .removeClass(guiHelpers.classes.table.allSortClasses) + .addClass(currentSortedAsc + ? guiHelpers.classes.table.sortAsc + : guiHelpers.classes.table.sortDesc); + sortDirections[currentSortedIndex] = currentSortedAsc; + + that.set('currentSortedIndex', i); + } + that.set('currentSortedAsc', asc); + + // remove classes and set again for current cell + $(this).children('.' + guiHelpers.classes.table.sortingDirection) + .removeClass(guiHelpers.classes.table.allSortClasses) + .addClass(asc + ? guiHelpers.classes.table.sortedAsc + : guiHelpers.classes.table + .sortedDesc); + + $(this).parent().children().mouseleave(function() { + $(this).children('.' + guiHelpers.classes.table.sortingDirection) + .addClass(asc + ? guiHelpers.classes.table.sortDesc + : guiHelpers.classes.table + .sortAsc); + $(this).unbind('mouseleave'); + }); + }) + .css('cursor', 'pointer'); + + guiHelpers.getDiv(guiHelpers.classes.table.sortingDirectionAsc) + .appendTo(headerText); + + // classify initial sorted column + $('th[initial-sort] .sortingDirection', that.headerTable).addClass(guiHelpers.classes.table.sortedAsc); + }); + + }, + + calculateActualWidths: function() { + var that = this; + this.get('headerTable').find('th').each(function(index, cell) { + that.get('actualCellWidths')[index] = $(cell).width(); + }); + }, + + setWidthToBodyCells: function(table) { + var that = this; + table.find('th').each(function(index, cell) { + // set the actual width in px for all cells + if (index < that.get('actualCellWidths').length - 1) { + var width = that.get('actualCellWidths')[index]; + $(cell).css('max-width', width + 'px'); + $(cell).css('width', width + 'px'); + // except for the last one + } else { + $(cell).css('width', 'auto'); + } + }); + }, + + getColumnContent: function($tdElement) { + var container = $('input, select, textarea', $tdElement); + var value = container.val(); + + return value !== undefined ? value : $tdElement.text(); + }, + + sortTable: function (columnIndex, asc, sortByPropety) { + + // sort underlying data source instead + if (this.get('useCustomSort') === true) { + // trigger sort with components specific sort implementation + this.sendAction('onSort', columnIndex, asc, sortByPropety); + } else { + // sort the table row elements directly + var $table = this.$(); + var tableRows = $table.find('tr:gt(0)').toArray(); + var sortedTableRows = arrayHelpers.sortByComputedProperty(tableRows, asc, this.getColumnContent); + + + // improve reflow and redraw performance + $table.css('visibility', 'hidden'); + + for (var i = 0; i < sortedTableRows.length; i++) { + $table.append(sortedTableRows[i]); + } + + $table.css('visibility', 'visible'); + } + } + }); +}); diff --git a/test/apps/EmberApps/App/Components/flotGraphicComponent.js b/test/apps/EmberApps/App/Components/flotGraphicComponent.js new file mode 100644 index 00000000..44ef69a0 --- /dev/null +++ b/test/apps/EmberApps/App/Components/flotGraphicComponent.js @@ -0,0 +1,49 @@ +define([ + 'jquery', + 'ember', + 'flotHelpers', + 'componentCaller', + 'guiHelpers' +], function ($, ember, flotHelpers, componentCaller, guiHelpers) { + ClxApp.FlotGraphicComponent = ember.Component.extend({ + classNames: ['flotThumb'], + + didInsertElement: function () { + var element = this.$(); + var that = this; + ember.run.scheduleOnce('afterRender', + function() { + that.createPlot(element, that.get('legendSelector')); + + element + .css('cursor', 'pointer') + .click(function() { + var overlayContainer; + if (!that.get('clickable')) return; + componentCaller.openOverlayDialog(that, + true, + function (dialogBody) { + dialogBody.css('height', '100%'); + overlayContainer = guiHelpers.getDiv(guiHelpers.classes.flot.flotFull) + .appendTo(dialogBody); + }, + function(header) { + header.append(guiHelpers.getDiv(guiHelpers.classes.flot.flotLegend) + .attr('id', 'flot-legend-overlay')); + + that.createPlot(overlayContainer, '#flot-legend-overlay'); + }); + }); + }); + }, + + createPlot: function(container, legendSelector) { + flotHelpers.createPlot(container, + this.get('series'), + this.get('ticks'), + $(legendSelector), + this.get('xAxisLabel'), + this.get('yAxisLabel')); + } + }); +}); \ No newline at end of file diff --git a/test/apps/EmberApps/App/Components/formControlComponent.js b/test/apps/EmberApps/App/Components/formControlComponent.js new file mode 100644 index 00000000..0bfcdf77 --- /dev/null +++ b/test/apps/EmberApps/App/Components/formControlComponent.js @@ -0,0 +1,38 @@ +define([ + 'jquery', + 'ember', + 'templates/components/formControlComponent', + 'components/tooltipButtonComponent' +], function ($, ember) { + ClxApp.FormControlComponent = ember.Component.extend({ + classNames: ['formControl'], + + init: function () { + this._super(); + this.set('myOptionValuePath', this.get('optionValuePath') ? 'content.' + this.get('optionValuePath') : 'content'); + this.set('myOptionLabelPath', this.get('optionLabelPath') ? 'content.' + this.get('optionLabelPath') : 'content'); + }, + + isRequired: function() { + return $.inArray(this.get('fieldname'), this.get('requiredFields')) > -1; + }.property('requiredFields.@each'), + + isSelect: function () { + return this.get('type') === 'select'; + }.property(), + + isDate: function () { + return this.get('type') === 'date'; + }.property(), + + isValid: ember.computed(function (key, value) { + var that = this; + setTimeout(function() { + if (value === true) + $("[name='" + that.get('fieldname') + "']").removeClass('validationError showError'); + else if (value === false) + $("[name='" + that.get('fieldname') + "']").addClass('validationError showError'); + }, 10); + }) + }); +}); \ No newline at end of file diff --git a/test/apps/EmberApps/App/Components/fotoChooserComponent.js b/test/apps/EmberApps/App/Components/fotoChooserComponent.js new file mode 100644 index 00000000..d3cfe5bb --- /dev/null +++ b/test/apps/EmberApps/App/Components/fotoChooserComponent.js @@ -0,0 +1,414 @@ +define([ + 'jquery', + 'ember', + 'api', + 'icons', + 'actionStack', + 'guiHelpers', + 'arrayHelpers', + 'constants', + 'translate', + 'keyboard', + 'components/fileChooserComponent' +], function ($, ember, api, icons, actionStack, guiHelpers, arrayHelpers, constants, translate, keyboard) { + ClxApp.FotoChooserComponent = ClxApp.FileChooserComponent.extend({ + tagName: 'span', + classNames: ['fotoChooser'], + layoutName: 'components/file-chooser', + + actions: { + chooseFile: function (files) { + var that = this; + this.set('filename', 'Foto.jpg'); + + api.ember.getConfigurations('foto') + .then(function (configs) { + var widths = $.grep(configs, + function(conf) { + return conf.Key === constants.idConfigurations.fotoWidth; + }); + var heights = $.grep(configs, + function(conf) { + return conf.Key === constants.idConfigurations.fotoHeight; + }); + that.initializeFotoEditor(files[0], { + width: widths[0].Value, + height: heights[0].Value + }); + }); + } + }, + + initializeFotoEditor: function(file, fotoSize) { + var that = this; + + // init rectangle + var rectangle = { + x: 0, + y: 0, + width: fotoSize.width, + height: fotoSize.height + }; + this.set('rectangle', rectangle); + + // add fotoFilterRectangle control to read colors and border thickness from css + var fotoFilterRectangle = guiHelpers.getDiv('fotoFilterRectangle') + .appendTo('body'); + this.set('filterColor', fotoFilterRectangle.css('background-color')); + this.set('borderThickness', parseInt(fotoFilterRectangle.css('border-width').replace('px', ''))); + this.set('borderColor', fotoFilterRectangle.css('border-color')); + this.set('errorColor', fotoFilterRectangle.css('color')); + this.set('framerate', 60); + this.set('maxZoom', 1.5); + this.set('minZoom', 0.1); + + var canvasMaxSize = 800; + + // create file + var reader = new FileReader(); + var img = new Image(); + + img.onload = function() { + // scale image to container if necessary + var zoomFactor = 1; + if (img.width > canvasMaxSize) + zoomFactor = canvasMaxSize / img.width; + else if (img.height > canvasMaxSize) + zoomFactor = canvasMaxSize / img.height; + + // round zoomFactor + zoomFactor = zoomFactor * 10; + zoomFactor = Math.round(zoomFactor); + zoomFactor = zoomFactor / 10; + + var canvasHeight = Math.max(img.height * zoomFactor, rectangle.height); + var canvasWidth = Math.max(img.width * zoomFactor, rectangle.width); + + that.set('canvasHeight', canvasHeight); + that.set('canvasWidth', canvasWidth); + that.set('zoomFactor', zoomFactor); + that.set('image', img); + + var buttonFinish = guiHelpers.getTextButton(icons.save, translate.getString('save')); + that.set('buttonFinish', buttonFinish); + + var dialog = guiHelpers.openModalDialog(translate.getString('addImage'), + function(body) { + that.fillFotoEditor(body, img); + }, + function() { + that.set('filename', undefined); + that.send('cancelFile'); + }, + guiHelpers.getTextButton(icons.close, translate.getString('cancel')), + function () { + that.set('filename', undefined); + that.send('cancelFile'); + }, + buttonFinish, + function() { + that.saveImage(); + }); + + that.set('dialog', dialog); + that.drawImage(); + that.drawFilter(); + } + reader.onloadend = function() { + img.src = reader.result; + } + reader.readAsDataURL(file); + }, + + fillFotoEditor: function(body, img) { + var that = this; + var canvasWidth = this.get('canvasWidth'); + var canvasHeight = this.get('canvasHeight'); + var framerate = this.get('framerate'); + + // create buttons + var buttonZoomIn = guiHelpers.getButton(icons.plus) + .mousedown(function() { + that.zoomImage(1); + }); + var buttonZoomOut = guiHelpers.getButton(icons.minus) + .mousedown(function() { + that.zoomImage(-1); + }); + + // get z-index of current overlay dialog + var baseZIndex = guiHelpers.currentZIndex; + // create canvas + var errorCanvas = $('