skeuocard-rails 0.0.2.alpha → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4f9145480cd2f59859b877288ff0b225d70a5508
-  data.tar.gz: 009cd906c292294b6e7ed64d9e93ce91f68d397a
+  metadata.gz: e4be86aea090ca33b2bfd85349acf5db89f545ec
+  data.tar.gz: 18332365678a2244f807a690ba1d2b8893e12a50
 SHA512:
-  metadata.gz: fd2ce45f6e00ff470b7e58ed54772a2b8913973c421af420c5cc091d74d6c33743fe138dfd29491b2d9ae3bfa18c3445d99f4e5808465a5c6ee7f4cd3bffdd40
-  data.tar.gz: fe72cffd4dac66543689729bf81644ee2e94d1bd7dafc3a5070d48abeec5b4f785cb1ff2c1e630f0c7abb148bab248a090729182ca98fa1337bd53473fa676ec
+  metadata.gz: d864c4bd73f6420a522cb82a80dd30260bd00445bf51341d5a605a2e8df6f62c437aba6ac3af39a57a986de158523776df20458fc5ea11e0be575aff4a60c016
+  data.tar.gz: e51781ce9badf007f42a90a2df4a24b3cc50b9db5a636c140231e80c99ba0bf150ddd5bfc94fe4d344a2aaee4a5c7587030eb8cfe044b382cc74714d75d58149

data/vendor/assets/javascripts/skeuocard.js

@@ -973,14 +973,16 @@
     SegmentedCardNumberInputView.prototype._focusField = function(field, place) {
       var fieldLen;
       if (field.length !== 0) {
-        field.focus();
-        if (place === 'start') {
-          return field[0].setSelectionRange(0, 0);
-        } else if (place === 'end') {
-          fieldLen = field[0].maxLength;
-          return field[0].setSelectionRange(fieldLen, fieldLen);
-        } else {
-          return field[0].setSelectionRange(place[0], place[1]);
+        field[0].focus();
+        if ($(field[0]).is(':visible') && field[0] === document.activeElement) {
+          if (place === 'start') {
+            return field[0].setSelectionRange(0, 0);
+          } else if (place === 'end') {
+            fieldLen = field[0].maxLength;
+            return field[0].setSelectionRange(fieldLen, fieldLen);
+          } else {
+            return field[0].setSelectionRange(place[0], place[1]);
+          }
         }
       }
     };
@@ -1465,7 +1467,7 @@
     }
   };
 
