Permalink
Browse files

Separated CSS/JS into their own assets, added docs

Removed accidental .swo and .swp files
  • Loading branch information...
1 parent 9d9f999 commit f09fc37212fe1080a29e35912953399309e49806 Kenny Katzgrau committed Sep 7, 2011
Showing with 290 additions and 224 deletions.
  1. +2 −0 .gitignore
  2. +12 −224 index.html
  3. +96 −0 js/jquery.boomcalc-0.0.1/css/jquery.boomcalc.css
  4. +180 −0 js/jquery.boomcalc-0.0.1/js/jquery.boomcalc.js
View
@@ -0,0 +1,2 @@
+*.swp
+*.swo
View
@@ -1,226 +1,14 @@
<html>
- <head>
- <title></title>
- </head>
- <body>
- <h1>boomcalc plugin</h1>
- <div id="boomcalc"></div>
- <style type="text/css">
- .boomcalc {
- border: 1px solid #ccc;
- font-family: Arial;
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E8E8E8), to(#B0B0B0), color-stop(1,#333333));
- background-image: -moz-linear-gradient(19% 75% 90deg,#ababab, #c9c9c9, #c7c7c7 100%);
- -moz-border-radius: 5px;
- border-radius: 5px;
- padding: 5px;
- }
-
- .boomcalc .display {
- background-color: white;
- border: solid 1px #ccc;
- text-align: right;
- height: 10%;
- padding-top: 3%;
- padding-right: 2%;
- background-image: -webkit-gradient(linear, 0% 62%, 0% 100%, from(#EBEBEB), to(#D4D4D4), color-stop(1,#FFFFFF));
- }
-
- .boomcalc .buttons {
- text-shadow: #ddd 1px 1px 0;
- text-shadow: 0px 1px 0 #e5e5ee;
- }
-
- .boomcalc .memory-buttons {
- padding-top: 2%;
- width: 100%;
- float: left;
- }
-
- .boomcalc .primary-buttons {
- padding-top: 2%;
- width: 80%;
- float: left;
- }
-
- .boomcalc .number {
- color: #black;
- }
-
- .boomcalc .operation {
- color: red;
- }
-
- .boomcalc .primary-buttons input {
- width: 33.333333%;
- height: 18%;
- }
-
- .boomcalc input {
- border: solid 1px #ccc;
- margin: 0;
- -moz-border-radius: 3px;
- border-radius: 3px;
- }
-
- .boomcalc input:hover {
- background-color: #F2EEEE;
- }
-
- .boomcalc input:active {
- background-color: #f7f7f7;
- }
-
- .boomcalc .memory-buttons input {
- width: 20%;
- height: 10%;
- border: solid 1px #ccc;
- }
-
- .boomcalc .op-buttons {
- padding-top: 2%;
- width: 18%;
- float: right;
- }
-
- .boomcalc .op-buttons input {
- width: 100%;
- height: 14.5%;
- }
-
- .boomcalc .status-box {
- font-size: 85%;
- width: 20%;
- float: right;
- text-align: center;
- }
-
- .boomcalc .status-text {
- vertical-align: middle;
- padding-top: 2%;
- color: #808080;
- }
-
- </style>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
- <script type="text/javascript">
- (function($){
-
- var calc, display, status, in_op, has_dec, stack = [], settings = {
- width: 200,
- height: 300,
- type: 'simple'
- };
-
- function initialize(el) {
- calc = el;
- calc.empty();
-
- if(settings.type == 'advanced') {
- buildAdvancedCalc();
- } else if(settings.type == 'simple') {
- buildSimpleCalc();
- }
-
- display = calc.find('.display');
- status = calc.find('.status-text');
-
- addHandlers();
- }
-
- function buildSimpleCalc() {
- calc.addClass('boomcalc')
- .append($('<div>').addClass('display').text('0'))
- .append($('<div>').addClass('buttons')
- .append($('<div>').addClass('memory-buttons')
- .append($('<input>').attr('type', 'button').val('m+').addClass('memory'))
- .append($('<input>').attr('type', 'button').val('m-').addClass('memory'))
- .append($('<input>').attr('type', 'button').val('mc').addClass('memory'))
- .append($('<input>').attr('type', 'button').val('mr').addClass('memory'))
- .append($('<div>').addClass('status-box').append('<span>').addClass('status-text'))
- )
- .append($('<div>').addClass('primary-buttons')
- .append($('<input>').attr('type', 'button').val('1').addClass('number'))
- .append($('<input>').attr('type', 'button').val('2').addClass('number'))
- .append($('<input>').attr('type', 'button').val('3').addClass('number'))
- .append($('<input>').attr('type', 'button').val('4').addClass('number'))
- .append($('<input>').attr('type', 'button').val('5').addClass('number'))
- .append($('<input>').attr('type', 'button').val('6').addClass('number'))
- .append($('<input>').attr('type', 'button').val('7').addClass('number'))
- .append($('<input>').attr('type', 'button').val('8').addClass('number'))
- .append($('<input>').attr('type', 'button').val('9').addClass('number'))
- .append($('<input>').attr('type', 'button').val('0').addClass('number'))
- .append($('<input>').attr('type', 'button').val('.').addClass('decimal'))
- .append($('<input>').attr('type', 'button').val('c').addClass('clear'))
- )
- .append($('<div>').addClass('op-buttons')
- .append($('<input>').attr('type', 'button').val('/').addClass('operation'))
- .append($('<input>').attr('type', 'button').val('*').addClass('operation'))
- .append($('<input>').attr('type', 'button').val('-').addClass('operation'))
- .append($('<input>').attr('type', 'button').val('+').addClass('operation'))
- .append($('<input>').attr('type', 'button').val('=').addClass('evaluate'))
- )
- )
- .width(settings.width)
- .height(settings.height)
- .find('*')
- .each(function(i, e) {
- $(e).css('font-size', settings.height / 225 * 12);
- });
-
- }
-
- function buildAdvancedCalc() {
- alert('Not implemented');
- }
-
- function addHandlers() {
- calc.find('.number').click(clickNumber);
- calc.find('.clear').click(clickClear);
- calc.find('.operation').click(clickOperation);
- calc.find('.evaluate').click(clickEvaluate);
- }
-
- function clickNumber(ev) {
- var num = $(ev.target).val();
-
- if(in_op) {
- display.text(0);
- in_op = false;
- }
-
- if(display.text() == '0')
- display.text(num);
- else
- display.append(num);
- }
-
- function clickClear() {
- display.text(0);
- }
-
- function clickOperation(ev) {
- var op = $(ev.target).val();
- stack.push(display.text());
- stack.push(op);
- in_op = true;
- }
-
- function clickEvaluate() {
- stack.push(display.text());
- var result = eval(stack.join(''));
- display.text(result);
- stack = [];
- }
-
- $.fn.boomCalc = function(options) {
- if(options) {
- $.extend(settings, options);
- }
- initialize(this);
- }
- })(jQuery);
- $('#boomcalc').boomCalc();
- </script>
- </body>
+ <head>
+ <title>boomcalc: A JQuery Calculator Plugin</title>
+ <link rel="stylesheet" type="text/css" href="js/jquery.boomcalc-0.0.1/css/jquery.boomcalc.css">
+ </head>
+ <body>
+ <div id="calc"></div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+ <script src="js/jquery.boomcalc-0.0.1/js/jquery.boomcalc.js"></script>
+ <script type="text/javascript">
+ $('#calc').boomCalc();
+ </script>
+ </body>
</html>
@@ -0,0 +1,96 @@
+ .boomcalc {
+ border: 1px solid #ccc;
+ font-family: Arial;
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E8E8E8), to(#B0B0B0), color-stop(1,#333333));
+ background-image: -moz-linear-gradient(19% 75% 90deg,#ababab, #c9c9c9, #c7c7c7 100%);
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ padding: 5px;
+ }
+
+ .boomcalc .display {
+ background-color: white;
+ border: solid 1px #ccc;
+ text-align: right;
+ height: 10%;
+ padding-top: 3%;
+ padding-right: 2%;
+ background-image: -webkit-gradient(linear, 0% 62%, 0% 100%, from(#EBEBEB), to(#D4D4D4), color-stop(1,#FFFFFF));
+ }
+
+ .boomcalc .buttons {
+ text-shadow: #ddd 1px 1px 0;
+ text-shadow: 0px 1px 0 #e5e5ee;
+ }
+
+ .boomcalc .memory-buttons {
+ padding-top: 2%;
+ width: 100%;
+ float: left;
+ }
+
+ .boomcalc .primary-buttons {
+ padding-top: 2%;
+ width: 80%;
+ float: left;
+ }
+
+ .boomcalc .number {
+ color: #black;
+ }
+
+ .boomcalc .operation {
+ color: red;
+ }
+
+ .boomcalc .primary-buttons input {
+ width: 33.333333%;
+ height: 18%;
+ }
+
+ .boomcalc input {
+ border: solid 1px #ccc;
+ margin: 0;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ }
+
+ .boomcalc input:hover {
+ background-color: #F2EEEE;
+ }
+
+ .boomcalc input:active {
+ background-color: #f7f7f7;
+ }
+
+ .boomcalc .memory-buttons input {
+ width: 20%;
+ height: 10%;
+ border: solid 1px #ccc;
+ }
+
+ .boomcalc .op-buttons {
+ padding-top: 2%;
+ width: 18%;
+ float: right;
+ }
+
+ .boomcalc .op-buttons input {
+ width: 100%;
+ height: 14.5%;
+ }
+
+ .boomcalc .status-box {
+ font-size: 85%;
+ width: 20%;
+ float: right;
+ text-align: center;
+ }
+
+ .boomcalc .status-text {
+ vertical-align: middle;
+ padding-top: 2%;
+ color: #808080;
+ }
+
+
Oops, something went wrong.

0 comments on commit f09fc37

Please sign in to comment.