From 8f8a1530055ec344a2c7fb1c3c426d8678651748 Mon Sep 17 00:00:00 2001 From: Kai Stritzelberger Date: Wed, 15 Jan 2014 14:44:38 +0100 Subject: [PATCH 1/5] . --- resources/sass/_master.scss | 1 + resources/sass/themes/default/_alert.scss | 15 + resources/sass/themes/ios/_alert.scss | 6 + resources/sass/themproject_ios.scss | 1 + src/_ui.js | 1 + src/templates.js | 18 +- src/templates/default/alert.ejs | 7 + src/ui/themevars.js | 336 +++++++++---------- src/ui/views/alert.js | 143 ++++++++ test/test.html | 1 + test/ui/views/test.alert.js | 385 ++++++++++++++++++++++ 11 files changed, 737 insertions(+), 177 deletions(-) create mode 100644 resources/sass/themes/default/_alert.scss create mode 100644 resources/sass/themes/ios/_alert.scss create mode 100644 src/templates/default/alert.ejs create mode 100644 src/ui/views/alert.js create mode 100644 test/ui/views/test.alert.js diff --git a/resources/sass/_master.scss b/resources/sass/_master.scss index d6a8c95e8..ca8597431 100644 --- a/resources/sass/_master.scss +++ b/resources/sass/_master.scss @@ -32,4 +32,5 @@ @import "themes/default/movable"; @import "themes/default/toggleswitch"; @import "themes/default/menu"; +@import "themes/default/alert"; diff --git a/resources/sass/themes/default/_alert.scss b/resources/sass/themes/default/_alert.scss new file mode 100644 index 000000000..dee97954a --- /dev/null +++ b/resources/sass/themes/default/_alert.scss @@ -0,0 +1,15 @@ +.m-view.m-labelview.m-alertview-inner-message { + word-wrap: break-word; + padding: 15px; +} + +.buttons { + padding: 0 15px 0 15px; +} + +.m-alertview-inner { + position: relative; + width: 300px; + background: rgba(255, 255, 255, 0.9); + z-index: 1040; +} \ No newline at end of file diff --git a/resources/sass/themes/ios/_alert.scss b/resources/sass/themes/ios/_alert.scss new file mode 100644 index 000000000..5435f3b55 --- /dev/null +++ b/resources/sass/themes/ios/_alert.scss @@ -0,0 +1,6 @@ +.ios .m-alertview-inner { + position: relative; + width: 300px; + background: rgba(255, 255, 255, 0.9); + z-index: 1040; +} \ No newline at end of file diff --git a/resources/sass/themproject_ios.scss b/resources/sass/themproject_ios.scss index a7d798490..e3aaf8b69 100644 --- a/resources/sass/themproject_ios.scss +++ b/resources/sass/themproject_ios.scss @@ -3,6 +3,7 @@ .ios { @import "master"; + @import "themes/ios/alert"; @import "themes/ios/buttongroup"; @import "themes/ios/radiolist"; @import "themes/ios/checkboxlist"; diff --git a/src/_ui.js b/src/_ui.js index 426980996..aafa80677 100644 --- a/src/_ui.js +++ b/src/_ui.js @@ -30,6 +30,7 @@ // @include ./ui/views/checkboxlist.js // @include ./ui/views/modal.js // @include ./ui/views/loader.js +// @include ./ui/views/alert.js // @include ./ui/views/text.js // @include ./ui/views/debug.js // @include ./ui/views/movable.js diff --git a/src/templates.js b/src/templates.js index 7965355f3..159098d39 100644 --- a/src/templates.js +++ b/src/templates.js @@ -1,10 +1,10 @@ -// Copyright (c) 2014 M-Way Solutions GmbH -// http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt - -//////////////////////////////////////////////////////////////// -// DO NOT EDIT THIS FILE - it is generated by grunt -//////////////////////////////////////////////////////////////// - -/* jshint -W109 */ -M.Templates = {"default":{"accordion.ejs":"","accordionitem.ejs":"","button.ejs":"
<% if(icon) { %> \"> <% } %>
><%= value %>
","buttongroup.ejs":"
","checkboxlist.ejs":"
<%= label %>
","checkboxoption.ejs":"","debug.ejs":"
","dialog.ejs":"
","image.ejs":"\" alt=\"<%= alt %>\"/>","label.ejs":"
<%= value %>
","list.ejs":"","listitem.ejs":"
  • <%= value %>
    • ","listitemlinked.ejs":"
  • <%= value %>\">
    • ","loader.ejs":"
    ","menu.ejs":"
    <%= value %>
    ","modal.ejs":"
    ","model.ejs":"
      <%= value %>
    ","movable.ejs":"
    <%= value %>
    ","radiolist.ejs":"
    <%= label %>
    ","radiooption.ejs":"","searchfield.ejs":"
    <%= value %>
    ","select.ejs":"
    multiple<% } %>\"> multiple<% } %>><%= value %>
    ","slider.ejs":"","tabbarbuttongroup.ejs":"
    ","text.ejs":"
    <% if(label) { %>
    <%= label %>
    <% } %>
    <% if(icon) { %>
    fa-fw\"><% } %><%= value %>
    ","textarea.ejs":"
    <% if(label) { %><% } %>
    ","textfield.ejs":"
    <% if(label) { %><% } %>
    ","toast.ejs":"
    \"><%= text %>
    ","toggle.ejs":"
    ","toggleswitch.ejs":"
    \n
    <%= value %>
    \n\n <% if(label){%>\n
    <%= label %>
    \n <% }%>\n
    \n
    \n <% if(onLabel){%>\n
    <%= onLabel %>
    \n <% }%>\n\n <% if(onLabel){%>\n
    <%= offLabel %>
    \n <% }%>\n\n <% if(onLabel){%>\n
    \n <% }%>\n
    \n
    \n
    \n\n","toolbar.ejs":"
    <%= value %>
    ","view.ejs":"
    <%= value %>
    "}}; +// Copyright (c) 2014 M-Way Solutions GmbH +// http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt + +//////////////////////////////////////////////////////////////// +// DO NOT EDIT THIS FILE - it is generated by grunt +//////////////////////////////////////////////////////////////// + +/* jshint -W109 */ +M.Templates = {"default":{"accordion.ejs":"
      <%= value %>
    ","accordionitem.ejs":"
      <%= value %>
    ","alert.ejs":"
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    ","button.ejs":"
    <% if(icon) { %> \"> <% } %>
    ><%= value %>
    ","buttongroup.ejs":"
    ","checkboxlist.ejs":"
    <%= label %>
    ","checkboxoption.ejs":"","debug.ejs":"
    ","dialog.ejs":"
    ","image.ejs":"\" alt=\"<%= alt %>\"/>","label.ejs":"
    <%= value %>
    ","list.ejs":"
      ","listitem.ejs":"
    • <%= value %>
      • ","listitemlinked.ejs":"
    • <%= value %>\">
      • ","loader.ejs":"
      ","menu.ejs":"
      <%= value %>
      ","modal.ejs":"
      ","model.ejs":"
        <%= value %>
      ","movable.ejs":"
      <%= value %>
      ","radiolist.ejs":"
      <%= label %>
      ","radiooption.ejs":"","searchfield.ejs":"
      <%= value %>
      ","select.ejs":"
      multiple<% } %>\"> multiple<% } %>><%= value %>
      ","slider.ejs":"","tabbarbuttongroup.ejs":"
      ","text.ejs":"
      <% if(label) { %>
      <%= label %>
      <% } %>
      <% if(icon) { %>
      fa-fw\"><% } %><%= value %>
      ","textarea.ejs":"
      <% if(label) { %><% } %>
      ","textfield.ejs":"
      <% if(label) { %><% } %>
      ","toast.ejs":"
      \"><%= text %>
      ","toggle.ejs":"
      ","toggleswitch.ejs":"
      \n
      <%= value %>
      \n\n <% if(label){%>\n
      <%= label %>
      \n <% }%>\n
      \n
      \n <% if(onLabel){%>\n
      <%= onLabel %>
      \n <% }%>\n\n <% if(onLabel){%>\n
      <%= offLabel %>
      \n <% }%>\n\n <% if(onLabel){%>\n
      \n <% }%>\n
      \n
      \n
      \n\n","toolbar.ejs":"
      <%= value %>
      ","view.ejs":"
      <%= value %>
      "}}; /* jshint +W109 */ \ No newline at end of file diff --git a/src/templates/default/alert.ejs b/src/templates/default/alert.ejs new file mode 100644 index 000000000..3a57fa781 --- /dev/null +++ b/src/templates/default/alert.ejs @@ -0,0 +1,7 @@ +
      +
      +
      +
      +
      +
      +
      \ No newline at end of file diff --git a/src/ui/themevars.js b/src/ui/themevars.js index 2d559206d..8a1d75a13 100644 --- a/src/ui/themevars.js +++ b/src/ui/themevars.js @@ -1,169 +1,169 @@ -// Copyright (c) 2014 M-Way Solutions GmbH -// http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt - -//////////////////////////////////////////////////////////////// -// DO NOT EDIT THIS FILE - it is generated by grunt -//////////////////////////////////////////////////////////////// - -M.ThemeVars = { - _vars: { - "default": { - "blue": "#1092d3", - "lightblue": "#58b3e0", - "darkblue": "#0e7cb4", - "purple": "#6c64ff", - "lightpurple": "#9893ff", - "darkpurple": "#5c55d9", - "green": "#2dcca2", - "lightgreen": "#6cdbbe", - "darkgreen": "#26ae8a", - "red": "#ed253d", - "lightred": "#f26778", - "darkred": "#ca1f34", - "orange": "#f45b42", - "lightorange": "#f78d7b", - "darkorange": "#d04d38", - "yellow": "#eab13a", - "lightyellow": "#f0c975", - "darkyellow": "#d99731", - "grey": "#c3c3c3", - "lightgrey": "#d5d5d5", - "darkgrey": "#a6a6a6", - "black": "#000000", - "white": "#FFFFFF", - "darkwhite": "#F2F2F2", - "debug-1": "#02ccb9", - "debug-2": "#00cc09", - "debug-3": "#cc3500", - "debug-4": "#cc008d", - "debug-5": "#9f00cc", - "debug-6": "#4f00cc", - "debug-7": "#003fcc", - "debug-8": "#0073cc", - "grid-columns": "12", - "grid-gutter-width": "30px", - "lightenPercentage": "15%", - "lightenPercentageLight": "5%", - "m-button-icon-only-width": "50px", - "m-button-border-width": "1px", - "m-button-border-color": "#1092d3", - "m-button-text-color": "#1092d3", - "m-button-border-radius": "4px", - "m-button-border-style": "solid", - "m-button-padding-bottom": "10px", - "m-button-padding-top": "10px", - "m-button-padding-left-right": "10px", - "m-button-padding": "10px 10px 10px 10px", - "m-button-primary-border-color": "#6c64ff", - "m-button-primary-text-color": "#6c64ff", - "m-button-primary-background-color": "#FFFFFF", - "m-button-success-border-color": "#2dcca2", - "m-button-success-text-color": "#2dcca2", - "m-button-success-background-color": "#FFFFFF", - "m-button-error-border-color": "#ed253d", - "m-button-error-text-color": "#ed253d", - "m-button-error-background-color": "#FFFFFF", - "m-button-warning-border-color": "#f45b42", - "m-button-warning-text-color": "#f45b42", - "m-button-warning-background-color": "#FFFFFF", - "m-button-info-border-color": "#eab13a", - "m-button-info-text-color": "#eab13a", - "m-button-info-background-color": "#FFFFFF", - "m-button-fuzzy-border-color": "#c3c3c3", - "m-button-fuzzy-text-color": "#c3c3c3", - "m-button-fuzzy-background-color": "#FFFFFF", - "strong": "bold", - "normal": "normal", - "weak": "lighter", - "form-border-width": "1px", - "form-border-color": "#1092d3", - "form-border-style": "solid", - "form-element-border": "1px solid #1092d3", - "textfield-icon-padding": "30px", - "textfield-icon-x-position": "4px", - "textfield-icon-y-position": "14px", - "textfield-icon-font-size": "2.2rem", - "textfield-padding": "6px", - "m-primary-color": "#1092d3", - "m-primary-text-color": "#000000", - "m-primary-border-color": "#58b3e0", - "m-primary-active-color": "#0e7cb4", - "m-primary-active-text-color": "#FFFFFF", - "tablayout-menu-height": "50px", - "tablayout-menu-button-padding": "13px 0 0 0", - "tablayout-menu-scroll-button-width": "200px", - "switch-header-content-padding": "4px 0 0 0", - "header-top": "4px", - "m-header-icon-only-font-size": "2.4rem", - "m-primary-font-family": "\"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif", - "m-primary-font-weight": "300", - "m-primary-font-size": "1.6rem", - "m-primary-calc-font-size": "16px", - "m-primary-line-height": "2.2rem", - "m-primary-font-color": "#000000", - "m-primary-margin-top": "10px", - "m-primary-margin-bottom": "20px", - "modal-backdrop-background-color": "#000000", - "content-padding": "15px", - "m-primary-disabled-color": "#d5d5d5", - "m-primary-disabled-text-color": "#c3c3c3", - "selection-color": "#c3c3c3", - "selection-checked-color": "#1092d3", - "m-list-item-color": "#2dcca2", - "m-stencil-text-shadow": "rgba(255, 255, 255, 0.5) 0px 3px 3px", - "m-menu-view-width": "200px", - "m-menu-view-device-swipe-listener-width": "20px", - "m-menu-view-transition-width": "200px - 20px", - "m-menu-transition": "500ms" - }, - "android_dark": { - "m-primary-color": "#669900", - "m-primary-border-color": "#669900", - "m-primary-active-color": "#99CC00" - }, - "android_light": { - "m-primary-color": "#669900", - "m-primary-border-color": "#669900", - "m-primary-active-color": "#99CC00" - }, - "ios": { - "blue": "#59C8FA", - "lightblue": "#46b8da", - "darkblue": "#007AFF", - "green": "#4BD964", - "red": "#FF3B30", - "lightred": "#FF2D55", - "grey": "#8E8E93", - "m-primary-font-family": "-apple-system-font, \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif", - "lightenPercentage": "25%", - "textfield-icon-y-position": "13px", - "m-primary-active-color": "$lightgrey", - "m-primary-active-text-color": "#007AFF", - "tablayout-menu-height": "50px", - "tablayout-menu-scroll-button-width": "140px", - "selection-checked-color": "#59C8FA", - "m-button-padding-bottom": "10px", - "m-button-padding": "$m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-top $m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-left-right 10px $m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-left-right" - } -}, - get: function (name, theme) { - var theme = theme || M.Environment.device.os; - - var result = this._vars[theme] ? this._vars[theme][name] : false; - if (!result && theme != M.ThemeVars.CONST.DEFAULT) { - result = this._vars[M.ThemeVars.CONST.DEFAULT][name]; - } - if (!result) { - console.log('Can not find varibale "' + name + '".'); - } - return result; - } -} - -M.ThemeVars.CONST = { - IOS: 'ios', - ANDROID_DARK: 'android_dark', - ANDROID_LIGHT: 'android_light', - ANDROID: 'android_dark', - DEFAULT: 'default' +// Copyright (c) 2014 M-Way Solutions GmbH +// http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt + +//////////////////////////////////////////////////////////////// +// DO NOT EDIT THIS FILE - it is generated by grunt +//////////////////////////////////////////////////////////////// + +M.ThemeVars = { + _vars: { + "default": { + "blue": "#1092d3", + "lightblue": "#58b3e0", + "darkblue": "#0e7cb4", + "purple": "#6c64ff", + "lightpurple": "#9893ff", + "darkpurple": "#5c55d9", + "green": "#2dcca2", + "lightgreen": "#6cdbbe", + "darkgreen": "#26ae8a", + "red": "#ed253d", + "lightred": "#f26778", + "darkred": "#ca1f34", + "orange": "#f45b42", + "lightorange": "#f78d7b", + "darkorange": "#d04d38", + "yellow": "#eab13a", + "lightyellow": "#f0c975", + "darkyellow": "#d99731", + "grey": "#c3c3c3", + "lightgrey": "#d5d5d5", + "darkgrey": "#a6a6a6", + "black": "#000000", + "white": "#FFFFFF", + "darkwhite": "#F2F2F2", + "debug-1": "#02ccb9", + "debug-2": "#00cc09", + "debug-3": "#cc3500", + "debug-4": "#cc008d", + "debug-5": "#9f00cc", + "debug-6": "#4f00cc", + "debug-7": "#003fcc", + "debug-8": "#0073cc", + "grid-columns": "12", + "grid-gutter-width": "30px", + "lightenPercentage": "15%", + "lightenPercentageLight": "5%", + "m-button-icon-only-width": "50px", + "m-button-border-width": "1px", + "m-button-border-color": "#1092d3", + "m-button-text-color": "#1092d3", + "m-button-border-radius": "4px", + "m-button-border-style": "solid", + "m-button-padding-bottom": "10px", + "m-button-padding-top": "10px", + "m-button-padding-left-right": "10px", + "m-button-padding": "10px 10px 10px 10px", + "m-button-primary-border-color": "#6c64ff", + "m-button-primary-text-color": "#6c64ff", + "m-button-primary-background-color": "#FFFFFF", + "m-button-success-border-color": "#2dcca2", + "m-button-success-text-color": "#2dcca2", + "m-button-success-background-color": "#FFFFFF", + "m-button-error-border-color": "#ed253d", + "m-button-error-text-color": "#ed253d", + "m-button-error-background-color": "#FFFFFF", + "m-button-warning-border-color": "#f45b42", + "m-button-warning-text-color": "#f45b42", + "m-button-warning-background-color": "#FFFFFF", + "m-button-info-border-color": "#eab13a", + "m-button-info-text-color": "#eab13a", + "m-button-info-background-color": "#FFFFFF", + "m-button-fuzzy-border-color": "#c3c3c3", + "m-button-fuzzy-text-color": "#c3c3c3", + "m-button-fuzzy-background-color": "#FFFFFF", + "strong": "bold", + "normal": "normal", + "weak": "lighter", + "form-border-width": "1px", + "form-border-color": "#1092d3", + "form-border-style": "solid", + "form-element-border": "1px solid #1092d3", + "textfield-icon-padding": "30px", + "textfield-icon-x-position": "4px", + "textfield-icon-y-position": "14px", + "textfield-icon-font-size": "2.2rem", + "textfield-padding": "6px", + "m-primary-color": "#1092d3", + "m-primary-text-color": "#000000", + "m-primary-border-color": "#58b3e0", + "m-primary-active-color": "#0e7cb4", + "m-primary-active-text-color": "#FFFFFF", + "tablayout-menu-height": "50px", + "tablayout-menu-button-padding": "13px 0 0 0", + "tablayout-menu-scroll-button-width": "200px", + "switch-header-content-padding": "4px 0 0 0", + "header-top": "4px", + "m-header-icon-only-font-size": "2.4rem", + "m-primary-font-family": "\"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif", + "m-primary-font-weight": "300", + "m-primary-font-size": "1.6rem", + "m-primary-calc-font-size": "16px", + "m-primary-line-height": "2.2rem", + "m-primary-font-color": "#000000", + "m-primary-margin-top": "10px", + "m-primary-margin-bottom": "20px", + "modal-backdrop-background-color": "#000000", + "content-padding": "15px", + "m-primary-disabled-color": "#d5d5d5", + "m-primary-disabled-text-color": "#c3c3c3", + "selection-color": "#c3c3c3", + "selection-checked-color": "#1092d3", + "m-list-item-color": "#2dcca2", + "m-stencil-text-shadow": "rgba(255, 255, 255, 0.5) 0px 3px 3px", + "m-menu-view-width": "200px", + "m-menu-view-device-swipe-listener-width": "20px", + "m-menu-view-transition-width": "200px - 20px", + "m-menu-transition": "500ms" + }, + "android_dark": { + "m-primary-color": "#669900", + "m-primary-border-color": "#669900", + "m-primary-active-color": "#99CC00" + }, + "android_light": { + "m-primary-color": "#669900", + "m-primary-border-color": "#669900", + "m-primary-active-color": "#99CC00" + }, + "ios": { + "blue": "#59C8FA", + "lightblue": "#46b8da", + "darkblue": "#007AFF", + "green": "#4BD964", + "red": "#FF3B30", + "lightred": "#FF2D55", + "grey": "#8E8E93", + "m-primary-font-family": "-apple-system-font, \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif", + "lightenPercentage": "25%", + "textfield-icon-y-position": "13px", + "m-primary-active-color": "$lightgrey", + "m-primary-active-text-color": "#007AFF", + "tablayout-menu-height": "50px", + "tablayout-menu-scroll-button-width": "140px", + "selection-checked-color": "#59C8FA", + "m-button-padding-bottom": "10px", + "m-button-padding": "$m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-top $m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-left-right 10px $m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-left-right" + } +}, + get: function (name, theme) { + var theme = theme || M.Environment.device.os; + + var result = this._vars[theme] ? this._vars[theme][name] : false; + if (!result && theme != M.ThemeVars.CONST.DEFAULT) { + result = this._vars[M.ThemeVars.CONST.DEFAULT][name]; + } + if (!result) { + console.log('Can not find varibale "' + name + '".'); + } + return result; + } +} + +M.ThemeVars.CONST = { + IOS: 'ios', + ANDROID_DARK: 'android_dark', + ANDROID_LIGHT: 'android_light', + ANDROID: 'android_dark', + DEFAULT: 'default' } \ No newline at end of file diff --git a/src/ui/views/alert.js b/src/ui/views/alert.js new file mode 100644 index 000000000..c08eb73d2 --- /dev/null +++ b/src/ui/views/alert.js @@ -0,0 +1,143 @@ +// Copyright (c) 2013 M-Way Solutions GmbH +// http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt + +/** + * + * The base implementation of a loader. Calling the show/toggle shows the loader. + * Calling multiple times the show function with a different text will update the text. + * Call hide/toggle for every show to hide the Loader. + * To force the hidding pass true to the hide call + * + * @module M.LoaderView + * @extends M.ModalView + * @type {*|Object|void} + * + * @example + * var loader = M.LoaderView.extend().create().render(); + * //show loader + * loader.show('loading'); + * //hide loader + * loader.hide(); + * //show loader + * loader.toggle('loading second time'); + * //hide loader + * loader.toggle(); + * //show loader + * loader.show('loading'); + * //udpte text + * loader.show('still loading'); + * //force hidding + * loader.hide(true); + * + */ +M.AlertView = M.ModalView.extend({ + + /** + * The type of the View + * @private + * @type {String} + */ + _type: 'M.AlertView', + + /** + * Defines that the loader view can't be closed by clicking on the overlay. + * @type {String} + */ + hideOnOverlayClick: NO, + + useAsScope: YES, + + ok: function(){ + + }, + + _ok: function(){ + this.ok(); + this.hide(); + }, + + /** + * Gets called if the user taps the cancel button + */ + cancel: function(){ + + }, + + _cancel: function(){ + this.cancel(); + this.hide(); + }, + + /** + * Show the loader + * @param {String} text - The text for the Loader + * @returns {LoaderView} + */ + show: function( text ) { + text = text || ''; + M.ModalView.prototype.show.apply(this, arguments); + this.$el.find('.m-alertview-inner-message').html(text); + //this.$el.find('.alertDismissButton').on('click', this.hide()); + return this; + } +}, { + + content: M.View.extend({ + + /** + * The template of the view + * @private + * @type {function} + */ + _templateString: M.TemplateManager.get('alert.ejs'), + + /** + * This function needs to be implemented to render the view if there is no value given + * @returns {Boolean|Function|YES} + * @private + */ + _attachToDom: function() { + return YES; + } + },{ + buttons: M.View.extend({ + grid: 'row' + },{ + ok: M.ButtonView.extend({ + grid: 'col-xs-6', + value:'Ok', + events: { + tap: '_ok' + } + + }), + cancel: M.ButtonView.extend({ + grid: 'col-xs-6', + value: 'Cancel', + events: { + tap: '_cancel' + } + }) + }) + }) +}); + + +/** + * + * @module M.Loader + * @static + * Static implementation of the LoaderView + * + * @type {*|Prompt|String|this} + * @example + * M.ButtonView.extend({ + grid: 'col-xs-12', + value: 'Toggle LoaderView', + events: { + tap: function() { + M.Loader.toggle(); + } + } + */ +M.Alert = M.AlertView.create().render(); \ No newline at end of file diff --git a/test/test.html b/test/test.html index 65229ca70..940d47197 100644 --- a/test/test.html +++ b/test/test.html @@ -70,6 +70,7 @@ + diff --git a/test/ui/views/test.alert.js b/test/ui/views/test.alert.js new file mode 100644 index 000000000..1ae5aed85 --- /dev/null +++ b/test/ui/views/test.alert.js @@ -0,0 +1,385 @@ +describe('M.AlertView', function () { + + it('general', function () { + // Basic + assert.isDefined(M.AlertView); + assert.isFunction(M.AlertView); + assert.isDefined(M.Alert); + assert.isTrue(M.View.prototype.isPrototypeOf(M.AlertView.create())); + assert.isTrue(M.ModalView.prototype.isPrototypeOf(M.AlertView.create())); + assert.isTrue(M.View.prototype.isPrototypeOf(M.Alert)); + assert.isTrue(M.AlertView.prototype.isPrototypeOf(M.Alert)); + assert.isFunction(M.Alert.show); + assert.isFunction(M.Alert.hide); + assert.equal(M.Alert._shownCounter, 0); + assert.equal(M.AlertView.create()._shownCounter, 0); + }); + + it('show', function(){ + var alert = M.AlertView.create().render(); + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), ''); + alert.show(); + assert.equal(alert._shownCounter, 2); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), ''); + alert.hide(); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), ''); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + alert = null; + }); + + it('show with the static M.Alert', function(){ + var alert = M.Alert; + + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), ''); + alert.show(); + assert.equal(alert._shownCounter, 2); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), ''); + alert.hide(); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), ''); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + alert = null; + }); + + it('show Alert with text', function(){ + var alert = M.AlertView.create().render(); + var TEXT1 = 'abc'; + var TEXT2 = 'def'; + var TEXT3 = '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'; + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT1); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert.show(TEXT2); + assert.equal(alert._shownCounter, 2); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT2); + alert.show(TEXT3); + assert.equal(alert._shownCounter, 3); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); + alert.hide(); + assert.equal(alert._shownCounter, 2); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); + alert.hide(); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + alert = null; + TEXT1 = null; + TEXT2 = null; + TEXT3 = null; + }); + + it('show with the static M.Loader and text', function(){ + var alert = M.Alert; + + var TEXT1 = 'abc'; + var TEXT2 = 'def'; + var TEXT3 = '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'; + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT1); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert.show(TEXT2); + assert.equal(alert._shownCounter, 2); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT2); + alert.show(TEXT3); + assert.equal(alert._shownCounter, 3); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); + alert.hide(); + assert.equal(alert._shownCounter, 2); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); + alert.hide(); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + alert = null; + TEXT1 = null; + TEXT2 = null; + }); + + it('toggle alert instance', function(){ + var alert = M.AlertView.create().render(); + + var TEXT1 = 'abc'; + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.toggle(TEXT1); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert.toggle(TEXT1); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.toggle(TEXT1); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert.toggle(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + alert = null; + TEXT1 = null; + }); + + it('toggle the static M.Alert', function(){ + var alert = M.Alert; + + var TEXT1 = 'abc'; + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.toggle(TEXT1); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert.toggle(TEXT1); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.toggle(TEXT1); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert.toggle(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + alert = null; + TEXT1 = null; + }); + + it('force the hidding', function(){ + var alert = M.Alert; + alert.show(); + alert.show(); + alert.show(); + alert.show(); + alert.show(); + alert.hide(true); + + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + alert.show(); + alert.show(); + alert.show(); + alert.show(); + alert.show(); + alert.show(); + alert.show(); + alert.show(); + alert.show(); + alert.hide(''); + + assert.equal(alert._shownCounter, 8); + assert.lengthOf($('.alertview'), 1); + alert.hide(false); + assert.equal(alert._shownCounter, 7); + assert.lengthOf($('.alertview'), 1); + alert.hide({}); + assert.equal(alert._shownCounter, 6); + assert.lengthOf($('.alertview'), 1); + alert.hide([]); + assert.equal(alert._shownCounter, 5); + assert.lengthOf($('.alertview'), 1); + alert.hide('force'); + assert.equal(alert._shownCounter, 4); + assert.lengthOf($('.alertview'), 1); + alert.hide('true'); + assert.equal(alert._shownCounter, 3); + assert.lengthOf($('.alertview'), 1); + alert.hide(1); + assert.equal(alert._shownCounter, 2); + assert.lengthOf($('.alertview'), 1); + alert.hide(YES); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert = null; + }); + +it.('mulitple hiding', function(){ + var alert = M.Alert; + alert.show(); + alert.show(); + assert.equal(alert._shownCounter, 2); + assert.lengthOf($('.alertview'), 1); + alert.hide(); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert = null; +}); + +it.('static show with text and without', function(){ + var alert = M.Alert; + + var TEXT1 = 'abc'; + //is the text inside of the loader + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT1); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert.hide(); + alert.show(); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), ''); + alert.hide(); + + alert = null; + TEXT1 = null; +}); + +it.('_cancel and _ok', function(){ + var alert = M.AlertView.create().render(); + + var TEXT1 = 'abc'; + var TEXT2 = 'DEF'; + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT1); + assert.equal($('.buttons .buttonview').length,2); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert._cancel(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT2); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.lengthOf($('.buttons'), 2); + assert.equal($('.m-alertview-inner-message').html(), TEXT2); + alert._ok(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + alert = null; + TEXT1 = null; + TEXT2 = null; +}); + +it.('static _cancel and _ok', function(){ + var alert = M.Alert; + + var TEXT1 = 'abc'; + var TEXT2 = 'DEF'; + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT1); + assert.equal($('.buttons .buttonview').length,2); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert._cancel(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT2); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT2); + alert._ok(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + alert = null; + TEXT1 = null; + TEXT2 = null; +}); + +}); From 3f576db06de30fbef8a8e8a58e11a72ce70995d4 Mon Sep 17 00:00:00 2001 From: Kai Stritzelberger Date: Wed, 15 Jan 2014 15:08:57 +0100 Subject: [PATCH 2/5] fix test.alert.js bug --- test/ui/views/test.alert.js | 238 ++++++++++++++++++------------------ 1 file changed, 118 insertions(+), 120 deletions(-) diff --git a/test/ui/views/test.alert.js b/test/ui/views/test.alert.js index 1ae5aed85..9e9e055b7 100644 --- a/test/ui/views/test.alert.js +++ b/test/ui/views/test.alert.js @@ -1,6 +1,6 @@ -describe('M.AlertView', function () { +describe('M.AlertView', function() { - it('general', function () { + it('general', function() { // Basic assert.isDefined(M.AlertView); assert.isFunction(M.AlertView); @@ -15,7 +15,7 @@ describe('M.AlertView', function () { assert.equal(M.AlertView.create()._shownCounter, 0); }); - it('show', function(){ + it('show', function() { var alert = M.AlertView.create().render(); assert.isDefined(alert); assert.equal(alert._shownCounter, 0); @@ -42,7 +42,7 @@ describe('M.AlertView', function () { alert = null; }); - it('show with the static M.Alert', function(){ + it('show with the static M.Alert', function() { var alert = M.Alert; assert.isDefined(alert); @@ -70,7 +70,7 @@ describe('M.AlertView', function () { alert = null; }); - it('show Alert with text', function(){ + it('show Alert with text', function() { var alert = M.AlertView.create().render(); var TEXT1 = 'abc'; var TEXT2 = 'def'; @@ -113,7 +113,7 @@ describe('M.AlertView', function () { TEXT3 = null; }); - it('show with the static M.Loader and text', function(){ + it('show with the static M.Loader and text', function() { var alert = M.Alert; var TEXT1 = 'abc'; @@ -156,7 +156,7 @@ describe('M.AlertView', function () { TEXT2 = null; }); - it('toggle alert instance', function(){ + it('toggle alert instance', function() { var alert = M.AlertView.create().render(); var TEXT1 = 'abc'; @@ -187,7 +187,7 @@ describe('M.AlertView', function () { TEXT1 = null; }); - it('toggle the static M.Alert', function(){ + it('toggle the static M.Alert', function() { var alert = M.Alert; var TEXT1 = 'abc'; @@ -218,7 +218,7 @@ describe('M.AlertView', function () { TEXT1 = null; }); - it('force the hidding', function(){ + it('force the hidding', function() { var alert = M.Alert; alert.show(); alert.show(); @@ -267,119 +267,117 @@ describe('M.AlertView', function () { alert = null; }); -it.('mulitple hiding', function(){ - var alert = M.Alert; - alert.show(); - alert.show(); - assert.equal(alert._shownCounter, 2); - assert.lengthOf($('.alertview'), 1); - alert.hide(); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert = null; -}); + it('mulitple hiding', function() { + var alert = M.Alert; + alert.show(); + alert.show(); + assert.equal(alert._shownCounter, 2); + assert.lengthOf($('.alertview'), 1); + alert.hide(); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.hide(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert = null; + }); -it.('static show with text and without', function(){ - var alert = M.Alert; - - var TEXT1 = 'abc'; - //is the text inside of the loader - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(TEXT1); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert.hide(); - alert.show(); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), ''); - alert.hide(); - - alert = null; - TEXT1 = null; -}); + it('static show with text and without', function() { + var alert = M.Alert; -it.('_cancel and _ok', function(){ - var alert = M.AlertView.create().render(); - - var TEXT1 = 'abc'; - var TEXT2 = 'DEF'; - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(TEXT1); - assert.equal($('.buttons .buttonview').length,2); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert._cancel(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(TEXT2); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.lengthOf($('.buttons'), 2); - assert.equal($('.m-alertview-inner-message').html(), TEXT2); - alert._ok(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - - alert = null; - TEXT1 = null; - TEXT2 = null; -}); + var TEXT1 = 'abc'; + //is the text inside of the loader + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT1); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert.hide(); + alert.show(); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), ''); + alert.hide(); -it.('static _cancel and _ok', function(){ - var alert = M.Alert; - - var TEXT1 = 'abc'; - var TEXT2 = 'DEF'; - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(TEXT1); - assert.equal($('.buttons .buttonview').length,2); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert._cancel(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(TEXT2); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT2); - alert._ok(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - - alert = null; - TEXT1 = null; - TEXT2 = null; -}); + alert = null; + TEXT1 = null; + }); + + it('_cancel and _ok', function() { + var alert = M.AlertView.create().render(); + + var TEXT1 = 'abc'; + var TEXT2 = 'DEF'; + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT1); + assert.equal($('.buttons .buttonview').length, 2); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert._cancel(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT2); + assert.equal($('.buttons .buttonview').length, 2); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT2); + alert._ok(); + + alert = null; + TEXT1 = null; + TEXT2 = null; + }); + + it('static _cancel and _ok', function() { + var alert = M.Alert; + + var TEXT1 = 'abc'; + var TEXT2 = 'DEF'; + assert.isDefined(alert); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT1); + assert.equal($('.buttons .buttonview').length, 2); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT1); + alert._cancel(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + alert.show(TEXT2); + assert.equal(alert._shownCounter, 1); + assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-inner-message'), 1); + assert.equal($('.m-alertview-inner-message').html(), TEXT2); + alert._ok(); + assert.equal(alert._shownCounter, 0); + assert.lengthOf($('.alertview'), 0); + + alert = null; + TEXT1 = null; + TEXT2 = null; + }); }); From 0225832c250299f0147ce12715fd0fae61109a2c Mon Sep 17 00:00:00 2001 From: Kai Stritzelberger Date: Wed, 15 Jan 2014 15:20:49 +0100 Subject: [PATCH 3/5] changed comments in alert.js --- src/ui/views/alert.js | 67 ++++++++++++++++++++++--------------------- 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/src/ui/views/alert.js b/src/ui/views/alert.js index c08eb73d2..1daca608e 100644 --- a/src/ui/views/alert.js +++ b/src/ui/views/alert.js @@ -3,31 +3,22 @@ /** * - * The base implementation of a loader. Calling the show/toggle shows the loader. + * The base implementation of a alert. You can show the alert view by calling the show function. + * For displaying text in the alert view you can pass the show function your String as an argument. * Calling multiple times the show function with a different text will update the text. - * Call hide/toggle for every show to hide the Loader. - * To force the hidding pass true to the hide call + * Call hide/toggle for every show to hide the alert view. + * To force the hiding pass true to the hide call * - * @module M.LoaderView + * @module M.AlertView * @extends M.ModalView * @type {*|Object|void} * * @example - * var loader = M.LoaderView.extend().create().render(); - * //show loader - * loader.show('loading'); + * var alert = M.AlertView.extend().create().render(); + * //show alert + * alert.show('Warning!'); * //hide loader - * loader.hide(); - * //show loader - * loader.toggle('loading second time'); - * //hide loader - * loader.toggle(); - * //show loader - * loader.show('loading'); - * //udpte text - * loader.show('still loading'); - * //force hidding - * loader.hide(true); + * alert.hide(); * */ M.AlertView = M.ModalView.extend({ @@ -40,13 +31,15 @@ M.AlertView = M.ModalView.extend({ _type: 'M.AlertView', /** - * Defines that the loader view can't be closed by clicking on the overlay. + * Defines that the alert view can't be closed by clicking on the overlay. * @type {String} */ hideOnOverlayClick: NO, useAsScope: YES, - + /** + * Gets called when user clicks on the ok button + */ ok: function(){ }, @@ -69,9 +62,9 @@ M.AlertView = M.ModalView.extend({ }, /** - * Show the loader - * @param {String} text - The text for the Loader - * @returns {LoaderView} + * Show the alert view + * @param {String} text - The text for the alert view + * @returns {AlertView} */ show: function( text ) { text = text || ''; @@ -125,19 +118,27 @@ M.AlertView = M.ModalView.extend({ /** * - * @module M.Loader + * @module M.Alert * @static - * Static implementation of the LoaderView + * Static implementation of the Alert view * * @type {*|Prompt|String|this} * @example - * M.ButtonView.extend({ - grid: 'col-xs-12', - value: 'Toggle LoaderView', - events: { - tap: function() { - M.Loader.toggle(); - } - } + * alertButton: M.ButtonView.extend({ + grid: 'col-xs-12 col-sm-6 col-md-4', + value: 'Show Alert', + events: { + tap: function() { + M.AlertView.extend( { + ok: function(){ + console.log('ok'); + }, + cancel: function(){ + console.log('cancel'); + } + }).create().render().show('Hallo ich bin ein alert'); + } + } + }) */ M.Alert = M.AlertView.create().render(); \ No newline at end of file From 43ea66de9ffda8a9825d3d46d060959dab3a61b8 Mon Sep 17 00:00:00 2001 From: Kai Stritzelberger Date: Fri, 17 Jan 2014 10:10:24 +0100 Subject: [PATCH 4/5] implement dialog view --- doc-template/additional/Demo-App.md | 605 ++++++++++++++++++++++ doc-template/additional/Generator.md | 186 +++++++ doc-template/additional/Sample-Apps.md | 21 + resources/sass/_master.scss | 1 + resources/sass/themes/default/dialog.scss | 23 + resources/sass/themes/ios/dialog.scss | 6 + resources/sass/themproject_ios.scss | 1 + src/_ui.js | 2 +- src/templates.js | 2 +- src/templates/default/alert.ejs | 1 - src/templates/default/dialog.ejs | 8 +- src/templates/default/loader.ejs | 16 +- src/ui/views/dialog.js | 173 ++++++- test/ui/views/test.dialog.js | 0 test/ui/views/test.template_manager.js | 1 - 15 files changed, 1035 insertions(+), 11 deletions(-) create mode 100644 doc-template/additional/Demo-App.md create mode 100644 doc-template/additional/Generator.md create mode 100644 doc-template/additional/Sample-Apps.md create mode 100644 resources/sass/themes/default/dialog.scss create mode 100644 resources/sass/themes/ios/dialog.scss create mode 100644 test/ui/views/test.dialog.js diff --git a/doc-template/additional/Demo-App.md b/doc-template/additional/Demo-App.md new file mode 100644 index 000000000..146d44872 --- /dev/null +++ b/doc-template/additional/Demo-App.md @@ -0,0 +1,605 @@ +# My first The-M-Project 2.0 App from scratch + +In this tutorial we first build a very basic application. + +- The first step is to create the app and switch the content on a button press/tap with a transition +- Then you learn how to use models and collections +- Connect them with Bikini + +# Step 1 - Basic Sample App + +## Setup + +1. Install the generator if you haven't already. [Looking for details?](https://github.com/mwaylabs/generator-m/blob/master/README.md) +2. Create a folder and name it after the application name and open it. + + ``` + mkdir demoapp && cd $_ + ``` + +3. Inside of the folder run the The-M-Project generator + + ``` + yo m + ``` + +4. The generator guides you through several configuration steps + + 1. Select a Template + - First you have to choose a basic template of your application. + - You find details to all the available templates [here](https://github.com/mwaylabs/The-M-Project/tree/absinthe#layouts-1). + 2. Work with or without Sass + - It is up to you if you want to use Sass inside of your project or not. + - If you want to use Sass we recommend Compass. [Details about Sass/Compass](#compass). + 3. Make sure you have a internet connection - all the dependencies getting installed. + +## Develop the application + +We want to develop a simple app with two pages and use different transitions to switch between both. + +[The sample app source code is on GitHub](https://github.com/mwaylabs/The-M-Project-Sample-Apps) (with a blank layout and without Sass). +Read about the [Application Lifecycle](https://github.com/mwaylabs/The-M-Project/tree/absinthe#application-lifecycle) + +1. Start the Testserver + + ``` + // Stop the server with ctrl+c + grunt server + + ``` + +2. Run the Application: [http://localhost:9000/](http://localhost:9000/) to see what we have so far - should be empty. + +3. open app/scripts/main.js + + - There is no Controller defined + - The Router points to no Controller + - The app is accessable through a global namespace + + ```javascript + // The app gets initialized with the configuration provided from the config.js + // and gets appended to the global (window) namespace named like the app + global.demoapp = M.Application.extend().create(global.demoapp.mconfig); + $(document).ready(function() { + + // If the DOM is ready, initialize the router + global.demoapp.start({ + routing: { + routes: { + //m:routes -- don't edit this + }, + //m:controllers -- don't edit this + } + }); + }); + + ``` + +4. Setup the both Controller + - The first page should contain a menu + - The Menu should be our entry point. The route to it is [http://localhost:9000/](http://localhost:9000/) + - The second page is a detail of a selected menu item + - Use detail as a route [http://localhost:9000/detail](http://localhost:9000/detail) + - This generates both files + - `scripts/controllers/menu.js` + - `scripts/controllers/detail.js` + - The generator adds a script tag for every view to the `index.html` + - The generator adds every controller to the router inside the `app/scripts/main.js` + + ``` + // The first argument is the name of the controller + yo m:controller menu '' + // The second argument is the route to the controller + yo m:controller detail detail + // Start the server again + grunt server + ``` + + - open [http://localhost:9000/](http://localhost:9000/) to call the `applicationStart` of the MenuController + - open [http://localhost:9000/#detail](http://localhost:9000/#detail) to call the `applicationStart` of the DetailController + +5. Add a [Layout](https://github.com/mwaylabs/The-M-Project/tree/absinthe#layouts-1) + - Both Controllers share a layout so add initialize it inside the `applicationStart` of the demoapp.MenuController + + ```javascript + ... + applicationStart: function(settings) { + // Create a layout and apply it to the application + var layout = M.SwitchLayout.extend().create(this); + demoapp.setLayout(layout); + } + ... + ``` +6. Extend one Controller from the other + - Since both Controller should share the same Layout they can share the same code. + - Change the `scripts/controllers/detail.js` + + ```javascript + ... + // Extend the MenuController + demoapp.Controllers.DetailController = demoapp.Controllers.MenuController.extend({ + + // Remove unused methods + }); + ... + ``` + +7. Create the basic Views + + ```javascript + // The first argument is the name of the view + yo m:view menu + yo m:view detail + ``` + - This generates the both files + - `scripts/views/menu.js` + - `scripts/views/detail.js` + - The generator adds a script tag for every view to the `index.html` + +8. Initialze the Views + - Every View is bound to a Controller + - Implement a `initViews` method for both controllers + - Create a `contentView` property for the controllers and assign the generated Views to it + - Application start + 1. Initialize the Layout + 2. Apply the Layout to the app + 3. Initialize the Views + 4. Render the views by applying them to the layout + - show + 1. Initialize the Views + 2. Change the from one content to another + + ```javascript + // scripts/controllers/detail.js + demoapp.Controllers.DetailController = demoapp.Controllers.MenuController.extend({ + + initViews: function(){ + // Initialzie the DetailView with the controller (this) as scope + this.contentView = demoapp.Views.DetailView.create(this); + } + }); + + ``` + + ```javascript + // scripts/controllers/menu.js + demoapp.Controllers.MenuController = M.Controller.extend({ + + // The Content of the page + contentView: null, + + // Called when the Application starts + applicationStart: function () { + // Create a layout and apply it to the application + var layout = M.SwitchLayout.extend().create(this); + // Set the Layout to the View + demoapp.setLayout(layout); + // Initialize the Views + this.initViews(); + // Apply the Views to the Layout (render) + this._applyViews(); + }, + + show: function () { + // Initialize the Views + this.initViews(); + // Apply the Views to the Layout (render) + this._applyViews(); + // Switch the Layout + demoapp.getLayout().startTransition(); + }, + + initViews: function(){ + // Create the MenuView with the controller (this) as scope + this.contentView = demoapp.Views.MenuView.create(this); + }, + + _applyViews: function() { + demoapp.getLayout().applyViews({ + content: this.contentView + }); + } + }); + + ``` + +9. Add content and interaction to the views + + ```javascript + // scripts/views/detail.js + demoapp.Views.DetailView = M.View.extend({ + // The properties of a view + + // The view should be in a grid + grid: 'col-xs-12', + // Every view has a value + value: 'Detail' + }, { + // The childViews + + // Add a button to navigate to the MenuView + button: M.ButtonView.extend({ + // The Text of the Button + value: 'Back to the Menu', + // The events of the button + events: { + // On tab call the scope method 'gotoMenuPage' (scope is the DetailController) + tap: 'gotoMenuView' + } + }) + }); + + ``` + + ```javascript + // scripts/views/menu.js + demoapp.Views.MenuView = M.View.extend({ + // The properties of a view + + // The view should be in a grid + grid: 'col-xs-12', + // Every view has a value + value: 'Menu' + }, { + // The childViews + + // Add a button to navigate to the MenuView + button: M.ButtonView.extend({ + // The Text of the Button + value: 'To the Detail View', + // The events of the button + events: { + // On tab call the scope method 'gotoMenuPage' (scope is the DetailController) + tap: 'gotoDetailView' + } + }) + }); + ``` + +10. Add Navigation methods to the Controller + + ```javascript + // scripts/controllers/detail.js + ... + // Navigation: on button tap + gotoMenuView: function(){ + // navigate to the menu view via a route + demoapp.navigate({ + route: '' + }); + } + ... + + ``` + + ```javascript + // scripts/controllers/menu.js + ... + // Navigation: on button tap + gotoDetailView: function(){ + // navigate to the detail view via a route + demoapp.navigate({ + route: '/detail' + }); + } + ... + + ``` + +11. Change Transitions + - To get an overview of all available transitions have a look at the `M.PageTransitions.CONST` + + ```javascript + demoapp.navigate({ + route: '/detail', + transition: M.PageTransitions.CONST.FALL + }); + + ``` + +12. You want more? Look at the sample apps to get an idea of how to use The-M-Project. The [Kitchensink](http://www.the-m-project.org/apps/absinthe/kitchensink/index.html) is a good starting point. + + +# Step 2 - Working with models and collections +Tipp: M.Model and M.Collection are extended from [Backbone.Model](http://backbonejs.org/#Model) and [Backbone.Collection](http://backbonejs.org/#Collection) + +1. Create a collection called contacts + + - this will create a folder `scripts/collections` and inside a file called `contacts.js` + + + ``` + yo m:collection contacts + ``` + + - UPDATE! There was a bug in the generator: https://github.com/mwaylabs/generator-m/issues/3 - all collections are append to the top of the index.html and not above this comment: + + - quickfix: #1: remove: `` from the first line of the index.html and add it like the this: + + ``` + + + + + ``` + - or: delete the collection, update your generator and run the task again. + +2. Create a model called contact + - this will create a folder `scripts/models` and inside a file called `contact.js` + + ``` + yo m:model contact + ``` + +3. Assign the `contact` model to the `contacts` collection. Open `scripts/collections`. Default the model is called the same as the collection in this case `ContactsModel` so just remove the `s`: + + ``` + demoapp.Collections.ContactsCollection = M.Collection.extend({ + //assign the contact model to this collection + model: demoapp.Models.ContactModel + }); + ``` + +5. Create the collection inside the Menucontroller. `scripts/controllers/menu.js` + 1. define a variable for it + + ``` + ... + // define contacts collection + contacts: null, + ... + + ``` + + 2. Initialze the collection inside `applicationStart` and `show` before the `initViews` call. + + ``` + ... + // Called when the Application starts + applicationStart: function () { + // Create a layout and apply it to the application + var layout = M.SwitchLayout.extend().create(this); + // Set the Layout to the View + demoapp.setLayout(layout); + // Initialze the Collection + this.initData(); + // Initialize the Views + this.initViews(); + // Apply the Views to the Layout (render) + this._applyViews(); + }, + + show: function () { + // Initialze the Collection + this.initData(); + // Initialize the Views + this.initViews(); + // Apply the Views to the Layout (render) + this._applyViews(); + // Switch the Layout + demoapp.getLayout().startTransition(); + }, + ... + ``` + + 3. Implement `initData` with demo data + + ``` + // initialze the data + initData: function(){ + // create the contacts collections if it doesn't exist + if(!this.contacts){ + // create the collection with demo data + this.contacts = demoapp.Collections.ContactsCollection.create(this.getContacts()); + } + }, + + // get the contacts + getContacts: function(){ + // create some demo data + return [{"name": 'foo', "lastname": "bar"}, {"name": 'max', "lastname": "mustermann"}]; + } + ``` + +4. Display the collection using a `M.ListView` in `scripts/views/menu.js` + +Tipp: Look at the Kitchensink for example code + + + - create a M.ListView + - apply a grid (from left to right with some padding) + - set the scopeKey - the collections name inside the controller + - add a `M.ListItemView` as a blue print for every entry + - extend the template from `M.ListItemView` to fit to the collection model. Every attribute of the model can be displayed with '<%= ATTRIBUTE_NAME %>' + + ``` + ... + // The contacts list + contactsList: M.ListView.extend({ + + // fit into the grid - whole page + grid: 'col-xs-12', + + // the collection inside the menu controller + scopeKey: 'contacts', + + // This property contains the listitem view + listItemView: M.ListItemView.extend({ + + // Extend the default template with this one. It gets injected into the <%= _value_ %> placeholder + extendTemplate: '<%= name %> <%= lastname %>' + }) + + + }) + ... + ``` +5. Test the application + +The application should display a basic list with the both entries. + +``` +grunt server +``` + +6. Add contacts through a submit form + 1. Create the input fields in `scripts/views/menu.js` + + ``` + ... + // an input field for the lastname + addLastName: M.TextfieldView.extend({ + // fit into the grid + grid: 'col-xs-12', + // label it as lastname with a placeholder ... + placeholder: 'Lastname', + // and a label + label: 'Lastname', + // add a nice icon from http://fontawesome.io/icons/ + icon: 'fa-users', + // bind the view to a controller model attribute + scopeKey: 'newContact.lastname' + }), + + // an input field for the firstname + addFirstName: M.TextfieldView.extend({ + // fit into the grid + grid: 'col-xs-12', + // label it as lastname with a placeholder ... + placeholder: 'Firstname', + // and a label + label: 'Firstname', + // add a nice icon from http://fontawesome.io/icons/ + icon: 'fa-user', + // bind the view to a controller model attribute + scopeKey: 'newContact.name' + }), + ... + + ``` + 2. Add an submit button to `scripts/views/menu.js` + + ``` + ... + // a submit button for adding a entry to the list + addButton: M.ButtonView.extend({ + //fit into the grid + grid: 'col-xs-12', + // The Text of the Button + value: 'Add', + // The events of the button + events: { + // On tab call the scope method 'addContact' (scope is the MenuController) + tap: 'addContact' + } + }), + ... + ``` +7. Extend the controller to serve the new features + + 1. Add an attribute for the TextFieldViews + + ``` + ... + // use this model as reference to the form views + newContact: null, + ... + + ``` + + 2. Implement the tap callback of the `addButton` inside the `scripts/controller/menu.js` + On the tab create a new model based on the `newContact` model. Thanks to [backbone.stickit](http://nytimes.github.io/backbone.stickit/) the model and the view are always in sync. + + ``` + addContact: function(){ + // add a new model instance based on the the new contact model to the collection +this.contacts.add(demoapp.Models.ContactModel.create(this.newContact.attributes)); + } + ``` + +8. Store the data inside the `localStorage` + + 1. Add a store to the collection in `scripts/collection/contacts.js` + + ``` + demoapp.Collections.ContactsCollection = M.Collection.extend({ + // assign the contact model to this collection + model: demoapp.Models.ContactModel, + // the collection uses the localStorage of the browser through the M.LocalStorageStore + store: M.LocalStorageStore.create( {}) + }); + ``` + + 2. Extend the contact model with an entity and attributes in `scripts/models/contact.js` + + ``` + demoapp.Models.ContactModel = M.Model.extend({ + // an id for every entry + idAttribute: '_id', + // the entity + entity: { + // profide a name to identify the collection/model + name: 'contact', + fields: { + // the identifier of the model + _id: { type: M.CONST.TYPE.STRING, required: YES, index: YES }, + // the name of the model + name: { type: M.CONST.TYPE.STRING }, + // the lastnamename of the model + lastname: { type: M.CONST.TYPE.STRING } + } + } + }); + ``` + + 3. Implement `getContacts` with real data in the menu controller `scripts/controllers/menu.js` + + ``` + // get the contacts + getContacts: function(){ + // read the data from the store + this.contacts.fetch(); + }, + ``` + + + 3. Implement `initData` with real data in the `MenuController.initData` inside of `scripts/controllers/menu.js` + - remove `this.getContacts()` from the `create` call + - call `this.getContacts()` when the contacts are accessable + + ``` + // initialze the data + initData: function(){ + //create a model to store the first and the last name + this.newContact = demoapp.Models.ContactModel.create(); + // create the contacts collections if it doesn't exist + if(!this.contacts){ + this.contacts = demoapp.Collections.ContactsCollection.create(); + } + // fetch the data + this.getContacts(); + }, + ``` +9. Test the application + - If you start the application with `grunt server` the list should be empty + - Enter a name and lastname and add it to the collection by tapping the add button + - The new contact should be added to the list + - Refreshing the browser fetchs the data from the localStorage and the list won't loose the entries + + + +# Step 3 - Connect with Bikini + - tbd + + + + + + + + + + + + + diff --git a/doc-template/additional/Generator.md b/doc-template/additional/Generator.md new file mode 100644 index 000000000..e933a2e8b --- /dev/null +++ b/doc-template/additional/Generator.md @@ -0,0 +1,186 @@ +# The-M-Project generator [![Build Status](https://travis-ci.org/mwaylabs/generator-m.png)](https://travis-ci.org/mwaylabs/generator-m) [![Coverage Status](https://coveralls.io/repos/mwaylabs/generator-m/badge.png?branch=master)](https://coveralls.io/r/mwaylabs/generator-m?branch=master) + +A [Yeoman](http://yeoman.io) generator for [The-M-Project 2.0](http://the-m-project.org). + +## Getting Started + +Make sure you have installed Node.js, Git and optionally, Ruby and Compass (if you plan to use Sass). + +Install: `npm install -g generator-m` + +Create a folder and name it after the application name and `cd` into it: +``` +mkdir my-new-project && cd $_ +``` + +Run the yo generator: +``` +yo m +``` + +Run `grunt` for building and `grunt server` for preview + +## Generators + +Available generators: + +* [m](#app) +* [m:view](#view) +* [m:layout](#layout) +* [m:controller](#controller) +* [m:model](#model) +* [m:collection](#collection) +* [m:router](#router) +* [m:i18n](#i18n) + +### App +Create a new The-M-Project app and generate all the boilerplate for you. + +``` +yo m +``` + +### View + +Generates a view in `app/scripts/views`. + +Example: +``` +yo m:view foo +``` + +Produces `app/scripts/views/foo.js`: + +```javascript +APPNAME.Views.FooView = M.View.extend({ + // ... +}) +``` +### Layout + +Generates a layout in `app/scripts/layouts`. + +Example: +``` +yo m:layout foo +``` + +Produces `app/scripts/layouts/foo.js`: + +```javascript +APPNAME.Layouts.FooLayout = M.Layout.extend({ + // ... +}) +``` + +### Controller + +Generates a controller in `app/scripts/controllers`. + +Example: +``` +yo m:controller foo +``` + +Produces `app/scripts/controllers/foo.js`: + +```javascript +APPNAME.Controllers.FooController = M.Controller.extend({ + // ... +}) +``` + +### Model + +Generates a model in `app/scripts/models`. + +Example: +```bash +yo m:model foo +``` + +Produces `app/scripts/models/foo.js`: + +```javascript +APPNAME.Models.FooModel = M.Model.extend({ + // ... +}) +``` + +### Collection + +Generates a collection in `app/scripts/collections`. + +Example: +``` +yo m:collection foo +``` + +Produces `app/scripts/collections/foo.js`: + +```javascript +APPNAME.Collections.FooCollection = M.Collection.extend({ + // ... +}) +``` + +### Router + +Generates a router in `app/scripts/routers`. + +Example: +``` +yo m:routers foo +``` + +Produces `app/scripts/routers/foo.js`: + +```javascript +APPNAME.Routers.FooRouter = M.Router.extend({ + // ... +}) +``` + +### I18N + +Generates a i18n in `app/i18n`. + +Example: +``` +yo m:i18n en +``` + +Produces `app/i18n/en.json`: + +```javascript +{ + "global.button.save": "Save document", + "global.button.emptyTrash": "Empty Trash ({{count}})", + "global.error.permissionDenied": "Permission denied" +} +``` + +## Options + +* `--skip-install` + + Skips the automatic execution of `bower` and `npm` after scaffolding has finished. + +* `--test-framework ` + + Defaults to `mocha`. Can be switched for another supported testing framework like `jasmine`. + + +## Contribute + +See the [contributing docs](https://github.com/yeoman/yeoman/blob/master/contributing.md) + +When submitting an issue, please follow the [guidelines](https://github.com/yeoman/yeoman/blob/master/contributing.md#issue-submission). Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue. + +When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix. + +When submitting a new feature, add tests that cover the feature. + +## License + +[MIT License](http://en.wikipedia.org/wiki/MIT_License) diff --git a/doc-template/additional/Sample-Apps.md b/doc-template/additional/Sample-Apps.md new file mode 100644 index 000000000..79769f82f --- /dev/null +++ b/doc-template/additional/Sample-Apps.md @@ -0,0 +1,21 @@ +# The-M-Project - Absinthe Sample Apps + +[Looking for the Samples of The-M-Project 1.x?](https://github.com/mwaylabs/The-M-Project-Sample-Apps/tree/1.x) + +## Setup + +- Navigate to a sample app ```cd kitchensink/``` +- Install dependencies: + - ```npm install``` + - ```bower install``` +- Start the server: ```grunt server``` + +## Setup all + +If you are looking for an easy setup process for all sample applications run: + +```sh setup-all.sh``` + +The script runs the following commands: + - ```npm install``` + - ```bower install``` \ No newline at end of file diff --git a/resources/sass/_master.scss b/resources/sass/_master.scss index ca8597431..d1a579104 100644 --- a/resources/sass/_master.scss +++ b/resources/sass/_master.scss @@ -33,4 +33,5 @@ @import "themes/default/toggleswitch"; @import "themes/default/menu"; @import "themes/default/alert"; +@import "themes/default/dialog"; diff --git a/resources/sass/themes/default/dialog.scss b/resources/sass/themes/default/dialog.scss new file mode 100644 index 000000000..5a042faa6 --- /dev/null +++ b/resources/sass/themes/default/dialog.scss @@ -0,0 +1,23 @@ +.m-view.m-labelview.m-dialogview-inner-message { + word-wrap: break-word; + padding: 15px; +} + +.m-view.m-labelview.m-dialogview-headline { + word-wrap: break-word; + padding: 15px; +} + +.buttons { + padding: 0 15px 0 15px; +} + +.m-dialogview-inner { + position: relative; + width: 300px; + background: rgba(255, 255, 255, 0.9); + z-index: 1040; + border: 1px solid #1092d3; + color: #1092d3; + border-radius: 4px; +} \ No newline at end of file diff --git a/resources/sass/themes/ios/dialog.scss b/resources/sass/themes/ios/dialog.scss new file mode 100644 index 000000000..9f96265b7 --- /dev/null +++ b/resources/sass/themes/ios/dialog.scss @@ -0,0 +1,6 @@ +.ios .m-dialogview-inner { + position: relative; + width: 300px; + background: rgba(255, 255, 255, 0.9); + z-index: 1040; +} \ No newline at end of file diff --git a/resources/sass/themproject_ios.scss b/resources/sass/themproject_ios.scss index e3aaf8b69..6115f50da 100644 --- a/resources/sass/themproject_ios.scss +++ b/resources/sass/themproject_ios.scss @@ -4,6 +4,7 @@ .ios { @import "master"; @import "themes/ios/alert"; + @import "themes/ios/dialog"; @import "themes/ios/buttongroup"; @import "themes/ios/radiolist"; @import "themes/ios/checkboxlist"; diff --git a/src/_ui.js b/src/_ui.js index aafa80677..fb2b700cb 100644 --- a/src/_ui.js +++ b/src/_ui.js @@ -16,7 +16,6 @@ // @include ./ui/views/button.js // @include ./ui/views/list.js // @include ./ui/views/slider.js -// @include ./ui/views/dialog.js // @include ./ui/views/toggle.js // @include ./ui/views/image.js // @include ./ui/views/toast.js @@ -31,6 +30,7 @@ // @include ./ui/views/modal.js // @include ./ui/views/loader.js // @include ./ui/views/alert.js +// @include ./ui/views/dialog.js // @include ./ui/views/text.js // @include ./ui/views/debug.js // @include ./ui/views/movable.js diff --git a/src/templates.js b/src/templates.js index 159098d39..a7260ebc0 100644 --- a/src/templates.js +++ b/src/templates.js @@ -6,5 +6,5 @@ //////////////////////////////////////////////////////////////// /* jshint -W109 */ -M.Templates = {"default":{"accordion.ejs":"
        <%= value %>
      ","accordionitem.ejs":"
        <%= value %>
      ","alert.ejs":"
      \r\n
      \r\n
      \r\n
      \r\n
      \r\n
      \r\n
      ","button.ejs":"
      <% if(icon) { %> \"> <% } %>
      ><%= value %>
      ","buttongroup.ejs":"
      ","checkboxlist.ejs":"
      <%= label %>
      ","checkboxoption.ejs":"","debug.ejs":"
      ","dialog.ejs":"
      ","image.ejs":"\" alt=\"<%= alt %>\"/>","label.ejs":"
      <%= value %>
      ","list.ejs":"
        ","listitem.ejs":"
      • <%= value %>
        • ","listitemlinked.ejs":"
      • <%= value %>\">
        • ","loader.ejs":"
        ","menu.ejs":"
        <%= value %>
        ","modal.ejs":"
        ","model.ejs":"
          <%= value %>
        ","movable.ejs":"
        <%= value %>
        ","radiolist.ejs":"
        <%= label %>
        ","radiooption.ejs":"","searchfield.ejs":"
        <%= value %>
        ","select.ejs":"
        multiple<% } %>\"> multiple<% } %>><%= value %>
        ","slider.ejs":"","tabbarbuttongroup.ejs":"
        ","text.ejs":"
        <% if(label) { %>
        <%= label %>
        <% } %>
        <% if(icon) { %>
        fa-fw\"><% } %><%= value %>
        ","textarea.ejs":"
        <% if(label) { %><% } %>
        ","textfield.ejs":"
        <% if(label) { %><% } %>
        ","toast.ejs":"
        \"><%= text %>
        ","toggle.ejs":"
        ","toggleswitch.ejs":"
        \n
        <%= value %>
        \n\n <% if(label){%>\n
        <%= label %>
        \n <% }%>\n
        \n
        \n <% if(onLabel){%>\n
        <%= onLabel %>
        \n <% }%>\n\n <% if(onLabel){%>\n
        <%= offLabel %>
        \n <% }%>\n\n <% if(onLabel){%>\n
        \n <% }%>\n
        \n
        \n
        \n\n","toolbar.ejs":"
        <%= value %>
        ","view.ejs":"
        <%= value %>
        "}}; +M.Templates = {"default":{"accordion.ejs":"
          <%= value %>
        ","accordionitem.ejs":"
          <%= value %>
        ","alert.ejs":"
        \r\n
        \r\n
        \r\n
        \r\n
        \r\n
        ","button.ejs":"
        <% if(icon) { %> \"> <% } %>
        ><%= value %>
        ","buttongroup.ejs":"
        ","checkboxlist.ejs":"
        <%= label %>
        ","checkboxoption.ejs":"","debug.ejs":"
        ","dialog.ejs":"
        \r\n
        \r\n
        <%= headline %>
        \r\n
        <%= text %>
        \r\n
        \r\n
        \r\n
        ","image.ejs":"\" alt=\"<%= alt %>\"/>","label.ejs":"
        <%= value %>
        ","list.ejs":"
          ","listitem.ejs":"
        • <%= value %>
          • ","listitemlinked.ejs":"
        • <%= value %>\">
          • ","loader.ejs":"
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          ","menu.ejs":"
          <%= value %>
          ","modal.ejs":"
          ","model.ejs":"
            <%= value %>
          ","movable.ejs":"
          <%= value %>
          ","radiolist.ejs":"
          <%= label %>
          ","radiooption.ejs":"","searchfield.ejs":"
          <%= value %>
          ","select.ejs":"
          multiple<% } %>\"> multiple<% } %>><%= value %>
          ","slider.ejs":"","tabbarbuttongroup.ejs":"
          ","text.ejs":"
          <% if(label) { %>
          <%= label %>
          <% } %>
          <% if(icon) { %>
          fa-fw\"><% } %><%= value %>
          ","textarea.ejs":"
          <% if(label) { %><% } %>
          ","textfield.ejs":"
          <% if(label) { %><% } %>
          ","toast.ejs":"
          \"><%= text %>
          ","toggle.ejs":"
          ","toggleswitch.ejs":"
          \n
          <%= value %>
          \n\n <% if(label){%>\n
          <%= label %>
          \n <% }%>\n
          \n
          \n <% if(onLabel){%>\n
          <%= onLabel %>
          \n <% }%>\n\n <% if(onLabel){%>\n
          <%= offLabel %>
          \n <% }%>\n\n <% if(onLabel){%>\n
          \n <% }%>\n
          \n
          \n
          \n\n","toolbar.ejs":"
          <%= value %>
          ","view.ejs":"
          <%= value %>
          "}}; /* jshint +W109 */ \ No newline at end of file diff --git a/src/templates/default/alert.ejs b/src/templates/default/alert.ejs index 3a57fa781..ac125036e 100644 --- a/src/templates/default/alert.ejs +++ b/src/templates/default/alert.ejs @@ -2,6 +2,5 @@
          -
          \ No newline at end of file diff --git a/src/templates/default/dialog.ejs b/src/templates/default/dialog.ejs index 281c6866c..2348fc3a7 100644 --- a/src/templates/default/dialog.ejs +++ b/src/templates/default/dialog.ejs @@ -1 +1,7 @@ -
          \ No newline at end of file +
          +
          +
          <%= headline %>
          +
          <%= text %>
          +
          +
          +
          \ No newline at end of file diff --git a/src/templates/default/loader.ejs b/src/templates/default/loader.ejs index 625b9090d..2b200efc6 100644 --- a/src/templates/default/loader.ejs +++ b/src/templates/default/loader.ejs @@ -1 +1,15 @@ -
          \ No newline at end of file +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          \ No newline at end of file diff --git a/src/ui/views/dialog.js b/src/ui/views/dialog.js index 4ba7fe359..ac74d7470 100644 --- a/src/ui/views/dialog.js +++ b/src/ui/views/dialog.js @@ -2,15 +2,178 @@ // http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt /** + * + * The base implementation of a dialog. You can show the dialog view by calling the show function. + * For displaying text in the dialog view you can pass the show function your String as an argument. + * Calling multiple times the show function with a different text will update the text. + * Call hide/toggle for every show to hide the dialog view. + * To force the hiding pass true to the hide call + * * @module M.DialogView + * @extends M.ModalView + * @type {*|Object|void} + * + * @example + * var dialog = M.DialogView.extend().create().render(); + * //show dialog + * dialog.show('Warning!'); + * //hide loader + * dialog.hide(); * - * @type {*} - * @extends M.View */ -M.DialogView = M.View.extend({ +M.DialogView = M.ModalView.extend({ + + /** + * The type of the View + * @private + * @type {String} + */ _type: 'M.DialogView', - _templateString: M.TemplateManager.get('dialog.ejs') + /** + * Defines that the dialog view can't be closed by clicking on the overlay. + * @type {String} + */ + hideOnOverlayClick: NO, + + /** + * Defines the headline of the dialog view. + * @type {String} + */ + headline: '', + + /** + * Defines the text which is displayed in the content section of the dialog view. + * @type {String} + */ + text: '', + + /** + * Defines if the confirm button gets displayed in the dialog view. + * @type {Boolean} + */ + confirmButton: YES, + + /** + * Defines if the decline button gets displayed in the dialog view. + * @type {Boolean} + */ + declineButton: NO, + + /** + * Defines the label on the confirm button. + * @type {String} + */ + confirmLabel: '', + + /** + * Defines the label on the decline button. + * @type {String} + */ + declineLabel: '', + + useAsScope: YES, + /** + * Gets called when user clicks on the confirm button + */ + onConfirm: function(){ + + }, + + _onConfirm: function(){ + this.onConfirm(); + this.hide(); + }, + + /** + * Gets called if the user taps the decline button + */ + onDecline: function(){ + + }, + + _onDecline: function(){ + this.onDecline(); + this.hide(); + }, + + initialize: function(){ + M.View.prototype.initialize.apply(this, arguments); + + this.headline = this.headline || ''; + this._childViews = this._childViews || {}; + var headline = this.headline || ''; + var text = this.text || ''; + + var buttonGrid = 'col-xs-12'; + if(this.confirmButton && this.declineButton){ + buttonGrid = 'col-xs-6'; + } + + var buttons = {}; + + if(this.confirmButton){ + + buttons.confirm = M.ButtonView.extend({ + grid: buttonGrid, + value: this.confirmLabel || 'Ok', + events: { + tap: '_onConfirm' + } + }); + } + + if(this.declineButton){ + + buttons.decline = M.ButtonView.extend({ + grid: buttonGrid, + value: this.declineLabel || 'Cancel', + events: { + tap: '_onDecline' + } + }); + } + + var content = M.View.extend({ + value: '', + _templateString: M.TemplateManager.get('dialog.ejs'), + assignTemplateValues: function(){ + return { + headline: headline, + text: text + }; + } + }, { + buttons: M.View.extend({ + grid: 'row' + }, buttons ? buttons : {} ) + } + ); + + if(this._childViews.content){ + console.log('there is already a content as childview!'); + } else { + this._childViews.content = content; + } + + return this; + }, + + /** + * Show the dialog view + * @param {String} text - The text for the dialog view + * @returns {DialogView} + */ + show: function() { + M.ModalView.prototype.show.apply(this, arguments); + + return this; + } +}); + +M.Dialog = M.DialogView.create().render(); + + + -}); \ No newline at end of file diff --git a/test/ui/views/test.dialog.js b/test/ui/views/test.dialog.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/ui/views/test.template_manager.js b/test/ui/views/test.template_manager.js index c5fceffcc..7505d63de 100644 --- a/test/ui/views/test.template_manager.js +++ b/test/ui/views/test.template_manager.js @@ -12,7 +12,6 @@ describe('M.TemplateManager', function() { 'ButtonView', 'ListView', 'SliderView', - 'DialogView', 'ToggleView', 'ImageView', 'ToolbarView', From f1de5e375abaaf6be516b32d95ffca6dabaaf559 Mon Sep 17 00:00:00 2001 From: Kai Stritzelberger Date: Mon, 20 Jan 2014 09:30:20 +0100 Subject: [PATCH 5/5] add dialog, alert view with styling and test --- resources/sass/themes/default/_alert.scss | 10 +- resources/sass/themes/default/_variables.scss | 1 + resources/sass/themes/default/dialog.scss | 12 +- src/templates.js | 2 +- src/templates/default/alert.ejs | 5 +- src/ui/themevars.js | 1 + src/ui/views/alert.js | 153 +++--- src/ui/views/dialog.js | 37 +- test/test.html | 1 + test/ui/views/test.alert.js | 441 +++++------------- test/ui/views/test.dialog.js | 233 +++++++++ 11 files changed, 446 insertions(+), 450 deletions(-) diff --git a/resources/sass/themes/default/_alert.scss b/resources/sass/themes/default/_alert.scss index dee97954a..193350af3 100644 --- a/resources/sass/themes/default/_alert.scss +++ b/resources/sass/themes/default/_alert.scss @@ -1,10 +1,13 @@ .m-view.m-labelview.m-alertview-inner-message { word-wrap: break-word; padding: 15px; + text-align: center; } -.buttons { - padding: 0 15px 0 15px; +.m-view.m-labelview.m-alertview-title { + word-wrap: break-word; + padding: 15px 15px 0 15px; + text-align: center; } .m-alertview-inner { @@ -12,4 +15,7 @@ width: 300px; background: rgba(255, 255, 255, 0.9); z-index: 1040; + border: 1px solid $m-modal-text-color; + color: $m-modal-text-color; + border-radius: 4px; } \ No newline at end of file diff --git a/resources/sass/themes/default/_variables.scss b/resources/sass/themes/default/_variables.scss index d52a5bf6b..8997821e3 100644 --- a/resources/sass/themes/default/_variables.scss +++ b/resources/sass/themes/default/_variables.scss @@ -128,6 +128,7 @@ $m-primary-margin-bottom: 20px; // Modal $modal-backdrop-background-color: $black; +$m-modal-text-color: $m-button-text-color; $content-padding: 15px; diff --git a/resources/sass/themes/default/dialog.scss b/resources/sass/themes/default/dialog.scss index 5a042faa6..47e6f293e 100644 --- a/resources/sass/themes/default/dialog.scss +++ b/resources/sass/themes/default/dialog.scss @@ -1,15 +1,13 @@ .m-view.m-labelview.m-dialogview-inner-message { word-wrap: break-word; padding: 15px; + text-align: center; } .m-view.m-labelview.m-dialogview-headline { word-wrap: break-word; - padding: 15px; -} - -.buttons { - padding: 0 15px 0 15px; + padding: 15px 15px 0 15px; + text-align: center; } .m-dialogview-inner { @@ -17,7 +15,7 @@ width: 300px; background: rgba(255, 255, 255, 0.9); z-index: 1040; - border: 1px solid #1092d3; - color: #1092d3; + border: 1px solid $m-modal-text-color; + color: $m-modal-text-color; border-radius: 4px; } \ No newline at end of file diff --git a/src/templates.js b/src/templates.js index a7260ebc0..aba674039 100644 --- a/src/templates.js +++ b/src/templates.js @@ -6,5 +6,5 @@ //////////////////////////////////////////////////////////////// /* jshint -W109 */ -M.Templates = {"default":{"accordion.ejs":"
            <%= value %>
          ","accordionitem.ejs":"
            <%= value %>
          ","alert.ejs":"
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          ","button.ejs":"
          <% if(icon) { %> \"> <% } %>
          ><%= value %>
          ","buttongroup.ejs":"
          ","checkboxlist.ejs":"
          <%= label %>
          ","checkboxoption.ejs":"","debug.ejs":"
          ","dialog.ejs":"
          \r\n
          \r\n
          <%= headline %>
          \r\n
          <%= text %>
          \r\n
          \r\n
          \r\n
          ","image.ejs":"\" alt=\"<%= alt %>\"/>","label.ejs":"
          <%= value %>
          ","list.ejs":"
            ","listitem.ejs":"
          • <%= value %>
            • ","listitemlinked.ejs":"
          • <%= value %>\">
            • ","loader.ejs":"
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            \r\n
            ","menu.ejs":"
            <%= value %>
            ","modal.ejs":"
            ","model.ejs":"
              <%= value %>
            ","movable.ejs":"
            <%= value %>
            ","radiolist.ejs":"
            <%= label %>
            ","radiooption.ejs":"","searchfield.ejs":"
            <%= value %>
            ","select.ejs":"
            multiple<% } %>\"> multiple<% } %>><%= value %>
            ","slider.ejs":"","tabbarbuttongroup.ejs":"
            ","text.ejs":"
            <% if(label) { %>
            <%= label %>
            <% } %>
            <% if(icon) { %>
            fa-fw\"><% } %><%= value %>
            ","textarea.ejs":"
            <% if(label) { %><% } %>
            ","textfield.ejs":"
            <% if(label) { %><% } %>
            ","toast.ejs":"
            \"><%= text %>
            ","toggle.ejs":"
            ","toggleswitch.ejs":"
            \n
            <%= value %>
            \n\n <% if(label){%>\n
            <%= label %>
            \n <% }%>\n
            \n
            \n <% if(onLabel){%>\n
            <%= onLabel %>
            \n <% }%>\n\n <% if(onLabel){%>\n
            <%= offLabel %>
            \n <% }%>\n\n <% if(onLabel){%>\n
            \n <% }%>\n
            \n
            \n
            \n\n","toolbar.ejs":"
            <%= value %>
            ","view.ejs":"
            <%= value %>
            "}}; +M.Templates = {"default":{"accordion.ejs":"
              <%= value %>
            ","accordionitem.ejs":"
              <%= value %>
            ","alert.ejs":"
            \r\n
            \r\n
            <%= title %>
            \r\n
            <%= text %>
            \r\n
            \r\n
            \r\n
            ","button.ejs":"
            <% if(icon) { %> \"> <% } %>
            ><%= value %>
            ","buttongroup.ejs":"
            ","checkboxlist.ejs":"
            <%= label %>
            ","checkboxoption.ejs":"","debug.ejs":"
            ","dialog.ejs":"
            \r\n
            \r\n
            <%= headline %>
            \r\n
            <%= text %>
            \r\n
            \r\n
            \r\n
            ","image.ejs":"\" alt=\"<%= alt %>\"/>","label.ejs":"
            <%= value %>
            ","list.ejs":"
              ","listitem.ejs":"
            • <%= value %>
              • ","listitemlinked.ejs":"
            • <%= value %>\">
              • ","loader.ejs":"
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              ","menu.ejs":"
              <%= value %>
              ","modal.ejs":"
              ","model.ejs":"
                <%= value %>
              ","movable.ejs":"
              <%= value %>
              ","radiolist.ejs":"
              <%= label %>
              ","radiooption.ejs":"","searchfield.ejs":"
              <%= value %>
              ","select.ejs":"
              multiple<% } %>\"> multiple<% } %>><%= value %>
              ","slider.ejs":"","tabbarbuttongroup.ejs":"
              ","text.ejs":"
              <% if(label) { %>
              <%= label %>
              <% } %>
              <% if(icon) { %>
              fa-fw\"><% } %><%= value %>
              ","textarea.ejs":"
              <% if(label) { %><% } %>
              ","textfield.ejs":"
              <% if(label) { %><% } %>
              ","toast.ejs":"
              \"><%= text %>
              ","toggle.ejs":"
              ","toggleswitch.ejs":"
              \n
              <%= value %>
              \n\n <% if(label){%>\n
              <%= label %>
              \n <% }%>\n
              \n
              \n <% if(onLabel){%>\n
              <%= onLabel %>
              \n <% }%>\n\n <% if(onLabel){%>\n
              <%= offLabel %>
              \n <% }%>\n\n <% if(onLabel){%>\n
              \n <% }%>\n
              \n
              \n
              \n\n","toolbar.ejs":"
              <%= value %>
              ","view.ejs":"
              <%= value %>
              "}}; /* jshint +W109 */ \ No newline at end of file diff --git a/src/templates/default/alert.ejs b/src/templates/default/alert.ejs index ac125036e..03d69a62d 100644 --- a/src/templates/default/alert.ejs +++ b/src/templates/default/alert.ejs @@ -1,6 +1,7 @@
              -
              -
              +
              <%= title %>
              +
              <%= text %>
              +
              \ No newline at end of file diff --git a/src/ui/themevars.js b/src/ui/themevars.js index 8a1d75a13..c87ed7076 100644 --- a/src/ui/themevars.js +++ b/src/ui/themevars.js @@ -104,6 +104,7 @@ M.ThemeVars = { "m-primary-margin-top": "10px", "m-primary-margin-bottom": "20px", "modal-backdrop-background-color": "#000000", + "m-modal-text-color": "#1092d3", "content-padding": "15px", "m-primary-disabled-color": "#d5d5d5", "m-primary-disabled-text-color": "#c3c3c3", diff --git a/src/ui/views/alert.js b/src/ui/views/alert.js index 1daca608e..cb085a30a 100644 --- a/src/ui/views/alert.js +++ b/src/ui/views/alert.js @@ -3,9 +3,7 @@ /** * - * The base implementation of a alert. You can show the alert view by calling the show function. - * For displaying text in the alert view you can pass the show function your String as an argument. - * Calling multiple times the show function with a different text will update the text. + * The base implementation of an alert view. You can show the alert view by calling the show function. * Call hide/toggle for every show to hide the alert view. * To force the hiding pass true to the hide call * @@ -13,13 +11,6 @@ * @extends M.ModalView * @type {*|Object|void} * - * @example - * var alert = M.AlertView.extend().create().render(); - * //show alert - * alert.show('Warning!'); - * //hide loader - * alert.hide(); - * */ M.AlertView = M.ModalView.extend({ @@ -30,6 +21,18 @@ M.AlertView = M.ModalView.extend({ */ _type: 'M.AlertView', + /** + * The text displayed in the alert view + * @type {String} + */ + text: '', + + /** + * The title of the alert view + * @type {String} + */ + title: '', + /** * Defines that the alert view can't be closed by clicking on the overlay. * @type {String} @@ -40,105 +43,59 @@ M.AlertView = M.ModalView.extend({ /** * Gets called when user clicks on the ok button */ - ok: function(){ + onConfirm: function() { }, - _ok: function(){ - this.ok(); + _onConfirm: function() { + this.onConfirm(); this.hide(); }, - /** - * Gets called if the user taps the cancel button - */ - cancel: function(){ + initialize: function() { + var that = this; + M.View.prototype.initialize.apply(this, arguments); - }, + this._childViews = this._childViews || {}; + this.text = this.text || ''; + this.title = this.title || ''; - _cancel: function(){ - this.cancel(); - this.hide(); - }, + var content = M.View.extend({ + value: '', + _templateString: M.TemplateManager.get('alert.ejs'), + assignTemplateValues: function() { + return { + text: that.text, + title: that.title + }; - /** - * Show the alert view - * @param {String} text - The text for the alert view - * @returns {AlertView} - */ - show: function( text ) { - text = text || ''; - M.ModalView.prototype.show.apply(this, arguments); - this.$el.find('.m-alertview-inner-message').html(text); - //this.$el.find('.alertDismissButton').on('click', this.hide()); - return this; - } -}, { - - content: M.View.extend({ - - /** - * The template of the view - * @private - * @type {function} - */ - _templateString: M.TemplateManager.get('alert.ejs'), - - /** - * This function needs to be implemented to render the view if there is no value given - * @returns {Boolean|Function|YES} - * @private - */ - _attachToDom: function() { - return YES; - } - },{ - buttons: M.View.extend({ - grid: 'row' - },{ - ok: M.ButtonView.extend({ - grid: 'col-xs-6', - value:'Ok', - events: { - tap: '_ok' } + }, { + buttonContainer: M.View.extend({ + value: '', + grid: 'row', + childViews: { + + confirmButton: M.ButtonView.extend({ + grid: 'col-xs-8 col-xs-offset-2', + value: 'Ok', + cssClass: 'confirmButton', + events: { + tap: '_onConfirm' + } + }) + } + }) + } - }), - cancel: M.ButtonView.extend({ - grid: 'col-xs-6', - value: 'Cancel', - events: { - tap: '_cancel' - } - }) - }) - }) -}); + ); + if(this._childViews.content){ + console.log('there is already a content as childview!'); + } else { + this._childViews.content = content; + } + } +}); -/** - * - * @module M.Alert - * @static - * Static implementation of the Alert view - * - * @type {*|Prompt|String|this} - * @example - * alertButton: M.ButtonView.extend({ - grid: 'col-xs-12 col-sm-6 col-md-4', - value: 'Show Alert', - events: { - tap: function() { - M.AlertView.extend( { - ok: function(){ - console.log('ok'); - }, - cancel: function(){ - console.log('cancel'); - } - }).create().render().show('Hallo ich bin ein alert'); - } - } - }) - */ M.Alert = M.AlertView.create().render(); \ No newline at end of file diff --git a/src/ui/views/dialog.js b/src/ui/views/dialog.js index ac74d7470..b0c473121 100644 --- a/src/ui/views/dialog.js +++ b/src/ui/views/dialog.js @@ -14,11 +14,9 @@ * @type {*|Object|void} * * @example - * var dialog = M.DialogView.extend().create().render(); - * //show dialog - * dialog.show('Warning!'); - * //hide loader - * dialog.hide(); + * + * + * * */ @@ -65,13 +63,13 @@ M.DialogView = M.ModalView.extend({ * Defines the label on the confirm button. * @type {String} */ - confirmLabel: '', + confirmLabel: 'Ok', /** * Defines the label on the decline button. * @type {String} */ - declineLabel: '', + declineLabel: 'Cancel', useAsScope: YES, /** @@ -99,14 +97,21 @@ M.DialogView = M.ModalView.extend({ }, initialize: function(){ + + var that = this; M.View.prototype.initialize.apply(this, arguments); - this.headline = this.headline || ''; this._childViews = this._childViews || {}; - var headline = this.headline || ''; - var text = this.text || ''; + this.headline = this.headline || ''; + this.text = this.text || ''; + + this.confirmLabel = (this.confirmLabel || this.confirmLabel === '') ? this.confirmLabel : 'Ok'; + this.declineLabel = (this.declineLabel || this.declineLabel === '') ? this.declineLabel : 'Cancel'; + this.confirmButton = this.confirmButton || YES; + this.declineButton = this.declineButton || NO; - var buttonGrid = 'col-xs-12'; + var buttonGrid = 'col-xs-8 col-xs-offset-2' + + ''; if(this.confirmButton && this.declineButton){ buttonGrid = 'col-xs-6'; } @@ -117,7 +122,8 @@ M.DialogView = M.ModalView.extend({ buttons.confirm = M.ButtonView.extend({ grid: buttonGrid, - value: this.confirmLabel || 'Ok', + value: this.confirmLabel, + cssClass: 'confirmButton', events: { tap: '_onConfirm' } @@ -128,7 +134,8 @@ M.DialogView = M.ModalView.extend({ buttons.decline = M.ButtonView.extend({ grid: buttonGrid, - value: this.declineLabel || 'Cancel', + value: this.declineLabel, + cssClass: 'declineButton', events: { tap: '_onDecline' } @@ -140,8 +147,8 @@ M.DialogView = M.ModalView.extend({ _templateString: M.TemplateManager.get('dialog.ejs'), assignTemplateValues: function(){ return { - headline: headline, - text: text + headline: that.headline, + text: that.text }; } }, { diff --git a/test/test.html b/test/test.html index 940d47197..b3500d413 100644 --- a/test/test.html +++ b/test/test.html @@ -77,6 +77,7 @@ + diff --git a/test/ui/views/test.alert.js b/test/ui/views/test.alert.js index 9e9e055b7..0ae487be4 100644 --- a/test/ui/views/test.alert.js +++ b/test/ui/views/test.alert.js @@ -15,369 +15,160 @@ describe('M.AlertView', function() { assert.equal(M.AlertView.create()._shownCounter, 0); }); - it('show', function() { - var alert = M.AlertView.create().render(); - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), ''); - alert.show(); - assert.equal(alert._shownCounter, 2); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), ''); - alert.hide(); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), ''); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - - alert = null; + it('initialize', function(){ + var testView = null; + + var test = function (text ,title) { + + testView = M.AlertView.extend({ + text: text, + title: title + }).create().render(); + + testView.initialize(); + if(text === null && title === null){ + assert.equal(testView.text, ''); + assert.equal(testView.title, ''); + } + else{ + assert.equal(testView.text, text); + assert.equal(testView.title, title); + } + }; + + test('abc','def'); + test('',''); + test(1,2); + test({}, {}); + test([], []); + test(null, null); + + testView = null; + test = null; }); - it('show with the static M.Alert', function() { - var alert = M.Alert; + it('create and show alert with no parameters', function() { + var testView = M.AlertView.extend({ + }).create().render(); - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); + assert.isDefined(testView); + assert.equal(testView._shownCounter, 0); assert.lengthOf($('.alertview'), 0); - alert.show(); - assert.equal(alert._shownCounter, 1); + testView.show(); + assert.equal(testView._shownCounter, 1); assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-title'), 1); + assert.equal($('.m-alertview-title').html(), ''); assert.lengthOf($('.m-alertview-inner-message'), 1); assert.equal($('.m-alertview-inner-message').html(), ''); - alert.show(); - assert.equal(alert._shownCounter, 2); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), ''); - alert.hide(); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), ''); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - - alert = null; - }); - - it('show Alert with text', function() { - var alert = M.AlertView.create().render(); - var TEXT1 = 'abc'; - var TEXT2 = 'def'; - var TEXT3 = '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'; - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(TEXT1); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert.show(TEXT2); - assert.equal(alert._shownCounter, 2); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT2); - alert.show(TEXT3); - assert.equal(alert._shownCounter, 3); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); - alert.hide(); - assert.equal(alert._shownCounter, 2); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); - alert.hide(); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); - alert.hide(); - assert.equal(alert._shownCounter, 0); + assert.lengthOf(testView.$el.find('.buttonContainer'),1); + assert.lengthOf(testView.$el.find('.confirmButton'),1) + assert.equal(testView.$el.find('.confirmButton [data-binding="value"]').html(), 'Ok'); + testView.hide(); + assert.equal(testView._shownCounter, 0); assert.lengthOf($('.alertview'), 0); - alert = null; - TEXT1 = null; - TEXT2 = null; - TEXT3 = null; + testView = null; }); - it('show with the static M.Loader and text', function() { - var alert = M.Alert; + it('create and show alert with some parameters', function() { + var text = 'abc'; - var TEXT1 = 'abc'; - var TEXT2 = 'def'; - var TEXT3 = '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'; - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(TEXT1); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert.show(TEXT2); - assert.equal(alert._shownCounter, 2); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT2); - alert.show(TEXT3); - assert.equal(alert._shownCounter, 3); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); - alert.hide(); - assert.equal(alert._shownCounter, 2); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); - alert.hide(); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), '!§$%&()=?1234567890ß|²³{[]}}*_:,.-#+"<>'); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - - alert = null; - TEXT1 = null; - TEXT2 = null; - }); - - it('toggle alert instance', function() { - var alert = M.AlertView.create().render(); - - var TEXT1 = 'abc'; - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.toggle(TEXT1); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert.toggle(TEXT1); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); + var testView = M.AlertView.extend({ + text: text + }).create().render(); - assert.equal(alert._shownCounter, 0); + assert.isDefined(testView); + assert.equal(testView._shownCounter, 0); assert.lengthOf($('.alertview'), 0); - alert.toggle(TEXT1); - assert.equal(alert._shownCounter, 1); + testView.show(); + assert.equal(testView._shownCounter, 1); assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-title'), 1); + assert.equal($('.m-alertview-title').html(), ''); assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert.toggle(); - assert.equal(alert._shownCounter, 0); + assert.equal($('.m-alertview-inner-message').html(), text); + assert.lengthOf(testView.$el.find('.buttonContainer'),1); + assert.lengthOf(testView.$el.find('.confirmButton'), 1) + assert.equal(testView.$el.find('.confirmButton [data-binding="value"]').html(), 'Ok'); + testView.hide(); + assert.equal(testView._shownCounter, 0); assert.lengthOf($('.alertview'), 0); - alert = null; - TEXT1 = null; + testView = null; + text = null; }); - it('toggle the static M.Alert', function() { - var alert = M.Alert; + it('show and create alert with all parameters', function() { + var text = 'abc'; + var title = 'def'; - var TEXT1 = 'abc'; - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.toggle(TEXT1); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert.toggle(TEXT1); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); + var testView = M.AlertView.extend({ + text: text, + title: title + }).create().render(); - assert.equal(alert._shownCounter, 0); + assert.isDefined(testView); + assert.equal(testView._shownCounter, 0); assert.lengthOf($('.alertview'), 0); - alert.toggle(TEXT1); - assert.equal(alert._shownCounter, 1); + testView.show(); + assert.equal(testView._shownCounter, 1); assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-title'), 1); + assert.equal($('.m-alertview-title').html(), title); assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert.toggle(); - assert.equal(alert._shownCounter, 0); + assert.equal($('.m-alertview-inner-message').html(), text); + assert.lengthOf(testView.$el.find('.buttonContainer'),1); + assert.lengthOf(testView.$el.find('.confirmButton'), 1); + assert.equal(testView.$el.find('.confirmButton [data-binding="value"]').html(), 'Ok'); + testView.hide(); + assert.equal(testView._shownCounter, 0); assert.lengthOf($('.alertview'), 0); - alert = null; - TEXT1 = null; - }); - - it('force the hidding', function() { - var alert = M.Alert; - alert.show(); - alert.show(); - alert.show(); - alert.show(); - alert.show(); - alert.hide(true); - - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - - alert.show(); - alert.show(); - alert.show(); - alert.show(); - alert.show(); - alert.show(); - alert.show(); - alert.show(); - alert.show(); - alert.hide(''); - - assert.equal(alert._shownCounter, 8); - assert.lengthOf($('.alertview'), 1); - alert.hide(false); - assert.equal(alert._shownCounter, 7); - assert.lengthOf($('.alertview'), 1); - alert.hide({}); - assert.equal(alert._shownCounter, 6); - assert.lengthOf($('.alertview'), 1); - alert.hide([]); - assert.equal(alert._shownCounter, 5); - assert.lengthOf($('.alertview'), 1); - alert.hide('force'); - assert.equal(alert._shownCounter, 4); - assert.lengthOf($('.alertview'), 1); - alert.hide('true'); - assert.equal(alert._shownCounter, 3); - assert.lengthOf($('.alertview'), 1); - alert.hide(1); - assert.equal(alert._shownCounter, 2); - assert.lengthOf($('.alertview'), 1); - alert.hide(YES); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert = null; - }); - - it('mulitple hiding', function() { - var alert = M.Alert; - alert.show(); - alert.show(); - assert.equal(alert._shownCounter, 2); - assert.lengthOf($('.alertview'), 1); - alert.hide(); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.hide(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert = null; + testView = null; + text = null; + title = null; }); - it('static show with text and without', function() { - var alert = M.Alert; + it('create and show alert view and overwriting functions', function() { + var text = 'abc'; + var title = 'def'; + var functionConfirm = function(){ + console.log('ok'); + }; + var testView = M.AlertView.extend({ + text: text, + title: title, + onConfirm: functionConfirm + }).create().render(); - var TEXT1 = 'abc'; - //is the text inside of the loader - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(TEXT1); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert.hide(); - alert.show(); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), ''); - alert.hide(); - - alert = null; - TEXT1 = null; - }); + assert.isDefined(testView.onConfirm); + assert.isDefined(testView._onConfirm); - it('_cancel and _ok', function() { - var alert = M.AlertView.create().render(); + assert.equal(testView.onConfirm, functionConfirm); - var TEXT1 = 'abc'; - var TEXT2 = 'DEF'; - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); + assert.isDefined(testView); + assert.equal(testView._shownCounter, 0); assert.lengthOf($('.alertview'), 0); - alert.show(TEXT1); - assert.equal($('.buttons .buttonview').length, 2); - assert.equal(alert._shownCounter, 1); + testView.show(); + assert.equal(testView._shownCounter, 1); assert.lengthOf($('.alertview'), 1); + assert.lengthOf($('.m-alertview-title'), 1); + assert.equal($('.m-alertview-title').html(), title); assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert._cancel(); - assert.equal(alert._shownCounter, 0); + assert.equal($('.m-alertview-inner-message').html(), text); + assert.lengthOf(testView.$el.find('.buttonContainer'),1); + assert.lengthOf(testView.$el.find('.confirmButton'), 1); + assert.equal(testView.$el.find('.confirmButton [data-binding="value"]').html(), 'Ok'); + testView.hide(); + assert.equal(testView._shownCounter, 0); assert.lengthOf($('.alertview'), 0); - alert.show(TEXT2); - assert.equal($('.buttons .buttonview').length, 2); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT2); - alert._ok(); - alert = null; - TEXT1 = null; - TEXT2 = null; + testView = null; + text = null; + title = null; + functionConfirm = null; }); - it('static _cancel and _ok', function() { - var alert = M.Alert; - - var TEXT1 = 'abc'; - var TEXT2 = 'DEF'; - assert.isDefined(alert); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(TEXT1); - assert.equal($('.buttons .buttonview').length, 2); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT1); - alert._cancel(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - alert.show(TEXT2); - assert.equal(alert._shownCounter, 1); - assert.lengthOf($('.alertview'), 1); - assert.lengthOf($('.m-alertview-inner-message'), 1); - assert.equal($('.m-alertview-inner-message').html(), TEXT2); - alert._ok(); - assert.equal(alert._shownCounter, 0); - assert.lengthOf($('.alertview'), 0); - - alert = null; - TEXT1 = null; - TEXT2 = null; - }); }); diff --git a/test/ui/views/test.dialog.js b/test/ui/views/test.dialog.js index e69de29bb..ce48a7f80 100644 --- a/test/ui/views/test.dialog.js +++ b/test/ui/views/test.dialog.js @@ -0,0 +1,233 @@ +describe('M.DialogView', function() { + + it('general', function() { + // Basic + assert.isDefined(M.DialogView); + assert.isFunction(M.DialogView); + assert.isDefined(M.Dialog); + assert.isTrue(M.View.prototype.isPrototypeOf(M.DialogView.create())); + assert.isTrue(M.ModalView.prototype.isPrototypeOf(M.DialogView.create())); + assert.isTrue(M.View.prototype.isPrototypeOf(M.Dialog)); + assert.isTrue(M.DialogView.prototype.isPrototypeOf(M.Dialog)); + assert.isFunction(M.Dialog.show); + assert.isFunction(M.Dialog.hide); + assert.isFunction(M.Dialog.onConfirm); + assert.isFunction(M.Dialog._onConfirm); + assert.isFunction(M.Dialog.onDecline); + assert.isFunction(M.Dialog._onDecline); + assert.equal(M.Dialog._shownCounter, 0); + assert.equal(M.DialogView.create()._shownCounter, 0); + }); + + it('initialize', function(){ + var testView = null; + + var test = function (labelText, text ,headline) { + + testView = M.DialogView.extend({ + text: text, + headline: headline, + confirmButton: YES, + declineButton: YES, + confirmLabel: labelText, + declineLabel: labelText + }).create().render(); + + testView.initialize(); + if(text === null && labelText === null && headline === null){ + assert.equal(testView.text, ''); + assert.equal(testView.headline, ''); + assert.equal(testView.confirmLabel, 'Ok'); + assert.equal(testView.declineLabel, 'Cancel'); + } + else{ + assert.equal(testView.text, text); + assert.equal(testView.headline, headline); + assert.equal(testView.confirmLabel, labelText); + assert.equal(testView.declineLabel, labelText); + } + }; + + test('abc','def','ghi'); + test('','',''); + test(1,2,3); + test('', [], []); + test('', {}, {}); + test(null, null, null); + + testView = null; + test = null; + }); + + it('create and show dialog with no parameters', function() { + var dialog = M.DialogView.extend({ + }).create().render(); + + assert.isDefined(dialog); + assert.equal(dialog._shownCounter, 0); + assert.lengthOf($('.dialogview'), 0); + dialog.show(); + assert.equal(dialog._shownCounter, 1); + assert.lengthOf($('.dialogview'), 1); + assert.lengthOf($('.m-dialogview-headline'), 1); + assert.equal($('.m-dialogview-headline').html(), ''); + assert.lengthOf($('.m-dialogview-inner-message'), 1); + assert.equal($('.m-dialogview-inner-message').html(), ''); + assert.lengthOf(dialog.$el.find('.buttons'),1) + assert.lengthOf(dialog.$el.find('.confirmButton'), 1) + assert.lengthOf(dialog.$el.find('.declineButton'), 0) + dialog.hide(); + assert.equal(dialog._shownCounter, 0); + assert.lengthOf($('.dialogview'), 0); + + dialog = null; + }); + + it('create and show dialog with some parameters', function() { + var text = 'abc'; + var headline = 'def'; + var buttonBool = YES; + var label = 'okeTest'; + + var dialog = M.DialogView.extend({ + text: text, + headline: headline, + confirmButton: buttonBool, + confirmLabel: label + }).create().render(); + + assert.isDefined(dialog); + assert.equal(dialog._shownCounter, 0); + assert.lengthOf($('.dialogview'), 0); + dialog.show(); + assert.equal(dialog._shownCounter, 1); + assert.lengthOf($('.dialogview'), 1); + assert.lengthOf($('.m-dialogview-headline'), 1); + assert.equal($('.m-dialogview-headline').html(), headline); + assert.lengthOf($('.m-dialogview-inner-message'), 1); + assert.equal($('.m-dialogview-inner-message').html(), text); + assert.lengthOf(dialog.$el.find('.buttons'),1) + assert.lengthOf(dialog.$el.find('.confirmButton'), 1) + assert.lengthOf(dialog.$el.find('.declineButton'), 0) + assert.equal(dialog.$el.find('.confirmButton [data-binding="value"]').html(), label); + dialog.hide(); + assert.equal(dialog._shownCounter, 0); + assert.lengthOf($('.dialogview'), 0); + + dialog = null; + text = null; + headline = null; + buttonBool = null; + label = null; + }); + + it('show and create dialog with all parameters', function() { + var text = 'abc'; + var headline = 'def'; + var buttonBoolConfirm = YES; + var confirmLabel = 'okeTest'; + var buttonBoolDecline = YES; + var declineLabel = 'decline'; + + var dialog = M.DialogView.extend({ + text: text, + headline: headline, + confirmButton: buttonBoolConfirm, + confirmLabel: confirmLabel, + declineButton: buttonBoolDecline, + declineLabel: declineLabel + }).create().render(); + + assert.isDefined(dialog); + assert.equal(dialog._shownCounter, 0); + assert.lengthOf($('.dialogview'), 0); + dialog.show(); + assert.equal(dialog._shownCounter, 1); + assert.lengthOf($('.dialogview'), 1); + assert.lengthOf($('.m-dialogview-headline'), 1); + assert.equal($('.m-dialogview-headline').html(), headline); + assert.lengthOf($('.m-dialogview-inner-message'), 1); + assert.equal($('.m-dialogview-inner-message').html(), text); + assert.lengthOf(dialog.$el.find('.buttons'),1); + assert.lengthOf(dialog.$el.find('.confirmButton'), 1); + assert.lengthOf(dialog.$el.find('.declineButton'), 1); + assert.equal(dialog.$el.find('.confirmButton [data-binding="value"]').html(), confirmLabel); + assert.equal(dialog.$el.find('.declineButton [data-binding="value"]').html(), declineLabel); + dialog.hide(); + assert.equal(dialog._shownCounter, 0); + assert.lengthOf($('.dialogview'), 0); + + dialog = null; + text = null; + headline = null; + buttonBoolConfirm = null; + confirmLabel = null; + buttonBoolDecline = null; + declineLabel = null; + }); + + it('create and show dialog view and overwriting functions', function() { + var text = 'abc'; + var headline = 'def'; + var buttonBoolConfirm = YES; + var confirmLabel = 'okeTest'; + var buttonBoolDecline = YES; + var declineLabel = 'decline'; + var functionConfirm = function(){ + console.log('ok'); + }; + var functionDecline = function(){ + console.log('cancel'); + }; + + var dialog = M.DialogView.extend({ + text: text, + headline: headline, + confirmButton: buttonBoolConfirm, + confirmLabel: confirmLabel, + declineButton: buttonBoolDecline, + declineLabel: declineLabel, + onConfirm: functionConfirm, + onDecline: functionDecline + }).create().render(); + + assert.isDefined(dialog.onConfirm); + assert.isDefined(dialog.onDecline); + assert.isDefined(dialog._onConfirm); + assert.isDefined(dialog._onDecline); + + assert.equal(dialog.onConfirm, functionConfirm); + assert.equal(dialog.onDecline, functionDecline); + + assert.isDefined(dialog); + assert.equal(dialog._shownCounter, 0); + assert.lengthOf($('.dialogview'), 0); + dialog.show(); + assert.equal(dialog._shownCounter, 1); + assert.lengthOf($('.dialogview'), 1); + assert.lengthOf($('.m-dialogview-headline'), 1); + assert.equal($('.m-dialogview-headline').html(), headline); + assert.lengthOf($('.m-dialogview-inner-message'), 1); + assert.equal($('.m-dialogview-inner-message').html(), text); + assert.lengthOf(dialog.$el.find('.buttons'),1); + assert.lengthOf(dialog.$el.find('.confirmButton'), 1); + assert.lengthOf(dialog.$el.find('.declineButton'), 1); + assert.equal(dialog.$el.find('.confirmButton [data-binding="value"]').html(), confirmLabel); + assert.equal(dialog.$el.find('.declineButton [data-binding="value"]').html(), declineLabel); + dialog.hide(); + assert.equal(dialog._shownCounter, 0); + assert.lengthOf($('.dialogview'), 0); + + dialog = null; + text = null; + headline = null; + buttonBoolConfirm = null; + confirmLabel = null; + buttonBoolDecline = null; + declineLabel = null; + functionConfirm = null; + functionDecline = null; + }); + + +});