-  CCProducts[/^37/] = {
+  CCProducts[/^3[47]/] = {
     companyName: "American Express",
     companyShortname: "amex",
     cardNumberGrouping: [4, 6, 5],

data/vendor/assets/stylesheets/src/_cards.scss

@@ -1,5 +1,13 @@
 @import "util";
 
+$image-front-background: image-url('card-front-background.png');
+$image-generic-front: image-url('products/generic-front.png');
+$image-generic-back: image-url('products/generic-back.png');
+
+$card-face-width: 24.8em;
+$card-face-height: 15.6em;
+$sprite-front-height: 93.6em;
+
 // *****************************************************************************
 // Generic card layout
 // *****************************************************************************
@@ -7,8 +15,8 @@
 
   input{
     border: none;
-    @include vendor-prefix(border-radius, 3px);
     outline: none;
+    @include vendor-prefix(border-radius, 3px);
   }
 
   input:focus{
@@ -17,15 +25,22 @@
   }
 
   .face.front {
-    background: #eee url('../images/products/generic-front.png') no-repeat right bottom;
+    background-color: #eee;
+    background-image: image-url('products/generic-front.png'), $image-front-background;
+    background-repeat: no-repeat;
+    background-size: cover;
   }
+
   .face.back {
-    background: #eee url('../images/products/generic-back.png') no-repeat center center;
+    background-color: #eee;
+    background-image: image-url('products/generic-back.png');
+    background-repeat: no-repeat;
+    background-size: cover;
   }
 
   .cc-number{
     position: absolute;
-    display: block; 
+    display: block;
     //left:36px;
     left: 1.8em;
     top: 8.05em;
@@ -50,6 +65,14 @@
 // This is inherited by card products.
 // *****************************************************************************
 .skeuocard.card-product {
+  .face.front{
+    background-repeat: no-repeat, no-repeat;
+    background-size: cover, cover;
+  }
+  .face.back{
+    background-repeat: no-repeat, no-repeat;
+    background-size: cover, cover;
+  }
   .cc-number {
     background-color: transparent;
     padding: 0.1em;
@@ -63,8 +86,8 @@
     }
   }
   .cc-exp {
-    position: absolute; 
-    display: block; 
+    position: absolute;
+    display: block;
     input, .separator {
       margin: 0; padding: 0;
       font-size: 1em;
@@ -79,8 +102,8 @@
   }
   .cc-name {
     margin: 0; padding: 0;
-    position: absolute; 
-    display: block; 
+    position: absolute;
+    display: block;
     font-size: 1em;
     font-family: $cc-field-family;
     background-color: transparent;
@@ -89,8 +112,8 @@
   }
   .cc-cvc {
     margin: 0; padding: 0;
-    position: absolute; 
-    display: block; 
+    position: absolute;
+    display: block;
     font-size: 1em;
     font-family: $cc-label-family;
     background-color: transparent;
@@ -120,14 +143,14 @@
   @extend .skeuocard.card-product;
 
   .face.front{
-    background: #eee url('../images/products/visa-front.png') no-repeat right bottom;
+    background-image: image-url('products/visa-front.png'), $image-front-background;
   }
   .face.back {
-    background: #eee url('../images/products/visa-back.png') no-repeat center center;
+    background-image: image-url('products/visa-back.png'), $image-generic-back;
   }
 
   .cc-number{
-    left: 1.8em; 
+    left: 1.8em;
     top: 8.05em;
   }
 
@@ -151,7 +174,7 @@
   // This card puts all required information on the back, rather than the front.
   &.issuer-chase-sapphire{
     .face.front{
-      background-image: url('../images/issuers/visa-chase-sapphire.png');
+      background-image: image-url('issuers/visa-chase-sapphire.png');
     }
     .cc-name{
       left: 1.25em;
@@ -174,7 +197,7 @@
     }
     .cc-exp{
       left: 3.75em;
-      top: 11.5em; 
+      top: 11.5em;
       input, .separator{
         font-family: $cc-label-family;
         &.group2{ width: 1.6em; }
@@ -187,9 +210,10 @@
 
   }
 
+  /*
   &.issuer-simple{
     .face.front{
-      background-image: url('../images/issuers/visa-simple-front.png');
+      background-image: image-url('issuers/visa-simple-front.png');
     }
     input, .separator {
       color: #eee;
@@ -197,8 +221,8 @@
       text-shadow: 1px 1px 1px #bbb;
       filter: dropshadow(color=#aaa, offx=1, offy=1);
       border: none;
-      @include input-placeholder{ 
-        color: #fff; 
+      @include input-placeholder{
+        color: #fff;
         text-shadow: 1px 1px 1px #ccc;
         filter: dropshadow(color=#ddd, offx=1, offy=1);
       };
@@ -207,6 +231,7 @@
       background-color: transparent;
     }
   }
+  */
 
 }
 
@@ -217,10 +242,10 @@
   @extend .skeuocard.card-product;
 
   .face.front {
-    background: #eee url('../images/products/amex-front.png') no-repeat right bottom;
+    background-image: image-url('products/amex-front.png'), $image-front-background;
   }
   .face.back{
-    background: #eee url('../images/products/visa-back.png') no-repeat center center;
+    background-image: image-url('products/visa-back.png'), $image-generic-back;
   }
 
   .cc-number{
@@ -252,10 +277,10 @@
   @extend .skeuocard.card-product;
 
   .face.front{
-    background: #eee url('../images/products/dinersclubintl-front.png') no-repeat right bottom;
+    background-image: image-url('products/dinersclubintl-front.png'), $image-front-background;
   }
   .face.back{
-    background: #eee url('../images/products/visa-back.png') no-repeat center center;
+    background-image: image-url('products/visa-back.png'), $image-generic-back;
   }
   .cc-number{
     left: 1.8em;
@@ -283,10 +308,10 @@
   @extend .skeuocard.card-product;
 
   .face.front{
-    background: #eee url('../images/products/mastercard-front.png') no-repeat right bottom;
+    background-image: image-url('products/mastercard-front.png'), $image-front-background;
   }
   .face.back{
-    background: #eee url('../images/products/visa-back.png') no-repeat center center;
+    background-image: image-url('products/visa-back.png'), $image-generic-back;
   }
 
   .cc-number{
@@ -318,10 +343,10 @@
   @extend .skeuocard.card-product;
 
   .face.front{
-    background: #eee url('../images/products/discover-front.png') no-repeat right bottom;
+    background-image: image-url('products/discover-front.png'), $image-front-background;
   }
   .face.back{
-    background: #eee url('../images/products/visa-back.png') no-repeat center center;
+    background-image: image-url('products/visa-back.png'), $image-generic-back;
   }
 
   .cc-number{
@@ -343,4 +368,14 @@
     left: 18.1em;
     width: 3em;
   }
-}
+}
+
+/* Preload face images */
+body:after{
+    display:none;
+    content: image-url('products/visa-front.png')
+             image-url('products/amex-front.png')
+             image-url('products/discover-front.png')
+             image-url('products/mastercard-front.png')
+             image-url('products/dinersclubintl-front.png');
+}

data/vendor/assets/stylesheets/src/skeuocard.reset.scss

@@ -49,4 +49,8 @@
       border-collapse:collapse;
       border-spacing:0;
   }
+  input, fieldset{
+    line-height: normal;
+    height: auto;
+  }
 }

data/vendor/assets/stylesheets/src/skeuocard.scss

@@ -49,18 +49,13 @@ $color-valid: #00CFA7;
       backface-visibility: hidden;
       -webkit-backface-visibility: visible;
       -webkit-backface-visibility: hidden;
-
-      -webkit-transform-style: preserve-3d;
-      -moz-transform-style: preserve-3d;
-      -o-transform-style: preserve-3d;
-      -ms-transform-style: preserve-3d;
-      transform-style: preserve-3d;
-
-      -webkit-transition: all 0.25s ease;
-      -moz-transition: all 0.25s ease;
-      -o-transition: all 0.25s ease;
-      -ms-transition: all 0.25s ease;
-      transition: all 0.25s ease;
+      
+      @include vendor-prefix(transform-style, preserve-3d);
+      -webkit-transition: -webkit-transform 0.25s ease, background-image 0.25s ease;
+      -ms-transition: -ms-transform 0.25s ease, background-image 0.25s ease;
+      -moz-transition: -moz-transform 0.25s ease, background-image 0.25s ease;
+      -o-transition: -o-transform 0.25s ease, background-image 0.25s ease;
+      transition: transform 0.25s ease, background-image 0.25s ease;
 
       position: absolute;
       top: 0;
@@ -70,8 +65,7 @@ $color-valid: #00CFA7;
       -webkit-border-radius: 1.15em;
       border-radius: 1.15em;
       background-color: #eee;
-      background-size: cover !important;
-      background-position: right bottom;
+      background-size: cover;
       border: 1px solid #ddd;
     }
 
@@ -171,4 +165,4 @@ $color-valid: #00CFA7;
 }
 
 @import "_cards";
-@import "_browser_hacks";
+@import "_browser_hacks";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: skeuocard-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.2.alpha
+  version: 0.1.0
 platform: ruby
 authors:
 - Thomas Darde
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-08-05 00:00:00.000000000 Z
+date: 2013-08-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -38,10 +38,10 @@ files:
 - vendor/assets/fonts/ocra-webfont.ttf
 - vendor/assets/fonts/ocra-webfont.woff
 - vendor/assets/images/card-flip-arrow.png
+- vendor/assets/images/card-front-background.png
 - vendor/assets/images/card-invalid-indicator.png
 - vendor/assets/images/card-valid-anim.gif
 - vendor/assets/images/card-valid-indicator.png
-- vendor/assets/images/issuers/amex-blackcard-front.png
 - vendor/assets/images/issuers/visa-chase-sapphire.png
 - vendor/assets/images/issuers/visa-simple-front.png
 - vendor/assets/images/products/amex-front.png
@@ -76,9 +76,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>'
+  - - '>='
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.0.3