├── .gitignore ├── LICENSE.txt ├── README.md ├── bower.json ├── css ├── demo.css └── theme-minimal │ └── jcf.css ├── dist ├── css │ └── theme-minimal │ │ └── jcf.css └── js │ ├── jcf.angular.js │ ├── jcf.button.js │ ├── jcf.checkbox.js │ ├── jcf.common.js │ ├── jcf.file.js │ ├── jcf.js │ ├── jcf.number.js │ ├── jcf.radio.js │ ├── jcf.range.js │ ├── jcf.scrollable.js │ ├── jcf.select.js │ └── jcf.textarea.js ├── gulpfile.js ├── images ├── bg-body.jpg ├── test-icon1.png ├── test-icon2.png ├── test-icon3.png └── test.png ├── index.html ├── js ├── .jscsrc ├── .jshintrc ├── ie.js ├── jcf.angular.js ├── jcf.button.js ├── jcf.checkbox.js ├── jcf.common.js ├── jcf.file.js ├── jcf.js ├── jcf.number.js ├── jcf.radio.js ├── jcf.range.js ├── jcf.scrollable.js ├── jcf.select.js ├── jcf.textarea.js └── jquery.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JCF - JavaScript Custom Forms 2 | This library allows crossbrowser customization of form elements using CSS. 3 | 4 | Check [live demo](http://psd2html.com/jcf). 5 | 6 | ## Browser support 7 | The script was tested in the following browsers: 8 | 9 | - Internet Explorer 8+ 10 | - Firefox 11 | - Chrome 12 | - Safari 13 | - Opera 14 | - Windows 8+ Touch desktops 15 | - Windows Phone 8+ 16 | - Android 4+ 17 | - iOS7+ 18 | 19 | ## Installation 20 | 21 | Install using [npm](http://npmjs.org/): 22 | `npm install jcf` 23 | 24 | Install using [Bower](http://bower.io/): 25 | `bower install jcf` 26 | 27 | CDN: this library is available at [cdnjs](https://cdnjs.com/) 28 | 29 | ## Usage 30 | The script requires [jQuery 1.7+](http://jquery.com/) to work properly. To add script in your page simply attach core file - `jcf.js` and some of modules you want to use for customization:

31 | 32 | ```html 33 | 34 | 35 | 36 | 37 | 38 | ``` 39 | 40 | When the page is loaded all you have to do is simply call function: 41 | 42 | ```js 43 | $(function() { 44 | jcf.replaceAll(); 45 | }); 46 | ``` 47 | 48 | Please note that JCF does not replace original form elements with own components. It just creates additional DOM nodes to support CSS styling. All DOM events are invoked on original elements and in most cases JCF could be easily turned on or off without affecting your existing event listeners. 49 | 50 | ## How to use JCF with AngularJS 1.x 51 | 52 | To use this script with Angular you still need to attach all scripts above (including jQuery) and also attach directive: 53 | 54 | ```js 55 | 56 | ``` 57 | 58 | When the directive is connected as dependency in your app you can add `jcf` attribute to the form field and such element will be customized: 59 | ```html 60 | 61 | 64 | 65 | 66 | 67 | ``` 68 | 69 | ## General API Information 70 | 71 | Global `jcf` object has several methods to control custom form elements on the page: 72 | 73 | `jcf.replaceAll( [context] )` - Replace elements on the whole page. Optional argument is context to use (can be CSS selector, or DOM/jQuery object). Add class `jcf-ignore` on the element to prevent its customization. 74 | 75 | `jcf.replace( elements [, moduleName] [, customOptions] )` - Replace certain element or multiple elements. Returns custom form element instance. The first argument is CSS selector, or DOM/jQuery object to be customized. Second argument is optional and used to specify module which should be used for customization. By default it is `false` which will result module to be auto detected. Third argument is module options which can be specified with object. 76 | 77 | `jcf.destroyAll( [context] )` - Destroy all custom form elements instances and restore original form elements. Optional argument is context to use (can be CSS selector, or DOM/jQuery object). 78 | 79 | `jcf.destroy( elements )` - Destroy certain element or multiple form elements. Should be applied to native form controls. 80 | 81 | `jcf.refreshAll( [context] )` - Redraw all custom form instances. Should be used when values of form elements are modified by other scripts. Optional argument is context to use (can be CSS selector, or DOM/jQuery object). 82 | 83 | `jcf.refresh( elements )` - Refresh certain element or multiple form elements. 84 | 85 | ## Getting the instance of customized form element 86 | In any time it's possible to get instance of customized form element. Use method `jcf.getInstance` to do this: 87 | 88 | ```javascript 89 | var countrySelect = document.getElementById('country-select'); 90 | var customFormInstance = jcf.getInstance(countrySelect); 91 | 92 | customFormInstance.refresh(); 93 | ``` 94 | 95 | ## Setting Options 96 | 97 | There are two ways of specifying options for modules - override module defaults and specify options per element. 98 | 99 | ```javascript 100 | // set options for Checkbox module 101 | jcf.setOptions('Checkbox', { 102 | checkedClass: 'test', 103 | wrapNative: false 104 | }); 105 | 106 | // replace all form elements with modified default options 107 | jcf.replaceAll(); 108 | ``` 109 | 110 | The second way is to specify options for certain element in HTML: 111 | ``` html 112 | 113 | ``` 114 | *(Please be careful and use valid JSON)* 115 | 116 | ## Module Options 117 | 118 | Each module has options. Some of options are common between modules and some are unique. The most commonly used options in modules are listed below. 119 | 120 | ### Select 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 |
OptionDescriptionData TypeDefault
wrapNativeWrap native select inside fake area, so that native dropdown will be shownbooleantrue
wrapNativeOnMobileShow native dropdown on mobile devices even if wrapNative is falsebooleantrue
fakeDropInBodyActive only when custom dropdown is used. Specifies where to append custom dropdown - in document root, or inside select areabooleantrue
useCustomScrollUse custom scroll inside custom dropdown if Scrollable module presentbooleantrue
flipDropToFitFlip custom dropdown if it does not fit in viewportbooleantrue
maxVisibleItemsHow many options should be visible in dropdown before scrollbar appearsnumber10
170 | 171 | ### Checkbox 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 |
OptionDescriptionData TypeDefault
wrapNativeWrap native checkbox inside fake area for better compatibility with event handlers attached by other scriptsbooleantrue
checkedClassSpecify class which will be added to fake area when checkbox is checkedstring"jcf-checked"
labelActiveClassSpecify class which will be added to corresponding <label> when checkbox is checkedstring"jcf-label-active"
203 | 204 | ### Radio 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 |
OptionDescriptionData TypeDefault
wrapNativeWrap native radio inside fake area for better compatibility with event handlers attached by other scriptsbooleantrue
checkedClassSpecify class which will be added to fake area when radio is checkedstring"jcf-checked"
labelActiveClassSpecify class which will be added to corresponding <label> when radio is checkedstring"jcf-label-active"
236 | 237 | ### Number input 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 |
OptionDescriptionData TypeDefault
pressIntervalSpecify the interval which will control how fast the value is changing while the buttons are pressed.number150
disabledClassSpecify class which will be added to arrow buttons when maximum or minimum number is reachedstring"jcf-disabled"
263 | 264 | ### Range input 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 |
OptionDescriptionData TypeDefault
orientationSpecify range input orientation: "horizontal" or "vertical"stringhorizontal
rangeShow range indicator. By default indicator will be shown only for inputs with multiple handles. Possible values are: "min", "max", "all"string"auto"
minRangeWorks only when multiple slider handles are used. Sets the minimum range value that can be selected between the two handlesnumber0
dragHandleCenterEnable this option to make the cursor stick to the center of the input handlebooleantrue
snapToMarksSnap input handle to HTML5 datalist marksbooleantrue
snapRadiusSpecify snapping radius in pixelsnumber5
314 | 315 | ### File 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 |
OptionDescriptionData TypeDefault
buttonTextSpecify default text for upload button (its better to specify this option from HTML for proper localization).string"Choose file"
placeholderTextSpecify default text for input when no file is selected (its better to specify this option from HTML for proper localization)string"No file chosen"
341 | 342 | ### Scrollable 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 |
OptionDescriptionData TypeDefault
handleResizeHandle resize events so that scrollable area will be responsivebooleantrue
alwaysShowScrollbarsAlways show scrollbars event if they cant scroll anythingbooleanfalse
alwaysPreventMouseWheelAlways prevent mouse wheel scrolling when its used over scrollable element. This way page wont be scrolled even if scrollable area is at the scrolled to the top/bottom.booleanfalse
374 | 375 | ### Textarea 376 | 377 | Apply custom scrollbar on ` 302 | 303 | 304 | 305 |
306 |

Browser support

307 |

The script was tested in the following browsers:

308 | 318 |
319 | 320 |
321 |

Usage

322 |

The script requires jQuery 1.7+ to work properly. To add script in your page simply attach core file - jcf.js and some of modules you want to use for customization:

323 | 
324 | <script src="js/jquery.js"></script>
325 | <script src="js/jcf.js"></script>
326 | <script src="js/jcf.select.js"></script>
327 | <script src="js/jcf.radio.js"></script>
328 | <script src="js/jcf.checkbox.js"></script>
329 |

When the page is loaded all you have to do is simply call the function:

330 | 
331 | $(function() {
332 | 	jcf.replaceAll();
333 | });
334 |
335 | 336 |
337 |

License

338 |

This script is licensed under the MIT License

339 |

Copyright 2014-2016 PSD2HTML.com

340 |
341 | 342 | 343 | 344 | 345 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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); -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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.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/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.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Custom Forms 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 | ;(function(root, factory) { 10 | 'use strict'; 11 | if (typeof define === 'function' && define.amd) { 12 | define(['jquery'], factory); 13 | } else if (typeof exports === 'object') { 14 | module.exports = factory(require('jquery')); 15 | } else { 16 | root.jcf = factory(jQuery); 17 | } 18 | }(this, function($) { 19 | 'use strict'; 20 | 21 | // define version 22 | var version = '1.2.3'; 23 | 24 | // private variables 25 | var customInstances = []; 26 | 27 | // default global options 28 | var commonOptions = { 29 | optionsKey: 'jcf', 30 | dataKey: 'jcf-instance', 31 | rtlClass: 'jcf-rtl', 32 | focusClass: 'jcf-focus', 33 | pressedClass: 'jcf-pressed', 34 | disabledClass: 'jcf-disabled', 35 | hiddenClass: 'jcf-hidden', 36 | resetAppearanceClass: 'jcf-reset-appearance', 37 | unselectableClass: 'jcf-unselectable' 38 | }; 39 | 40 | // detect device type 41 | var isTouchDevice = ('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch, 42 | isWinPhoneDevice = /Windows Phone/.test(navigator.userAgent); 43 | commonOptions.isMobileDevice = !!(isTouchDevice || isWinPhoneDevice); 44 | 45 | // create global stylesheet if custom forms are used 46 | var createStyleSheet = function() { 47 | var styleTag = $('