Giter Club home page Giter Club logo

webshim's Introduction

Important note: Webshim is not compatible with upcoming jQuery 3.x and I do not plan to work on a new major version. I will still fix critical bugs in the future though.

The polyfilling, capability based loading JavaScript Library

General Principles

  • HTML5 compliant: correctly and accurately implemented (HTML5) Markup-, JS- and DOM-APIs
  • capability based loading: extremely lightweight in modern browsers
  • cross-browser support: All A-Graded browsers including latest version of Opera are tested
  • extendable: if we have not implemented a feature you want, you can easily implement it on your own

Features

  • canvas
  • HTML5 form features including: constraint validation and form widgets (input[type="range"], input[type="date"], input[type="number"], input[type="time"], input[type="month"], output, progress, input[list]/datalist)
  • HTML5 audio/video/track implementation
  • matchMedia
  • interactive elements: summary/details
  • XHR2 / filereader (including, XHR2/AJAX CORS and FormData handling)
  • picture / img[srcset]
  • promise
  • geolocation
  • ECMAScript 5 / JavaScript 1.8.5 features
  • window.URL
  • getUserMedia ('usermedia' currently only access to user's camera, not microphone)
  • sticky (position: sticky)

Installation and Usage

1 - Download the Webshim Lib and put the js-webshim folder in your project.

2 - Include the JavaScript:

<script src="js/jquery.js"></script>

<script src="js-webshim/minified/polyfiller.js"></script> 

<script> 
	// load and implement all unsupported features 
	webshims.polyfill();
		
	// or only load a specific feature
	//webshims.polyfill('forms es5');
</script>

3 - Wait till everything has been loaded and then use it:

<script> 
	$(function(){
		// work with the HTML5 API
		$('input:invalid').each(function(){
		    $(this).after( $.prop(this, 'validationMessage') );
		});
		// ...
	});
</script>

More information and demos.

Download via bower

bower install webshim --save-dev

License

The Webshims Lib core is licensed under the MIT-License.

Webshims Lib uses many great third party scripts:

Script License URL
flashcanvas MIT http://code.google.com/p/flashcanvas
flashcanvaspro closed http://flashcanvas.net
Jaris FLV GPL 3.0 http://jarisflvplayer.org
excanvas Apache License 2.0 http://excanvas.sourceforge.net
moxie GPL 3.0 https://github.com/moxiecode/moxie
es5 MIT https://github.com/280north/narwhal
swfmini MIT https://code.google.com/p/swfobject
track BSD 2 clause https://github.com/cgiffard/Captionator
color-picker MIT http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx
forms-picker MIT https://github.com/brandonaaron/jquery-mousewheel
jme.woff GPL / CC BY 3.0 http://icomoon.io/#preview-free
picture MIT https://github.com/scottjehl/picturefill
url any (OSI approved) Open Source licence https://github.com/inexorabletash/polyfill

Questions?

If you have any questions, please feel free to ask them on stackoverflow.com/questions/tagged/webshim.

Please tag your questions with 'webshim'.

webshim's People

Contributors

0gust1 avatar amercier avatar arthedian avatar carlopires avatar cori avatar davidbove avatar dcmoore-gd avatar derduher avatar dramentol avatar gamesh avatar gsunr avatar isaackwan avatar jab avatar jls2933 avatar joeybaker avatar kraz avatar lekensteyn avatar lhanson avatar lojjic avatar lukeholder avatar mekras avatar mreinstein avatar ottok avatar outdooricon avatar seldaek avatar spone avatar szsolt avatar terinjokes avatar vonloxx avatar zeedev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webshim's Issues

allow loading all required resources with a single request

Libraries like webassets provide the ability to merge and compress Javascript and CSS on the fly. It would be cool if you could configure Webshims like this:

$.webshims.loader_url('/jscompressor');

and then instead of loading all the polyfills from separate requests, it would do something like:

document.write('<script src="/jscompressor?scripts=es5.js,form-core.js,...">\x3C/script>');

(It should sort the list of required scripts in the url so the server and browser can cache the response.)

This could be a good first step toward one day hosting such a service centrally on a CDN, which would allow users to always load only the shims they need with a single request without having to host Webshims themselves.

Prior art:

Thanks for considering!

a11y html5 -> aria

  • only if no role
  • address - contentinfo
  • additional test for contentinfo and banner (not in section/article) (speed improvement don't use :last/:first)

webshims validityMessages trumped by those of browsers with only partial validation support

Environment: Safari 5.0.4 / Mac OS X 10.6.7

Expected result: displayed validity messages match the language specified by webshims.activeLang and correspond to the messages in the webshims.validityMessages object.

Observed result: displayed validity messages are taken from Safari itself. The webshims.activeLang call is disregarded.

Background: From http://diveintohtml5.org/forms.html: "Unfortunately, Safari and Chrome have shipped an incomplete implementation that may trip you up: they validate form controls, but they don’t offer any visible feedback when a form field fails validation. In other words, if you enter an invalid (or improperly formatted) date in a type="date" field, Safari and Chrome will not submit the form, but they won’t tell you why they didn’t submit the form. (They will set focus to the field that contains the invalid value, but they don’t display an error message like Opera or Firefox 4.)"

Reproduction steps:

  1. Quit Safari if it is already running.
  2. Go into System Preferences > Language & Text and drag some other language to the top of the list. I chose Portuguese.
  3. Open Safari. Its GUI (menu items, etc) should appear in the language you chose in the previous step.
  4. Go to a site with a validating webshims form that sets webshims.activeLang to some other language and specifies corresponding validityMessages. For instance, http://1.bravenewsoftware.appspot.com/zh/ sets webshims.activeLang to "zh", and adds validityMessages in this language. (The code for this site is here if you want to take a look.)
  5. Try to submit the form with a required field missing or of incorrect type.
  6. Observe the message you get is Safari's own validity message translated into the language it was started in, not a message in the language specified by webshims.activeLang, and indeed not even a message found anywhere in webshims.validityMessages.

It's an interesting question whether webshims should prefer the web site developer's chosen language/messages over the messages built in to a browser with only partial validation support. I would lean toward honoring the developers' choices (hence this bug report), but I could see how an argument could be made against. Feel free to close as invalid if appropriate.

Form elements not rendering

Hello,

I want to thank you for all of the hard work you've put into this awesome framework!

I am having some difficulty with this latest version of webshims (1.6) and rendering the form elements. I have used webforms (before 1.6) with YepNope and it worked well. Now for some reason, when I make the following call, I get nothing. Using Firebug I can confirm that the scripts have loaded, but the form elements (enhanced with webshims 1.6) do not appear to be enhanced.

I am using the following code (at the bottom of the screen):

yepnope([
// load jquery
"https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",

// other scrips are loaded here

// load webshims 1.6
{
    load     : "statics/js/libs.pollyfiller.js",
    callback : function() {
        $.webshims.loader.basePath = "static/js/libs/shims/",
        $.webshims.polyfill('forms forms-ext');
    }

]);

Any help is much appreciated.

include translations into other languages

Hey Alexander,

First off, thanks for the great work!

I'd like to use webshim for a site I'm working on which has to be available in several languages. Are there any plans to internationalize webshim? I noticed jquery.validate has translations into 32 different languages. Maybe that might be of help?

Thanks for reading. =]

Josh

improve storage in IE6/7

  • Add better support for sessionStorage (multiple window sharing) in IE6
  • make localStorage work in IETester (and emulated IE7)

better documentation

  • how to customize/style input-widgets
  • how to build polyfills
  • what usefull stuff is in polyfiller.js

focus on CSS3shims (transition, transform, rgba, border-radius, box-shadow)

due to the fact, that parsing huge stylesheets adds a lot of overhead, only support for IE, where we can use internal stylesheet-parser. due to the fact, that polyfilled css3 properties don't always behave like native css3 properties make all properties optionally namespaced:

$.webshims.cssNamespace = '-polyfill-';
-->
-polyfill-transform: ...

$.webshims.cssNamespace = '';
-->
transform:

Canvas createPattern() error on IE 8

I'm methodically going through and testing all the MDC Canvas tutorials on FF 3 & IE 8 and am getting this error on the createPattern example on https://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors

error details (from IE 8):

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; MALC)
Timestamp: Tue, 14 Dec 2010 20:24:55 UTC

Message: 'undefined' is null or not an object
Line: 59
Char: 54
Code: 0
URI: http://localhost/webshim/js-webshim/minified/shims/combined-ie8-light.js

refactor input-ui

form-*-ui is extremly ugly and not dry

ToDos:

  • decouple spinbutton ui from native valueAsNumber support
  • use shadowelements for number, time (similiar to date, range)
  • don't use a real time control as part for datetime-local (use only the shadowelement)
  • make replaceUI possible for spinbutton-controlled types
  • localize input[type=number]
  • add stepUp/stepDown method

refactor core

  • split into two parts
  • use third party scriptloader
  • use modernizr
  • better code style

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.