Permalink
Browse files

first version: tests, example, lib

  • Loading branch information...
1 parent ab0a49d commit 10251bfb492690c16552b10238a21ea132298bd8 @jgallen23 jgallen23 committed Dec 19, 2012
Showing with 807 additions and 11 deletions.
  1. +3 −2 component.json
  2. +29 −0 dist/fidel-modal.css
  3. +59 −0 dist/fidel-modal.js
  4. +8 −0 dist/fidel-modal.min.js
  5. +55 −0 example/index.html
  6. +30 −4 grunt.js
  7. +51 −0 lib/fidel-modal.js
  8. +9 −0 lib/modal.less
  9. +3 −1 package.json
  10. +370 −0 support/assert.js
  11. +179 −0 test/fidel-modal.test.js
  12. +11 −4 test/index.html
View
@@ -6,7 +6,8 @@
"license": "MIT",
"copyright": "Greg Allen",
"dependencies": {
- "jquery": "1.8.*",
- "fidel": "2.0.*"
+ "jquery": "~1.8.3",
+ "fidel": "~2.1.0",
+ "baseline": "~0.3.0"
}
}
View
@@ -0,0 +1,29 @@
+.modal {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ position: fixed;
+ padding: 10px;
+ top: 100px;
+ left: 50%;
+ z-index: 999;
+ overflow: auto;
+ width: 900px;
+ margin: 0 0 0 -450px;
+ background-color: #ffffff;
+ border: 1px solid #999;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ border-radius: 6px;
+ box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+ background-clip: padding-box;
+}
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 900;
+ background-color: #000000;
+ opacity: 0.8;
+}
View
@@ -0,0 +1,59 @@
+/*!
+ * fidel-modal - Modal plugin built with fidel
+ * v0.1.0
+ * https://github.com/jgallen23/fidel-modal
+ * copyright Greg Allen 2012
+ * MIT License
+*/
+
+
+$.declare('modal', {
+ defaults: {
+ modalClass: 'modal',
+ backdropClass: 'modal-backdrop',
+ backdropClick: true
+ },
+
+ init: function() {
+
+ if ($('.modal').length !== 0) {
+ $('.modal').modal('hide');
+ }
+
+ this.show();
+ if (this.backdropClick) {
+ this.getBackdrop().on('click', this.proxy(this.hide));
+ }
+ },
+
+ getBackdrop: function() {
+ return $('.'+this.backdropClass);
+ },
+
+ showBackdrop: function() {
+ this.hideBackdrop();
+ var el = $('<div/>').addClass(this.backdropClass);
+ $('body').append(el);
+ },
+
+ hideBackdrop: function() {
+ this.getBackdrop().remove();
+ },
+
+ show: function() {
+ this.el.addClass(this.modalClass);
+ $('body').css('overflow', 'hidden');
+ this.showBackdrop();
+ this.el.show();
+ this.emit('show');
+ },
+
+ hide: function() {
+ this.el.removeClass(this.modalClass);
+ $('body').css('overflow', '');
+ this.hideBackdrop();
+ this.el.hide();
+ this.emit('hide');
+ this.el.removeData('modal');
+ }
+});
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -3,9 +3,64 @@
<head>
<meta charset="utf-8" />
<title>fidel-modal example</title>
+ <link rel="stylesheet" href="../dist/fidel-modal.css"/>
+ <style>
+ .content {
+ display: none;
+ }
+ .content button {
+ float: right;
+ }
+ </style>
</head>
<body>
+ <button id="show">Show Modal</button>
+ <button id="showBD">Show Modal with backdropClick = false</button>
+ <div class="content">
+ <button data-action="hide">X</button>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ </div>
+ <div class="dummy">
+ <p>Dummy content to show that scroll wheel is disabled when modal is visible</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
+ </div>
+
+
+ <script src="../components/jquery/jquery.js"></script>
+ <script src="../components/fidel/dist/fidel.js"></script>
<script src="../dist/fidel-modal.js"></script>
+ <script>
+ $('#show').on('click', function() {
+ $('.content').modal();
+ });
+ $('#showBD').on('click', function() {
+ $('.content').modal({ backdropClick: false });
+ });
+ </script>
</body>
</html>
View
@@ -42,18 +42,44 @@ module.exports = function(grunt) {
run: true
}
},
+ less:{
+ modal: {
+ files: {
+ 'dist/fidel-modal.css': 'lib/modal.less'
+ }
+ }
+ },
watch: {
js: {
- files: '<config:lint.all>',
- tasks: 'default'
+ files: [
+ '<config:lint.all>',
+ 'test/index.html',
+ 'example/*'
+ ],
+ tasks: 'script'
+ },
+ less: {
+ files: [
+ 'lib/modal.less'
+ ],
+ tasks: 'less'
}
},
+ reloadr: {
+ test: [
+ 'dist/*',
+ 'test/*'
+ ]
+ },
server:{
port: 8000,
base: '.'
}
});
+ grunt.loadNpmTasks('grunt-contrib-less');
+ grunt.loadNpmTasks('grunt-reloadr');
grunt.loadNpmTasks('grunt-mocha');
- grunt.registerTask('default', 'lint concat min mocha');
- grunt.registerTask('dev', 'server watch');
+ grunt.registerTask('script', 'lint concat min');
+ grunt.registerTask('default', 'script less');
+ grunt.registerTask('dev', 'default server reloadr watch');
};
Oops, something went wrong.

0 comments on commit 10251bf

Please sign in to comment.