├── .gitignore ├── images ├── test.png ├── bg-body.jpg ├── test-icon1.png ├── test-icon2.png └── test-icon3.png ├── dist ├── js │ ├── jcf.angular.js │ ├── jcf.common.js │ ├── jcf.button.js │ ├── jcf.textarea.js │ ├── jcf.file.js │ ├── jcf.number.js │ ├── jcf.checkbox.js │ ├── jcf.radio.js │ ├── jcf.js │ ├── jcf.range.js │ ├── jcf.scrollable.js │ └── jcf.select.js └── css │ └── theme-minimal │ └── jcf.css ├── js ├── jcf.common.js ├── .jshintrc ├── jcf.angular.js ├── .jscsrc ├── jcf.button.js ├── ie.js ├── jcf.file.js ├── jcf.textarea.js ├── jcf.number.js ├── jcf.checkbox.js ├── jcf.radio.js ├── jcf.js ├── jcf.range.js └── jcf.scrollable.js ├── gulpfile.js ├── bower.json ├── package.json ├── LICENSE.txt ├── css ├── demo.css └── theme-minimal │ └── jcf.css ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /images/test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3co/jcf/HEAD/images/test.png -------------------------------------------------------------------------------- /images/bg-body.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3co/jcf/HEAD/images/bg-body.jpg -------------------------------------------------------------------------------- /images/test-icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3co/jcf/HEAD/images/test-icon1.png -------------------------------------------------------------------------------- /images/test-icon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3co/jcf/HEAD/images/test-icon2.png -------------------------------------------------------------------------------- /images/test-icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/w3co/jcf/HEAD/images/test-icon3.png -------------------------------------------------------------------------------- /dist/js/jcf.angular.js: -------------------------------------------------------------------------------- 1 | /* 2 | * JCF directive for basic AngularJS 1.x integration 3 | */ 4 | angular.module("jcf",[]).directive("jcf",function(){return{restrict:"A",link:function(c,n,e){jcf.replace(n),c.$watch(e.ngModel,function(c){jcf.refresh(n)}),c.$on("$destroy",function(){jcf.destroy(n)})}}}); -------------------------------------------------------------------------------- /dist/js/jcf.common.js: -------------------------------------------------------------------------------- 1 | "use strict";window.jcf=require("./jcf"),require("./jcf.button"),require("./jcf.checkbox"),require("./jcf.file"),require("./jcf.number"),require("./jcf.radio"),require("./jcf.range"),require("./jcf.scrollable"),require("./jcf.select"),require("./jcf.textarea"),module.exports=window.jcf,delete window.jcf; -------------------------------------------------------------------------------- /js/jcf.common.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | window.jcf = require('./jcf'); 4 | 5 | require('./jcf.button'); 6 | require('./jcf.checkbox'); 7 | require('./jcf.file'); 8 | require('./jcf.number'); 9 | require('./jcf.radio'); 10 | require('./jcf.range'); 11 | require('./jcf.scrollable'); 12 | require('./jcf.select'); 13 | require('./jcf.textarea'); 14 | 15 | module.exports = window.jcf; 16 | 17 | delete window.jcf; 18 | 19 | -------------------------------------------------------------------------------- /js/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "asi" : false, 3 | "browser" : true, 4 | "eqeqeq" : true, 5 | "eqnull" : true, 6 | "es3" : true, 7 | "es5" : true, 8 | "expr" : true, 9 | "jquery" : true, 10 | "latedef" : "nofunc", 11 | "laxbreak" : true, 12 | "nonbsp" : true, 13 | "strict" : false, 14 | "undef" : true, 15 | "unused" : true, 16 | "predef" : ["alert", "jcf", "module", "define", "require"] 17 | } 18 | -------------------------------------------------------------------------------- /js/jcf.angular.js: -------------------------------------------------------------------------------- 1 | /* 2 | * JCF directive for basic AngularJS 1.x integration 3 | */ 4 | angular.module('jcf', []).directive('jcf', function() { 5 | return { 6 | restrict: 'A', 7 | link: function (scope, element, attrs) { 8 | jcf.replace(element); 9 | 10 | scope.$watch(attrs.ngModel, function(newValue) { 11 | jcf.refresh(element); 12 | }); 13 | 14 | scope.$on('$destroy', function() { 15 | jcf.destroy(element); 16 | }); 17 | } 18 | } 19 | }); 20 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | csso = require('gulp-csso'), 3 | uglify = require('gulp-uglify'), 4 | del = require('del'); 5 | 6 | gulp.task('clean', function() { 7 | return del('dist'); 8 | }); 9 | 10 | gulp.task('js:compress', ['clean'], function() { 11 | return gulp.src('js/**/jcf*.js') 12 | .pipe(uglify({ preserveComments: 'license' })) 13 | .pipe(gulp.dest('dist/js')); 14 | }); 15 | 16 | gulp.task('css:compress', ['clean'], function () { 17 | return gulp.src('css/**/jcf*.css') 18 | .pipe(csso()) 19 | .pipe(gulp.dest('dist/css')); 20 | }); 21 | 22 | gulp.task('build', ['js:compress', 'css:compress']); 23 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jcf", 3 | "version": "1.2.3", 4 | "homepage": "http://psd2html.com/jcf", 5 | "authors": [ 6 | "psd2html" 7 | ], 8 | "description": "This script allows smooth cross-browser customization of form elements with CSS", 9 | "main": "./js/jcf.js", 10 | "moduleType": [ 11 | "amd", 12 | "globals", 13 | "node" 14 | ], 15 | "keywords": [ 16 | "jQuery", 17 | "JCF", 18 | "form", 19 | "element", 20 | "style" 21 | ], 22 | "license": "MIT", 23 | "ignore": [ 24 | ".jshintrc", 25 | ".jscsrc", 26 | "**/.*", 27 | "node_modules", 28 | "bower_components", 29 | "test", 30 | "tests" 31 | ], 32 | "dependencies": { 33 | "jquery": ">=1.7" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jcf", 3 | "version": "1.2.3", 4 | "description": "This script allows smooth cross-browser customization of form elements with CSS", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/w3co/jcf.git" 8 | }, 9 | "scripts": { 10 | "build": "gulp build" 11 | }, 12 | "keywords": [ 13 | "jQuery", 14 | "JCF", 15 | "form", 16 | "element", 17 | "style" 18 | ], 19 | "author": "psd2html", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/w3co/jcf/issues" 23 | }, 24 | "homepage": "http://psd2html.com/jcf", 25 | "main": "./js/jcf.common.js", 26 | "devDependencies": { 27 | "del": "^2.2.0", 28 | "gulp": "^3.9.1", 29 | "gulp-csso": "^2.0.0", 30 | "gulp-uglify": "^1.5.3" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2014, PSD2HTML (http://psd2html.com) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /js/.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "disallowEmptyBlocks": true, 3 | "disallowKeywords": ["with"], 4 | "disallowMixedSpacesAndTabs": true, 5 | "disallowMultipleLineStrings": true, 6 | "disallowQuotedKeysInObjects": "allButReserved", 7 | "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"], 8 | "disallowSpaceAfterObjectKeys": true, 9 | "disallowSpaceBeforeBinaryOperators": [","], 10 | "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"], 11 | "disallowSpacesInNamedFunctionExpression": { "beforeOpeningRoundBrace": true }, 12 | "disallowSpacesInsideArrayBrackets": true, 13 | "disallowSpacesInsideParentheses": true, 14 | "disallowTrailingComma": true, 15 | "disallowTrailingWhitespace": true, 16 | "requireCamelCaseOrUpperCaseIdentifiers": true, 17 | "requireCapitalizedConstructors": true, 18 | "requireCommaBeforeLineBreak": true, 19 | "requireDotNotation": true, 20 | "requireLineFeedAtFileEnd": true, 21 | "requireSpaceAfterBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="], 22 | "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"], 23 | "requireSpaceAfterLineComment": true, 24 | "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="], 25 | "requireSpaceBetweenArguments": true, 26 | "requireSpacesInAnonymousFunctionExpression": { "beforeOpeningCurlyBrace": true }, 27 | "requireSpacesInConditionalExpression": true, 28 | "requireSpacesInForStatement": true, 29 | "requireSpacesInFunctionDeclaration": { "beforeOpeningCurlyBrace": true }, 30 | "requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true }, 31 | "requireSpacesInNamedFunctionExpression": { "beforeOpeningCurlyBrace": true }, 32 | "requireSpacesInsideObjectBrackets": "allButNested", 33 | "validateIndentation": "\t", 34 | "validateLineBreaks": "LF", 35 | "validateQuoteMarks": "'" 36 | } 37 | -------------------------------------------------------------------------------- /dist/js/jcf.button.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : Button Module 3 | * 4 | * Copyright 2014-2015 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | !function(t){t.addModule(function(t){"use strict";return{name:"Button",selector:'button, input[type="button"], input[type="submit"], input[type="reset"]',options:{realElementClass:"jcf-real-element",fakeStructure:'',buttonContent:".jcf-button-content"},matchElement:function(t){return t.is(this.selector)},init:function(){this.initStructure(),this.attachEvents(),this.refresh()},initStructure:function(){this.page=t("html"),this.realElement=t(this.options.element).addClass(this.options.realElementClass),this.fakeElement=t(this.options.fakeStructure).insertBefore(this.realElement),this.buttonContent=this.fakeElement.find(this.options.buttonContent),this.fakeElement.css({position:"relative"}),this.realElement.prependTo(this.fakeElement).css({position:"absolute",opacity:0})},attachEvents:function(){this.realElement.on({focus:this.onFocus,"jcf-pointerdown":this.onPress})},onPress:function(){this.fakeElement.addClass(this.options.pressedClass),this.page.on("jcf-pointerup",this.onRelease)},onRelease:function(){this.fakeElement.removeClass(this.options.pressedClass),this.page.off("jcf-pointerup",this.onRelease)},onFocus:function(){this.fakeElement.addClass(this.options.focusClass),this.realElement.on("blur",this.onBlur)},onBlur:function(){this.fakeElement.removeClass(this.options.focusClass),this.realElement.off("blur",this.onBlur)},refresh:function(){this.buttonContent.html(this.realElement.html()||this.realElement.val()),this.fakeElement.toggleClass(this.options.disabledClass,this.realElement.is(":disabled"))},destroy:function(){this.realElement.removeClass(this.options.realElementClass).insertBefore(this.fakeElement),this.fakeElement.remove(),this.realElement.off({focus:this.onFocus,blur:this.onBlur,"jcf-pointerdown":this.onPress}),this.realElement.css({position:"",opacity:""})}}})}(jcf); -------------------------------------------------------------------------------- /js/jcf.button.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : Button Module 3 | * 4 | * Copyright 2014-2016 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | 10 | (function(jcf) { 11 | 12 | jcf.addModule(function($) { 13 | 'use strict'; 14 | 15 | return { 16 | name: 'Button', 17 | selector: 'button, input[type="button"], input[type="submit"], input[type="reset"]', 18 | options: { 19 | realElementClass: 'jcf-real-element', 20 | fakeStructure: '', 21 | buttonContent: '.jcf-button-content' 22 | }, 23 | matchElement: function(element) { 24 | return element.is(this.selector); 25 | }, 26 | init: function() { 27 | this.initStructure(); 28 | this.attachEvents(); 29 | this.refresh(); 30 | }, 31 | initStructure: function() { 32 | this.page = $('html'); 33 | this.realElement = $(this.options.element).addClass(this.options.realElementClass); 34 | this.fakeElement = $(this.options.fakeStructure).insertBefore(this.realElement); 35 | this.buttonContent = this.fakeElement.find(this.options.buttonContent); 36 | 37 | this.fakeElement.css({ 38 | position: 'relative' 39 | }); 40 | this.realElement.prependTo(this.fakeElement).css({ 41 | position: 'absolute', 42 | opacity: 0 43 | }); 44 | }, 45 | attachEvents: function() { 46 | this.realElement.on({ 47 | focus: this.onFocus, 48 | 'jcf-pointerdown': this.onPress 49 | }); 50 | }, 51 | onPress: function() { 52 | this.fakeElement.addClass(this.options.pressedClass); 53 | this.page.on('jcf-pointerup', this.onRelease); 54 | }, 55 | onRelease: function() { 56 | this.fakeElement.removeClass(this.options.pressedClass); 57 | this.page.off('jcf-pointerup', this.onRelease); 58 | }, 59 | onFocus: function() { 60 | this.fakeElement.addClass(this.options.focusClass); 61 | this.realElement.on('blur', this.onBlur); 62 | }, 63 | onBlur: function() { 64 | this.fakeElement.removeClass(this.options.focusClass); 65 | this.realElement.off('blur', this.onBlur); 66 | }, 67 | refresh: function() { 68 | this.buttonContent.html(this.realElement.html() || this.realElement.val()); 69 | this.fakeElement.toggleClass(this.options.disabledClass, this.realElement.is(':disabled')); 70 | }, 71 | destroy: function() { 72 | this.realElement.removeClass(this.options.realElementClass).insertBefore(this.fakeElement); 73 | this.fakeElement.remove(); 74 | 75 | this.realElement.off({ 76 | focus: this.onFocus, 77 | blur: this.onBlur, 78 | 'jcf-pointerdown': this.onPress 79 | }); 80 | 81 | this.realElement.css({ 82 | position: '', 83 | opacity: '' 84 | }); 85 | } 86 | }; 87 | }); 88 | 89 | }(jcf)); 90 | -------------------------------------------------------------------------------- /dist/js/jcf.textarea.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : Textarea Module 3 | * 4 | * Copyright 2014-2015 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | !function(e){e.addModule(function(t){"use strict";return{name:"Textarea",selector:"textarea",options:{resize:!0,resizerStructure:'',fakeStructure:''},matchElement:function(e){return e.is("textarea")},init:function(){this.initStructure(),this.attachEvents(),this.refresh()},initStructure:function(){this.doc=t(document),this.realElement=t(this.options.element),this.fakeElement=t(this.options.fakeStructure).insertAfter(this.realElement),this.resizer=t(this.options.resizerStructure).appendTo(this.fakeElement),e.modules.Scrollable&&(this.realElement.prependTo(this.fakeElement).addClass().css({overflow:"hidden",resize:"none"}),this.scrollable=new e.modules.Scrollable({element:this.realElement,alwaysShowScrollbars:!0}),this.scrollable.setScrollBarEdge(this.resizer.outerHeight()))},attachEvents:function(){this.realElement.on({focus:this.onFocus,keyup:this.onChange,change:this.onChange}),this.resizer.on("jcf-pointerdown",this.onResizePress)},onResizePress:function(e){var t=this.resizer.offset(),s=this.fakeElement.offset();e.preventDefault(),this.dragData={areaOffset:s,innerOffsetLeft:e.pageX-t.left,innerOffsetTop:e.pageY-t.top},this.doc.on({"jcf-pointermove":this.onResizeMove,"jcf-pointerup":this.onResizeRelease}),this.isFocused&&(this.focusedDrag=!0,this.realElement.focus())},onResizeMove:function(e){var t=e.pageX+this.dragData.innerOffsetLeft-this.dragData.areaOffset.left,s=e.pageY+this.dragData.innerOffsetTop-this.dragData.areaOffset.top,i=this.fakeElement.innerWidth()-this.realElement.innerWidth();e.preventDefault(),this.realElement.innerWidth(t-i).innerHeight(s),this.scrollable&&this.scrollable.rebuildScrollbars(),this.focusedDrag&&this.realElement.focus()},onResizeRelease:function(){this.doc.off({"jcf-pointermove":this.onResizeMove,"jcf-pointerup":this.onResizeRelease}),delete this.focusedDrag},onFocus:function(){this.isFocused=!0,this.fakeElement.addClass(this.options.focusClass),this.realElement.on("blur",this.onBlur)},onBlur:function(){this.isFocused=!1,this.fakeElement.removeClass(this.options.focusClass),this.realElement.off("blur",this.onBlur)},onChange:function(){this.refreshCustomScrollbars()},refreshCustomScrollbars:function(){this.scrollable&&(this.isFocused?this.scrollable.redrawScrollbars():this.scrollable.rebuildScrollbars())},refresh:function(){var e=this.realElement.is(":disabled");this.fakeElement.toggleClass(this.options.disabledClass,e),this.refreshCustomScrollbars()},destroy:function(){this.scrollable.destroy(),this.realElement.css({overflow:"",resize:""}).insertBefore(this.fakeElement).off({focus:this.onFocus,blur:this.onBlur}),this.fakeElement.remove()}}})}(jcf); -------------------------------------------------------------------------------- /dist/js/jcf.file.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : File Module 3 | * 4 | * Copyright 2014-2015 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | !function(e){e.addModule(function(e){"use strict";return{name:"File",selector:'input[type="file"]',options:{fakeStructure:'',buttonText:"Choose file",placeholderText:"No file chosen",realElementClass:"jcf-real-element",extensionPrefixClass:"jcf-extension-",selectedFileBlock:".jcf-fake-input",buttonTextBlock:".jcf-button-content"},matchElement:function(e){return e.is('input[type="file"]')},init:function(){this.initStructure(),this.attachEvents(),this.refresh()},initStructure:function(){this.doc=e(document),this.realElement=e(this.options.element).addClass(this.options.realElementClass),this.fakeElement=e(this.options.fakeStructure).insertBefore(this.realElement),this.fileNameBlock=this.fakeElement.find(this.options.selectedFileBlock),this.buttonTextBlock=this.fakeElement.find(this.options.buttonTextBlock).text(this.options.buttonText),this.realElement.appendTo(this.fakeElement).css({position:"absolute",opacity:0})},attachEvents:function(){this.realElement.on({"jcf-pointerdown":this.onPress,change:this.onChange,focus:this.onFocus})},onChange:function(){this.refresh()},onFocus:function(){this.fakeElement.addClass(this.options.focusClass),this.realElement.on("blur",this.onBlur)},onBlur:function(){this.fakeElement.removeClass(this.options.focusClass),this.realElement.off("blur",this.onBlur)},onPress:function(){this.fakeElement.addClass(this.options.pressedClass),this.doc.on("jcf-pointerup",this.onRelease)},onRelease:function(){this.fakeElement.removeClass(this.options.pressedClass),this.doc.off("jcf-pointerup",this.onRelease)},getFileName:function(){var t="",s=this.realElement.prop("files");return s&&s.length?e.each(s,function(e,s){t+=(e>0?", ":"")+s.name}):t=this.realElement.val().replace(/^[\s\S]*(?:\\|\/)([\s\S^\\\/]*)$/g,"$1"),t},getFileExtension:function(){var e=this.realElement.val();return e.lastIndexOf(".")<0?"":e.substring(e.lastIndexOf(".")+1).toLowerCase()},updateExtensionClass:function(){var e=this.getFileExtension(),t=this.fakeElement.prop("className"),s=t.replace(new RegExp("(\\s|^)"+this.options.extensionPrefixClass+"[^ ]+","gi"),"");this.fakeElement.prop("className",s),e&&this.fakeElement.addClass(this.options.extensionPrefixClass+e)},refresh:function(){var e=this.getFileName()||this.options.placeholderText;this.fakeElement.toggleClass(this.options.disabledClass,this.realElement.is(":disabled")),this.fileNameBlock.text(e),this.updateExtensionClass()},destroy:function(){this.realElement.insertBefore(this.fakeElement).removeClass(this.options.realElementClass).css({position:"",opacity:""}),this.fakeElement.remove(),this.realElement.off({"jcf-pointerdown":this.onPress,change:this.onChange,focus:this.onFocus,blur:this.onBlur}),this.doc.off("jcf-pointerup",this.onRelease)}}})}(jcf); -------------------------------------------------------------------------------- /dist/js/jcf.number.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : Number Module 3 | * 4 | * Copyright 2014-2015 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | !function(e){e.addModule(function(e){"use strict";return{name:"Number",selector:'input[type="number"]',options:{realElementClass:"jcf-real-element",fakeStructure:'',btnIncSelector:".jcf-btn-inc",btnDecSelector:".jcf-btn-dec",pressInterval:150},matchElement:function(e){return e.is(this.selector)},init:function(){this.initStructure(),this.attachEvents(),this.refresh()},initStructure:function(){this.page=e("html"),this.realElement=e(this.options.element).addClass(this.options.realElementClass),this.fakeElement=e(this.options.fakeStructure).insertBefore(this.realElement).prepend(this.realElement),this.btnDec=this.fakeElement.find(this.options.btnDecSelector),this.btnInc=this.fakeElement.find(this.options.btnIncSelector),this.initialValue=parseFloat(this.realElement.val())||0,this.minValue=parseFloat(this.realElement.attr("min")),this.maxValue=parseFloat(this.realElement.attr("max")),this.stepValue=parseFloat(this.realElement.attr("step"))||1,this.minValue=isNaN(this.minValue)?-(1/0):this.minValue,this.maxValue=isNaN(this.maxValue)?1/0:this.maxValue,isFinite(this.maxValue)&&(this.maxValue-=(this.maxValue-this.minValue)%this.stepValue)},attachEvents:function(){this.realElement.on({focus:this.onFocus}),this.btnDec.add(this.btnInc).on("jcf-pointerdown",this.onBtnPress)},onBtnPress:function(e){var t,s=this;this.realElement.is(":disabled")||(t=this.btnInc.is(e.currentTarget),s.step(t),clearInterval(this.stepTimer),this.stepTimer=setInterval(function(){s.step(t)},this.options.pressInterval),this.page.on("jcf-pointerup",this.onBtnRelease))},onBtnRelease:function(){clearInterval(this.stepTimer),this.page.off("jcf-pointerup",this.onBtnRelease)},onFocus:function(){this.fakeElement.addClass(this.options.focusClass),this.realElement.on({blur:this.onBlur,keydown:this.onKeyPress})},onBlur:function(){this.fakeElement.removeClass(this.options.focusClass),this.realElement.off({blur:this.onBlur,keydown:this.onKeyPress})},onKeyPress:function(e){38!==e.which&&40!==e.which||(e.preventDefault(),this.step(38===e.which))},step:function(e){var t=parseFloat(this.realElement.val()),s=t||0,i=this.stepValue*(e?1:-1),n=isFinite(this.minValue)?this.minValue:this.initialValue-Math.abs(s*this.stepValue),a=Math.abs(n-s)%this.stepValue;a?e?s+=i-a:s-=a:s+=i,sthis.maxValue&&(s=this.maxValue),s!==t&&(this.realElement.val(s).trigger("change"),this.refresh())},refresh:function(){var e=this.realElement.is(":disabled"),t=parseFloat(this.realElement.val());this.fakeElement.toggleClass(this.options.disabledClass,e),this.btnDec.toggleClass(this.options.disabledClass,t===this.minValue),this.btnInc.toggleClass(this.options.disabledClass,t===this.maxValue)},destroy:function(){this.realElement.removeClass(this.options.realElementClass).insertBefore(this.fakeElement),this.fakeElement.remove(),clearInterval(this.stepTimer),this.page.off("jcf-pointerup",this.onBtnRelease),this.realElement.off({keydown:this.onKeyPress,focus:this.onFocus,blur:this.onBlur})}}})}(jcf); -------------------------------------------------------------------------------- /dist/js/jcf.checkbox.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : Checkbox Module 3 | * 4 | * Copyright 2014-2015 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | !function(e){e.addModule(function(e){"use strict";return{name:"Checkbox",selector:'input[type="checkbox"]',options:{wrapNative:!0,checkedClass:"jcf-checked",uncheckedClass:"jcf-unchecked",labelActiveClass:"jcf-label-active",fakeStructure:''},matchElement:function(e){return e.is(":checkbox")},init:function(){this.initStructure(),this.attachEvents(),this.refresh()},initStructure:function(){this.doc=e(document),this.realElement=e(this.options.element),this.fakeElement=e(this.options.fakeStructure).insertAfter(this.realElement),this.labelElement=this.getLabelFor(),this.options.wrapNative?this.realElement.appendTo(this.fakeElement).css({position:"absolute",height:"100%",width:"100%",opacity:0,margin:0}):this.realElement.addClass(this.options.hiddenClass)},attachEvents:function(){this.realElement.on({focus:this.onFocus,click:this.onRealClick}),this.fakeElement.on("click",this.onFakeClick),this.fakeElement.on("jcf-pointerdown",this.onPress)},onRealClick:function(e){var t=this;this.savedEventObject=e,setTimeout(function(){t.refresh()},0)},onFakeClick:function(e){this.options.wrapNative&&this.realElement.is(e.target)||this.realElement.is(":disabled")||(delete this.savedEventObject,this.stateChecked=this.realElement.prop("checked"),this.realElement.prop("checked",!this.stateChecked),this.fireNativeEvent(this.realElement,"click"),this.savedEventObject&&this.savedEventObject.isDefaultPrevented()?this.realElement.prop("checked",this.stateChecked):this.fireNativeEvent(this.realElement,"change"),delete this.savedEventObject)},onFocus:function(){this.pressedFlag&&this.focusedFlag||(this.focusedFlag=!0,this.fakeElement.addClass(this.options.focusClass),this.realElement.on("blur",this.onBlur))},onBlur:function(){this.pressedFlag||(this.focusedFlag=!1,this.fakeElement.removeClass(this.options.focusClass),this.realElement.off("blur",this.onBlur))},onPress:function(e){this.focusedFlag||"mouse"!==e.pointerType||this.realElement.focus(),this.pressedFlag=!0,this.fakeElement.addClass(this.options.pressedClass),this.doc.on("jcf-pointerup",this.onRelease)},onRelease:function(e){this.focusedFlag&&"mouse"===e.pointerType&&this.realElement.focus(),this.pressedFlag=!1,this.fakeElement.removeClass(this.options.pressedClass),this.doc.off("jcf-pointerup",this.onRelease)},getLabelFor:function(){var t=this.realElement.closest("label"),s=this.realElement.prop("id");return!t.length&&s&&(t=e('label[for="'+s+'"]')),t.length?t:null},refresh:function(){var e=this.realElement.is(":checked"),t=this.realElement.is(":disabled");this.fakeElement.toggleClass(this.options.checkedClass,e).toggleClass(this.options.uncheckedClass,!e).toggleClass(this.options.disabledClass,t),this.labelElement&&this.labelElement.toggleClass(this.options.labelActiveClass,e)},destroy:function(){this.options.wrapNative?this.realElement.insertBefore(this.fakeElement).css({position:"",width:"",height:"",opacity:"",margin:""}):this.realElement.removeClass(this.options.hiddenClass),this.fakeElement.off("jcf-pointerdown",this.onPress),this.fakeElement.remove(),this.doc.off("jcf-pointerup",this.onRelease),this.realElement.off({focus:this.onFocus,click:this.onRealClick})}}})}(jcf); -------------------------------------------------------------------------------- /dist/js/jcf.radio.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : Radio Module 3 | * 4 | * Copyright 2014-2015 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | !function(e){e.addModule(function(t){"use strict";return{name:"Radio",selector:'input[type="radio"]',options:{wrapNative:!0,checkedClass:"jcf-checked",uncheckedClass:"jcf-unchecked",labelActiveClass:"jcf-label-active",fakeStructure:''},matchElement:function(e){return e.is(":radio")},init:function(){this.initStructure(),this.attachEvents(),this.refresh()},initStructure:function(){this.doc=t(document),this.realElement=t(this.options.element),this.fakeElement=t(this.options.fakeStructure).insertAfter(this.realElement),this.labelElement=this.getLabelFor(),this.options.wrapNative?this.realElement.prependTo(this.fakeElement).css({position:"absolute",opacity:0}):this.realElement.addClass(this.options.hiddenClass)},attachEvents:function(){this.realElement.on({focus:this.onFocus,click:this.onRealClick}),this.fakeElement.on("click",this.onFakeClick),this.fakeElement.on("jcf-pointerdown",this.onPress)},onRealClick:function(e){var t=this;this.savedEventObject=e,setTimeout(function(){t.refreshRadioGroup()},0)},onFakeClick:function(e){this.options.wrapNative&&this.realElement.is(e.target)||this.realElement.is(":disabled")||(delete this.savedEventObject,this.currentActiveRadio=this.getCurrentActiveRadio(),this.stateChecked=this.realElement.prop("checked"),this.realElement.prop("checked",!0),this.fireNativeEvent(this.realElement,"click"),this.savedEventObject&&this.savedEventObject.isDefaultPrevented()?(this.realElement.prop("checked",this.stateChecked),this.currentActiveRadio.prop("checked",!0)):this.fireNativeEvent(this.realElement,"change"),delete this.savedEventObject)},onFocus:function(){this.pressedFlag&&this.focusedFlag||(this.focusedFlag=!0,this.fakeElement.addClass(this.options.focusClass),this.realElement.on("blur",this.onBlur))},onBlur:function(){this.pressedFlag||(this.focusedFlag=!1,this.fakeElement.removeClass(this.options.focusClass),this.realElement.off("blur",this.onBlur))},onPress:function(e){this.focusedFlag||"mouse"!==e.pointerType||this.realElement.focus(),this.pressedFlag=!0,this.fakeElement.addClass(this.options.pressedClass),this.doc.on("jcf-pointerup",this.onRelease)},onRelease:function(e){this.focusedFlag&&"mouse"===e.pointerType&&this.realElement.focus(),this.pressedFlag=!1,this.fakeElement.removeClass(this.options.pressedClass),this.doc.off("jcf-pointerup",this.onRelease)},getCurrentActiveRadio:function(){return this.getRadioGroup(this.realElement).filter(":checked")},getRadioGroup:function(e){var s=e.attr("name"),i=e.parents("form");return s?i.length?i.find('input[name="'+s+'"]'):t('input[name="'+s+'"]:not(form input)'):e},getLabelFor:function(){var e=this.realElement.closest("label"),s=this.realElement.prop("id");return!e.length&&s&&(e=t('label[for="'+s+'"]')),e.length?e:null},refreshRadioGroup:function(){this.getRadioGroup(this.realElement).each(function(){e.refresh(this)})},refresh:function(){var e=this.realElement.is(":checked"),t=this.realElement.is(":disabled");this.fakeElement.toggleClass(this.options.checkedClass,e).toggleClass(this.options.uncheckedClass,!e).toggleClass(this.options.disabledClass,t),this.labelElement&&this.labelElement.toggleClass(this.options.labelActiveClass,e)},destroy:function(){this.options.wrapNative?this.realElement.insertBefore(this.fakeElement).css({position:"",width:"",height:"",opacity:"",margin:""}):this.realElement.removeClass(this.options.hiddenClass),this.fakeElement.off("jcf-pointerdown",this.onPress),this.fakeElement.remove(),this.doc.off("jcf-pointerup",this.onRelease),this.realElement.off({blur:this.onBlur,focus:this.onFocus,click:this.onRealClick})}}})}(jcf); -------------------------------------------------------------------------------- /js/ie.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | !function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=y.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=y.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),y.elements=c+" "+a,j(b)}function f(a){var b=x[a[v]];return b||(b={},w++,a[v]=w,x[w]=b),b}function g(a,c,d){if(c||(c=b),q)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():u.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||t.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),q)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return y.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(y,b.frag)}function j(a){a||(a=b);var d=f(a);return!y.shivCSS||p||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),q||i(a,d),a}function k(a){for(var b,c=a.getElementsByTagName("*"),e=c.length,f=RegExp("^(?:"+d().join("|")+")$","i"),g=[];e--;)b=c[e],f.test(b.nodeName)&&g.push(b.applyElement(l(b)));return g}function l(a){for(var b,c=a.attributes,d=c.length,e=a.ownerDocument.createElement(A+":"+a.nodeName);d--;)b=c[d],b.specified&&e.setAttribute(b.nodeName,b.nodeValue);return e.style.cssText=a.style.cssText,e}function m(a){for(var b,c=a.split("{"),e=c.length,f=RegExp("(^|[\\s,>+~])("+d().join("|")+")(?=[[\\s,>+~#.:]|$)","gi"),g="$1"+A+"\\:$2";e--;)b=c[e]=c[e].split("}"),b[b.length-1]=b[b.length-1].replace(f,g),c[e]=b.join("}");return c.join("{")}function n(a){for(var b=a.length;b--;)a[b].removeNode()}function o(a){function b(){clearTimeout(g._removeSheetTimer),d&&d.removeNode(!0),d=null}var d,e,g=f(a),h=a.namespaces,i=a.parentWindow;return!B||a.printShived?a:("undefined"==typeof h[A]&&h.add(A),i.attachEvent("onbeforeprint",function(){b();for(var f,g,h,i=a.styleSheets,j=[],l=i.length,n=Array(l);l--;)n[l]=i[l];for(;h=n.pop();)if(!h.disabled&&z.test(h.media)){try{f=h.imports,g=f.length}catch(o){g=0}for(l=0;g>l;l++)n.push(f[l]);try{j.push(h.cssText)}catch(o){}}j=m(j.reverse().join("")),e=k(a),d=c(a,j)}),i.attachEvent("onafterprint",function(){n(e),clearTimeout(g._removeSheetTimer),g._removeSheetTimer=setTimeout(b,500)}),a.printShived=!0,a)}var p,q,r="3.7.2",s=a.html5||{},t=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,u=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",w=0,x={};!function(){try{var a=b.createElement("a");a.innerHTML="",p="hidden"in a,q=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){p=!0,q=!0}}();var y={elements:s.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:r,shivCSS:s.shivCSS!==!1,supportsUnknownElements:q,shivMethods:s.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=y,j(b);var z=/^$|\b(?:all|print)\b/,A="html5shiv",B=!q&&function(){var c=b.documentElement;return!("undefined"==typeof b.namespaces||"undefined"==typeof b.parentWindow||"undefined"==typeof c.applyElement||"undefined"==typeof c.removeNode||"undefined"==typeof a.attachEvent)}();y.type+=" print",y.shivPrint=o,o(b)}(this,document); -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /* reset styles */ 2 | body { 3 | font:14px Arial, Helvetica, sans-serif; 4 | background:#f5f5f5 url(../images/bg-body.jpg); 5 | color:#000; 6 | margin:0; 7 | } 8 | img {border-style:none;} 9 | a { 10 | text-decoration:none; 11 | outline:none; 12 | color:#3782b3; 13 | } 14 | a:hover {text-decoration:underline;} 15 | a:active {background-color: transparent;} 16 | input, 17 | textarea, 18 | select { 19 | font:100% Arial, Helvetica, sans-serif; 20 | vertical-align:middle; 21 | outline:none; 22 | color:#000; 23 | } 24 | form, fieldset { 25 | border-style:none; 26 | margin:0; 27 | padding:0; 28 | } 29 | /* layout styles */ 30 | main { 31 | border: 1px solid #777; 32 | border-width: 0 1px; 33 | background: #fff; 34 | display: block; 35 | overflow: hidden; 36 | margin: 0 auto; 37 | padding: 30px; 38 | width: 938px; 39 | } 40 | main section { 41 | margin: 0 0 20px; 42 | } 43 | main h1 { 44 | font-size: 26px; 45 | margin: 0 0 30px; 46 | text-align: center; 47 | } 48 | main h2 { 49 | font-size: 20px; 50 | padding: 7px 0; 51 | border-bottom: 1px dotted #ccc; 52 | } 53 | main h3 { 54 | font-size: 16px; 55 | margin: 0 0 10px; 56 | } 57 | main p { 58 | margin: 0 0 10px; 59 | } 60 | main pre { 61 | border: 1px solid #aaa; 62 | padding: 10px; 63 | background: #f5f5f5; 64 | margin: 0 0 10px; 65 | overflow: auto; 66 | } 67 | main code { 68 | border: 1px solid #ddd; 69 | border-radius: 2px; 70 | background: #f5f5f5; 71 | padding: 1px 2px; 72 | } 73 | section:after { 74 | display: block; 75 | clear: both; 76 | content: ''; 77 | } 78 | .col { 79 | padding: 0 30px 0 0; 80 | float: left; 81 | } 82 | .row { 83 | vertical-align: top; 84 | padding: 0 0 15px; 85 | } 86 | .row:after { 87 | display: block; 88 | clear: both; 89 | content: ''; 90 | } 91 | .demo-range .col .row label { 92 | display: block; 93 | } 94 | .row label { 95 | display: inline-block; 96 | vertical-align: top; 97 | line-height: 26px; 98 | margin: 0 5px 0 0; 99 | } 100 | @media only screen and (max-width:1000px) { 101 | main { 102 | border: none; 103 | width: auto; 104 | margin: 0; 105 | } 106 | } 107 | 108 | /* textarea styles */ 109 | .col textarea { 110 | width: 260px; 111 | height: 165px; 112 | max-width: 350px; 113 | max-height: 400px; 114 | min-width: 200px; 115 | min-height: 100px; 116 | } 117 | 118 | /* label demo styles */ 119 | .jcf-label-active { 120 | font-weight: bold; 121 | } 122 | 123 | /* select demo styles */ 124 | .jcf-select-color .jcf-select-text .jcf-option-color {font-weight: bold;} 125 | .jcf-select-text .jcf-option-red, .jcf-list .jcf-option-red {color: #d00;} 126 | .jcf-select-text .jcf-option-green, .jcf-list .jcf-option-green {color: #0d0;} 127 | .jcf-select-text .jcf-option-blue, .jcf-list .jcf-option-blue {color: #00d;} 128 | .jcf-select-drop .jcf-option-hideme {display: none;} 129 | 130 | .jcf-select.jcf-select-present { 131 | line-height: 48px; 132 | height: 48px; 133 | background: #fff; 134 | } 135 | .jcf-select.jcf-select-present .jcf-select-text img { 136 | vertical-align: top; 137 | width: 32px; 138 | height: auto; 139 | margin: 7px 5px 0 0; 140 | } 141 | .jcf-select-present .jcf-select-text { 142 | line-height: 48px; 143 | } 144 | .jcf-select-present .jcf-list { 145 | font-style: italic; 146 | line-height: 48px; 147 | } 148 | .jcf-select-present .jcf-list img { 149 | vertical-align: middle; 150 | margin: 0 5px 0 0; 151 | } 152 | 153 | /* scroll area styles */ 154 | .jcf-textarea { 155 | margin-top: 15px; 156 | } 157 | .demo-scrollbars .test { 158 | background: #f5f5f5; 159 | overflow: auto; 160 | float: left; 161 | width: 50%; 162 | height: 300px; 163 | padding: 0; 164 | } 165 | .demo-scrollbars .test img { 166 | display: block; 167 | max-width: 100%; 168 | height: auto; 169 | margin: 0 0 10px; 170 | } 171 | 172 | @media only screen and (max-width:1000px) { 173 | .demo-scrollbars .test { 174 | height: 300px; 175 | } 176 | .demo-scrollbars .test img { 177 | max-width: none; 178 | } 179 | } 180 | @media only screen and (max-width:600px) { 181 | .demo-scrollbars .test { 182 | font-size: 11px; 183 | height: 300px; 184 | } 185 | .demo-scrollbars .test img { 186 | margin: 0 auto; 187 | width: 75px; 188 | height: auto; 189 | } 190 | } -------------------------------------------------------------------------------- /js/jcf.file.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : File Module 3 | * 4 | * Copyright 2014-2016 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | 10 | (function(jcf) { 11 | 12 | jcf.addModule(function($) { 13 | 'use strict'; 14 | 15 | return { 16 | name: 'File', 17 | selector: 'input[type="file"]', 18 | options: { 19 | fakeStructure: '', 20 | buttonText: 'Choose file', 21 | placeholderText: 'No file chosen', 22 | realElementClass: 'jcf-real-element', 23 | extensionPrefixClass: 'jcf-extension-', 24 | selectedFileBlock: '.jcf-fake-input', 25 | buttonTextBlock: '.jcf-button-content' 26 | }, 27 | matchElement: function(element) { 28 | return element.is('input[type="file"]'); 29 | }, 30 | init: function() { 31 | this.initStructure(); 32 | this.attachEvents(); 33 | this.refresh(); 34 | }, 35 | initStructure: function() { 36 | this.doc = $(document); 37 | this.realElement = $(this.options.element).addClass(this.options.realElementClass); 38 | this.fakeElement = $(this.options.fakeStructure).insertBefore(this.realElement); 39 | this.fileNameBlock = this.fakeElement.find(this.options.selectedFileBlock); 40 | this.buttonTextBlock = this.fakeElement.find(this.options.buttonTextBlock).text(this.options.buttonText); 41 | 42 | this.realElement.appendTo(this.fakeElement).css({ 43 | position: 'absolute', 44 | opacity: 0 45 | }); 46 | }, 47 | attachEvents: function() { 48 | this.realElement.on({ 49 | 'jcf-pointerdown': this.onPress, 50 | change: this.onChange, 51 | focus: this.onFocus 52 | }); 53 | }, 54 | onChange: function() { 55 | this.refresh(); 56 | }, 57 | onFocus: function() { 58 | this.fakeElement.addClass(this.options.focusClass); 59 | this.realElement.on('blur', this.onBlur); 60 | }, 61 | onBlur: function() { 62 | this.fakeElement.removeClass(this.options.focusClass); 63 | this.realElement.off('blur', this.onBlur); 64 | }, 65 | onPress: function() { 66 | this.fakeElement.addClass(this.options.pressedClass); 67 | this.doc.on('jcf-pointerup', this.onRelease); 68 | }, 69 | onRelease: function() { 70 | this.fakeElement.removeClass(this.options.pressedClass); 71 | this.doc.off('jcf-pointerup', this.onRelease); 72 | }, 73 | getFileName: function() { 74 | var resultFileName = '', 75 | files = this.realElement.prop('files'); 76 | 77 | if (files && files.length) { 78 | $.each(files, function(index, file) { 79 | resultFileName += (index > 0 ? ', ' : '') + file.name; 80 | }); 81 | } else { 82 | resultFileName = this.realElement.val().replace(/^[\s\S]*(?:\\|\/)([\s\S^\\\/]*)$/g, '$1'); 83 | } 84 | 85 | return resultFileName; 86 | }, 87 | getFileExtension: function() { 88 | var fileName = this.realElement.val(); 89 | return fileName.lastIndexOf('.') < 0 ? '' : fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase(); 90 | }, 91 | updateExtensionClass: function() { 92 | var currentExtension = this.getFileExtension(), 93 | currentClassList = this.fakeElement.prop('className'), 94 | cleanedClassList = currentClassList.replace(new RegExp('(\\s|^)' + this.options.extensionPrefixClass + '[^ ]+','gi'), ''); 95 | 96 | this.fakeElement.prop('className', cleanedClassList); 97 | if (currentExtension) { 98 | this.fakeElement.addClass(this.options.extensionPrefixClass + currentExtension); 99 | } 100 | }, 101 | refresh: function() { 102 | var selectedFileName = this.getFileName() || this.options.placeholderText; 103 | this.fakeElement.toggleClass(this.options.disabledClass, this.realElement.is(':disabled')); 104 | this.fileNameBlock.text(selectedFileName); 105 | this.updateExtensionClass(); 106 | }, 107 | destroy: function() { 108 | // reset styles and restore element position 109 | this.realElement.insertBefore(this.fakeElement).removeClass(this.options.realElementClass).css({ 110 | position: '', 111 | opacity: '' 112 | }); 113 | this.fakeElement.remove(); 114 | 115 | // remove event handlers 116 | this.realElement.off({ 117 | 'jcf-pointerdown': this.onPress, 118 | change: this.onChange, 119 | focus: this.onFocus, 120 | blur: this.onBlur 121 | }); 122 | this.doc.off('jcf-pointerup', this.onRelease); 123 | } 124 | }; 125 | }); 126 | 127 | }(jcf)); 128 | -------------------------------------------------------------------------------- /js/jcf.textarea.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : Textarea Module 3 | * 4 | * Copyright 2014-2016 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | 10 | (function(jcf) { 11 | 12 | jcf.addModule(function($) { 13 | 'use strict'; 14 | 15 | return { 16 | name: 'Textarea', 17 | selector: 'textarea', 18 | options: { 19 | resize: true, 20 | resizerStructure: '', 21 | fakeStructure: '' 22 | }, 23 | matchElement: function(element) { 24 | return element.is('textarea'); 25 | }, 26 | init: function() { 27 | this.initStructure(); 28 | this.attachEvents(); 29 | this.refresh(); 30 | }, 31 | initStructure: function() { 32 | // prepare structure 33 | this.doc = $(document); 34 | this.realElement = $(this.options.element); 35 | this.fakeElement = $(this.options.fakeStructure).insertAfter(this.realElement); 36 | this.resizer = $(this.options.resizerStructure).appendTo(this.fakeElement); 37 | 38 | // add custom scrollbar 39 | if (jcf.modules.Scrollable) { 40 | this.realElement.prependTo(this.fakeElement).addClass().css({ 41 | overflow: 'hidden', 42 | resize: 'none' 43 | }); 44 | 45 | this.scrollable = new jcf.modules.Scrollable({ 46 | element: this.realElement, 47 | alwaysShowScrollbars: true 48 | }); 49 | this.scrollable.setScrollBarEdge(this.resizer.outerHeight()); 50 | } 51 | }, 52 | attachEvents: function() { 53 | // add event handlers 54 | this.realElement.on({ 55 | focus: this.onFocus, 56 | keyup: this.onChange, 57 | change: this.onChange 58 | }); 59 | 60 | this.resizer.on('jcf-pointerdown', this.onResizePress); 61 | }, 62 | onResizePress: function(e) { 63 | var resizerOffset = this.resizer.offset(), 64 | areaOffset = this.fakeElement.offset(); 65 | 66 | e.preventDefault(); 67 | this.dragData = { 68 | areaOffset: areaOffset, 69 | innerOffsetLeft: e.pageX - resizerOffset.left, 70 | innerOffsetTop: e.pageY - resizerOffset.top 71 | }; 72 | this.doc.on({ 73 | 'jcf-pointermove': this.onResizeMove, 74 | 'jcf-pointerup': this.onResizeRelease 75 | }); 76 | 77 | // restore focus 78 | if (this.isFocused) { 79 | this.focusedDrag = true; 80 | this.realElement.focus(); 81 | } 82 | }, 83 | onResizeMove: function(e) { 84 | var newWidth = e.pageX + this.dragData.innerOffsetLeft - this.dragData.areaOffset.left, 85 | newHeight = e.pageY + this.dragData.innerOffsetTop - this.dragData.areaOffset.top, 86 | widthDiff = this.fakeElement.innerWidth() - this.realElement.innerWidth(); 87 | 88 | // prevent text selection or page scroll on touch devices 89 | e.preventDefault(); 90 | 91 | // resize textarea and refresh scrollbars 92 | this.realElement.innerWidth(newWidth - widthDiff).innerHeight(newHeight); 93 | 94 | if (this.scrollable) { 95 | this.scrollable.rebuildScrollbars(); 96 | } 97 | 98 | // restore focus 99 | if (this.focusedDrag) { 100 | this.realElement.focus(); 101 | } 102 | }, 103 | onResizeRelease: function() { 104 | this.doc.off({ 105 | 'jcf-pointermove': this.onResizeMove, 106 | 'jcf-pointerup': this.onResizeRelease 107 | }); 108 | 109 | delete this.focusedDrag; 110 | }, 111 | onFocus: function() { 112 | this.isFocused = true; 113 | this.fakeElement.addClass(this.options.focusClass); 114 | this.realElement.on('blur', this.onBlur); 115 | }, 116 | onBlur: function() { 117 | this.isFocused = false; 118 | this.fakeElement.removeClass(this.options.focusClass); 119 | this.realElement.off('blur', this.onBlur); 120 | }, 121 | onChange: function() { 122 | this.refreshCustomScrollbars(); 123 | }, 124 | refreshCustomScrollbars: function() { 125 | if (this.scrollable) { 126 | if (this.isFocused) { 127 | this.scrollable.redrawScrollbars(); 128 | } else { 129 | this.scrollable.rebuildScrollbars(); 130 | } 131 | } 132 | }, 133 | refresh: function() { 134 | // refresh custom scroll position 135 | var isDisabled = this.realElement.is(':disabled'); 136 | this.fakeElement.toggleClass(this.options.disabledClass, isDisabled); 137 | this.refreshCustomScrollbars(); 138 | }, 139 | destroy: function() { 140 | // destroy custom scrollbar 141 | this.scrollable.destroy(); 142 | 143 | // restore styles and remove event listeners 144 | this.realElement.css({ 145 | overflow: '', 146 | resize: '' 147 | }).insertBefore(this.fakeElement).off({ 148 | focus: this.onFocus, 149 | blur: this.onBlur 150 | }); 151 | 152 | // remove scrollbar and fake wrapper 153 | this.fakeElement.remove(); 154 | } 155 | }; 156 | }); 157 | 158 | }(jcf)); 159 | -------------------------------------------------------------------------------- /js/jcf.number.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : Number Module 3 | * 4 | * Copyright 2014-2016 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | 10 | (function(jcf) { 11 | 12 | jcf.addModule(function($) { 13 | 'use strict'; 14 | 15 | return { 16 | name: 'Number', 17 | selector: 'input[type="number"]', 18 | options: { 19 | realElementClass: 'jcf-real-element', 20 | fakeStructure: '', 21 | btnIncSelector: '.jcf-btn-inc', 22 | btnDecSelector: '.jcf-btn-dec', 23 | pressInterval: 150 24 | }, 25 | matchElement: function(element) { 26 | return element.is(this.selector); 27 | }, 28 | init: function() { 29 | this.initStructure(); 30 | this.attachEvents(); 31 | this.refresh(); 32 | }, 33 | initStructure: function() { 34 | this.page = $('html'); 35 | this.realElement = $(this.options.element).addClass(this.options.realElementClass); 36 | this.fakeElement = $(this.options.fakeStructure).insertBefore(this.realElement).prepend(this.realElement); 37 | this.btnDec = this.fakeElement.find(this.options.btnDecSelector); 38 | this.btnInc = this.fakeElement.find(this.options.btnIncSelector); 39 | 40 | // set initial values 41 | this.initialValue = parseFloat(this.realElement.val()) || 0; 42 | this.minValue = parseFloat(this.realElement.attr('min')); 43 | this.maxValue = parseFloat(this.realElement.attr('max')); 44 | this.stepValue = parseFloat(this.realElement.attr('step')) || 1; 45 | 46 | // check attribute values 47 | this.minValue = isNaN(this.minValue) ? -Infinity : this.minValue; 48 | this.maxValue = isNaN(this.maxValue) ? Infinity : this.maxValue; 49 | 50 | // handle range 51 | if (isFinite(this.maxValue)) { 52 | this.maxValue -= (this.maxValue - this.minValue) % this.stepValue; 53 | } 54 | }, 55 | attachEvents: function() { 56 | this.realElement.on({ 57 | focus: this.onFocus 58 | }); 59 | this.btnDec.add(this.btnInc).on('jcf-pointerdown', this.onBtnPress); 60 | }, 61 | onBtnPress: function(e) { 62 | var self = this, 63 | increment; 64 | 65 | if (!this.realElement.is(':disabled')) { 66 | increment = this.btnInc.is(e.currentTarget); 67 | 68 | self.step(increment); 69 | clearInterval(this.stepTimer); 70 | this.stepTimer = setInterval(function() { 71 | self.step(increment); 72 | }, this.options.pressInterval); 73 | 74 | this.page.on('jcf-pointerup', this.onBtnRelease); 75 | } 76 | }, 77 | onBtnRelease: function() { 78 | clearInterval(this.stepTimer); 79 | this.page.off('jcf-pointerup', this.onBtnRelease); 80 | }, 81 | onFocus: function() { 82 | this.fakeElement.addClass(this.options.focusClass); 83 | this.realElement.on({ 84 | blur: this.onBlur, 85 | keydown: this.onKeyPress 86 | }); 87 | }, 88 | onBlur: function() { 89 | this.fakeElement.removeClass(this.options.focusClass); 90 | this.realElement.off({ 91 | blur: this.onBlur, 92 | keydown: this.onKeyPress 93 | }); 94 | }, 95 | onKeyPress: function(e) { 96 | if (e.which === 38 || e.which === 40) { 97 | e.preventDefault(); 98 | this.step(e.which === 38); 99 | } 100 | }, 101 | step: function(increment) { 102 | var originalValue = parseFloat(this.realElement.val()), 103 | newValue = originalValue || 0, 104 | addValue = this.stepValue * (increment ? 1 : -1), 105 | edgeNumber = isFinite(this.minValue) ? this.minValue : this.initialValue - Math.abs(newValue * this.stepValue), 106 | diff = Math.abs(edgeNumber - newValue) % this.stepValue; 107 | 108 | // handle step diff 109 | if (diff) { 110 | if (increment) { 111 | newValue += addValue - diff; 112 | } else { 113 | newValue -= diff; 114 | } 115 | } else { 116 | newValue += addValue; 117 | } 118 | 119 | // handle min/max limits 120 | if (newValue < this.minValue) { 121 | newValue = this.minValue; 122 | } else if (newValue > this.maxValue) { 123 | newValue = this.maxValue; 124 | } 125 | 126 | // update value in real input if its changed 127 | if (newValue !== originalValue) { 128 | this.realElement.val(newValue).trigger('change'); 129 | this.refresh(); 130 | } 131 | }, 132 | refresh: function() { 133 | var isDisabled = this.realElement.is(':disabled'), 134 | currentValue = parseFloat(this.realElement.val()); 135 | 136 | // handle disabled state 137 | this.fakeElement.toggleClass(this.options.disabledClass, isDisabled); 138 | 139 | // refresh button classes 140 | this.btnDec.toggleClass(this.options.disabledClass, currentValue === this.minValue); 141 | this.btnInc.toggleClass(this.options.disabledClass, currentValue === this.maxValue); 142 | }, 143 | destroy: function() { 144 | // restore original structure 145 | this.realElement.removeClass(this.options.realElementClass).insertBefore(this.fakeElement); 146 | this.fakeElement.remove(); 147 | clearInterval(this.stepTimer); 148 | 149 | // remove event handlers 150 | this.page.off('jcf-pointerup', this.onBtnRelease); 151 | this.realElement.off({ 152 | keydown: this.onKeyPress, 153 | focus: this.onFocus, 154 | blur: this.onBlur 155 | }); 156 | } 157 | }; 158 | }); 159 | 160 | }(jcf)); 161 | -------------------------------------------------------------------------------- /js/jcf.checkbox.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : Checkbox Module 3 | * 4 | * Copyright 2014-2016 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | 10 | (function(jcf) { 11 | 12 | jcf.addModule(function($) { 13 | 'use strict'; 14 | 15 | return { 16 | name: 'Checkbox', 17 | selector: 'input[type="checkbox"]', 18 | options: { 19 | wrapNative: true, 20 | checkedClass: 'jcf-checked', 21 | uncheckedClass: 'jcf-unchecked', 22 | labelActiveClass: 'jcf-label-active', 23 | fakeStructure: '' 24 | }, 25 | matchElement: function(element) { 26 | return element.is(':checkbox'); 27 | }, 28 | init: function() { 29 | this.initStructure(); 30 | this.attachEvents(); 31 | this.refresh(); 32 | }, 33 | initStructure: function() { 34 | // prepare structure 35 | this.doc = $(document); 36 | this.realElement = $(this.options.element); 37 | this.fakeElement = $(this.options.fakeStructure).insertAfter(this.realElement); 38 | this.labelElement = this.getLabelFor(); 39 | 40 | if (this.options.wrapNative) { 41 | // wrap native checkbox inside fake block 42 | this.realElement.appendTo(this.fakeElement).css({ 43 | position: 'absolute', 44 | height: '100%', 45 | width: '100%', 46 | opacity: 0, 47 | margin: 0 48 | }); 49 | } else { 50 | // just hide native checkbox 51 | this.realElement.addClass(this.options.hiddenClass); 52 | } 53 | }, 54 | attachEvents: function() { 55 | // add event handlers 56 | this.realElement.on({ 57 | focus: this.onFocus, 58 | click: this.onRealClick 59 | }); 60 | this.fakeElement.on('click', this.onFakeClick); 61 | this.fakeElement.on('jcf-pointerdown', this.onPress); 62 | }, 63 | onRealClick: function(e) { 64 | // just redraw fake element (setTimeout handles click that might be prevented) 65 | var self = this; 66 | this.savedEventObject = e; 67 | setTimeout(function() { 68 | self.refresh(); 69 | }, 0); 70 | }, 71 | onFakeClick: function(e) { 72 | // skip event if clicked on real element inside wrapper 73 | if (this.options.wrapNative && this.realElement.is(e.target)) { 74 | return; 75 | } 76 | 77 | // toggle checked class 78 | if (!this.realElement.is(':disabled')) { 79 | delete this.savedEventObject; 80 | this.stateChecked = this.realElement.prop('checked'); 81 | this.realElement.prop('checked', !this.stateChecked); 82 | this.fireNativeEvent(this.realElement, 'click'); 83 | if (this.savedEventObject && this.savedEventObject.isDefaultPrevented()) { 84 | this.realElement.prop('checked', this.stateChecked); 85 | } else { 86 | this.fireNativeEvent(this.realElement, 'change'); 87 | } 88 | delete this.savedEventObject; 89 | } 90 | }, 91 | onFocus: function() { 92 | if (!this.pressedFlag || !this.focusedFlag) { 93 | this.focusedFlag = true; 94 | this.fakeElement.addClass(this.options.focusClass); 95 | this.realElement.on('blur', this.onBlur); 96 | } 97 | }, 98 | onBlur: function() { 99 | if (!this.pressedFlag) { 100 | this.focusedFlag = false; 101 | this.fakeElement.removeClass(this.options.focusClass); 102 | this.realElement.off('blur', this.onBlur); 103 | } 104 | }, 105 | onPress: function(e) { 106 | if (!this.focusedFlag && e.pointerType === 'mouse') { 107 | this.realElement.focus(); 108 | } 109 | this.pressedFlag = true; 110 | this.fakeElement.addClass(this.options.pressedClass); 111 | this.doc.on('jcf-pointerup', this.onRelease); 112 | }, 113 | onRelease: function(e) { 114 | if (this.focusedFlag && e.pointerType === 'mouse') { 115 | this.realElement.focus(); 116 | } 117 | this.pressedFlag = false; 118 | this.fakeElement.removeClass(this.options.pressedClass); 119 | this.doc.off('jcf-pointerup', this.onRelease); 120 | }, 121 | getLabelFor: function() { 122 | var parentLabel = this.realElement.closest('label'), 123 | elementId = this.realElement.prop('id'); 124 | 125 | if (!parentLabel.length && elementId) { 126 | parentLabel = $('label[for="' + elementId + '"]'); 127 | } 128 | return parentLabel.length ? parentLabel : null; 129 | }, 130 | refresh: function() { 131 | // redraw custom checkbox 132 | var isChecked = this.realElement.is(':checked'), 133 | isDisabled = this.realElement.is(':disabled'); 134 | 135 | this.fakeElement.toggleClass(this.options.checkedClass, isChecked) 136 | .toggleClass(this.options.uncheckedClass, !isChecked) 137 | .toggleClass(this.options.disabledClass, isDisabled); 138 | 139 | if (this.labelElement) { 140 | this.labelElement.toggleClass(this.options.labelActiveClass, isChecked); 141 | } 142 | }, 143 | destroy: function() { 144 | // restore structure 145 | if (this.options.wrapNative) { 146 | this.realElement.insertBefore(this.fakeElement).css({ 147 | position: '', 148 | width: '', 149 | height: '', 150 | opacity: '', 151 | margin: '' 152 | }); 153 | } else { 154 | this.realElement.removeClass(this.options.hiddenClass); 155 | } 156 | 157 | // removing element will also remove its event handlers 158 | this.fakeElement.off('jcf-pointerdown', this.onPress); 159 | this.fakeElement.remove(); 160 | 161 | // remove other event handlers 162 | this.doc.off('jcf-pointerup', this.onRelease); 163 | this.realElement.off({ 164 | focus: this.onFocus, 165 | click: this.onRealClick 166 | }); 167 | } 168 | }; 169 | }); 170 | 171 | }(jcf)); 172 | -------------------------------------------------------------------------------- /js/jcf.radio.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms : Radio Module 3 | * 4 | * Copyright 2014-2016 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | 10 | (function(jcf) { 11 | 12 | jcf.addModule(function($) { 13 | 'use strict'; 14 | 15 | return { 16 | name: 'Radio', 17 | selector: 'input[type="radio"]', 18 | options: { 19 | wrapNative: true, 20 | checkedClass: 'jcf-checked', 21 | uncheckedClass: 'jcf-unchecked', 22 | labelActiveClass: 'jcf-label-active', 23 | fakeStructure: '' 24 | }, 25 | matchElement: function(element) { 26 | return element.is(':radio'); 27 | }, 28 | init: function() { 29 | this.initStructure(); 30 | this.attachEvents(); 31 | this.refresh(); 32 | }, 33 | initStructure: function() { 34 | // prepare structure 35 | this.doc = $(document); 36 | this.realElement = $(this.options.element); 37 | this.fakeElement = $(this.options.fakeStructure).insertAfter(this.realElement); 38 | this.labelElement = this.getLabelFor(); 39 | 40 | if (this.options.wrapNative) { 41 | // wrap native radio inside fake block 42 | this.realElement.prependTo(this.fakeElement).css({ 43 | position: 'absolute', 44 | opacity: 0 45 | }); 46 | } else { 47 | // just hide native radio 48 | this.realElement.addClass(this.options.hiddenClass); 49 | } 50 | }, 51 | attachEvents: function() { 52 | // add event handlers 53 | this.realElement.on({ 54 | focus: this.onFocus, 55 | click: this.onRealClick 56 | }); 57 | this.fakeElement.on('click', this.onFakeClick); 58 | this.fakeElement.on('jcf-pointerdown', this.onPress); 59 | }, 60 | onRealClick: function(e) { 61 | // redraw current radio and its group (setTimeout handles click that might be prevented) 62 | var self = this; 63 | this.savedEventObject = e; 64 | setTimeout(function() { 65 | self.refreshRadioGroup(); 66 | }, 0); 67 | }, 68 | onFakeClick: function(e) { 69 | // skip event if clicked on real element inside wrapper 70 | if (this.options.wrapNative && this.realElement.is(e.target)) { 71 | return; 72 | } 73 | 74 | // toggle checked class 75 | if (!this.realElement.is(':disabled')) { 76 | delete this.savedEventObject; 77 | this.currentActiveRadio = this.getCurrentActiveRadio(); 78 | this.stateChecked = this.realElement.prop('checked'); 79 | this.realElement.prop('checked', true); 80 | this.fireNativeEvent(this.realElement, 'click'); 81 | if (this.savedEventObject && this.savedEventObject.isDefaultPrevented()) { 82 | this.realElement.prop('checked', this.stateChecked); 83 | this.currentActiveRadio.prop('checked', true); 84 | } else { 85 | this.fireNativeEvent(this.realElement, 'change'); 86 | } 87 | delete this.savedEventObject; 88 | } 89 | }, 90 | onFocus: function() { 91 | if (!this.pressedFlag || !this.focusedFlag) { 92 | this.focusedFlag = true; 93 | this.fakeElement.addClass(this.options.focusClass); 94 | this.realElement.on('blur', this.onBlur); 95 | } 96 | }, 97 | onBlur: function() { 98 | if (!this.pressedFlag) { 99 | this.focusedFlag = false; 100 | this.fakeElement.removeClass(this.options.focusClass); 101 | this.realElement.off('blur', this.onBlur); 102 | } 103 | }, 104 | onPress: function(e) { 105 | if (!this.focusedFlag && e.pointerType === 'mouse') { 106 | this.realElement.focus(); 107 | } 108 | this.pressedFlag = true; 109 | this.fakeElement.addClass(this.options.pressedClass); 110 | this.doc.on('jcf-pointerup', this.onRelease); 111 | }, 112 | onRelease: function(e) { 113 | if (this.focusedFlag && e.pointerType === 'mouse') { 114 | this.realElement.focus(); 115 | } 116 | this.pressedFlag = false; 117 | this.fakeElement.removeClass(this.options.pressedClass); 118 | this.doc.off('jcf-pointerup', this.onRelease); 119 | }, 120 | getCurrentActiveRadio: function() { 121 | return this.getRadioGroup(this.realElement).filter(':checked'); 122 | }, 123 | getRadioGroup: function(radio) { 124 | // find radio group for specified radio button 125 | var name = radio.attr('name'), 126 | parentForm = radio.parents('form'); 127 | 128 | if (name) { 129 | if (parentForm.length) { 130 | return parentForm.find('input[name="' + name + '"]'); 131 | } else { 132 | return $('input[name="' + name + '"]:not(form input)'); 133 | } 134 | } else { 135 | return radio; 136 | } 137 | }, 138 | getLabelFor: function() { 139 | var parentLabel = this.realElement.closest('label'), 140 | elementId = this.realElement.prop('id'); 141 | 142 | if (!parentLabel.length && elementId) { 143 | parentLabel = $('label[for="' + elementId + '"]'); 144 | } 145 | return parentLabel.length ? parentLabel : null; 146 | }, 147 | refreshRadioGroup: function() { 148 | // redraw current radio and its group 149 | this.getRadioGroup(this.realElement).each(function() { 150 | jcf.refresh(this); 151 | }); 152 | }, 153 | refresh: function() { 154 | // redraw current radio button 155 | var isChecked = this.realElement.is(':checked'), 156 | isDisabled = this.realElement.is(':disabled'); 157 | 158 | this.fakeElement.toggleClass(this.options.checkedClass, isChecked) 159 | .toggleClass(this.options.uncheckedClass, !isChecked) 160 | .toggleClass(this.options.disabledClass, isDisabled); 161 | 162 | if (this.labelElement) { 163 | this.labelElement.toggleClass(this.options.labelActiveClass, isChecked); 164 | } 165 | }, 166 | destroy: function() { 167 | // restore structure 168 | if (this.options.wrapNative) { 169 | this.realElement.insertBefore(this.fakeElement).css({ 170 | position: '', 171 | width: '', 172 | height: '', 173 | opacity: '', 174 | margin: '' 175 | }); 176 | } else { 177 | this.realElement.removeClass(this.options.hiddenClass); 178 | } 179 | 180 | // removing element will also remove its event handlers 181 | this.fakeElement.off('jcf-pointerdown', this.onPress); 182 | this.fakeElement.remove(); 183 | 184 | // remove other event handlers 185 | this.doc.off('jcf-pointerup', this.onRelease); 186 | this.realElement.off({ 187 | blur: this.onBlur, 188 | focus: this.onFocus, 189 | click: this.onRealClick 190 | }); 191 | } 192 | }; 193 | }); 194 | 195 | }(jcf)); 196 | -------------------------------------------------------------------------------- /dist/js/jcf.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms 3 | * 4 | * Copyright 2014-2015 PSD2HTML - http://psd2html.com/jcf 5 | * Released under the MIT license (LICENSE.txt) 6 | * 7 | * Version: 1.2.3 8 | */ 9 | !function(e,t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports?module.exports=t(require("jquery")):e.jcf=t(jQuery)}(this,function(e){"use strict";var t="1.2.3",n=[],o={optionsKey:"jcf",dataKey:"jcf-instance",rtlClass:"jcf-rtl",focusClass:"jcf-focus",pressedClass:"jcf-pressed",disabledClass:"jcf-disabled",hiddenClass:"jcf-hidden",resetAppearanceClass:"jcf-reset-appearance",unselectableClass:"jcf-unselectable"},a="ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch,i=/Windows Phone/.test(navigator.userAgent);o.isMobileDevice=!(!a&&!i);var r=function(){var t=e("