diff options
author | Trent Richardson <trentdrichardson@gmail.com> | 2013-12-15 16:42:17 -0500 |
---|---|---|
committer | Trent Richardson <trentdrichardson@gmail.com> | 2013-12-15 16:42:17 -0500 |
commit | 70ec8a6f0cb774830f5e5f54d0f8600e5ab12f3c (patch) | |
tree | 4fa8944db669facf9d2a175fc12cb44edcb40303 | |
parent | 6b0daa508cf2887a22709f1e866d3fd7945b89f5 (diff) | |
parent | 45cec836d81ce46dc882fed6f8b4f7f8408837a3 (diff) | |
download | jQuery-Impromptu-70ec8a6f0cb774830f5e5f54d0f8600e5ab12f3c.zip jQuery-Impromptu-70ec8a6f0cb774830f5e5f54d0f8600e5ab12f3c.tar.gz jQuery-Impromptu-70ec8a6f0cb774830f5e5f54d0f8600e5ab12f3c.tar.bz2 |
Merge branch 'dev'
-rw-r--r-- | .jshintrc | 10 | ||||
-rw-r--r-- | CONTRIBUTING.md | 31 | ||||
-rw-r--r-- | Gruntfile.js | 74 | ||||
-rw-r--r-- | README.md | 34 | ||||
-rw-r--r-- | dist/demos/loan_calculator.html (renamed from demos/loan_calculator.html) | 0 | ||||
-rw-r--r-- | dist/demos/purecss.html (renamed from demos/purecss.html) | 0 | ||||
-rw-r--r-- | dist/demos/select_filter.html (renamed from demos/select_filter.html) | 0 | ||||
-rw-r--r-- | dist/demos/survey.html (renamed from demos/survey.html) | 0 | ||||
-rw-r--r-- | dist/demos/twitter_bootstrap.html (renamed from demos/twitter_bootstrap.html) | 0 | ||||
-rw-r--r-- | dist/demos/user_manager.html (renamed from demos/user_manager.html) | 0 | ||||
-rw-r--r-- | dist/index.html (renamed from index.html) | 4 | ||||
-rw-r--r-- | dist/jquery-impromptu.css | 123 | ||||
-rw-r--r-- | dist/jquery-impromptu.js | 677 | ||||
-rw-r--r-- | dist/jquery-impromptu.min.css | 3 | ||||
-rw-r--r-- | dist/jquery-impromptu.min.js | 4 | ||||
-rw-r--r-- | dist/themes/base.css (renamed from themes/base.css) | 0 | ||||
-rw-r--r-- | dist/themes/classic-impromptu.css (renamed from themes/classic-impromptu.css) | 0 | ||||
-rw-r--r-- | dist/themes/clean-blue.css (renamed from themes/clean-blue.css) | 0 | ||||
-rw-r--r-- | dist/themes/ext-blue.css (renamed from themes/ext-blue.css) | 0 | ||||
-rw-r--r-- | dist/themes/smooth.css (renamed from themes/smooth.css) | 0 | ||||
-rw-r--r-- | dist/themes/zoo.css (renamed from themes/zoo.css) | 0 | ||||
-rw-r--r-- | jquery-impromptu.jquery.json | 6 | ||||
-rw-r--r-- | jquery-impromptu.min.css | 5 | ||||
-rw-r--r-- | jquery-impromptu.min.js | 4 | ||||
-rw-r--r-- | package.json | 3 | ||||
-rw-r--r-- | src/.jshintrc | 16 | ||||
-rw-r--r-- | src/demos/loan_calculator.html | 104 | ||||
-rw-r--r-- | src/demos/purecss.html | 119 | ||||
-rw-r--r-- | src/demos/select_filter.html | 176 | ||||
-rw-r--r-- | src/demos/survey.html | 98 | ||||
-rw-r--r-- | src/demos/twitter_bootstrap.html | 119 | ||||
-rw-r--r-- | src/demos/user_manager.html | 181 | ||||
-rw-r--r-- | src/index.html | 650 | ||||
-rw-r--r-- | src/jquery-impromptu.css (renamed from jquery-impromptu.css) | 5 | ||||
-rw-r--r-- | src/jquery-impromptu.js (renamed from jquery-impromptu.js) | 28 | ||||
-rw-r--r-- | src/themes/base.css | 91 | ||||
-rw-r--r-- | src/themes/classic-impromptu.css | 41 | ||||
-rw-r--r-- | src/themes/clean-blue.css | 59 | ||||
-rw-r--r-- | src/themes/ext-blue.css | 50 | ||||
-rw-r--r-- | src/themes/smooth.css | 69 | ||||
-rw-r--r-- | src/themes/zoo.css | 44 | ||||
-rw-r--r-- | themes/brown/brown.css | 65 | ||||
-rw-r--r-- | themes/brown/brown_theme_gradient.jpg | bin | 715 -> 0 bytes | |||
-rw-r--r-- | themes/brown/help.gif | bin | 396 -> 0 bytes | |||
-rw-r--r-- | themes/columns/button_bg.jpg | bin | 8339 -> 0 bytes | |||
-rw-r--r-- | themes/columns/columns.css | 52 |
46 files changed, 2764 insertions, 181 deletions
@@ -7,15 +7,9 @@ "noarg": true, "sub": true, "undef": true, - "unused": false, - "loopfunc": true, + "unused": true, "boss": true, "eqnull": true, - "browser": true, "node": true, - "predef": [ - "jQuery", - "module", - "grunt" - ] + "es5": true } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..57001f0 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,31 @@ +# Contributing + +## Important notes +Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory! + +### Code style +Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already (tabs).** + +### PhantomJS +While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers. + +## Modifying the code +First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed. + +Test that Grunt's CLI is installed by running `grunt --version`. If the command isn't found, run `npm install -g grunt-cli`. For more information about installing Grunt, see the [getting started guide](http://gruntjs.com/getting-started). + +1. Fork and clone the repo. +1. Run `npm install` to install all dependencies (including Grunt). +1. Run `grunt` to grunt this project. + +Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken. + +## Submitting pull requests + +1. Create a new branch, please don't work in your `master` branch directly. +1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail. +1. Fix stuff. +1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done. +1. Open `test/*.html` unit test file(s) in actual browser to ensure tests pass everywhere. +1. Update the documentation to reflect any changes. +1. Push to your fork and submit a pull request. diff --git a/Gruntfile.js b/Gruntfile.js index f4131ac..8aff42e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -4,6 +4,7 @@ module.exports = function(grunt) { // Project configuration. grunt.initConfig({ + // Metadata. pkg: grunt.file.readJSON('jquery-impromptu.jquery.json'), banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %>' + @@ -12,35 +13,69 @@ module.exports = function(grunt) { '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n', + // Task configuration. - /*concat: { + clean: { + files: ['dist'] + }, + copy: { + dist: { + files: [ + { src: 'src/index.html', dest: 'dist/index.html' }, + { src: 'src/demos/*', dest: 'dist/demos/', expand:true, flatten: true }, + { src: 'src/themes/*', dest: 'dist/themes/', expand:true, flatten: true } + ] + } + }, + concat: { dist: { options: { banner: '<%= banner %>', stripBanners: true }, - src: ['<%= pkg.name %>.js'], - dest: '<%= pkg.name %>.js' + files: [ + { src: 'src/<%= pkg.name %>.js', dest: 'dist/<%= pkg.name %>.js' }, + { src: 'src/<%= pkg.name %>.css', dest: 'dist/<%= pkg.name %>.css' } + ] } - },*/ + }, uglify: { options: { banner: '<%= banner %>' }, dist: { - src: '<%= pkg.name %>.js', - dest: '<%= pkg.name %>.min.js' - } + src: 'dist/<%= pkg.name %>.js', + dest: 'dist/<%= pkg.name %>.min.js' + }, }, cssmin: { options: { - banner: '<%= banner %>' + //banner: '<%= banner %>' }, dist: { - src: '<%= pkg.name %>.css', - dest: '<%= pkg.name %>.min.css' + src: 'dist/<%= pkg.name %>.css', + dest: 'dist/<%= pkg.name %>.min.css' + }, + }, + replace: { + dist: { + options: { + variables: { + version: '<%= pkg.version %>', + timestamp: '<%= pkg.modified %>' + }, + prefix: '@@' + }, + files: [ + //{ src: 'dist/<%= pkg.name %>.js', dest: 'dist/<%= pkg.name %>.js' }, + //{ src: 'dist/<%= pkg.name %>.css', dest: 'dist/<%= pkg.name %>.css' }, + { src: 'dist/index.html', dest: 'dist/index.html' } + ] } }, + qunit: { + files: ['test/**/*.html'] + }, jshint: { gruntfile: { options: { @@ -48,11 +83,11 @@ module.exports = function(grunt) { }, src: 'Gruntfile.js' }, - dist: { + src: { options: { - jshintrc: '.jshintrc' + jshintrc: 'src/.jshintrc' }, - src: ['<%=pkg.name %>.js'] + src: ['src/**/*.js'] } }, watch: { @@ -60,21 +95,24 @@ module.exports = function(grunt) { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, - dist: { - files: ['<%=pkg.name %>.js','<%=pkg.name %>.css'], - tasks: ['jshint:dist', 'uglify', 'cssmin'] + src: { + files: 'src/**',//'<%= jshint.src.src %>', + tasks: ['jshint:src', 'clean', 'copy', 'concat', 'replace', 'uglify', 'cssmin'] } - } + }, }); // These plugins provide necessary tasks. + grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-replace'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); // Default task. - grunt.registerTask('default', ['jshint', 'uglify', 'cssmin']); + grunt.registerTask('default', ['jshint', 'clean', 'copy', 'concat', 'replace', 'uglify', 'cssmin']); }; @@ -3,24 +3,40 @@ jQuery Impromptu About ----- -- Author: [Trent Richardson](http://trentrichardson.com) -- Documentation: [http://trentrichardson.com/Impromptu/](http://trentrichardson.com/Impromptu/) -- Twitter: [@practicalweb](http://twitter.com/practicalweb) +- Author: [Trent Richardson][author] +- Documentation: [http://trentrichardson.com/Impromptu/][documentation] +- Twitter: [@practicalweb][twitter] +- eBook: [Impromptu - From I to U][ebook] + +[author]: (http://trentrichardson.com) +[documentation]: http://trentrichardson.com/Impromptu/ +[twitter]: http://twitter.com/practicalweb +[ebook]: http://sellfy.com/p/IrwS Use --- -- Include jQuery and Impromptu into your page -- Add the CSS file or copy it to your CSS +- Include jQuery and Impromptu into your page ([production version][jsmin] or the [development version][jsmax]) +- Add the CSS file or copy it to your CSS ([production version][cssmin] or the [development version][cssmax]) - call using $.prompt('hello world!'); - Visit the [Impromptu Documentation](http://trentrichardson.com/Impromptu/) for MUCH more advanced usage +[jsmin]: dist/jquery-impromptu.min.js +[jsmax]: dist/jquery-impromptu.js +[cssmin]: dist/jquery-impromptu.min.css +[cssmax]: dist/jquery-impromptu.css + +Contributing +------------ +jQuery Impromptu uses Grunt to automate the build, lint, minification. +- Checkout the dev branch +- Follow the [contributing instructions][contributing] + +[contributing]: CONTRIBUTING.md License ------- Copyright 2011 Trent Richardson -Dual licensed under the MIT and GPL licenses. - -http://trentrichardson.com/Impromptu/GPL-LICENSE.txt +Licensed under the [MIT][mitlicense]. -http://trentrichardson.com/Impromptu/MIT-LICENSE.txt +[mitlicense]: MIT-LICENSE.txt diff --git a/demos/loan_calculator.html b/dist/demos/loan_calculator.html index 9f85378..9f85378 100644 --- a/demos/loan_calculator.html +++ b/dist/demos/loan_calculator.html diff --git a/demos/purecss.html b/dist/demos/purecss.html index c2842b6..c2842b6 100644 --- a/demos/purecss.html +++ b/dist/demos/purecss.html diff --git a/demos/select_filter.html b/dist/demos/select_filter.html index af03c0f..af03c0f 100644 --- a/demos/select_filter.html +++ b/dist/demos/select_filter.html diff --git a/demos/survey.html b/dist/demos/survey.html index ee4ae24..ee4ae24 100644 --- a/demos/survey.html +++ b/dist/demos/survey.html diff --git a/demos/twitter_bootstrap.html b/dist/demos/twitter_bootstrap.html index 85c1437..85c1437 100644 --- a/demos/twitter_bootstrap.html +++ b/dist/demos/twitter_bootstrap.html diff --git a/demos/user_manager.html b/dist/demos/user_manager.html index f9af4de..f9af4de 100644 --- a/demos/user_manager.html +++ b/dist/demos/user_manager.html diff --git a/index.html b/dist/index.html index 6b92782..5392e8e 100644 --- a/index.html +++ b/dist/index.html @@ -115,8 +115,8 @@ </ul> <h3>Version</h3> - <p>Version 5.1.1</p> - <p>Last updated on 2013-11-10</p> + <p>Version 5.2.0</p> + <p>Last updated on 2013-11-15</p> <p>jQuery Impromptu is currently available for use in all personal or commercial projects under the <a href="MIT-LICENSE.txt" title="MIT License">MIT License</a>.</p> diff --git a/dist/jquery-impromptu.css b/dist/jquery-impromptu.css new file mode 100644 index 0000000..2e807bb --- /dev/null +++ b/dist/jquery-impromptu.css @@ -0,0 +1,123 @@ +/*! jQuery-Impromptu - v5.2.0 - 2013-11-15 +* http://trentrichardson.com/Impromptu +* Copyright (c) 2013 Trent Richardson; Licensed MIT */ +.jqifade{ + position: absolute; + background-color: #777777; +} +div.jqi{ + width: 400px; + font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; + position: absolute; + background-color: #ffffff; + font-size: 11px; + text-align: left; + border: solid 1px #eeeeee; + border-radius: 6px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + padding: 7px; +} +div.jqi .jqicontainer{ +} +div.jqi .jqiclose{ + position: absolute; + top: 4px; right: -2px; + width: 18px; + cursor: default; + color: #bbbbbb; + font-weight: bold; +} +div.jqi .jqistate{ + background-color: #fff; +} +div.jqi .jqititle{ + padding: 5px 10px; + font-size: 16px; + line-height: 20px; + border-bottom: solid 1px #eeeeee; +} +div.jqi .jqimessage{ + padding: 10px; + line-height: 20px; + color: #444444; +} +div.jqi .jqibuttons{ + text-align: right; + margin: 0 -7px -7px -7px; + border-top: solid 1px #e4e4e4; + background-color: #f4f4f4; + border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + -webkit-border-radius: 0 0 6px 6px; +} +div.jqi .jqibuttons button{ + margin: 0; + padding: 15px 20px; + background-color: transparent; + font-weight: normal; + border: none; + border-left: solid 1px #e4e4e4; + color: #777; + font-weight: bold; + font-size: 12px; +} +div.jqi .jqibuttons button.jqidefaultbutton{ + color: #489afe; +} +div.jqi .jqibuttons button:hover, +div.jqi .jqibuttons button:focus{ + color: #287ade; + outline: none; +} +.jqiwarning .jqi .jqibuttons{ + background-color: #b95656; +} + +/* sub states */ +div.jqi .jqiparentstate::after{ + background-color: #777; + opacity: 0.6; + filter: alpha(opacity=60); + content: ''; + position: absolute; + top:0;left:0;bottom:0;right:0; + border-radius: 6px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; +} +div.jqi .jqisubstate{ + position: absolute; + top:0; + left: 20%; + width: 60%; + padding: 7px; + border: solid 1px #eeeeee; + border-top: none; + border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + -webkit-border-radius: 0 0 6px 6px; +} +div.jqi .jqisubstate .jqibuttons button{ + padding: 10px 18px; +} + +/* arrows for tooltips/tours */ +.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;} + +.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; } +.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; } +.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; } + +.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; } +.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; } +.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; } + +.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; } +.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; } +.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; } + +.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; } +.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; } +.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; } + diff --git a/dist/jquery-impromptu.js b/dist/jquery-impromptu.js new file mode 100644 index 0000000..84cb2d3 --- /dev/null +++ b/dist/jquery-impromptu.js @@ -0,0 +1,677 @@ +/*! jQuery-Impromptu - v5.2.0 - 2013-11-15 +* http://trentrichardson.com/Impromptu +* Copyright (c) 2013 Trent Richardson; Licensed MIT */ +(function($) {
+ "use strict";
+
+ /**
+ * setDefaults - Sets the default options
+ * @param message String/Object - String of html or Object of states
+ * @param options Object - Options to set the prompt
+ * @return jQuery - container with overlay and prompt
+ */
+ $.prompt = function(message, options) {
+ // only for backwards compat, to be removed in future version
+ if(options !== undefined && options.classes !== undefined && typeof options.classes === 'string'){
+ options = { box: options.classes };
+ }
+
+ $.prompt.options = $.extend({},$.prompt.defaults,options);
+ $.prompt.currentPrefix = $.prompt.options.prefix;
+
+ // Be sure any previous timeouts are destroyed
+ if($.prompt.timeout){
+ clearTimeout($.prompt.timeout);
+ }
+ $.prompt.timeout = false;
+
+ var opts = $.prompt.options,
+ $body = $(document.body),
+ $window = $(window);
+
+ //build the box and fade
+ var msgbox = '<div class="'+ $.prompt.options.prefix +'box '+ opts.classes.box +'">';
+ if(opts.useiframe && ($('object, applet').length > 0)) {
+ msgbox += '<iframe src="javascript:false;" style="display:block;position:absolute;z-index:-1;" class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></iframe>';
+ } else {
+ msgbox +='<div class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></div>';
+ }
+ msgbox += '<div class="'+ opts.prefix +' '+ opts.classes.prompt +'">'+
+ '<form action="javascript:false;" onsubmit="return false;" class="'+ opts.prefix +'form">'+
+ '<div class="'+ opts.prefix +'close '+ opts.classes.close +'">'+ opts.closeText +'</div>'+
+ '<div class="'+ opts.prefix +'states"></div>'+
+ '</form>'+
+ '</div>'+
+ '</div>';
+
+ $.prompt.jqib = $(msgbox).appendTo($body);
+ $.prompt.jqi = $.prompt.jqib.children('.'+ opts.prefix);//.data('jqi',opts);
+ $.prompt.jqif = $.prompt.jqib.children('.'+ opts.prefix +'fade');
+
+ //if a string was passed, convert to a single state
+ if(message.constructor === String){
+ message = {
+ state0: {
+ title: opts.title,
+ html: message,
+ buttons: opts.buttons,
+ position: opts.position,
+ focus: opts.focus,
+ submit: opts.submit
+ }
+ };
+ }
+
+ //build the states
+ $.prompt.options.states = {};
+ var k,v;
+ for(k in message){
+ v = $.extend({},$.prompt.defaults.state,{name:k},message[k]);
+ $.prompt.addState(v.name, v);
+
+ if($.prompt.currentStateName === ''){
+ $.prompt.currentStateName = v.name;
+ }
+ }
+
+ //Events
+ $.prompt.jqi.on('click', '.'+ opts.prefix +'buttons button', function(e){
+ var $t = $(this),
+ $state = $t.parents('.'+ opts.prefix +'state'),
+ stateobj = $.prompt.options.states[$state.data('jqi-name')],
+ msg = $state.children('.'+ opts.prefix +'message'),
+ clicked = stateobj.buttons[$t.text()] || stateobj.buttons[$t.html()],
+ forminputs = {};
+
+ // if for some reason we couldn't get the value
+ if(clicked === undefined){
+ for(var i in stateobj.buttons){
+ if(stateobj.buttons[i].title === $t.text() || stateobj.buttons[i].title === $t.html()){
+ clicked = stateobj.buttons[i].value;
+ }
+ }
+ }
+
+ //collect all form element values from all states.
+ $.each($.prompt.jqi.children('form').serializeArray(),function(i,obj){
+ if (forminputs[obj.name] === undefined) {
+ forminputs[obj.name] = obj.value;
+ } else if (typeof forminputs[obj.name] === Array || typeof forminputs[obj.name] === 'object') {
+ forminputs[obj.name].push(obj.value);
+ } else {
+ forminputs[obj.name] = [forminputs[obj.name],obj.value];
+ }
+ });
+
+ // trigger an event
+ var promptsubmite = new $.Event('impromptu:submit');
+ promptsubmite.stateName = stateobj.name;
+ promptsubmite.state = $state;
+ $state.trigger(promptsubmite, [clicked, msg, forminputs]);
+
+ if(!promptsubmite.isDefaultPrevented()){
+ $.prompt.close(true, clicked,msg,forminputs);
+ }
+ });
+
+ // if the fade is clicked blink the prompt
+ var fadeClicked = function(){
+ if(opts.persistent){
+ var offset = (opts.top.toString().indexOf('%') >= 0? ($window.height()*(parseInt(opts.top,10)/100)) : parseInt(opts.top,10)),
+ top = parseInt($.prompt.jqi.css('top').replace('px',''),10) - offset;
+
+ //$window.scrollTop(top);
+ $('html,body').animate({ scrollTop: top }, 'fast', function(){
+ var i = 0;
+ $.prompt.jqib.addClass(opts.prefix +'warning');
+ var intervalid = setInterval(function(){
+ $.prompt.jqib.toggleClass(opts.prefix +'warning');
+ if(i++ > 1){
+ clearInterval(intervalid);
+ $.prompt.jqib.removeClass(opts.prefix +'warning');
+ }
+ }, 100);
+ });
+ }
+ else {
+ $.prompt.close(true);
+ }
+ };
+
+ // listen for esc or tab keys
+ var keyPressEventHandler = function(e){
+ var key = (window.event) ? event.keyCode : e.keyCode;
+
+ //escape key closes
+ if(key === 27) {
+ fadeClicked();
+ }
+
+ //enter key pressed trigger the default button if its not on it, ignore if it is a textarea
+ if(key === 13){
+ var $defBtn = $.prompt.getCurrentState().find('.'+ opts.prefix +'defaultbutton');
+ var $tgt = $(e.target);
+
+ if($tgt.is('textarea,.'+opts.prefix+'button') === false && $defBtn.length > 0){
+ e.preventDefault();
+ $defBtn.click();
+ }
+ }
+
+ //constrain tabs, tabs should iterate through the state and not leave
+ if (key === 9){
+ var $inputels = $('input,select,textarea,button',$.prompt.getCurrentState());
+ var fwd = !e.shiftKey && e.target === $inputels[$inputels.length-1];
+ var back = e.shiftKey && e.target === $inputels[0];
+ if (fwd || back) {
+ setTimeout(function(){
+ if (!$inputels){
+ return;
+ }
+ var el = $inputels[back===true ? $inputels.length-1 : 0];
+
+ if (el){
+ el.focus();
+ }
+ },10);
+ return false;
+ }
+ }
+ };
+
+ $.prompt.position();
+ $.prompt.style();
+
+ $.prompt.jqif.click(fadeClicked);
+ $window.resize({animate:false}, $.prompt.position);
+ $.prompt.jqi.find('.'+ opts.prefix +'close').click($.prompt.close);
+ $.prompt.jqib.on("keydown",keyPressEventHandler)
+ .on('impromptu:loaded', opts.loaded)
+ .on('impromptu:close', opts.close)
+ .on('impromptu:statechanging', opts.statechanging)
+ .on('impromptu:statechanged', opts.statechanged);
+
+ // Show it
+ $.prompt.jqif[opts.show](opts.overlayspeed);
+ $.prompt.jqi[opts.show](opts.promptspeed, function(){
+
+ var $firstState = $.prompt.jqi.find('.'+ opts.prefix +'states .'+ opts.prefix +'state').eq(0);
+ $.prompt.goToState($firstState.data('jqi-name'));
+
+ $.prompt.jqib.trigger('impromptu:loaded');
+ });
+
+ // Timeout
+ if(opts.timeout > 0){
+ $.prompt.timeout = setTimeout(function(){ $.prompt.close(true); },opts.timeout);
+ }
+
+ return $.prompt.jqib;
+ };
+
+ $.prompt.defaults = {
+ prefix:'jqi',
+ classes: {
+ box: '',
+ fade: '',
+ prompt: '',
+ close: '',
+ title: '',
+ message: '',
+ buttons: '',
+ button: '',
+ defaultButton: ''
+ },
+ title: '',
+ closeText: '×',
+ buttons: {
+ Ok: true
+ },
+ loaded: function(e){},
+ submit: function(e,v,m,f){},
+ close: function(e,v,m,f){},
+ statechanging: function(e, from, to){},
+ statechanged: function(e, to){},
+ opacity: 0.6,
+ zIndex: 999,
+ overlayspeed: 'slow',
+ promptspeed: 'fast',
+ show: 'fadeIn',
+ focus: 0,
+ defaultButton: 0,
+ useiframe: false,
+ top: '15%',
+ position: {
+ container: null,
+ x: null,
+ y: null,
+ arrow: null,
+ width: null
+ },
+ persistent: true,
+ timeout: 0,
+ states: {},
+ state: {
+ name: null,
+ title: '',
+ html: '',
+ buttons: {
+ Ok: true
+ },
+ focus: 0,
+ defaultButton: 0,
+ position: {
+ container: null,
+ x: null,
+ y: null,
+ arrow: null,
+ width: null
+ },
+ submit: function(e,v,m,f){
+ return true;
+ }
+ }
+ };
+
+ /**
+ * currentPrefix String - At any time this show be the prefix
+ * of the current prompt ex: "jqi"
+ */
+ $.prompt.currentPrefix = $.prompt.defaults.prefix;
+
+ /**
+ * currentStateName String - At any time this is the current state
+ * of the current prompt ex: "state0"
+ */
+ $.prompt.currentStateName = "";
+
+ /**
+ * setDefaults - Sets the default options
+ * @param o Object - Options to set as defaults
+ * @return void
+ */
+ $.prompt.setDefaults = function(o) {
+ $.prompt.defaults = $.extend({}, $.prompt.defaults, o);
+ };
+
+ /**
+ * setStateDefaults - Sets the default options for a state
+ * @param o Object - Options to set as defaults
+ * @return void
+ */
+ $.prompt.setStateDefaults = function(o) {
+ $.prompt.defaults.state = $.extend({}, $.prompt.defaults.state, o);
+ };
+
+ /**
+ * position - Repositions the prompt (Used internally)
+ * @return void
+ */
+ $.prompt.position = function(e){
+ var restoreFx = $.fx.off,
+ $state = $.prompt.getCurrentState(),
+ stateObj = $.prompt.options.states[$state.data('jqi-name')],
+ pos = stateObj? stateObj.position : undefined,
+ $window = $(window),
+ bodyHeight = document.body.scrollHeight, //$(document.body).outerHeight(true),
+ windowHeight = $(window).height(),
+ documentHeight = $(document).height(),
+ height = bodyHeight > windowHeight ? bodyHeight : windowHeight,
+ top = parseInt($window.scrollTop(),10) + ($.prompt.options.top.toString().indexOf('%') >= 0?
+ (windowHeight*(parseInt($.prompt.options.top,10)/100)) : parseInt($.prompt.options.top,10));
+
+ // when resizing the window turn off animation
+ if(e !== undefined && e.data.animate === false){
+ $.fx.off = true;
+ }
+
+ $.prompt.jqib.css({
+ position: "absolute",
+ height: height,
+ width: "100%",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0
+ });
+ $.prompt.jqif.css({
+ position: "fixed",
+ height: height,
+ width: "100%",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0
+ });
+
+ // tour positioning
+ if(pos && pos.container){
+ var offset = $(pos.container).offset();
+
+ if($.isPlainObject(offset) && offset.top !== undefined){
+ $.prompt.jqi.css({
+ position: "absolute"
+ });
+ $.prompt.jqi.animate({
+ top: offset.top + pos.y,
+ left: offset.left + pos.x,
+ marginLeft: 0,
+ width: (pos.width !== undefined)? pos.width : null
+ });
+ top = (offset.top + pos.y) - ($.prompt.options.top.toString().indexOf('%') >= 0? (windowHeight*(parseInt($.prompt.options.top,10)/100)) : parseInt($.prompt.options.top,10));
+ $('html,body').animate({ scrollTop: top }, 'slow', 'swing', function(){});
+ }
+ }
+ // custom state width animation
+ else if(pos && pos.width){
+ $.prompt.jqi.css({
+ position: "absolute",
+ left: '50%'
+ });
+ $.prompt.jqi.animate({
+ top: pos.y || top,
+ left: pos.x || '50%',
+ marginLeft: ((pos.width/2)*-1),
+ width: pos.width
+ });
+ }
+ // standard prompt positioning
+ else{
+ $.prompt.jqi.css({
+ position: "absolute",
+ top: top,
+ left: '50%',//$window.width()/2,
+ marginLeft: (($.prompt.jqi.outerWidth(false)/2)*-1)
+ });
+ }
+
+ // restore fx settings
+ if(e !== undefined && e.data.animate === false){
+ $.fx.off = restoreFx;
+ }
+ };
+
+ /**
+ * style - Restyles the prompt (Used internally)
+ * @return void
+ */
+ $.prompt.style = function(){
+ $.prompt.jqif.css({
+ zIndex: $.prompt.options.zIndex,
+ display: "none",
+ opacity: $.prompt.options.opacity
+ });
+ $.prompt.jqi.css({
+ zIndex: $.prompt.options.zIndex+1,
+ display: "none"
+ });
+ $.prompt.jqib.css({
+ zIndex: $.prompt.options.zIndex
+ });
+ };
+
+ /**
+ * get - Get the prompt
+ * @return jQuery - the prompt
+ */
+ $.prompt.get = function(state) {
+ return $('.'+ $.prompt.currentPrefix);
+ };
+
+ /**
+ * addState - Injects a state into the prompt
+ * @param statename String - Name of the state
+ * @param stateobj Object - options for the state
+ * @param afterState String - selector of the state to insert after
+ * @return jQuery - the newly created state
+ */
+ $.prompt.addState = function(statename, stateobj, afterState) {
+ var state = "",
+ $state = null,
+ arrow = "",
+ title = "",
+ opts = $.prompt.options,
+ $jqistates = $('.'+ $.prompt.currentPrefix +'states'),
+ defbtn,k,v,i=0;
+
+ stateobj = $.extend({},$.prompt.defaults.state, {name:statename}, stateobj);
+
+ if(stateobj.position.arrow !== null){
+ arrow = '<div class="'+ opts.prefix + 'arrow '+ opts.prefix + 'arrow'+ stateobj.position.arrow +'"></div>';
+ }
+ if(stateobj.title && stateobj.title !== ''){
+ title = '<div class="lead '+ opts.prefix + 'title '+ opts.classes.title +'">'+ stateobj.title +'</div>';
+ }
+ state += '<div id="'+ opts.prefix +'state_'+ statename +'" class="'+ opts.prefix + 'state" data-jqi-name="'+ statename +'" style="display:none;">'+
+ arrow + title +
+ '<div class="'+ opts.prefix +'message '+ opts.classes.message +'">' + stateobj.html +'</div>'+
+ '<div class="'+ opts.prefix +'buttons '+ opts.classes.buttons +'"'+ ($.isEmptyObject(stateobj.buttons)? 'style="display:none;"':'') +'>';
+
+ for(k in stateobj.buttons){
+ v = stateobj.buttons[k],
+ defbtn = stateobj.focus === i || (isNaN(stateobj.focus) && stateobj.defaultButton === i) ? ($.prompt.currentPrefix + 'defaultbutton ' + opts.classes.defaultButton) : '';
+
+ if(typeof v === 'object'){
+ state += '<button class="'+ opts.classes.button +' '+ $.prompt.currentPrefix + 'button '+ defbtn;
+
+ if(typeof v.classes !== "undefined"){
+ state += ' '+ ($.isArray(v.classes)? v.classes.join(' ') : v.classes) + ' ';
+ }
+
+ state += '" name="' + opts.prefix + '_' + statename + '_button' + v.title.replace(/[^a-z0-9]+/gi,'') + '" id="' + opts.prefix + '_' + statename + '_button' + v.title.replace(/[^a-z0-9]+/gi,'') + '" value="' + v.value + '">' + v.title + '</button>';
+
+ } else {
+ state += '<button class="'+ $.prompt.currentPrefix + 'button '+ opts.classes.button +' '+ defbtn +'" name="' + opts.prefix + '_' + statename + '_button' + k + '" id="' + opts.prefix + '_' + statename + '_button' + k + '" value="' + v + '">' + k + '</button>';
+
+ }
+ i++;
+ }
+ state += '</div></div>';
+
+ $state = $(state);
+
+ $state.on('impromptu:submit', stateobj.submit);
+
+ if(afterState !== undefined){
+ $jqistates.find('#'+ $.prompt.currentPrefix +'state_'+ afterState).after($state);
+ }
+ else{
+ $jqistates.append($state);
+ }
+
+ $.prompt.options.states[statename] = stateobj;
+
+ return $state;
+ };
+
+ /**
+ * removeState - Removes a state from the promt
+ * @param state String - Name of the state
+ * @return Boolean - returns true on success, false on failure
+ */
+ $.prompt.removeState = function(state) {
+ var $state = $.prompt.getState(state),
+ rm = function(){ $state.remove(); };
+
+ if($state.length === 0){
+ return false;
+ }
+
+ // transition away from it before deleting
+ if($state.is(':visible')){
+ if($state.next().length > 0){
+ $.prompt.nextState(rm);
+ }
+ else{
+ $.prompt.prevState(rm);
+ }
+ }
+ else{
+ $state.slideUp('slow', rm);
+ }
+
+ return true;
+ };
+
+ /**
+ * getState - Get the state by its name
+ * @param state String - Name of the state
+ * @return jQuery - the state
+ */
+ $.prompt.getState = function(state) {
+ return $('#'+ $.prompt.currentPrefix +'state_'+ state);
+ };
+ $.prompt.getStateContent = function(state) {
+ return $.prompt.getState(state);
+ };
+
+ /**
+ * getCurrentState - Get the current visible state
+ * @return jQuery - the current visible state
+ */
+ $.prompt.getCurrentState = function() {
+ return $.prompt.getState($.prompt.getCurrentStateName());
+ };
+
+ /**
+ * getCurrentStateName - Get the name of the current visible state
+ * @return String - the current visible state's name
+ */
+ $.prompt.getCurrentStateName = function() {
+ return $.prompt.currentStateName;
+ };
+
+ /**
+ * goToState - Goto the specified state
+ * @param state String - name of the state to transition to
+ * @param subState Boolean - true to be a sub state within the currently open state
+ * @param callback Function - called when the transition is complete
+ * @return jQuery - the newly active state
+ */
+ $.prompt.goToState = function(state, subState, callback) {
+ var $jqi = $.prompt.get(),
+ jqiopts = $.prompt.options,
+ $state = $.prompt.getState(state),
+ stateobj = jqiopts.states[$state.data('jqi-name')],
+ promptstatechanginge = new $.Event('impromptu:statechanging');
+
+ // subState can be ommitted
+ if(typeof subState === 'function'){
+ callback = subState;
+ subState = false;
+ }
+
+ $.prompt.jqib.trigger(promptstatechanginge, [$.prompt.getCurrentStateName(), state]);
+
+ if(!promptstatechanginge.isDefaultPrevented() && $state.length > 0){
+ $.prompt.jqi.find('.'+ $.prompt.currentPrefix +'parentstate').removeClass($.prompt.currentPrefix +'parentstate');
+
+ if(subState){ // hide any open substates
+ // get rid of any substates
+ $.prompt.jqi.find('.'+ $.prompt.currentPrefix +'substate').not($state)
+ .slideUp(jqiopts.promptspeed)
+ .removeClass('.'+ $.prompt.currentPrefix +'substate')
+ .find('.'+ $.prompt.currentPrefix +'arrow').hide();
+
+ // add parent state class so it can be visible, but blocked
+ $.prompt.jqi.find('.'+ $.prompt.currentPrefix +'state:visible').addClass($.prompt.currentPrefix +'parentstate');
+
+ // add substate class so we know it will be smaller
+ $state.addClass($.prompt.currentPrefix +'substate');
+ }
+ else{ // hide any open states
+ $.prompt.jqi.find('.'+ $.prompt.currentPrefix +'state').not($state)
+ .slideUp(jqiopts.promptspeed)
+ .find('.'+ $.prompt.currentPrefix +'arrow').hide();
+ }
+ $.prompt.currentStateName = stateobj.name;
+
+ $state.slideDown(jqiopts.promptspeed,function(){
+ var $t = $(this);
+
+ // if focus is a selector, find it, else its button index
+ if(typeof(stateobj.focus) === 'string'){
+ $t.find(stateobj.focus).eq(0).focus();
+ }
+ else{
+ $t.find('.'+ $.prompt.currentPrefix +'defaultbutton').focus();
+ }
+
+ $t.find('.'+ $.prompt.currentPrefix +'arrow').show(jqiopts.promptspeed);
+
+ if (typeof callback === 'function'){
+ $.prompt.jqib.on('impromptu:statechanged', callback);
+ }
+ $.prompt.jqib.trigger('impromptu:statechanged', [state]);
+ if (typeof callback === 'function'){
+ $.prompt.jqib.off('impromptu:statechanged', callback);
+ }
+ });
+ if(!subState){
+ $.prompt.position();
+ }
+ }
+ return $state;
+ };
+
+ /**
+ * nextState - Transition to the next state
+ * @param callback Function - called when the transition is complete
+ * @return jQuery - the newly active state
+ */
+ $.prompt.nextState = function(callback) {
+ var $next = $('#'+ $.prompt.currentPrefix +'state_'+ $.prompt.getCurrentStateName()).next();
+ return $.prompt.goToState( $next.attr('id').replace($.prompt.currentPrefix +'state_',''), callback );
+ };
+
+ /**
+ * prevState - Transition to the previous state
+ * @param callback Function - called when the transition is complete
+ * @return jQuery - the newly active state
+ */
+ $.prompt.prevState = function(callback) {
+ var $prev = $('#'+ $.prompt.currentPrefix +'state_'+ $.prompt.getCurrentStateName()).prev();
+ $.prompt.goToState( $prev.attr('id').replace($.prompt.currentPrefix +'state_',''), callback );
+ };
+
+ /**
+ * close - Closes the prompt
+ * @param callback Function - called when the transition is complete
+ * @param clicked String - value of the button clicked (only used internally)
+ * @param msg jQuery - The state message body (only used internally)
+ * @param forvals Object - key/value pairs of all form field names and values (only used internally)
+ * @return jQuery - the newly active state
+ */
+ $.prompt.close = function(callCallback, clicked, msg, formvals){
+ if($.prompt.timeout){
+ clearTimeout($.prompt.timeout);
+ $.prompt.timeout = false;
+ }
+
+ $.prompt.jqib.fadeOut('fast',function(){
+
+ if(callCallback) {
+ $.prompt.jqib.trigger('impromptu:close', [clicked,msg,formvals]);
+ }
+ $.prompt.jqib.remove();
+
+ $(window).off('resize',$.prompt.position);
+ });
+ };
+
+ /**
+ * Enable using $('.selector').prompt({});
+ * This will grab the html within the prompt as the prompt message
+ */
+ $.fn.prompt = function(options){
+ if(options === undefined){
+ options = {};
+ }
+ if(options.withDataAndEvents === undefined){
+ options.withDataAndEvents = false;
+ }
+
+ $.prompt($(this).clone(options.withDataAndEvents).html(),options);
+ };
+
+})(jQuery);
diff --git a/dist/jquery-impromptu.min.css b/dist/jquery-impromptu.min.css new file mode 100644 index 0000000..0e420bd --- /dev/null +++ b/dist/jquery-impromptu.min.css @@ -0,0 +1,3 @@ +/*! jQuery-Impromptu - v5.2.0 - 2013-11-15 +* http://trentrichardson.com/Impromptu +* Copyright (c) 2013 Trent Richardson; Licensed MIT */.jqifade{position:absolute;background-color:#777}div.jqi{width:400px;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;position:absolute;background-color:#fff;font-size:11px;text-align:left;border:solid 1px #eee;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;padding:7px}div.jqi .jqicontainer{}div.jqi .jqiclose{position:absolute;top:4px;right:-2px;width:18px;cursor:default;color:#bbb;font-weight:700}div.jqi .jqistate{background-color:#fff}div.jqi .jqititle{padding:5px 10px;font-size:16px;line-height:20px;border-bottom:solid 1px #eee}div.jqi .jqimessage{padding:10px;line-height:20px;color:#444}div.jqi .jqibuttons{text-align:right;margin:0 -7px -7px -7px;border-top:solid 1px #e4e4e4;background-color:#f4f4f4;border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;-webkit-border-radius:0 0 6px 6px}div.jqi .jqibuttons button{margin:0;padding:15px 20px;background-color:transparent;font-weight:400;border:0;border-left:solid 1px #e4e4e4;color:#777;font-weight:700;font-size:12px}div.jqi .jqibuttons button.jqidefaultbutton{color:#489afe}div.jqi .jqibuttons button:hover,div.jqi .jqibuttons button:focus{color:#287ade;outline:0}.jqiwarning .jqi .jqibuttons{background-color:#b95656}div.jqi .jqiparentstate::after{background-color:#777;opacity:.6;filter:alpha(opacity=60);content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px}div.jqi .jqisubstate{position:absolute;top:0;left:20%;width:60%;padding:7px;border:solid 1px #eee;border-top:0;border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;-webkit-border-radius:0 0 6px 6px}div.jqi .jqisubstate .jqibuttons button{padding:10px 18px}.jqi .jqiarrow{position:absolute;height:0;width:0;line-height:0;font-size:0;border:solid 10px transparent}.jqi .jqiarrowtl{left:10px;top:-20px;border-bottom-color:#fff}.jqi .jqiarrowtc{left:50%;top:-20px;border-bottom-color:#fff;margin-left:-10px}.jqi .jqiarrowtr{right:10px;top:-20px;border-bottom-color:#fff}.jqi .jqiarrowbl{left:10px;bottom:-20px;border-top-color:#fff}.jqi .jqiarrowbc{left:50%;bottom:-20px;border-top-color:#fff;margin-left:-10px}.jqi .jqiarrowbr{right:10px;bottom:-20px;border-top-color:#fff}.jqi .jqiarrowlt{left:-20px;top:10px;border-right-color:#fff}.jqi .jqiarrowlm{left:-20px;top:50%;border-right-color:#fff;margin-top:-10px}.jqi .jqiarrowlb{left:-20px;bottom:10px;border-right-color:#fff}.jqi .jqiarrowrt{right:-20px;top:10px;border-left-color:#fff}.jqi .jqiarrowrm{right:-20px;top:50%;border-left-color:#fff;margin-top:-10px}.jqi .jqiarrowrb{right:-20px;bottom:10px;border-left-color:#fff}
\ No newline at end of file diff --git a/dist/jquery-impromptu.min.js b/dist/jquery-impromptu.min.js new file mode 100644 index 0000000..2801570 --- /dev/null +++ b/dist/jquery-impromptu.min.js @@ -0,0 +1,4 @@ +/*! jQuery-Impromptu - v5.2.0 - 2013-11-15 +* http://trentrichardson.com/Impromptu +* Copyright (c) 2013 Trent Richardson; Licensed MIT */ +(function(t){"use strict";t.prompt=function(e,o){void 0!==o&&void 0!==o.classes&&"string"==typeof o.classes&&(o={box:o.classes}),t.prompt.options=t.extend({},t.prompt.defaults,o),t.prompt.currentPrefix=t.prompt.options.prefix,t.prompt.timeout&&clearTimeout(t.prompt.timeout),t.prompt.timeout=!1;var p=t.prompt.options,r=t(document.body),i=t(window),n='<div class="'+t.prompt.options.prefix+"box "+p.classes.box+'">';n+=p.useiframe&&t("object, applet").length>0?'<iframe src="javascript:false;" style="display:block;position:absolute;z-index:-1;" class="'+p.prefix+"fade "+p.classes.fade+'"></iframe>':'<div class="'+p.prefix+"fade "+p.classes.fade+'"></div>',n+='<div class="'+p.prefix+" "+p.classes.prompt+'">'+'<form action="javascript:false;" onsubmit="return false;" class="'+p.prefix+'form">'+'<div class="'+p.prefix+"close "+p.classes.close+'">'+p.closeText+"</div>"+'<div class="'+p.prefix+'states"></div>'+"</form>"+"</div>"+"</div>",t.prompt.jqib=t(n).appendTo(r),t.prompt.jqi=t.prompt.jqib.children("."+p.prefix),t.prompt.jqif=t.prompt.jqib.children("."+p.prefix+"fade"),e.constructor===String&&(e={state0:{title:p.title,html:e,buttons:p.buttons,position:p.position,focus:p.focus,submit:p.submit}}),t.prompt.options.states={};var s,a;for(s in e)a=t.extend({},t.prompt.defaults.state,{name:s},e[s]),t.prompt.addState(a.name,a),""===t.prompt.currentStateName&&(t.prompt.currentStateName=a.name);t.prompt.jqi.on("click","."+p.prefix+"buttons button",function(){var e=t(this),o=e.parents("."+p.prefix+"state"),r=t.prompt.options.states[o.data("jqi-name")],i=o.children("."+p.prefix+"message"),n=r.buttons[e.text()]||r.buttons[e.html()],s={};if(void 0===n)for(var a in r.buttons)(r.buttons[a].title===e.text()||r.buttons[a].title===e.html())&&(n=r.buttons[a].value);t.each(t.prompt.jqi.children("form").serializeArray(),function(t,e){void 0===s[e.name]?s[e.name]=e.value:typeof s[e.name]===Array||"object"==typeof s[e.name]?s[e.name].push(e.value):s[e.name]=[s[e.name],e.value]});var m=new t.Event("impromptu:submit");m.stateName=r.name,m.state=o,o.trigger(m,[n,i,s]),m.isDefaultPrevented()||t.prompt.close(!0,n,i,s)});var m=function(){if(p.persistent){var e=(""+p.top).indexOf("%")>=0?i.height()*(parseInt(p.top,10)/100):parseInt(p.top,10),o=parseInt(t.prompt.jqi.css("top").replace("px",""),10)-e;t("html,body").animate({scrollTop:o},"fast",function(){var e=0;t.prompt.jqib.addClass(p.prefix+"warning");var o=setInterval(function(){t.prompt.jqib.toggleClass(p.prefix+"warning"),e++>1&&(clearInterval(o),t.prompt.jqib.removeClass(p.prefix+"warning"))},100)})}else t.prompt.close(!0)},u=function(e){var o=window.event?event.keyCode:e.keyCode;if(27===o&&m(),13===o){var r=t.prompt.getCurrentState().find("."+p.prefix+"defaultbutton"),i=t(e.target);i.is("textarea,."+p.prefix+"button")===!1&&r.length>0&&(e.preventDefault(),r.click())}if(9===o){var n=t("input,select,textarea,button",t.prompt.getCurrentState()),s=!e.shiftKey&&e.target===n[n.length-1],a=e.shiftKey&&e.target===n[0];if(s||a)return setTimeout(function(){if(n){var t=n[a===!0?n.length-1:0];t&&t.focus()}},10),!1}};return t.prompt.position(),t.prompt.style(),t.prompt.jqif.click(m),i.resize({animate:!1},t.prompt.position),t.prompt.jqi.find("."+p.prefix+"close").click(t.prompt.close),t.prompt.jqib.on("keydown",u).on("impromptu:loaded",p.loaded).on("impromptu:close",p.close).on("impromptu:statechanging",p.statechanging).on("impromptu:statechanged",p.statechanged),t.prompt.jqif[p.show](p.overlayspeed),t.prompt.jqi[p.show](p.promptspeed,function(){var e=t.prompt.jqi.find("."+p.prefix+"states ."+p.prefix+"state").eq(0);t.prompt.goToState(e.data("jqi-name")),t.prompt.jqib.trigger("impromptu:loaded")}),p.timeout>0&&(t.prompt.timeout=setTimeout(function(){t.prompt.close(!0)},p.timeout)),t.prompt.jqib},t.prompt.defaults={prefix:"jqi",classes:{box:"",fade:"",prompt:"",close:"",title:"",message:"",buttons:"",button:"",defaultButton:""},title:"",closeText:"×",buttons:{Ok:!0},loaded:function(){},submit:function(){},close:function(){},statechanging:function(){},statechanged:function(){},opacity:.6,zIndex:999,overlayspeed:"slow",promptspeed:"fast",show:"fadeIn",focus:0,defaultButton:0,useiframe:!1,top:"15%",position:{container:null,x:null,y:null,arrow:null,width:null},persistent:!0,timeout:0,states:{},state:{name:null,title:"",html:"",buttons:{Ok:!0},focus:0,defaultButton:0,position:{container:null,x:null,y:null,arrow:null,width:null},submit:function(){return!0}}},t.prompt.currentPrefix=t.prompt.defaults.prefix,t.prompt.currentStateName="",t.prompt.setDefaults=function(e){t.prompt.defaults=t.extend({},t.prompt.defaults,e)},t.prompt.setStateDefaults=function(e){t.prompt.defaults.state=t.extend({},t.prompt.defaults.state,e)},t.prompt.position=function(e){var o=t.fx.off,p=t.prompt.getCurrentState(),r=t.prompt.options.states[p.data("jqi-name")],i=r?r.position:void 0,n=t(window),s=document.body.scrollHeight,a=t(window).height(),m=(t(document).height(),s>a?s:a),u=parseInt(n.scrollTop(),10)+((""+t.prompt.options.top).indexOf("%")>=0?a*(parseInt(t.prompt.options.top,10)/100):parseInt(t.prompt.options.top,10));if(void 0!==e&&e.data.animate===!1&&(t.fx.off=!0),t.prompt.jqib.css({position:"absolute",height:m,width:"100%",top:0,left:0,right:0,bottom:0}),t.prompt.jqif.css({position:"fixed",height:m,width:"100%",top:0,left:0,right:0,bottom:0}),i&&i.container){var f=t(i.container).offset();t.isPlainObject(f)&&void 0!==f.top&&(t.prompt.jqi.css({position:"absolute"}),t.prompt.jqi.animate({top:f.top+i.y,left:f.left+i.x,marginLeft:0,width:void 0!==i.width?i.width:null}),u=f.top+i.y-((""+t.prompt.options.top).indexOf("%")>=0?a*(parseInt(t.prompt.options.top,10)/100):parseInt(t.prompt.options.top,10)),t("html,body").animate({scrollTop:u},"slow","swing",function(){}))}else i&&i.width?(t.prompt.jqi.css({position:"absolute",left:"50%"}),t.prompt.jqi.animate({top:i.y||u,left:i.x||"50%",marginLeft:-1*(i.width/2),width:i.width})):t.prompt.jqi.css({position:"absolute",top:u,left:"50%",marginLeft:-1*(t.prompt.jqi.outerWidth(!1)/2)});void 0!==e&&e.data.animate===!1&&(t.fx.off=o)},t.prompt.style=function(){t.prompt.jqif.css({zIndex:t.prompt.options.zIndex,display:"none",opacity:t.prompt.options.opacity}),t.prompt.jqi.css({zIndex:t.prompt.options.zIndex+1,display:"none"}),t.prompt.jqib.css({zIndex:t.prompt.options.zIndex})},t.prompt.get=function(){return t("."+t.prompt.currentPrefix)},t.prompt.addState=function(e,o,p){var r,i,n,s="",a=null,m="",u="",f=t.prompt.options,l=t("."+t.prompt.currentPrefix+"states"),c=0;o=t.extend({},t.prompt.defaults.state,{name:e},o),null!==o.position.arrow&&(m='<div class="'+f.prefix+"arrow "+f.prefix+"arrow"+o.position.arrow+'"></div>'),o.title&&""!==o.title&&(u='<div class="lead '+f.prefix+"title "+f.classes.title+'">'+o.title+"</div>"),s+='<div id="'+f.prefix+"state_"+e+'" class="'+f.prefix+'state" data-jqi-name="'+e+'" style="display:none;">'+m+u+'<div class="'+f.prefix+"message "+f.classes.message+'">'+o.html+"</div>"+'<div class="'+f.prefix+"buttons "+f.classes.buttons+'"'+(t.isEmptyObject(o.buttons)?'style="display:none;"':"")+">";for(i in o.buttons)n=o.buttons[i],r=o.focus===c||isNaN(o.focus)&&o.defaultButton===c?t.prompt.currentPrefix+"defaultbutton "+f.classes.defaultButton:"","object"==typeof n?(s+='<button class="'+f.classes.button+" "+t.prompt.currentPrefix+"button "+r,n.classes!==void 0&&(s+=" "+(t.isArray(n.classes)?n.classes.join(" "):n.classes)+" "),s+='" name="'+f.prefix+"_"+e+"_button"+n.title.replace(/[^a-z0-9]+/gi,"")+'" id="'+f.prefix+"_"+e+"_button"+n.title.replace(/[^a-z0-9]+/gi,"")+'" value="'+n.value+'">'+n.title+"</button>"):s+='<button class="'+t.prompt.currentPrefix+"button "+f.classes.button+" "+r+'" name="'+f.prefix+"_"+e+"_button"+i+'" id="'+f.prefix+"_"+e+"_button"+i+'" value="'+n+'">'+i+"</button>",c++;return s+="</div></div>",a=t(s),a.on("impromptu:submit",o.submit),void 0!==p?l.find("#"+t.prompt.currentPrefix+"state_"+p).after(a):l.append(a),t.prompt.options.states[e]=o,a},t.prompt.removeState=function(e){var o=t.prompt.getState(e),p=function(){o.remove()};return 0===o.length?!1:(o.is(":visible")?o.next().length>0?t.prompt.nextState(p):t.prompt.prevState(p):o.slideUp("slow",p),!0)},t.prompt.getState=function(e){return t("#"+t.prompt.currentPrefix+"state_"+e)},t.prompt.getStateContent=function(e){return t.prompt.getState(e)},t.prompt.getCurrentState=function(){return t.prompt.getState(t.prompt.getCurrentStateName())},t.prompt.getCurrentStateName=function(){return t.prompt.currentStateName},t.prompt.goToState=function(e,o,p){var r=(t.prompt.get(),t.prompt.options),i=t.prompt.getState(e),n=r.states[i.data("jqi-name")],s=new t.Event("impromptu:statechanging");return"function"==typeof o&&(p=o,o=!1),t.prompt.jqib.trigger(s,[t.prompt.getCurrentStateName(),e]),!s.isDefaultPrevented()&&i.length>0&&(t.prompt.jqi.find("."+t.prompt.currentPrefix+"parentstate").removeClass(t.prompt.currentPrefix+"parentstate"),o?(t.prompt.jqi.find("."+t.prompt.currentPrefix+"substate").not(i).slideUp(r.promptspeed).removeClass("."+t.prompt.currentPrefix+"substate").find("."+t.prompt.currentPrefix+"arrow").hide(),t.prompt.jqi.find("."+t.prompt.currentPrefix+"state:visible").addClass(t.prompt.currentPrefix+"parentstate"),i.addClass(t.prompt.currentPrefix+"substate")):t.prompt.jqi.find("."+t.prompt.currentPrefix+"state").not(i).slideUp(r.promptspeed).find("."+t.prompt.currentPrefix+"arrow").hide(),t.prompt.currentStateName=n.name,i.slideDown(r.promptspeed,function(){var o=t(this);"string"==typeof n.focus?o.find(n.focus).eq(0).focus():o.find("."+t.prompt.currentPrefix+"defaultbutton").focus(),o.find("."+t.prompt.currentPrefix+"arrow").show(r.promptspeed),"function"==typeof p&&t.prompt.jqib.on("impromptu:statechanged",p),t.prompt.jqib.trigger("impromptu:statechanged",[e]),"function"==typeof p&&t.prompt.jqib.off("impromptu:statechanged",p)}),o||t.prompt.position()),i},t.prompt.nextState=function(e){var o=t("#"+t.prompt.currentPrefix+"state_"+t.prompt.getCurrentStateName()).next();return t.prompt.goToState(o.attr("id").replace(t.prompt.currentPrefix+"state_",""),e)},t.prompt.prevState=function(e){var o=t("#"+t.prompt.currentPrefix+"state_"+t.prompt.getCurrentStateName()).prev();t.prompt.goToState(o.attr("id").replace(t.prompt.currentPrefix+"state_",""),e)},t.prompt.close=function(e,o,p,r){t.prompt.timeout&&(clearTimeout(t.prompt.timeout),t.prompt.timeout=!1),t.prompt.jqib.fadeOut("fast",function(){e&&t.prompt.jqib.trigger("impromptu:close",[o,p,r]),t.prompt.jqib.remove(),t(window).off("resize",t.prompt.position)})},t.fn.prompt=function(e){void 0===e&&(e={}),void 0===e.withDataAndEvents&&(e.withDataAndEvents=!1),t.prompt(t(this).clone(e.withDataAndEvents).html(),e)}})(jQuery);
\ No newline at end of file diff --git a/themes/base.css b/dist/themes/base.css index ec4b0e9..ec4b0e9 100644 --- a/themes/base.css +++ b/dist/themes/base.css diff --git a/themes/classic-impromptu.css b/dist/themes/classic-impromptu.css index 7a4d389..7a4d389 100644 --- a/themes/classic-impromptu.css +++ b/dist/themes/classic-impromptu.css diff --git a/themes/clean-blue.css b/dist/themes/clean-blue.css index e73dce0..e73dce0 100644 --- a/themes/clean-blue.css +++ b/dist/themes/clean-blue.css diff --git a/themes/ext-blue.css b/dist/themes/ext-blue.css index cd1224d..cd1224d 100644 --- a/themes/ext-blue.css +++ b/dist/themes/ext-blue.css diff --git a/themes/smooth.css b/dist/themes/smooth.css index 687fe92..687fe92 100644 --- a/themes/smooth.css +++ b/dist/themes/smooth.css diff --git a/themes/zoo.css b/dist/themes/zoo.css index ac9c98e..ac9c98e 100644 --- a/themes/zoo.css +++ b/dist/themes/zoo.css diff --git a/jquery-impromptu.jquery.json b/jquery-impromptu.jquery.json index d519496..d988bdf 100644 --- a/jquery-impromptu.jquery.json +++ b/jquery-impromptu.jquery.json @@ -2,8 +2,8 @@ "name": "jquery-impromptu", "title": "jQuery-Impromptu", "description": "An extension to help provide a more pleasant way to spontaneously prompt a user for input.", - "version": "5.1.1", - "modified": "2013-11-10", + "version": "5.2.0", + "modified": "2013-11-15", "homepage": "http://trentrichardson.com/Impromptu", "author": { "name": "Trent Richardson", @@ -18,7 +18,7 @@ "licenses": [ { "type": "MIT", - "url": "thttp://trentrichardson.com/examples/jQuery-Impromptu/blob/master/MIT-LICENSE.txt" + "url": "http://trentrichardson.com/examples/jQuery-Impromptu/blob/master/MIT-LICENSE.txt" } ], "dependencies": { diff --git a/jquery-impromptu.min.css b/jquery-impromptu.min.css deleted file mode 100644 index 3b311e9..0000000 --- a/jquery-impromptu.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! jQuery-Impromptu - v5.1.1 - 2013-11-10 -* http://trentrichardson.com/Impromptu -* Copyright (c) 2013 Trent Richardson; Licensed MIT */ - -.jqifade{position:absolute;background-color:#777}div.jqi{width:400px;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;position:absolute;background-color:#fff;font-size:11px;text-align:left;border:solid 1px #eee;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;padding:7px}div.jqi .jqicontainer{}div.jqi .jqiclose{position:absolute;top:4px;right:-2px;width:18px;cursor:default;color:#bbb;font-weight:700}div.jqi .jqistate{background-color:#fff}div.jqi .jqititle{padding:5px 10px;font-size:16px;line-height:20px;border-bottom:solid 1px #eee}div.jqi .jqimessage{padding:10px;line-height:20px;color:#444}div.jqi .jqibuttons{text-align:right;margin:0 -7px -7px -7px;border-top:solid 1px #e4e4e4;background-color:#f4f4f4;border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;-webkit-border-radius:0 0 6px 6px}div.jqi .jqibuttons button{margin:0;padding:15px 20px;background-color:transparent;font-weight:400;border:0;border-left:solid 1px #e4e4e4;color:#777;font-weight:700;font-size:12px}div.jqi .jqibuttons button.jqidefaultbutton{color:#489afe}div.jqi .jqibuttons button:hover,div.jqi .jqibuttons button:focus{color:#287ade;outline:0}.jqiwarning .jqi .jqibuttons{background-color:#b95656}div.jqi .jqiparentstate::after{background-color:#777;opacity:.6;filter:alpha(opacity=60);content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px}div.jqi .jqisubstate{position:absolute;top:0;left:20%;width:60%;padding:7px;border:solid 1px #eee;border-top:0;border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;-webkit-border-radius:0 0 6px 6px}div.jqi .jqisubstate .jqibuttons button{padding:10px 18px}.jqi .jqiarrow{position:absolute;height:0;width:0;line-height:0;font-size:0;border:solid 10px transparent}.jqi .jqiarrowtl{left:10px;top:-20px;border-bottom-color:#fff}.jqi .jqiarrowtc{left:50%;top:-20px;border-bottom-color:#fff;margin-left:-10px}.jqi .jqiarrowtr{right:10px;top:-20px;border-bottom-color:#fff}.jqi .jqiarrowbl{left:10px;bottom:-20px;border-top-color:#fff}.jqi .jqiarrowbc{left:50%;bottom:-20px;border-top-color:#fff;margin-left:-10px}.jqi .jqiarrowbr{right:10px;bottom:-20px;border-top-color:#fff}.jqi .jqiarrowlt{left:-20px;top:10px;border-right-color:#fff}.jqi .jqiarrowlm{left:-20px;top:50%;border-right-color:#fff;margin-top:-10px}.jqi .jqiarrowlb{left:-20px;bottom:10px;border-right-color:#fff}.jqi .jqiarrowrt{right:-20px;top:10px;border-left-color:#fff}.jqi .jqiarrowrm{right:-20px;top:50%;border-left-color:#fff;margin-top:-10px}.jqi .jqiarrowrb{right:-20px;bottom:10px;border-left-color:#fff}
\ No newline at end of file diff --git a/jquery-impromptu.min.js b/jquery-impromptu.min.js deleted file mode 100644 index 6332459..0000000 --- a/jquery-impromptu.min.js +++ /dev/null @@ -1,4 +0,0 @@ -/*! jQuery-Impromptu - v5.1.1 - 2013-11-10 -* http://trentrichardson.com/Impromptu -* Copyright (c) 2013 Trent Richardson; Licensed MIT */ -(function(t){"use strict";t.prompt=function(e,o){void 0!==o&&void 0!==o.classes&&"string"==typeof o.classes&&(o={box:o.classes}),t.prompt.options=t.extend({},t.prompt.defaults,o),t.prompt.currentPrefix=t.prompt.options.prefix,t.prompt.timeout&&clearTimeout(t.prompt.timeout),t.prompt.timeout=!1;var p=t.prompt.options,r=t(document.body),i=t(window),n='<div class="'+t.prompt.options.prefix+"box "+p.classes.box+'">';n+=p.useiframe&&t("object, applet").length>0?'<iframe src="javascript:false;" style="display:block;position:absolute;z-index:-1;" class="'+p.prefix+"fade "+p.classes.fade+'"></iframe>':'<div class="'+p.prefix+"fade "+p.classes.fade+'"></div>',n+='<div class="'+p.prefix+" "+p.classes.prompt+'">'+'<form action="javascript:false;" onsubmit="return false;" class="'+p.prefix+'form">'+'<div class="'+p.prefix+"close "+p.classes.close+'">'+p.closeText+"</div>"+'<div class="'+p.prefix+'states"></div>'+"</form>"+"</div>"+"</div>",t.prompt.jqib=t(n).appendTo(r),t.prompt.jqi=t.prompt.jqib.children("."+p.prefix),t.prompt.jqif=t.prompt.jqib.children("."+p.prefix+"fade"),e.constructor===String&&(e={state0:{title:p.title,html:e,buttons:p.buttons,position:p.position,focus:p.focus,submit:p.submit}}),t.prompt.options.states={};var s,a;for(s in e)a=t.extend({},t.prompt.defaults.state,{name:s},e[s]),t.prompt.addState(a.name,a),""===t.prompt.currentStateName&&(t.prompt.currentStateName=a.name);var m=t.prompt.jqi.find("."+p.prefix+"states ."+p.prefix+"state").eq(0);t.prompt.goToState(m.data("jqi-name")),t.prompt.jqi.on("click","."+p.prefix+"buttons button",function(){var e=t(this),o=e.parents("."+p.prefix+"state"),r=t.prompt.options.states[o.data("jqi-name")],i=o.children("."+p.prefix+"message"),n=r.buttons[e.text()]||r.buttons[e.html()],s={};if(void 0===n)for(var a in r.buttons)(r.buttons[a].title===e.text()||r.buttons[a].title===e.html())&&(n=r.buttons[a].value);t.each(t.prompt.jqi.children("form").serializeArray(),function(t,e){void 0===s[e.name]?s[e.name]=e.value:typeof s[e.name]===Array||"object"==typeof s[e.name]?s[e.name].push(e.value):s[e.name]=[s[e.name],e.value]});var m=new t.Event("impromptu:submit");m.stateName=r.name,m.state=o,o.trigger(m,[n,i,s]),m.isDefaultPrevented()||t.prompt.close(!0,n,i,s)});var u=function(){if(p.persistent){var e=(""+p.top).indexOf("%")>=0?i.height()*(parseInt(p.top,10)/100):parseInt(p.top,10),o=parseInt(t.prompt.jqi.css("top").replace("px",""),10)-e;t("html,body").animate({scrollTop:o},"fast",function(){var e=0;t.prompt.jqib.addClass(p.prefix+"warning");var o=setInterval(function(){t.prompt.jqib.toggleClass(p.prefix+"warning"),e++>1&&(clearInterval(o),t.prompt.jqib.removeClass(p.prefix+"warning"))},100)})}else t.prompt.close(!0)},f=function(e){var o=window.event?event.keyCode:e.keyCode;if(27===o&&u(),9===o){var p=t("input,select,textarea,button",t.prompt.getCurrentState()),r=!e.shiftKey&&e.target===p[p.length-1],i=e.shiftKey&&e.target===p[0];if(r||i)return setTimeout(function(){if(p){var t=p[i===!0?p.length-1:0];t&&t.focus()}},10),!1}};return t.prompt.position(),t.prompt.style(),t.prompt.jqif.click(u),i.resize({animate:!1},t.prompt.position),t.prompt.jqi.find("."+p.prefix+"close").click(t.prompt.close),t.prompt.jqib.on("keydown",f).on("impromptu:loaded",p.loaded).on("impromptu:close",p.close).on("impromptu:statechanging",p.statechanging).on("impromptu:statechanged",p.statechanged),t.prompt.jqif[p.show](p.overlayspeed),t.prompt.jqi[p.show](p.promptspeed,function(){t.prompt.jqib.trigger("impromptu:loaded")}),p.timeout>0&&(t.prompt.timeout=setTimeout(function(){t.prompt.close(!0)},p.timeout)),t.prompt.jqib},t.prompt.defaults={prefix:"jqi",classes:{box:"",fade:"",prompt:"",close:"",title:"",message:"",buttons:"",button:"",defaultButton:""},title:"",closeText:"×",buttons:{Ok:!0},loaded:function(){},submit:function(){},close:function(){},statechanging:function(){},statechanged:function(){},opacity:.6,zIndex:999,overlayspeed:"slow",promptspeed:"fast",show:"fadeIn",focus:0,defaultButton:0,useiframe:!1,top:"15%",position:{container:null,x:null,y:null,arrow:null,width:null},persistent:!0,timeout:0,states:{},state:{name:null,title:"",html:"",buttons:{Ok:!0},focus:0,defaultButton:0,position:{container:null,x:null,y:null,arrow:null,width:null},submit:function(){return!0}}},t.prompt.currentPrefix=t.prompt.defaults.prefix,t.prompt.currentStateName="",t.prompt.setDefaults=function(e){t.prompt.defaults=t.extend({},t.prompt.defaults,e)},t.prompt.setStateDefaults=function(e){t.prompt.defaults.state=t.extend({},t.prompt.defaults.state,e)},t.prompt.position=function(e){var o=t.fx.off,p=t.prompt.getCurrentState(),r=t.prompt.options.states[p.data("jqi-name")],i=r?r.position:void 0,n=t(window),s=document.body.scrollHeight,a=t(window).height(),m=(t(document).height(),s>a?s:a),u=parseInt(n.scrollTop(),10)+((""+t.prompt.options.top).indexOf("%")>=0?a*(parseInt(t.prompt.options.top,10)/100):parseInt(t.prompt.options.top,10));if(void 0!==e&&e.data.animate===!1&&(t.fx.off=!0),t.prompt.jqib.css({position:"absolute",height:m,width:"100%",top:0,left:0,right:0,bottom:0}),t.prompt.jqif.css({position:"fixed",height:m,width:"100%",top:0,left:0,right:0,bottom:0}),i&&i.container){var f=t(i.container).offset();t.isPlainObject(f)&&void 0!==f.top&&(t.prompt.jqi.css({position:"absolute"}),t.prompt.jqi.animate({top:f.top+i.y,left:f.left+i.x,marginLeft:0,width:void 0!==i.width?i.width:null}),u=f.top+i.y-((""+t.prompt.options.top).indexOf("%")>=0?a*(parseInt(t.prompt.options.top,10)/100):parseInt(t.prompt.options.top,10)),t("html,body").animate({scrollTop:u},"slow","swing",function(){}))}else i&&i.width?(t.prompt.jqi.css({position:"absolute",left:"50%"}),t.prompt.jqi.animate({top:i.y||u,left:i.x||"50%",marginLeft:-1*(i.width/2),width:i.width})):t.prompt.jqi.css({position:"absolute",top:u,left:"50%",marginLeft:-1*(t.prompt.jqi.outerWidth(!1)/2)});void 0!==e&&e.data.animate===!1&&(t.fx.off=o)},t.prompt.style=function(){t.prompt.jqif.css({zIndex:t.prompt.options.zIndex,display:"none",opacity:t.prompt.options.opacity}),t.prompt.jqi.css({zIndex:t.prompt.options.zIndex+1,display:"none"}),t.prompt.jqib.css({zIndex:t.prompt.options.zIndex})},t.prompt.get=function(){return t("."+t.prompt.currentPrefix)},t.prompt.addState=function(e,o,p){var r,i,n,s="",a=null,m="",u="",f=t.prompt.options,l=t("."+t.prompt.currentPrefix+"states"),c=0;o=t.extend({},t.prompt.defaults.state,{name:e},o),null!==o.position.arrow&&(m='<div class="'+f.prefix+"arrow "+f.prefix+"arrow"+o.position.arrow+'"></div>'),o.title&&""!==o.title&&(u='<div class="lead '+f.prefix+"title "+f.classes.title+'">'+o.title+"</div>"),s+='<div id="'+f.prefix+"state_"+e+'" class="'+f.prefix+'state" data-jqi-name="'+e+'" style="display:none;">'+m+u+'<div class="'+f.prefix+"message "+f.classes.message+'">'+o.html+"</div>"+'<div class="'+f.prefix+"buttons "+f.classes.buttons+'"'+(t.isEmptyObject(o.buttons)?'style="display:none;"':"")+">";for(i in o.buttons)n=o.buttons[i],r=o.focus===c||isNaN(o.focus)&&o.defaultButton===c?t.prompt.currentPrefix+"defaultbutton "+f.classes.defaultButton:"","object"==typeof n?(s+='<button class="'+f.classes.button+" "+r,n.classes!==void 0&&(s+=" "+(t.isArray(n.classes)?n.classes.join(" "):n.classes)+" "),s+='" name="'+f.prefix+"_"+e+"_button"+n.title.replace(/[^a-z0-9]+/gi,"")+'" id="'+f.prefix+"_"+e+"_button"+n.title.replace(/[^a-z0-9]+/gi,"")+'" value="'+n.value+'">'+n.title+"</button>"):s+='<button class="'+f.classes.button+" "+r+'" name="'+f.prefix+"_"+e+"_button"+i+'" id="'+f.prefix+"_"+e+"_button"+i+'" value="'+n+'">'+i+"</button>",c++;return s+="</div></div>",a=t(s),a.on("impromptu:submit",o.submit),void 0!==p?l.find("#"+t.prompt.currentPrefix+"state_"+p).after(a):l.append(a),t.prompt.options.states[e]=o,a},t.prompt.removeState=function(e){var o=t.prompt.getState(e),p=function(){o.remove()};return 0===o.length?!1:(o.is(":visible")?o.next().length>0?t.prompt.nextState(p):t.prompt.prevState(p):o.slideUp("slow",p),!0)},t.prompt.getState=function(e){return t("#"+t.prompt.currentPrefix+"state_"+e)},t.prompt.getStateContent=function(e){return t.prompt.getState(e)},t.prompt.getCurrentState=function(){return t.prompt.getState(t.prompt.getCurrentStateName())},t.prompt.getCurrentStateName=function(){return t.prompt.currentStateName},t.prompt.goToState=function(e,o,p){var r=(t.prompt.get(),t.prompt.options),i=t.prompt.getState(e),n=r.states[i.data("jqi-name")],s=new t.Event("impromptu:statechanging");return"function"==typeof o&&(p=o,o=!1),t.prompt.jqib.trigger(s,[t.prompt.getCurrentStateName(),e]),!s.isDefaultPrevented()&&i.length>0&&(t.prompt.jqi.find("."+t.prompt.currentPrefix+"parentstate").removeClass(t.prompt.currentPrefix+"parentstate"),o?(t.prompt.jqi.find("."+t.prompt.currentPrefix+"substate").not(i).slideUp(r.promptspeed).removeClass("."+t.prompt.currentPrefix+"substate").find("."+t.prompt.currentPrefix+"arrow").hide(),t.prompt.jqi.find("."+t.prompt.currentPrefix+"state:visible").addClass(t.prompt.currentPrefix+"parentstate"),i.addClass(t.prompt.currentPrefix+"substate")):t.prompt.jqi.find("."+t.prompt.currentPrefix+"state").not(i).slideUp(r.promptspeed).find("."+t.prompt.currentPrefix+"arrow").hide(),t.prompt.currentStateName=n.name,i.slideDown(r.promptspeed,function(){var o=t(this);"string"==typeof n.focus?o.find(n.focus).eq(0).focus():o.find("."+t.prompt.currentPrefix+"defaultbutton").focus(),o.find("."+t.prompt.currentPrefix+"arrow").show(r.promptspeed),"function"==typeof p&&t.prompt.jqib.on("impromptu:statechanged",p),t.prompt.jqib.trigger("impromptu:statechanged",[e]),"function"==typeof p&&t.prompt.jqib.off("impromptu:statechanged",p)}),o||t.prompt.position()),i},t.prompt.nextState=function(e){var o=t("#"+t.prompt.currentPrefix+"state_"+t.prompt.getCurrentStateName()).next();return t.prompt.goToState(o.attr("id").replace(t.prompt.currentPrefix+"state_",""),e)},t.prompt.prevState=function(e){var o=t("#"+t.prompt.currentPrefix+"state_"+t.prompt.getCurrentStateName()).prev();t.prompt.goToState(o.attr("id").replace(t.prompt.currentPrefix+"state_",""),e)},t.prompt.close=function(e,o,p,r){t.prompt.timeout&&(clearTimeout(t.prompt.timeout),t.prompt.timeout=!1),t.prompt.jqib.fadeOut("fast",function(){e&&t.prompt.jqib.trigger("impromptu:close",[o,p,r]),t.prompt.jqib.remove(),t(window).off("resize",t.prompt.position)})},t.fn.prompt=function(e){void 0===e&&(e={}),void 0===e.withDataAndEvents&&(e.withDataAndEvents=!1),t.prompt(t(this).clone(e.withDataAndEvents).html(),e)}})(jQuery);
\ No newline at end of file diff --git a/package.json b/package.json index a4a7ecc..0a8c945 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,10 @@ "grunt-contrib-jshint": "~0.1.1", "grunt-contrib-uglify": "~0.1.1", "grunt-contrib-watch": "~0.2.0", + "grunt-contrib-clean": "~0.4.0", + "grunt-contrib-copy": "~0.4.0", "grunt-contrib-cssmin": "~0.6.0", + "grunt-replace": "~0.4.4", "grunt": "~0.4.1" } }
\ No newline at end of file diff --git a/src/.jshintrc b/src/.jshintrc new file mode 100644 index 0000000..a27600e --- /dev/null +++ b/src/.jshintrc @@ -0,0 +1,16 @@ +{ + "curly": true, + "eqeqeq": true, + "immed": true, + "latedef": true, + "newcap": true, + "noarg": true, + "sub": true, + "undef": true, + "unused": false, + "loopfunc": true, + "boss": true, + "eqnull": true, + "browser": true, + "predef": ["jQuery"] +} diff --git a/src/demos/loan_calculator.html b/src/demos/loan_calculator.html new file mode 100644 index 0000000..9f85378 --- /dev/null +++ b/src/demos/loan_calculator.html @@ -0,0 +1,104 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>jQuery Impromptu States Example - Loan Calculator</title> + + <link rel="stylesheet" media="all" type="text/css" href="../jquery-impromptu.css" /> + + <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> + <script type="text/javascript" src="../jquery-impromptu.js"></script> + + <style type="text/css"> + .jqi .errorBlock{ background-color: #FFC6A5; border: solid 1px #ff0000; color: #ff0000; padding: 5px 10px; font-weight: bold; } + .jqi .field{ margin: 4px 0; font-size: 11px; } + .jqi .field label{ font-weight: bold; display: block; width: 100px; float: left; clear: left; } + .jqi .field input { border: solid 1px #777777; width: 100px; } + </style> + + <script type="text/javascript"> + function openLoanCalculatorPrompt(o){ + o = jQuery.extend({},{ amount:100000, down: 1500, years:15, rate:5 },o); + + var formstr = '<div class="field"><label for="intamount">Amount</label><input type="text" name="intamount" id="intamount" value="'+ o.amount +'" /></div>'+ + '<div class="field"><label for="intdown">Down Payment</label><input type="text" name="intdown" id="intdown" value="'+ o.down +'" /></div>'+ + '<div class="field"><label for="intyears">Years</label><input type="text" name="intyears" id="intyears" value="'+ o.years +'" /></div>'+ + '<div class="field"><label for="intrate">Rate</label><input type="text" name="intrate" id="intrate" value="'+ o.rate +'" /></div>'; + + jqistates = { + state0: { + title: 'Calculate Monthly Payment', + html: formstr, + focus: 1, + buttons: { Cancel: false, Calculate: true }, + submit: function(e, v, m, f){ + var e = ""; + m.find('.errorBlock').hide('fast',function(){ jQuery(this).remove(); }); + + if (v) { + + if(isNaN(f.intamount)) + e += "Please enter a numeric amount (No commas)<br />"; + + if(isNaN(f.intdown)) + e += "Please enter a numeric down payment (No commas)<br />"; + + if(isNaN(f.intyears)) + e += "Please enter a numeric number of years<br />"; + + if(isNaN(f.intrate)) + e += "Please enter a numeric interest rate<br />"; + + if (e == "") { + + var interest = f.intrate/100; + var years = f.intyears; + var amount = f.intamount-f.intdown; + var n = years * 12; + + if(f.intrate == 0){ + var m = amount / n; + } + else{ + var i = interest / 12; + var i_to_n = Math.pow((i + 1), n); + + var p = amount * ((i * i_to_n) / (i_to_n - 1)); + var m = Math.round(p * 100) / 100; + } + + jQuery.prompt.getStateContent('state1').find('#intmonthlypayment').text(m); + jQuery.prompt.goToState('state1',true); + + } + else{ + jQuery('<div class="errorBlock" style="display: none;">'+ e +'</div>').prependTo(m).show('slow'); + } + return false; + } + else return true; + } + }, + state1: { + html: 'Monthly Payment: $<span id="intmonthlypayment"></span>', + focus: 1, + buttons: { Back: false, Done: true }, + submit: function(e,v,m,f){ + if(v) + return true; + + jQuery.prompt.goToState('state0'); + return false; + } + } + }; + + $.prompt(jqistates); + } + </script> + </head> + + <body> + <a href="javascript:openLoanCalculatorPrompt({amount:150000, years:30, rate:5.25})">Test Impromptu Loan Calculator</a> + </body> +</html> diff --git a/src/demos/purecss.html b/src/demos/purecss.html new file mode 100644 index 0000000..c2842b6 --- /dev/null +++ b/src/demos/purecss.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + + <title>jQuery Impromptu with PureCSS</title> + + <meta name="Description" content="jQuery Impromptu theme with twitter bootstrap." /> + <meta name="Keywords" content="jquery, impromptu, prompt, twitter, bootstrap" /> + + <link rel="stylesheet" media="all" type="text/css" href="../themes/base.css" /> + <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css" /> + + <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> + <script type="text/javascript" src="../jquery-impromptu.js"></script> + + <script type="text/javascript"> + function openprompt(){ + + var temp = { + state0: { + title: 'Content Rating', + html:'<label class="radio" for="rate_content_poor"><input type="radio" name="rate_content" id="rate_content_poor" value="Poor" class="radioinput" /> Poor</label>'+ + '<label class="pure-radio" for="rate_content_ok"><input type="radio" name="rate_content" id="rate_content_ok" value="Ok" class="radioinput" /> Ok</label>'+ + '<label class="pure-radio" for="rate_content_good"><input type="radio" name="rate_content" id="rate_content_good" value="Good" class="radioinput" /> Good</label>'+ + '<label class="pure-radio" for="rate_content_excellent"><input type="radio" name="rate_content" id="rate_content_excellent" value="Excellent" class="radioinput" /> Excellent!</label>', + buttons: { Cancel: false, Next: true }, + focus: 1, + submit:function(e,v,m,f){ + if(!v) + $.prompt.close() + else $.prompt.goToState('state1');//go forward + return false; + } + }, + state1: { + title: 'Needs Improvement', + html:'<p>Check all which need improvement:</p>'+ + '<label class="pure-checkbox" for="rate_improve_colors"><input type="checkbox" name="rate_improve" id="rate_improve_colors" value="Color Scheme" class="radioinput" /> Color Scheme</label>'+ + '<label class="pure-checkbox" for="rate_improve_graphics"><input type="checkbox" name="rate_improve" id="rate_improve_graphics" value="Graphics" class="radioinput" /> Graphics</label>'+ + '<label class="pure-checkbox" for="rate_improve_readability"><input type="checkbox" name="rate_improve" id="rate_improve_readability" value="readability" class="radioinput" /> Readability</label>'+ + '<label class="pure-checkbox" for="rate_improve_content"><input type="checkbox" name="rate_improve" id="rate_improve_content" value="Content" class="radioinput" /> Content</label>'+ + '<label class="pure-checkbox" for="rate_improve_other"><input type="checkbox" name="rate_improve" id="rate_improve_other" value="Other" class="radioinput" /> Other</label>'+ + '<input type="text" class="pure-input-1" name="rate_improve_other_txt" id="rate_improve_other_txt" value="" placeholder="Other Description" />', + buttons: { Back: -1, Cancel: 0, Next: 1 }, + focus: 2, + submit:function(e,v,m,f){ + if(v==0) + $.prompt.close() + else if(v==1) + $.prompt.goToState('state2');//go forward + else if(v=-1) + $.prompt.goToState('state0');//go back + return false; + } + }, + state2: { + title: 'How did you find this site?', + html:'<select name="rate_find" id="rate_find"><option value="Search">Search</option><option value="Online Publication">Online Publication</option><option value="friend">A Friend</option><option value="No Clue">No Clue</option></select>', + buttons: { Back: -1, Cancel: 0, Next: 1 }, + focus: 2, + submit: function(e, v, m, f){ + if (v == 0) + $.prompt.close() + else + if (v == 1) + $.prompt.goToState('state3');//go forward + else + if (v = -1) + $.prompt.goToState('state1');//go back + return false; + } + }, + state3: { + title: 'Additional Comments', + html:'<p>Please leave any other comments you have about this site:</p><div class="field"><textarea class="pure-input-1" id="rate_comments" name="rate_comments"></textarea></div>', + buttons: { Back: -1, Cancel: 0, Finish: 1 }, + focus: 2, + submit:function(e,v,m,f){ + if(v==0) + $.prompt.close() + else if(v==1) + return true; //we're done + else if(v=-1) + $.prompt.goToState('state2');//go back + return false; + } + } + } + + $.prompt(temp,{ + close: function(e,v,m,f){ + var str = "You can now process with this given information:<br />"; + $.each(f,function(i,obj){ + str += i + " - <em>" + obj + "</em><br />"; + }); + $('#results').html(str); + }, + classes: { + box: '', + fade: '', + prompt: '', + close: '', + title: 'lead', + message: 'pure-form', + buttons: '', + button: 'pure-button', + defaultButton: 'pure-button-primary' + } + }); + } + </script> + </head> + + <body> + <a href="javascript:openprompt()">Test Impromptu States Survey</a> + <div id="results"></div> + </body> +</html>
\ No newline at end of file diff --git a/src/demos/select_filter.html b/src/demos/select_filter.html new file mode 100644 index 0000000..af03c0f --- /dev/null +++ b/src/demos/select_filter.html @@ -0,0 +1,176 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + + <title>jQuery Impromptu States Example - Select Dropdown Option Search</title> + + <link rel="stylesheet" media="all" type="text/css" href="../jquery-impromptu.css" /> + + <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> + <script type="text/javascript" src="../jquery-impromptu.js"></script> + + <style type="text/css"> + #optionsearch{} + #optionsearch h3{ font-family: 'Arial',sans-serif; font-size: 14px; } + #optionsearch label{ display: block; } + #optionsearch label span{ font-weight: normal; color: #777; } + #optionsearch label #optionsearchstatus{ color: #ff0000; font-weight: bold; float: right; display:none;} + #optionsearch input[type='search']{ width: 100%; border: solid 1px #d4d4d4; padding: 3px;} + #optionsearch #searchoptionswrapper{ margin: 15px 0 15px 0; border: solid 1px #e2e8e6; height: 150px; max-height: 150px; overflow: auto; display: none;} + + /* the styles to make the scrollable tables with radios */ + + .radioTable{ width: 100%; border-collapse: collapse; border-spacing: 0; } + .radioTable thead{ display: block; } + .radioTable tbody{ } + .radioTable tr{ display: block; } + .radioTable tbody tr:hover{ background-color: #e2e8e6; } + .radioTable th{ text-align: left; font-size: 12px; font-weight: bold; padding: 0 0 8px 0; color: #929896; } + .radioTable td{ text-align: left; font-size: 11px; font-weight: normal; padding: 3px 0; } + .radioTable td.td-radio{ width: 40px; text-align: center; } + .radioTable td.td-label{ width: 400px; } + .radioTable td label{ font-size: 11px; line-height: 14px; font-weight: normal; display: block; width: 100%; } + .radioTable tbody tr.checked{ background-color: #F9B23C; font-weight: bold; } + .radioTable tbody tr.checked:hover{ background-color: #e9a22C; } + .radioTable tbody tr.checked label{ font-weight: bold; } + </style> + + <script type="text/javascript"> + // ################################################################################## + // a quick search routine for selects, fired on contextmenu event + // ################################################################################## + function showDropdownSearch(e){ + var $t = $(this), + $o = $('option:enabled',$t), + tval = $t.val(), + html = '<div id="optionsearch">'+ + '<div class="textinput"><label for="">Search <span>type your search term and press Enter</span><span id="optionsearchstatus">Searching, please wait..</span></label><input type="search" id="searchquery" name="searchquery" value="" placeholder="Search.."></div>'+ + '<div id="searchoptionswrapper"><table id="searchoptions" class="radioTable" cellpadding="0" cellspacing="0"><tbody></tbody></table></div>'+ + '</div>'; + + e.preventDefault(); + + var $imp = $.prompt(html, { + title: 'Search Options', + buttons: { Ok:true,Cancel:false }, + submit: function(e,v,m,f){ + if(v){ + $t.val(f.searchanswer).change(); + } + } + }); + + var $so = $('#searchoptions', $imp); + + $so.delegate('input', 'click', function(){ + $('tr.checked', $so).removeClass('checked'); + $(this).parent().parent().addClass('checked'); + }); + + $('#searchquery', $imp).focus().keydown(function(event){ + var $i = $(this), + query = $i.val(), + re = new RegExp(query,"i"), + html = "", + counter = 0, + $sos = $('#optionsearchstatus',$imp); + + if(event.which == 13 || event.keyCode == 13 && $.trim(query) !== ''){ + + $sos.css('display','inline'); + + $o.each(function(i,obj){ + var $currt = $(this), + currval = $currt.attr('value'), + currtxt = $currt.text(), + currterm = currval + currtxt; + + if(re.test(currterm) && currtxt !== '' && currval !== ''){ + html += '<tr class="row'+ (counter++ % 2) + (currval == tval? ' checked':'')+'">'+ + '<td class="td-radio"><input type="radio" name="searchanswer" id="searchanswer_'+ counter +'" value="'+ currval +'"'+ (currval == tval? ' checked':'') +'></td>'+ + '<td class="td-label"><label for="searchanswer_'+ counter +'">'+ currtxt +'</label></td>'+ + '</tr>'; + } + + }); + + $so.find('tbody').html(html); + $so.find('tr:eq(0)').addClass('checked').find('input').attr('checked',true); + + $('#searchoptionswrapper',$imp).slideDown('slow', function(){ + $sos.hide(); + }); + + event.preventDefault(); + return false; + }// end if enter key + + }); + + return false; + } + + $(function(){ + $('select').bind('contextmenu', showDropdownSearch); + }); + </script> + </head> + + <body> + <p>Right click or ctrl click on the select for it to bring up a search for its options:</p> + + <select name="select1" id="select1"> + <option value="Alabama, Montgomery">Yellowhammer State</option> + <option value="Alaska, Juneau">The Last Frontier</option> + <option value="Arizona, Phoenix">The Grand Canyon State</option> + <option value="Arkansas, Little Rock">The Natural State</option> + <option value="California, Sacramento">The Golden State</option> + <option value="Colorado, Denver">The Centennial State</option> + <option value="Connecticut, Hartford">The Constitution State</option> + <option value="Delaware, Dover">The First State</option> + <option value="Florida, Tallahassee">The Sunshine State</option> + <option value="Georgia, Atlanta">The Peach State</option> + <option value="Hawaii, Honolulu">The Aloha State</option> + <option value="Idaho, Boise">The Gem State</option> + <option value="Illinois, Springfield">Prairie State</option> + <option value="Indiana, Indianapolis">The Hoosier State</option> + <option value="Iowa, Des Moines">The Hawkeye State</option> + <option value="Kansas, Topeka">The Sunflower State</option> + <option value="Kentucky, Frankfort">The Bluegrass State</option> + <option value="Louisiana, Baton Rouge">The Pelican State</option> + <option value="Maine, Augusta">The Pine Tree State</option> + <option value="Maryland, Annapolis">The Old Line State</option> + <option value="Massachusetts, Boston">The Bay State</option> + <option value="Michigan, Lansing">The Great Lakes State</option> + <option value="Minnesota, St. Paul">The North Star State</option> + <option value="Mississippi, Jackson">The Magnolia State</option> + <option value="Missouri, Jefferson City">The Show Me State</option> + <option value="Montana, Helena">The Treasure State</option> + <option value="Nebraska, Lincoln">The Cornhusker State</option> + <option value="Nevada, Carson City">The Silver State</option> + <option value="New Hampshire, Concord">The Granite State</option> + <option value="New Jersey, Trenton">The Garden State</option> + <option value="New Mexico, Santa Fe">The Land of Enchantment</option> + <option value="New York, Albany">The Empire State</option> + <option value="North Carolina, Raleigh">The Tar Heel State</option> + <option value="North Dakota, Bismarck">The Peace Garden State</option> + <option value="Ohio, Columbus">The Buckeye State</option> + <option value="Oklahoma, Oklahoma City">The Sooner State</option> + <option value="Oregon, Salem">The Beaver State</option> + <option value="Pennsylvania, Harrisburg">The Keystone State</option> + <option value="Rhode Island, Providence">The Ocean State</option> + <option value="South Carolina, Columbia">The Palmetto State</option> + <option value="South Dakota, Pierre">Mount Rushmore State</option> + <option value="Tennessee, Nashville">The Volunteer State</option> + <option value="Texas, Austin">The Lone Star State</option> + <option value="Utah, Salt Lake City">The Beehive State</option> + <option value="Vermont, Montpelier">The Green Mountain State</option> + <option value="Virginia, Richmond">The Old Dominion State</option> + <option value="Washington, Olympia">The Evergreen State</option> + <option value="West Virginia, Charleston">The Mountain State</option> + <option value="Wisconsin, Madison">The Badger State</option> + <option value="Wyoming, Cheyenne">The Equality or Cowboy State</option> + </select> + </body> +</html> diff --git a/src/demos/survey.html b/src/demos/survey.html new file mode 100644 index 0000000..ee4ae24 --- /dev/null +++ b/src/demos/survey.html @@ -0,0 +1,98 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>jQuery Impromptu States Survey Example</title> + + <link rel="stylesheet" media="all" type="text/css" href="../jquery-impromptu.css" /> + + <style type="text/css"> + /*-------------------------------- */ + div.jqi .jqimessage .field{ padding: 2px 0; } + div.jqi .jqimessage .field textarea{ width: 100%; height: 120px; } + /*-------------------------------- */ + </style> + + <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> + <script type="text/javascript" src="../jquery-impromptu.js"></script> + + + <script type="text/javascript"> + function openprompt(){ + + var temp = { + state0: { + html:'<p>How would you rate the content of this site?</p><div class="field"><input type="radio" name="rate_content" id="rate_content_poor" value="Poor" class="radioinput" /><label for="rate_content_poor">Poor</label></div><div class="field"><input type="radio" name="rate_content" id="rate_content_ok" value="Ok" class="radioinput" /><label for="rate_content_ok">Ok</label></div><div class="field"><input type="radio" name="rate_content" id="rate_content_good" value="Good" class="radioinput" /><label for="rate_content_good">Good</label></div><div class="field"><input type="radio" name="rate_content" id="rate_content_excellent" value="Excellent" class="radioinput" /><label for="rate_content_excellent">Excellent!</label></div>', + buttons: { Cancel: false, Next: true }, + focus: 1, + submit:function(e,v,m,f){ + if(!v) + $.prompt.close() + else $.prompt.goToState('state1');//go forward + return false; + } + }, + state1: { + html:'<p>Check all which need improvement:</p><div class="field"><input type="checkbox" name="rate_improve" id="rate_improve_colors" value="Color Scheme" class="radioinput" /><label for="rate_improve_colors">Color Scheme</label></div><div class="field"><input type="checkbox" name="rate_improve" id="rate_improve_graphics" value="Graphics" class="radioinput" /><label for="rate_improve_graphics">Graphics</label></div><div class="field"><input type="checkbox" name="rate_improve" id="rate_improve_readability" value="readability" class="radioinput" /><label for="rate_improve_readability">Readability</label></div><div class="field"><input type="checkbox" name="rate_improve" id="rate_improve_content" value="Content" class="radioinput" /><label for="rate_improve_content">Content</label></div><div class="field"><input type="checkbox" name="rate_improve" id="rate_improve_other" value="Other" class="radioinput" /><label for="rate_improve_other">Other</label> <input type="text" name="rate_improve_other_txt" id="rate_improve_other_txt" value="" /></div>', + buttons: { Back: -1, Cancel: 0, Next: 1 }, + focus: 2, + submit:function(e,v,m,f){ + if(v==0) + $.prompt.close() + else if(v==1) + $.prompt.goToState('state2');//go forward + else if(v=-1) + $.prompt.goToState('state0');//go back + return false; + } + }, + state2: { + html:'How did you first find out about this site?<div class="field"><select name="rate_find" id="rate_find"><option value="Search">Search</option><option value="Online Publication">Online Publication</option><option value="friend">A Friend</option><option value="No Clue">No Clue</option></select></div>', + buttons: { Back: -1, Cancel: 0, Next: 1 }, + focus: 2, + submit: function(e, v, m, f){ + if (v == 0) + $.prompt.close() + else + if (v == 1) + $.prompt.goToState('state3');//go forward + else + if (v = -1) + $.prompt.goToState('state1');//go back + return false; + } + }, + state3: { + html:'<p>Please leave any other comments you have about this site:</p><div class="field"><textarea id="rate_comments" name="rate_comments"></textarea></div>', + buttons: { Back: -1, Cancel: 0, Finish: 1 }, + focus: 2, + submit:function(e,v,m,f){ + if(v==0) + $.prompt.close() + else if(v==1) + return true; //we're done + else if(v=-1) + $.prompt.goToState('state2');//go back + return false; + } + } + } + + $.prompt(temp,{ + close: function(e,v,m,f){ + var str = "You can now process with this given information:<br />"; + $.each(f,function(i,obj){ + str += i + " - <em>" + obj + "</em><br />"; + }); + $('#results').html(str); + } + }); + } + </script> + </head> + + <body> + <a href="javascript:openprompt()">Test Impromptu States Survey</a> + <div id="results"></div> + </body> +</html> diff --git a/src/demos/twitter_bootstrap.html b/src/demos/twitter_bootstrap.html new file mode 100644 index 0000000..85c1437 --- /dev/null +++ b/src/demos/twitter_bootstrap.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + + <title>jQuery Impromptu with Twitter Bootstrap</title> + + <meta name="Description" content="jQuery Impromptu theme with twitter bootstrap." /> + <meta name="Keywords" content="jquery, impromptu, prompt, twitter, bootstrap" /> + + <link rel="stylesheet" media="all" type="text/css" href="../themes/base.css" /> + <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> + + <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> + <script type="text/javascript" src="../jquery-impromptu.js"></script> + + <script type="text/javascript"> + function openprompt(){ + + var temp = { + state0: { + title: 'Content Rating', + html:'<label class="radio" for="rate_content_poor"><input type="radio" name="rate_content" id="rate_content_poor" value="Poor" class="radioinput" />Poor</label>'+ + '<label class="radio" for="rate_content_ok"><input type="radio" name="rate_content" id="rate_content_ok" value="Ok" class="radioinput" />Ok</label>'+ + '<label class="radio" for="rate_content_good"><input type="radio" name="rate_content" id="rate_content_good" value="Good" class="radioinput" />Good</label>'+ + '<label class="radio" for="rate_content_excellent"><input type="radio" name="rate_content" id="rate_content_excellent" value="Excellent" class="radioinput" />Excellent!</label>', + buttons: { Cancel: false, Next: true }, + focus: 1, + submit:function(e,v,m,f){ + if(!v) + $.prompt.close() + else $.prompt.goToState('state1');//go forward + return false; + } + }, + state1: { + title: 'Needs Improvement', + html:'<p>Check all which need improvement:</p>'+ + '<label class="checkbox" for="rate_improve_colors"><input type="checkbox" name="rate_improve" id="rate_improve_colors" value="Color Scheme" class="radioinput" />Color Scheme</label>'+ + '<label class="checkbox" for="rate_improve_graphics"><input type="checkbox" name="rate_improve" id="rate_improve_graphics" value="Graphics" class="radioinput" />Graphics</label>'+ + '<label class="checkbox" for="rate_improve_readability"><input type="checkbox" name="rate_improve" id="rate_improve_readability" value="readability" class="radioinput" />Readability</label>'+ + '<label class="checkbox" for="rate_improve_content"><input type="checkbox" name="rate_improve" id="rate_improve_content" value="Content" class="radioinput" />Content</label>'+ + '<label class="checkbox" for="rate_improve_other"><input type="checkbox" name="rate_improve" id="rate_improve_other" value="Other" class="radioinput" />Other</label>'+ + '<input type="text" name="rate_improve_other_txt" id="rate_improve_other_txt" value="" placeholder="Other Description" />', + buttons: { Back: -1, Cancel: 0, Next: 1 }, + focus: 2, + submit:function(e,v,m,f){ + if(v==0) + $.prompt.close() + else if(v==1) + $.prompt.goToState('state2');//go forward + else if(v=-1) + $.prompt.goToState('state0');//go back + return false; + } + }, + state2: { + title: 'How did you find this site?', + html:'<select name="rate_find" id="rate_find"><option value="Search">Search</option><option value="Online Publication">Online Publication</option><option value="friend">A Friend</option><option value="No Clue">No Clue</option></select>', + buttons: { Back: -1, Cancel: 0, Next: 1 }, + focus: 2, + submit: function(e, v, m, f){ + if (v == 0) + $.prompt.close() + else + if (v == 1) + $.prompt.goToState('state3');//go forward + else + if (v = -1) + $.prompt.goToState('state1');//go back + return false; + } + }, + state3: { + title: 'Additional Comments', + html:'<p>Please leave any other comments you have about this site:</p><div class="field"><textarea id="rate_comments" name="rate_comments"></textarea></div>', + buttons: { Back: -1, Cancel: 0, Finish: 1 }, + focus: 2, + submit:function(e,v,m,f){ + if(v==0) + $.prompt.close() + else if(v==1) + return true; //we're done + else if(v=-1) + $.prompt.goToState('state2');//go back + return false; + } + } + } + + $.prompt(temp,{ + close: function(e,v,m,f){ + var str = "You can now process with this given information:<br />"; + $.each(f,function(i,obj){ + str += i + " - <em>" + obj + "</em><br />"; + }); + $('#results').html(str); + }, + classes: { + box: '', + fade: '', + prompt: '', + close: '', + title: 'lead', + message: '', + buttons: '', + button: 'btn', + defaultButton: 'btn-primary' + } + }); + } + </script> + </head> + + <body> + <a href="javascript:openprompt()">Test Impromptu States Survey</a> + <div id="results"></div> + </body> +</html>
\ No newline at end of file diff --git a/src/demos/user_manager.html b/src/demos/user_manager.html new file mode 100644 index 0000000..f9af4de --- /dev/null +++ b/src/demos/user_manager.html @@ -0,0 +1,181 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>jQuery Impromptu - Demo 2</title> + + <link rel="stylesheet" media="all" type="text/css" href="../jquery-impromptu.css" /> + + <style type="text/css"> + body,img,p,h1,h2,h3,h4,h5,h6,fieldset,form,table,td,ul,li,pre,blockquote,code{ margin:0; padding:0; border:0; } + body{ font: 100% Georgia, "Times New Roman", serif; background-color: #ffffff; color: #565656; text-align: center; } + div.wrapper{ position: relative; margin: 0 auto 30px auto; width: 500px; text-align: left; border: solid 1px #aaaaaa; } + #users{ } + #users .user{ border: solid 1px #bbbbbb; background-color: #dddddd; padding: 10px; margin: 5px; } + #users .user .controls{ float: right; } + + /*-------------impromptu---------- */ + div.jqi .jqimessage .field{ padding: 5px 0; } + div.jqi .jqimessage .field label{ display: block; clear: left; float: left; width: 100px; } + div.jqi .jqimessage .field input{ width: 150px; border: solid 1px #777777; } + div.jqi .jqimessage .field input.error{ width: 150px; border: solid 1px #ff0000; } + /*-------------------------------- */ + </style> + + + <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> + <script type="text/javascript" src="../jquery-impromptu.js"></script> + + <script type="text/javascript"> + + function editUser(id){ + var user = $('#userid'+id) + var fname = user.find('.fname').text(); + var lname = user.find('.lname').text(); + + var txt = 'What would you like to change this to?'+ + '<div class="field"><label for="editfname">First Name</label><input type="text" id="editfname" name="editfname" value="'+ fname +'" /></div>'+ + '<div class="field"><label for="editlname">Last Name</label><input type="text" id="editlname" name="editlname" value="'+ lname +'" /></div>'; + + $.prompt(txt,{ + buttons:{Change:true, Cancel:false}, + submit: function(e,v,m,f){ + //this is simple pre submit validation, the submit function + //return true to proceed to the callback, or false to take + //no further action, the prompt will stay open. + var flag = true; + if (v) { + + if ($.trim(f.editfname) == '') { + m.find('#editfname').addClass('error'); + flag = false; + } + else m.find('#editfname').removeClass('error'); + + if ($.trim(f.editlname) == '') { + m.find('#editlname').addClass('error'); + flag = false; + } + else m.find('#editlname').removeClass('error'); + + } + return flag; + }, + close: function(e,v,m,f){ + + if(v){ + //Here is where you would do an ajax post to edit the user + //also you might want to print out true/false from your .php + //file and verify it has been removed before removing from the + //html. if false dont remove, $promt() the error. + + //$.post('edituser.php',{userfname:f.editfname,userlname:f.editlname}, callback:function(data){ + // if(data == 'true'){ + + user.find('.fname').text(f.editfname); + user.find('.lname').text(f.editlname); + + // }else{ $.prompt('An Error Occured while editing this user'); } + //}); + } + else{} + + } + }); + } + + + function removeUser(id){ + var txt = 'Are you sure you want to remove this user?<input type="hidden" id="userid" name="userid" value="'+ id +'" />'; + + $.prompt(txt,{ + buttons:{Delete:true, Cancel:false}, + close: function(e,v,m,f){ + + if(v){ + var uid = f.userid; + //Here is where you would do an ajax post to remove the user + //also you might want to print out true/false from your .php + //file and verify it has been removed before removing from the + //html. if false dont remove, $promt() the error. + + //$.post('removeuser.php',{userid:f.userid}, callback:function(data){ + // if(data == 'true'){ + + $('#userid'+uid).hide('slow', function(){ $(this).remove(); }); + + // }else{ $.prompt('An Error Occured while removing this user'); } + //}); + } + else{} + + } + }); + } + + + </script> + </head> + <body> + + <div class="wrapper"> + <div id="users"> + <div id="userid1" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(1);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(1);">Delete</a> + </span> + <span class="fname">John</span> + <span class="lname">Doe</span> + </div> + + <div id="userid2" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(2);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(2);">Delete</a> + </span> + <span class="fname">Jane</span> + <span class="lname">Doe</span> + </div> + + <div id="userid3" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(3);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(3);">Delete</a> + </span> + <span class="fname">Bill</span> + <span class="lname">Smith</span> + </div> + + <div id="userid4" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(4);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(4);">Delete</a> + </span> + <span class="fname">Steve</span> + <span class="lname">Jones</span> + </div> + + <div id="userid5" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(5);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(5);">Delete</a> + </span> + <span class="fname">Will</span> + <span class="lname">Johnson</span> + </div> + + <div id="userid6" class="user"> + <span class="controls"> + <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(6);">Edit</a> | + <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(6);">Delete</a> + </span> + <span class="fname">Harold</span> + <span class="lname">Anderson</span> + </div> + + </div> + </div> + + </body> +</html> diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..7dd9560 --- /dev/null +++ b/src/index.html @@ -0,0 +1,650 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + + <title>jQuery Impromptu</title> + <meta name="Description" content="The home page of jQuery Impromptu. jQuery Impromptu is an extention to help provide a more pleasant way to spontaneously prompt a user for input." /> + <meta name="Keywords" content="Impromptu,jQuery Impromptu,jQuery alert,javascript alert,alert,jQuery prompt,javascript prompt,prompt,jQuery confirm,javascript confirm,confirm,jQuery modal,javascript modal,modal,jQuery plugin,jQuery extension" /> + + + <style type="text/css"> + body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,ol,li,dl,dt,dd,pre,blockquote,fieldset,label{ + margin:0; + padding:0; + border:0; + } + body{ background-color: #f8f7ec; border-top: solid 10px #777; font: 90% Helvetica, sans-serif; padding: 20px; } + h1,h2,h3,h4{ margin: 10px 0; font-family: Plantin, "Plantin std", "Plantin", "Baskerville", Georgia, "Times New Roman", serif; font-weight: normal; } + h1{font-size: 2.2em;margin: 0 0 20px 0; } + h2{ background-color: #D95656; line-height: 18px; font-size: 18px; letter-spacing: 1px; padding: 5px 10px; margin: 10px 0 10px -60px; color: #fff; display: inline-block; border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px; } + h3{ color: #D95656; font-size: 18px; letter-spacing: 1px; margin: 10px 0 10px -20px; } + h4{ color: #777; font-size: 18px; letter-spacing: 1px; } + p{ margin: 10px 0; line-height: 150%; } + a{ color: #7b94b2; } + ul,ol{ margin: 10px 0 10px 40px; } + li{ margin: 4px 0; } + dl{ margin: 10px 0; } + dl dt{ font-weight: bold; line-height: 20px; margin: 10px 0 0 0; } + dl dd{ margin: -20px 0 10px 120px; padding-bottom: 10px; border-bottom: solid 1px #eee;} + pre{ font-size: 12px; line-height: 16px; padding: 5px 5px 5px 10px; margin: 10px 0; background-color: #e4f4d4; border-left: solid 5px #9EC45F; overflow: auto; tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4; -webkit-tab-size: 4; } + + .wrapper{ background-color: #ffffff; width: 600px; border: solid 1px #eeeeee; padding: 20px 20px 20px 40px; margin: 0 auto; border-radius: 6px; -moz-border-radius: 6px;-webkit-border-radius: 6px; } + .header{ text-align: center;position: relative; margin: 0 -20px 0 -40px; } + .header ul{ margin: 10px 0; display: block; } + .header ul li{ display: inline-block; list-style: none; margin: 10px 0; width: 100px; } + .header ul li a{ text-transform: uppercase; color: #777; text-decoration: none; font-size: 12px; } + .header ul li a:hover{ color: #555; } + .header .tour{ color: #fff; background-color: #9ec45f; padding: 4px 10px; margin: 10px 0; font-size: 18px; line-height: 18px; text-decoration: none;border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px;} + .header .tour:hover{ background-color: #8eb44f; } + .header ul.scrollnav{ position: fixed; top: 0px; left: 50%; z-index: 9999999; background-color: #777; display: none; margin: 0 0 0 -185px; border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px;-webkit-border-radius: 0 0 0 6px;} + .header ul.scrollnav li a{ color: #fff; } + .header ul.scrollnav.scrolled{ display: inline; } + .footer{ color: #777; margin: 20px 0 0 0; border-top: double 3px #ccc; font-size: 11px; } + .clear{ clear: both; } + + .methoddl dd{ margin-top: 0; } + .example-container{ border-bottom: double 3px #ccc; margin: 0 0 20px 0; padding: 0 0 20px 0; } + .example-container button{ border: none; color: #fff; padding: 4px 8px; background-color: #9ec45f; border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px; } + + .ebook{ background: #333 url(http://trentrichardson.com/wp-content/uploads/2013/08/Impromptu-ItoU.png) 20px bottom no-repeat; border-top: solid 4px #ddd; border-bottom: solid 4px #ddd; height: 210px; color: #eee; margin: 0 -20px 0 -40px; padding: 20px 20px 20px 200px; } + .ebook h3{ color: #fff; margin: 10px 0; font-size: 28px; } + .ebook .buyp a iframe{ margin-bottom: -10px; } + </style> + + <link rel="stylesheet" media="all" type="text/css" href="jquery-impromptu.css" /> + + </head> + <body> + <div class="wrapper"> + <div class="header"> + <h1>jQuery Impromptu</h1> + + <p><a href="#" title="Take the Tour" class="tour" id="TourLink">Take the Tour</a></p> + + <ul class="nav"> + <li><a href="#Get_Started" title="Get Started">Get Started</a></li> + <li><a href="#Options" title="Options">Options</a></li> + <li><a href="#Methods" title="Methods">Methods</a></li> + <li><a href="#Events" title="Events">Events</a></li> + <li><a href="#Examples" title="Examples">Examples</a></li> + </ul> + </div> + + <div class="content"> + <!-- ---------------------------------------------- --> + <!-- ---------------------------------------------- --> + <div id="About" class="section"> + <h2>About</h2> + <p class="intro">jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.</p> + </div> + + <!-- ---------------------------------------------- --> + <!-- ---------------------------------------------- --> + <div id="Get_Started" class="section"> + <h2>Get Started</h2> + + <h3>Highly Recommended</h3> + <p>Subscribe to <a href="http://trentrichardson.com/category/impromptu/" title="TrentRichardson.com">my newsletter</a> and follow me <a href="http://twitter.com/practicalweb" title="Follow me on Twitter">@practicalweb</a>.</p> + + <div class="ebook"> + <h3>eBook: Impromptu From I to U</h3> + <p>Get the ebook to learn about advanced functionality of Impromptu including states, forms, tours, theming, and more!</p> + <p class="buyp"><a href="http://sellfy.com/p/IrwS" id="IrwS" class="sellfy-buy-button sellfy-small">buy</a> eBook + Example code</p> + <p class="buyp"><a href="https://sellfy.com/p/e14I" id="e14I" class="sellfy-buy-button">buy</a> eBook</p> + <div class="clear"></div> + </div> + + + <h3>Donation</h3> + <a href="http://carbounce.com" title="Car Bounce" style="float: right; display: inline-block;width:300px;padding: 10px;background-color: #fbfbfb;border: dotted 4px #e8e8e8;color: #9EC45F;font-size: 14px;text-decoration:none;letter-spacing:1px;"><img src="http://carbounce.com/img/logo_small.png" alt="Car Bounce" align="left" style="margin-right: 20px;"/>Try my new app to keep you informed of your car's financing status and value.</a> + <p>Has Impromptu been helpful to you?</p> + <div class="donation"> + <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> + <input type="hidden" name="cmd" value="_s-xclick"> + <input type="hidden" name="hosted_button_id" value="LF6AGYRBK6P2S"> + <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> + <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> + </form> + </div> + + <h3 id="Download">Download</h3> + <ul> + <li><a href="https://github.com/trentrichardson/jQuery-Impromptu" title="Fork it on Github">Github</a></li> + <li><a href="https://github.com/trentrichardson/Moopromptu" title="Download Mootools Impromptu Development">Moopromptu</a></li> + </ul> + + <h3>Version</h3> + <p>Version @@version</p> + <p>Last updated on @@timestamp</p> + + <p>jQuery Impromptu is currently available for use in all personal or commercial projects under the <a href="MIT-LICENSE.txt" title="MIT License">MIT License</a>.</p> + + + + </div> + + <!-- ---------------------------------------------- --> + <!-- ---------------------------------------------- --> + <div id="Options" class="section"> + <h2>Options</h2> + <pre><code>$.prompt( msg , options )</code></pre> + <h3>msg</h3> + <p>The message can either be an html string, or an object of "states". Each state has the following properties:</p> + <dl> + <dt>name</dt> + <dd>A valid variable name to access the state by. <em>Default: State's array index or object key</em></dd> + + <dt>title</dt> + <dd>A string to be used as the title of the state</dd> + + <dt>html</dt> + <dd>A string of html or text for the content</dd> + + <dt>buttons</dt> + <dd>An object containing the text and values of each button the user may click. <em>Default: { Ok : true }</em></dd> + + <dt>focus</dt> + <dd>Index of the button to focus or selector to element to focus. <em>Default: 0</em></dd> + + <dt>defaultButton</dt> + <dd>Index of the button to focus. Similar to the focus option, but if focus is a selector this can still style the button as the default. <em>Default: 0</em></dd> + + <dt>submit</dt> + <dd>A function to be called when the prompt is submitted. <em>Default: function(event, value, message, formVals){}</em> Return false or event.preventDefault() to keep the prompt open. Event object also has properties event.state and event.stateName.</dd> + </dl> +<pre><code>var temp = { + state0: { + html:'test 1...', + buttons: { Cancel: false, Next: true }, + focus: 1, + position: { container: '#elId', x: -300, y: -45, width: 250, arrow: 'rm' }, + submit:function(e,v,m,f){ } + }, + state1: { + html:'test 2..', + buttons: { Back: -1, Exit: 0, Next: 1 }, + focus: 2, + submit:function(e,v,m,f){ } + } +};</code></pre> + <p>If a string is passed as the message in place of a state, buttons, focus, and submit will be substituted from the options below.</p> + + <h3>options</h3> + <dl> + <dt>buttons</dt> + <dd>An object containing the text and values of each button the user may click. <em>Default: { Ok : true }</em></dd> + + <dt>classes</dt> + <dd>An object of class names for each part of a prompt for greater compatibilty with existing css frameworks. For example if you would like to use twitter bootstrap you would include the base theme (in the themes folder), then pass the following classes: +<pre><code>{ + box: '', + fade: '', + prompt: '', + close: '', + title: 'lead', + message: '', + buttons: '', + button: 'btn', + defaultButton: 'btn-primary' +}</code></pre> + Use the base theme in place of the default css file since it has minimal styling, allowing other css frameworks to work their magic. To view a complete demo see the examples section below.</dd> + + <dt>close</dt> + <dd>A function to be called when the prompt is closed and just before being removed from the DOM. <em>Default: function(event[, value, message, formVals]){}</em> Last three paremeters available only when button was clicked.</dd> + + <dt>focus</dt> + <dd>Index of the button to focus or selector to element to focus. <em>Default: 0</em></dd> + + <dt>loaded</dt> + <dd>A function to be called when the prompt is fully loaded <em>Default: function(event){}</em></dd> + + <dt>opacity</dt> + <dd>The prefered opacity of the transparent layer placed over the container. <em>Default: 0.6</em></dd> + + <dt>overlayspeed</dt> + <dd>The prefered speed of the fadeIn and fadeOut of the overlay ("slow", "fast", number) <em>Default: "slow"</em></dd> + + <dt>persistent</dt> + <dd>If the prompt should close when the fade is clicked (true doesn't close). <em>Default: true</em></dd> + + <dt>prefix</dt> + <dd>A prefix to be used for all css classes and html object id's. Use this option when you want to change themes. <em>Default: 'jqi'</em></dd> + + <dt>promptspeed</dt> + <dd>The prefered opacity of the showing of the prompt ("slow", "fast", number). <em>Default: "fast"</em></dd> + + <dt>show</dt> + <dd>Name of the jQuery method to animate the entrance of the prompt ("show","fadeIn","slideDown"). <em>Default: "fadeIn"</em></dd> + + <dt>statechanging</dt> + <dd>A function to be called when a state is about to change. <em>Default: function(event, fromStatename, toStateName){}</em> Return false or event.preventDefault() to prevent the state change.</dd> + + <dt>statechanged</dt> + <dd>A function to be called when a state has changed. <em>Default: function(event, toStateName){}</em></dd> + + <dt>submit</dt> + <dd>See state submit event above.</dd> + + <dt>timeout</dt> + <dd>The number of milliseconds until the prompt automatically closes. <em>Default: 0</em></dd> + + <dt>top</dt> + <dd>Distance from the top of the screen the prompt will be <em>Default: 15%</em></dd> + + <dt>useiframe</dt> + <dd>Will use an iframe for the overlay in IE6 to cover up <select>. <em>Default: false</em></dd> + + <dt>zIndex</dt> + <dd>zIndex to apply to the prompt. <em>Default: 999</em></dd> + + </dl> + + </div> + + <!-- ---------------------------------------------- --> + <!-- ---------------------------------------------- --> + <div id="Methods" class="section"> + <h2>Methods</h2> + <dl class="methoddl"> + <dt>jQuery.prompt.setDefaults(options)</dt> + <dd> + Sets the defaults for prompts.<br /> +<pre><code>jQuery.prompt.setDefaults({ + prefix: 'myPrompt', + show: 'slideDown' +});</pre></code> + </dd> + + <dt>jQuery.prompt.setStateDefaults(options)</dt> + <dd> + Sets the defaults for states.<br /> +<pre><code>jQuery.prompt.setStateDefaults({ + buttons: { Ok:true, Cancel:false }, + focus: 1 +});</pre></code> + </dd> + + <dt>jQuery.prompt.getCurrentState()</dt> + <dd>Returns a jquery object of the current visible state.</dd> + + <dt>jQuery.prompt.getCurrentStateName()</dt> + <dd>Returns a string current visible state's name.</dd> + + <dt>jQuery.prompt.getState(stateName)</dt> + <dd>Returns a jquery object of the state, so you can update the content within it.</dd> + + <dt>jQuery.prompt.addState(stateName, stateOptions, insertAfterState)</dt> + <dd>Injects a new state after the indicated insertAfterState name. Returns a jQuery object of the new state.</dd> + + <dt>jQuery.prompt.removeState(stateName)</dt> + <dd>Removes the state. Returns true on success, false on failure.</dd> + + <dt>jQuery.prompt.goToState(stateName, subState, callback)</dt> + <dd>Transitions to the specified state. subState is a Boolean to use substate functionality. Callback represents a statechanged event.</dd> + + <dt>jQuery.prompt.nextState(callback)</dt> + <dd>Transitions to the next state. Callback represents a statechanged event.</dd> + + <dt>jQuery.prompt.prevState(callback)</dt> + <dd>Transitions to the previous state. Callback represents a statechanged event.</dd> + + <dt>jQuery.prompt.close()</dt> + <dd>Closes the prompt.</dd> + </dl> + + </div> + + <!-- ---------------------------------------------- --> + <!-- ---------------------------------------------- --> + <div id="Events" class="section"> + <h2>Events</h2> + + <p>If you like to bind events manually you can do so with the following:</p> + <dl class="methoddl"> + <dt>impromptu:loaded</dt> + <dd>Same as loaded option. Scope is the entire prompt and fade container. +<pre>var myPrompt = jQuery.prompt(/*...*/); +myPrompt.on('impromptu:loaded', function(e){});</pre> + </dd> + + <dt>impromptu:submit</dt> + <dd>Same as submit option. Scope is the state element. These events are per state, so you must attach it directly to a state. +<pre>var myPrompt = jQuery.prompt(/*...*/); +$.prompt.getStateContent('state2') + .on('impromptu:submit', function(e,v,m,f){});</pre></dd> + + <dt>impromptu:close</dt> + <dd>Same as close option. Scope is entire prompt and fade container</dd> + + <dt>impromptu:statechanging</dt> + <dd>Same as statechangin option. Scope is the entire prompt and fade container. This fires before the state changes, so you may return false or use e.preventDefault() prevent the state change.</dd> + + <dt>impromptu:statechanged</dt> + <dd>Same as statechanged option. Scope is the entire prompt and fade container. This fires after the state has successfully changed.</dd> + </dl> + + </div> + + <!-- ---------------------------------------------- --> + <!-- ---------------------------------------------- --> + <div id="Examples" class="section"> + <h2>Examples</h2> + + <h3>Basics</h3> + +<div class="example-container"> + <p>A prompt in the simplest of fashion.</p> +<pre class="code">$.prompt("Hello World!");</pre> + <div class="buttons"> + <button class="run">Run It!</button> + </div> +</div> + +<div class="example-container"> + <p>Lets add some buttons and a title.</p> +<pre class="code">$.prompt("Proceeding may be good for your site..", { + title: "Are you Ready?", + buttons: { "Yes, I'm Ready": true, "No, Lets Wait": false } +});</pre> + <div class="buttons"> + <button class="run">Run It!</button> + </div> +</div> + +<div class="example-container"> + <p>Use the submit function to get the answer.</p> +<pre class="code">$.prompt("Open your javascript console to see the answer.", { + title: "Are you Ready?", + buttons: { "Yes, I'm Ready": true, "No, Lets Wait": false }, + submit: function(e,v,m,f){ + // use e.preventDefault() to prevent closing when needed or return false. + // e.preventDefault(); + + console.log("Value clicked was: "+ v); + } +});</pre> + <div class="buttons"> + <button class="run">Run It!</button> + </div> +</div> + + <h3>States</h3> + +<div class="example-container"> + <p>To use states pass in a collection (array or object) of objects with common properties (html, buttons, focus, submit, position..).</p> +<pre class="code">var statesdemo = { + state0: { + html:'Something really cool will happen when you click Next. Prepare yourself for amazement!...', + buttons: { Cancel: false, Next: true }, + focus: 1, + submit:function(e,v,m,f){ + if(v){ + e.preventDefault(); + $.prompt.goToState('state1'); + return false; + } + $.prompt.close(); + } + }, + state1: { + html:'Was that awesome or what!?', + buttons: { Back: -1, Exit: 0 }, + focus: 1, + submit:function(e,v,m,f){ + e.preventDefault(); + if(v==0) + $.prompt.close(); + else if(v==-1) + $.prompt.goToState('state0'); + } + } +}; + +$.prompt(statesdemo);</pre> + <div class="buttons"> + <button class="run">Run It!</button> + </div> +</div> + + +<div class="example-container"> + <p>To use a substate create your states as normal, but use the subState option when calling $.prompt.goToState().</p> +<pre class="code">var statesdemo = { + state0: { + title: 'Terms of Use', + html:'<p>These are the terms of use. You should agree to these terms before proceeding.</p><p>(This is just an example)</p>', + buttons: { Cancel: false, Agree: true }, + focus: 1, + submit:function(e,v,m,f){ + if(v){ + e.preventDefault(); + $.prompt.goToState('state1', true); + return false; + } + $.prompt.close(); + } + }, + state1: { + html:'Are you sure?', + buttons: { No: -1, Yes: 0 }, + focus: 1, + submit:function(e,v,m,f){ + e.preventDefault(); + if(v==0) + $.prompt.goToState('state2'); + else if(v==-1) + $.prompt.goToState('state0'); + } + }, + state2: { + title: "You're Done!", + html: "Congratulations, you've finished this example!", + buttons: { Close: 0 }, + focus: 0 + } +}; + +$.prompt(statesdemo);</pre> + <div class="buttons"> + <button class="run">Run It!</button> + </div> +</div> + + +<div class="example-container" id="TourExample"> + <p>To use tour or tooltip like features pass in a collection (array or object) of state objects with the position property.</p> +<pre class="code" id="TourCode">var tourSubmitFunc = function(e,v,m,f){ + if(v === -1){ + $.prompt.prevState(); + return false; + } + else if(v === 1){ + $.prompt.nextState(); + return false; + } +}, +tourStates = [ + { + title: 'Welcome', + html: 'Ready to take a quick tour of jQuery Impromptu?', + buttons: { Next: 1 }, + focus: 0, + position: { container: 'h1', x: 200, y: 60, width: 200, arrow: 'tc' }, + submit: tourSubmitFunc + }, + { + title: 'Download', + html: 'When you get ready to use Impromptu, you can get it here.', + buttons: { Prev: -1, Next: 1 }, + focus: 1, + position: { container: '#Download', x: 170, y: 0, width: 300, arrow: 'lt' }, + submit: tourSubmitFunc + }, + { + title: "You've Got Options", + html: 'A description of the options are can be found here.', + buttons: { Prev: -1, Next: 1 }, + focus: 1, + position: { container: '#Options', x: -10, y: -145, width: 200, arrow: 'bl' }, + submit: tourSubmitFunc + }, + { + title: 'Examples..', + html: 'You will find plenty of examples to get you going..', + buttons: { Prev: -1, Next: 1 }, + focus: 1, + position: { container: '#Examples', x: 80, y: 10, width: 500, arrow: 'lt' }, + submit: tourSubmitFunc + }, + { + title: 'The Tour Code', + html: 'Including this tour... See, creating a tour is easy!', + buttons: { Prev: -1, Next: 1 }, + focus: 1, + position: { container: '#TourCode', x: 180, y: -130, width: 400, arrow: 'br' }, + submit: tourSubmitFunc + }, + { + title: 'Learn More', + html: 'If you would like to learn more please consider purchasing a copy of Impromptu From I to U. If you found Impromptu helpful you can also donate to help fund development. If not, thanks for stopping by!', + buttons: { Done: 2 }, + focus: 0, + position: { container: '.ebook', x: 370, y: 120, width: 275, arrow: 'lt' }, + submit: tourSubmitFunc + } +]; +$.prompt(tourStates);</pre> + <div class="buttons"> + <button class="run">Run It!</button> + </div> +</div> + + <h3>Forms</h3> + +<div class="example-container"> + <p>The bread and butter of Impromptu is forms. By simply including form fields in the html all form values are gathered and sent via the "f" (aka "form") parameter. The "m" (aka "message") parameter is a jQuery object of the message itself incase you need to modify the dom. Open your javascript console to view the object sent on submit.</p> +<pre class="code">var statesdemo = { + state0: { + title: 'Name', + html:'<label>First <input type="text" name="fname" value=""></label><br />'+ + '<label>Last <input type="text" name="lname" value=""></label><br />', + buttons: { Next: 1 }, + //focus: "input[name='fname']", + submit:function(e,v,m,f){ + console.log(f); + + e.preventDefault(); + $.prompt.goToState('state1'); + } + }, + state1: { + title: 'Gender', + html:'<label><input type="radio" name="gender" value="Male"> Male</label><br />'+ + '<label><input type="radio" name="gender" value="Female"> Female</label>', + buttons: { Back: -1, Next: 1 }, + //focus: ":input:first", + submit:function(e,v,m,f){ + console.log(f); + + if(v==1) $.prompt.goToState('state2') + if(v==-1) $.prompt.goToState('state0'); + e.preventDefault(); + } + }, + state2: { + title: 'Transportation', + html:'<label>Travels By <select name="travel" multiple>'+ + '<option value="Car" selected>Car</option>'+ + '<option value="Bus">Bus</option>'+ + '<option value="Plane" selected>Plane</option>'+ + '<option value="Train">Train</option>'+ + '</select></label>', + buttons: { Back: -1, Done: 1 }, + focus: 1, + submit:function(e,v,m,f){ + console.log(f); + + e.preventDefault(); + if(v==1) $.prompt.close(); + if(v==-1) $.prompt.goToState('state1'); + } + }, +}; + +$.prompt(statesdemo);</pre> + <div class="buttons"> + <button class="run">Run It!</button> + </div> +</div> + + <h3>Advanced</h3> + <p>The following are example demonstrations of various useful utilities with Impromptu.</p> + <ul> + <li><a href="demos/twitter_bootstrap.html" title="Twitter bootstrap theme" target="_BLANK">Twitter bootstrap theme</a> (<a href="http://twitter.github.io/bootstrap/" title="Twitter Bootstrap">Bootstrap</a>)</li> + <li><a href="demos/purecss.html" title="YUI Pure CSS theme" target="_BLANK">PureCSS theme</a> (<a href="http://purecss.io/" title="Pure CSS Framework">Pure</a>)</li> + <li><a href="demos/user_manager.html" title="User Manager Demo" target="_BLANK">User Manager</a></li> + <li><a href="demos/survey.html" title="Survey Demo" target="_BLANK">Survey</a></li> + <li><a href="demos/loan_calculator.html" title="Loan Calculator Demo" target="_BLANK">Loan Calculator</a></li> + <li><a href="demos/select_filter.html" title="Select Dropdown Search Filter Demo" target="_BLANK">Select Dropdown Search Filter</a></li> + </ul> + </div> + </div> + + <div class="footer"> + <p>Microphone artwork by: <a href="www.vectoropenstock.com" rel="nofollow">Vector Open Stock</a></p> + </div> + </div> + + <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> + <script type="text/javascript" src="jquery-impromptu.min.js"></script> + <script type="text/javascript"> + + $(function(){ + // quick routine for scrolling nav + var $nav = $('.header ul'), + navoffset = $nav.offset(), + $navclone = $nav.clone().addClass('scrollnav').appendTo('.header'), + $window = $(window); + $window.scroll(function(e){ + if((navoffset.top+50) < $window.scrollTop()){ + if(!$navclone.hasClass('scrolled')) + $navclone.addClass('scrolled'); + } + else $navclone.removeClass('scrolled'); + }).scroll(); + + // run the examples + $('.example-container').each(function(i,el){ + var $ex = $(this), + $run = $ex.find('.run'), + code = $ex.find('.code').text(); + $run.click(function(e){ + e.preventDefault(); + (new Function(code))(); + }); + }); + + // hotlink the tour + $('#TourLink').click(function(e){ + e.preventDefault(); + $('#TourExample button').click(); + }); + }); + + </script> + + <script type="text/javascript" src="http://sellfy.com/js/api_buttons.js"></script> + <!-- + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + try { + var pageTracker = _gat._getTracker("UA-7602218-1"); + pageTracker._trackPageview(); + } catch(err) {}</script> + --> + </body> +</html>
\ No newline at end of file diff --git a/jquery-impromptu.css b/src/jquery-impromptu.css index 91679c6..f5456c7 100644 --- a/jquery-impromptu.css +++ b/src/jquery-impromptu.css @@ -1,8 +1,3 @@ -/* ------------------------------- - Impromptu ------------------------------- -*/ .jqifade{ position: absolute; background-color: #777777; diff --git a/jquery-impromptu.js b/src/jquery-impromptu.js index 6cc82bd..09f0ffe 100644 --- a/jquery-impromptu.js +++ b/src/jquery-impromptu.js @@ -1,6 +1,3 @@ -/*! jQuery-Impromptu - v5.1.1
-* http://trentrichardson.com/Impromptu
-* Copyright (c) 2013 Trent Richardson; Licensed MIT */
(function($) {
"use strict";
@@ -74,10 +71,6 @@ }
}
- // Go ahead and transition to the first state. It won't be visible just yet though until we show the prompt
- var $firstState = $.prompt.jqi.find('.'+ opts.prefix +'states .'+ opts.prefix +'state').eq(0);
- $.prompt.goToState($firstState.data('jqi-name'));
-
//Events
$.prompt.jqi.on('click', '.'+ opts.prefix +'buttons button', function(e){
var $t = $(this),
@@ -147,10 +140,21 @@ var key = (window.event) ? event.keyCode : e.keyCode;
//escape key closes
- if(key===27) {
+ if(key === 27) {
fadeClicked();
}
+ //enter key pressed trigger the default button if its not on it, ignore if it is a textarea
+ if(key === 13){
+ var $defBtn = $.prompt.getCurrentState().find('.'+ opts.prefix +'defaultbutton');
+ var $tgt = $(e.target);
+
+ if($tgt.is('textarea,.'+opts.prefix+'button') === false && $defBtn.length > 0){
+ e.preventDefault();
+ $defBtn.click();
+ }
+ }
+
//constrain tabs, tabs should iterate through the state and not leave
if (key === 9){
var $inputels = $('input,select,textarea,button',$.prompt.getCurrentState());
@@ -187,6 +191,10 @@ // Show it
$.prompt.jqif[opts.show](opts.overlayspeed);
$.prompt.jqi[opts.show](opts.promptspeed, function(){
+
+ var $firstState = $.prompt.jqi.find('.'+ opts.prefix +'states .'+ opts.prefix +'state').eq(0);
+ $.prompt.goToState($firstState.data('jqi-name'));
+
$.prompt.jqib.trigger('impromptu:loaded');
});
@@ -441,7 +449,7 @@ defbtn = stateobj.focus === i || (isNaN(stateobj.focus) && stateobj.defaultButton === i) ? ($.prompt.currentPrefix + 'defaultbutton ' + opts.classes.defaultButton) : '';
if(typeof v === 'object'){
- state += '<button class="'+ opts.classes.button +' '+ defbtn;
+ state += '<button class="'+ opts.classes.button +' '+ $.prompt.currentPrefix + 'button '+ defbtn;
if(typeof v.classes !== "undefined"){
state += ' '+ ($.isArray(v.classes)? v.classes.join(' ') : v.classes) + ' ';
@@ -450,7 +458,7 @@ state += '" name="' + opts.prefix + '_' + statename + '_button' + v.title.replace(/[^a-z0-9]+/gi,'') + '" id="' + opts.prefix + '_' + statename + '_button' + v.title.replace(/[^a-z0-9]+/gi,'') + '" value="' + v.value + '">' + v.title + '</button>';
} else {
- state += '<button class="'+ opts.classes.button +' '+ defbtn +'" name="' + opts.prefix + '_' + statename + '_button' + k + '" id="' + opts.prefix + '_' + statename + '_button' + k + '" value="' + v + '">' + k + '</button>';
+ state += '<button class="'+ $.prompt.currentPrefix + 'button '+ opts.classes.button +' '+ defbtn +'" name="' + opts.prefix + '_' + statename + '_button' + k + '" id="' + opts.prefix + '_' + statename + '_button' + k + '" value="' + v + '">' + k + '</button>';
}
i++;
diff --git a/src/themes/base.css b/src/themes/base.css new file mode 100644 index 0000000..ec4b0e9 --- /dev/null +++ b/src/themes/base.css @@ -0,0 +1,91 @@ +/* +------------------------------ + Impromptu Base Styles +------------------------------ +*/ +.jqifade{ + position: absolute; + background-color: #777777; +} +div.jqi{ + width: 400px; + position: absolute; + background-color: #ffffff; + text-align: left; + border: solid 1px #eeeeee; + border-radius: 6px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + padding: 7px; +} +div.jqi .jqicontainer{ +} +div.jqi .jqiclose{ + position: absolute; + top: 4px; right: -2px; + width: 18px; + cursor: default; + color: #bbbbbb; + font-weight: bold; +} +div.jqi .jqistate{ + background-color: #fff; +} +div.jqi .jqiparentstate::after{ + background-color: #eee; + opacity: 0.7; + filter: alpha(opacity=70); + content: ''; + position: absolute; + top:0;left:0;bottom:0;right:0; + border-radius: 6px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; +} +div.jqi .jqisubstate{ + + position: absolute; + top:0; + left: 20%; + width: 60%; + padding: 7px; + border: solid 1px #eeeeee; + border-top: none; + border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + -webkit-border-radius: 0 0 6px 6px; +} +div.jqi .jqititle{ + padding: 5px 10px; + border-bottom: solid 1px #eeeeee; +} +div.jqi .jqimessage{ + padding: 10px; + color: #444444; +} +div.jqi .jqibuttons{ + padding: 5px; + text-align: right; +} +div.jqi button{ + margin: 0 0 0 10px; +} + +.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;} + +.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; } +.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; } +.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; } + +.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; } +.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; } +.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; } + +.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; } +.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; } +.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; } + +.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; } +.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; } +.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; } + diff --git a/src/themes/classic-impromptu.css b/src/themes/classic-impromptu.css new file mode 100644 index 0000000..7a4d389 --- /dev/null +++ b/src/themes/classic-impromptu.css @@ -0,0 +1,41 @@ +/* +------------------------------ + classic impromptu +------------------------------ +*/ +.impromptuwarning .impromptu{ background-color: #aaaaaa; } +.impromptufade{ + position: absolute; + background-color: #ffffff; +} +div.impromptu{ + position: absolute; + background-color: #cccccc; + padding: 10px; + width: 300px; + text-align: left; +} +div.impromptu .impromptuclose{ + float: right; + margin: -35px -10px 0 0; + cursor: pointer; + color: #213e80; +} +div.impromptu .impromptucontainer{ + background-color: #213e80; + padding: 5px; + color: #ffffff; + font-weight: bold; +} +div.impromptu .impromptumessage{ + background-color: #415ea0; + padding: 10px; +} +div.impromptu .impromptubuttons{ + text-align: center; + padding: 5px 0 0 0; +} +div.impromptu button{ + padding: 3px 10px 3px 10px; + margin: 0 10px; +} diff --git a/src/themes/clean-blue.css b/src/themes/clean-blue.css new file mode 100644 index 0000000..e73dce0 --- /dev/null +++ b/src/themes/clean-blue.css @@ -0,0 +1,59 @@ +/* +------------------------------ + clean blue +------------------------------ +*/ +.cleanbluewarning .cleanblue{ + background-color: #acb4c4; +} +.cleanbluefade{ + position: absolute; + background-color: #aaaaaa; +} +div.cleanblue{ + font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; + position: absolute; + background-color: #ffffff; + width: 300px; + font-size: 11px; + text-align: left; + border: solid 1px #213e80; +} +div.cleanblue .cleanbluecontainer{ + background-color: #ffffff; + border-top: solid 14px #213e80; + padding: 5px; + font-weight: bold; +} +div.cleanblue .cleanblueclose{ + float: right; + width: 18px; + cursor: default; + margin: -19px -12px 0 0; + color: #ffffff; + font-weight: bold; +} +div.cleanblue .cleanbluemessage{ + padding: 10px; + line-height: 20px; + font-size: 11px; + color: #333333; +} +div.cleanblue .cleanbluebuttons{ + text-align: right; + padding: 5px 0 5px 0; + border: solid 1px #eeeeee; + background-color: #f4f4f4; +} +div.cleanblue button{ + padding: 3px 10px; + margin: 0 10px; + background-color: #314e90; + border: solid 1px #f4f4f4; + color: #ffffff; + font-weight: bold; + font-size: 12px; +} +div.cleanblue button:hover{ + border: solid 1px #d4d4d4; +} diff --git a/src/themes/ext-blue.css b/src/themes/ext-blue.css new file mode 100644 index 0000000..cd1224d --- /dev/null +++ b/src/themes/ext-blue.css @@ -0,0 +1,50 @@ +/* +------------------------------ + Ext Blue +------------------------------ +*/ +.extbluewarning .extblue{ + border:1px red solid; +} +.extbluefade{ + position: absolute; + background-color: #ffffff; +} +div.extblue{ + border:1px #6289B6 solid; + position: absolute; + background-color: #CAD8EA; + padding: 0; + width: 300px; + text-align: left; +} +div.extblue .extblueclose{ + background-color: #CAD8EA; + margin:2px -2px 0 0; + cursor: pointer; + color: red; + text-align: right; +} +div.extblue .extbluecontainer{ + background-color: #CAD8EA; + padding: 0 5px 5px 5px; + color: #000000; + font:normal 11px Verdana; +} +div.extblue .extbluemessage{ + background-color: #CAD8EA; + padding: 0; + margin:0 15px 15px 15px; +} +div.extblue .extbluebuttons{ + text-align: center; + padding: 0px 0 0 0; +} +div.extblue button{ + padding: 1px 4px; + margin: 0 10px; + background-color:#cccccc; + font-weight:normal; + font-family:Verdana; + font-size:10px; +} diff --git a/src/themes/smooth.css b/src/themes/smooth.css new file mode 100644 index 0000000..687fe92 --- /dev/null +++ b/src/themes/smooth.css @@ -0,0 +1,69 @@ +/* +------------------------------ + Smooth +------------------------------ +*/ +.jqismoothfade{ + position: absolute; + background-color: #333333; +} +div.jqismooth{ + width: 350px; + font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; + position: absolute; + background-color: #ffffff; + font-size: 11px; + text-align: left; + border: solid 3px #e2e8e6; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + padding: 7px; +} +div.jqismooth .jqismoothcontainer{ + font-weight: bold; +} +div.jqismooth .jqismoothclose{ + position: absolute; + top: 0; + right: 0; + width: 18px; + cursor: default; + text-align: center; + padding: 2px 0 4px 0; + color: #727876; + font-weight: bold; + background-color: #e2e8e6; + -moz-border-radius-bottomLeft: 5px; + -webkit-border-bottom-left-radius: 5px; + border-left: solid 1px #e2e8e6; + border-bottom: solid 1px #e2e8e6; +} +div.jqismooth .jqismoothmessage{ + padding: 10px; + line-height: 20px; + color: #444444; +} +div.jqismooth .jqismoothbuttons{ + text-align: right; + padding: 5px 0 5px 0; + border: solid 1px #e2e8e6; + background-color: #f2f8f6; +} +div.jqismooth button{ + padding: 3px 10px; + margin: 0 10px; + background-color: #2F6073; + border: solid 1px #f4f4f4; + color: #ffffff; + font-weight: bold; + font-size: 12px; +} +div.jqismooth button:hover{ + background-color: #728A8C; +} +div.jqismooth button.jqismoothdefaultbutton{ + background-color: #BF5E26; +} +.jqismoothwarning .jqismooth .jqismoothbuttons{ + background-color: #BF5E26; +} diff --git a/src/themes/zoo.css b/src/themes/zoo.css new file mode 100644 index 0000000..ac9c98e --- /dev/null +++ b/src/themes/zoo.css @@ -0,0 +1,44 @@ +/* The Impromptzoo theme by Trent Richardson, based on http://stammtec.de/work/upload-dialog/ */ + +/* layout */ +.jqizoofade{ position: absolute; background-color: #000; } +div.jqizoo{ width: 400px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; position: absolute; background-color: #ffffff; font-size: 11px; text-align: left; + border: solid 2px #333; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } + +/* container */ +div.jqizoo .jqizoocontainer{ background-color: #5b6776; } +div.jqizoo .jqizooclose{ position: absolute; top: 0; right: 8px; width: 20px; padding: 2px 0 2px 0; text-align: center; cursor: default; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #333; + background-color: #d4797b; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d4797b), to(#b34b4d)); background-image: -webkit-linear-gradient(top, #d4797b, #b34b4d); background-image: -moz-linear-gradient(top, #d4797b, #b34b4d); background-image: -ms-linear-gradient(top, #d4797b, #b34b4d); background-image: -o-linear-gradient(top, #d4797b, #b34b4d); + border: solid 1px #555; border-top: none; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;} +div.jqizoo .jqizootitle{ padding: 10px 10px; font-size: 14px; color: #333; line-height: 20px; text-align: center; text-shadow: 1px 1px 1px #999; letter-spacing: 1px; + background-color: #f0f0f0; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#dbdbdb)); background-image: -webkit-linear-gradient(top, #f0f0f0, #dbdbdb); background-image: -moz-linear-gradient(top, #f0f0f0, #dbdbdb); background-image: -ms-linear-gradient(top, #f0f0f0, #dbdbdb); background-image: -o-linear-gradient(top, #f0f0f0, #dbdbdb); + border-bottom: solid 1px #949494; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; } +div.jqizoo .jqizoomessage{ padding: 10px; line-height: 20px; color: #444444; background-color: #fff; + border-bottom: solid 1px #333; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; } + +/* buttons */ +div.jqizoo .jqizoobuttons{ text-align: right; padding: 6px 0 6px 0; + background-color: #5b6776; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5b6776), to(#303940)); background-image: -webkit-linear-gradient(top, #5b6776, #303940); background-image: -moz-linear-gradient(top, #5b6776, #303940); background-image: -ms-linear-gradient(top, #5b6776, #303940); background-image: -o-linear-gradient(top, #5b6776, #303940); + border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; } +div.jqizoo button{ padding: 3px 10px; margin: 0 10px; background-color: #2F6073; color: #ffffff; font-weight: bold; font-size: 12px; text-shadow: 1px 1px 1px #333; + background-color: #78a0ce; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#78a0ce), to(#516cb6)); background-image: -webkit-linear-gradient(top, #78a0ce, #516cb6); background-image: -moz-linear-gradient(top, #78a0ce, #516cb6); background-image: -ms-linear-gradient(top, #78a0ce, #516cb6); background-image: -o-linear-gradient(top, #78a0ce, #516cb6); + /* yellow background-color: #dab150; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dab150), to(#c49629)); background-image: -webkit-linear-gradient(top, #dab150, #c49629); background-image: -moz-linear-gradient(top, #dab150, #c49629); background-image: -ms-linear-gradient(top, #dab150, #c49629); background-image: -o-linear-gradient(top, #dab150, #c49629); */ + border: solid 1px #192432; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } +div.jqizoo button:hover{ color: #eee; } +div.jqizoo button.jqizoodefaultbutton{ background-color: #d4797b; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d4797b), to(#b34b4d)); background-image: -webkit-linear-gradient(top, #d4797b, #b34b4d); background-image: -moz-linear-gradient(top, #d4797b, #b34b4d); background-image: -ms-linear-gradient(top, #d4797b, #b34b4d); background-image: -o-linear-gradient(top, #d4797b, #b34b4d); } +.jqizoowarning .jqizoo .jqizoobuttons button{ border-color: #dab150; } + +/* arrows */ +.jqizoo .jqizooarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent; } +.jqizoo .jqizooarrowtl{ left: 10px; top: -20px; border-bottom-color: #333; } +.jqizoo .jqizooarrowtc{ left: 50%; top: -20px; border-bottom-color: #333; margin-left: -10px; } +.jqizoo .jqizooarrowtr{ right: 10px; top: -20px; border-bottom-color: #333; } +.jqizoo .jqizooarrowbl{ left: 10px; bottom: -20px; border-top-color: #333; } +.jqizoo .jqizooarrowbc{ left: 50%; bottom: -20px; border-top-color: #333; margin-left: -10px; } +.jqizoo .jqizooarrowbr{ right: 10px; bottom: -20px; border-top-color: #333; } +.jqizoo .jqizooarrowlt{ left: -20px; top: 10px; border-right-color: #333; } +.jqizoo .jqizooarrowlm{ left: -20px; top: 50%; border-right-color: #333; margin-top: -10px; } +.jqizoo .jqizooarrowlb{ left: -20px; bottom: 10px; border-right-color: #333; } +.jqizoo .jqizooarrowrt{ right: -20px; top: 10px; border-left-color: #333; } +.jqizoo .jqizooarrowrm{ right: -20px; top: 50%; border-left-color: #333; margin-top: -10px; } +.jqizoo .jqizooarrowrb{ right: -20px; bottom: 10px; border-left-color: #333; }
\ No newline at end of file diff --git a/themes/brown/brown.css b/themes/brown/brown.css deleted file mode 100644 index 6632362..0000000 --- a/themes/brown/brown.css +++ /dev/null @@ -1,65 +0,0 @@ -/* ------------------------------- - brown theme ------------------------------- -*/ -.brownJqiwarning .brownJqi{ background-color: #cccccc; } -.brownJqifade{ - position: absolute; - background-color: #ffffff; -} -div.brownJqi{ - position: absolute; - background-color: transparent; - padding: 10px; - width: 300px; - text-align: left; -} -div.brownJqi .brownJqiclose{ - float: right; - margin: -20px 0 0 0; - cursor: pointer; - color: #777777; - font-size: 11px; -} -div.brownJqi .brownJqicontainer{ - position: relative; - background-color: transparent; - border: solid 1px #5F5D5A; - color: #ffffff; - font-weight: bold; -} -div.brownJqi .brownJqimessage{ - position: relative; - background-color: #F7F6F2; - border-top: solid 1px #C6B8AE; - border-bottom: solid 1px #C6B8AE; -} -div.brownJqi .brownJqimessage h3{ - background: url(brown_theme_gradient.jpg) top left repeat-x #ffffff; - margin: 0; - padding: 7px 0 7px 15px; - color: #4D4A47; -} -div.brownJqi .brownJqimessage p{ - padding: 10px; - color: #777777; -} -div.brownJqi .brownJqimessage img.helpImg{ - position: absolute; - bottom: -25px; - left: 10px; -} -div.brownJqi .brownJqibuttons{ - text-align: right; -} -div.brownJqi button{ - background: url(brown_theme_gradient.jpg) top left repeat-x #ffffff; - border: solid #777777 1px; - font-size: 12px; - padding: 3px 10px 3px 10px; - margin: 5px 5px 5px 10px; -} -div.brownJqi button:hover{ - border: solid #aaaaaa 1px; -} diff --git a/themes/brown/brown_theme_gradient.jpg b/themes/brown/brown_theme_gradient.jpg Binary files differdeleted file mode 100644 index fce9942..0000000 --- a/themes/brown/brown_theme_gradient.jpg +++ /dev/null diff --git a/themes/brown/help.gif b/themes/brown/help.gif Binary files differdeleted file mode 100644 index bdb53ec..0000000 --- a/themes/brown/help.gif +++ /dev/null diff --git a/themes/columns/button_bg.jpg b/themes/columns/button_bg.jpg Binary files differdeleted file mode 100644 index 8797946..0000000 --- a/themes/columns/button_bg.jpg +++ /dev/null diff --git a/themes/columns/columns.css b/themes/columns/columns.css deleted file mode 100644 index 8632ce7..0000000 --- a/themes/columns/columns.css +++ /dev/null @@ -1,52 +0,0 @@ -/* ------------------------------- - columns ------------------------------- -*/ -.colsJqifadewarning .colsJqi{ background-color: #b0be96; } -.colsJqifade{ - position: absolute; - background-color: #ffffff; -} -div.colsJqi{ - position: absolute; - background-color: #d0dEb6; - padding: 10px; - width: 400px; - text-align: left; -} -div.colsJqi .colsJqiclose{ - float: right; - margin: -35px -10px 0 0; - cursor: pointer; - color: #bbbbbb; -} -div.colsJqi .colsJqicontainer{ - background-color: #e0eEc6; - padding: 5px; - color: #ffffff; - font-weight: bold; - height: 160px; -} -div.colsJqi .colsJqimessage{ - background-color: #c0cEa6; - padding: 10px; - width: 280px; - height: 140px; - float: left; -} -div.colsJqi .jqibuttons{ - text-align: center; - padding: 5px 0 0 0; -} -div.colsJqi button{ - background: url(button_bg.jpg) top left repeat-x #ffffff; - border: solid #777777 1px; - font-size: 12px; - padding: 3px 10px 3px 10px; - margin: 5px 5px 5px 10px; - width: 75px; -} -div.colsJqi button:hover{ - border: solid #aaaaaa 1px; -} |