From 0943d20e774d1f6262cfa90f667b2e8c0a266d55 Mon Sep 17 00:00:00 2001 From: Tom Cassidy Date: Fri, 5 Jun 2015 16:07:58 +1000 Subject: [PATCH] Update linked jQuery scripts to 1.11.3 and 2.1.4. Change jsfiddle and github URLs to HTTPS. Fixes #403 --- demos/demos/cfgs/builder.html | 4 +-- demos/demos/cfgs/input-color.html | 4 +-- demos/demos/cfgs/input-date.html | 14 ++++----- demos/demos/cfgs/input-datetime-local.html | 4 +-- demos/demos/cfgs/input-month.html | 2 +- demos/demos/cfgs/input-number.html | 8 ++--- demos/demos/cfgs/input-range.html | 6 ++-- demos/demos/cfgs/input-time.html | 4 +-- demos/demos/cfgs/list-datalist.html | 4 +-- demos/demos/filereader/index.html | 2 +- demos/demos/filereader/multi.html | 2 +- demos/demos/forms.html | 30 +++++++++---------- demos/demos/mediaelement.html | 8 ++--- .../mediaelement/responsive-mediaelement.html | 4 +-- demos/demos/mediaelement/track-demo.html | 4 +-- demos/demos/mediaelement/video-bg.html | 2 +- demos/demos/themes/themes.html | 2 +- demos/demos/webforms/datalist-experiment.html | 2 +- demos/demos/webforms/jquery-mobile.html | 2 +- demos/index.html | 28 ++++++++--------- 20 files changed, 68 insertions(+), 68 deletions(-) diff --git a/demos/demos/cfgs/builder.html b/demos/demos/cfgs/builder.html index 20855ebb..1f9282e3 100644 --- a/demos/demos/cfgs/builder.html +++ b/demos/demos/cfgs/builder.html @@ -13,8 +13,8 @@ + @@ -105,7 +105,7 @@
colorpicker widget cookbook
- Dealing with rgba values + Dealing with rgba values
diff --git a/demos/demos/cfgs/input-date.html b/demos/demos/cfgs/input-date.html index 3b4ec10a..a9e038da 100644 --- a/demos/demos/cfgs/input-date.html +++ b/demos/demos/cfgs/input-date.html @@ -6,7 +6,7 @@ Webshim - HTML5 datepicker widget configurator for type=date - + @@ -103,12 +103,12 @@
HTML5 datepicker widget date type control cookbook
- creating a daterange picker (from <-> to) with two date widgets - disable specific dates in datepicker - Using datepicker for a birthdate - Dynamically setting min or max attribute to today's value - Creating inline calendars - Using date + time input to create datetime-local input + creating a daterange picker (from <-> to) with two date widgets + disable specific dates in datepicker + Using datepicker for a birthdate + Dynamically setting min or max attribute to today's value + Creating inline calendars + Using date + time input to create datetime-local input
diff --git a/demos/demos/cfgs/input-datetime-local.html b/demos/demos/cfgs/input-datetime-local.html index 32c149a3..46f94d03 100644 --- a/demos/demos/cfgs/input-datetime-local.html +++ b/demos/demos/cfgs/input-datetime-local.html @@ -7,7 +7,7 @@ Webshim - datetimepicker widget configurator - + @@ -81,7 +81,7 @@
HTML5 datetimepicker widget cookbook
- Using date + time input to create a split datetime-local input + Using date + time input to create a split datetime-local input
diff --git a/demos/demos/cfgs/input-month.html b/demos/demos/cfgs/input-month.html index 0257cf0d..5ba94ae2 100644 --- a/demos/demos/cfgs/input-month.html +++ b/demos/demos/cfgs/input-month.html @@ -7,7 +7,7 @@ Webshim - monthpicker widget configurator - + diff --git a/demos/demos/cfgs/input-number.html b/demos/demos/cfgs/input-number.html index e44aeb66..2082a5ff 100644 --- a/demos/demos/cfgs/input-number.html +++ b/demos/demos/cfgs/input-number.html @@ -7,7 +7,7 @@ Webshim - forms spinbutton widget configurator for type=number - + @@ -100,9 +100,9 @@
HTML5 spinbutton number widget cookbook
- Use type="number" for a currency input widget - Combine a range control with a number control - Force numeric input for type="text" on smartphones + Use type="number" for a currency input widget + Combine a range control with a number control + Force numeric input for type="text" on smartphones
diff --git a/demos/demos/cfgs/input-range.html b/demos/demos/cfgs/input-range.html index b48d6873..ea35bd44 100644 --- a/demos/demos/cfgs/input-range.html +++ b/demos/demos/cfgs/input-range.html @@ -7,7 +7,7 @@ Webshim - foms slider configurator for type=range - + @@ -102,8 +102,8 @@
HTMl5 slider widget / range control cookbook
- Add stepUp/stepDown spin buttons to a slider - Combine a range control with a number control + Add stepUp/stepDown spin buttons to a slider + Combine a range control with a number control
diff --git a/demos/demos/cfgs/input-time.html b/demos/demos/cfgs/input-time.html index 6ca9003c..c08ce0f6 100644 --- a/demos/demos/cfgs/input-time.html +++ b/demos/demos/cfgs/input-time.html @@ -7,7 +7,7 @@ Webshim - forms timepicker widget configurator type=time - + @@ -81,7 +81,7 @@
HTML5 timepicker / timecontrol widget cookbook
- Using date + time input to create datetime-local input + Using date + time input to create datetime-local input
diff --git a/demos/demos/cfgs/list-datalist.html b/demos/demos/cfgs/list-datalist.html index 102fed5a..0041ce9f 100644 --- a/demos/demos/cfgs/list-datalist.html +++ b/demos/demos/cfgs/list-datalist.html @@ -7,7 +7,7 @@ Webshim - forms list/datalist autosuggest widget configurator for simple autocomplete widgets - + @@ -102,7 +102,7 @@
HTML5 autosuggest / datalist widget cookbook
- Using ajax to create an autosuggest widget + Using ajax to create an autosuggest widget Combine datalist with other input widgets
diff --git a/demos/demos/filereader/index.html b/demos/demos/filereader/index.html index a24a57df..fea53822 100644 --- a/demos/demos/filereader/index.html +++ b/demos/demos/filereader/index.html @@ -77,7 +77,7 @@ } - + + + @@ -152,16 +152,16 @@

customMessages/data-errormessage attribute

The used validation message can also be controlled by markup using the data-errormessage attribute.

The value of the data-errormessage attribute is either a simple string containing the errormessage or a valid JSON with different keys representing the different HTML5 validity constraints (["valueMissing", "typeMismatch", "patternMismatch", "customError", "tooLong", "badInput", "rangeUnderflow", "rangeOverflow","stepMismatch"])

- +

In case customMessages or lazyCustomMessages are set to true the data-errormessage as a JSON can be also written as flattened data-errormessage-[dashed-key] attribute.

- +

$.getErrorMessage method

.getErrorMessage returns the validationMessage of an invalid form field. As an enhancement to the native validationMessage property the return value can be simpler controlled by the developer. It uses the first possible found message set by a) data-errormessage attribute, b) validityMessages object or last c) native/polyfilled validationMessage property.

$('input').getErrorMessage();

- +

Customizing UI/UX of form validation

HTML5 constraint form validation implements a very simple UI for form validation. In most cases developers want to enhance this UI. Webshim implementation allows this by using all native form features (noValidate or preventing default behavior of the invalid event), but also gives some pre-build configuration options to implement form validation with a very good user experience and great control over style and behavior.

@@ -169,12 +169,12 @@

Customizing UI/UX of form validation

replaceValidationUI and .user-error/.user-success

With replaceValidationUI set to true the validation bubble of the browser will be replaced with a webshims popover with the additional class validity-alert. Additionally all form fields can be styled using the classes .user-error and .user-success

- +

Live form validation iVal

The instant form validation (iVal = instant validation) feature of webshims is a simple to use but powerfull and UX enhanced feature. Simply put a ws-validate class to your form element:

- +

The instant validation feature can be controlled through the iVal option object. The iVal option has the following defaults.


@@ -218,19 +218,19 @@ 
Live form validation iVal

 webshim.polyfill('forms');

The iVal feature integrates well into different CSS-frameworks like bootstrap or jQuery mobile:

- +

The iVal.fieldWrapper option

iVal.fieldWrapper defines a selector, which matches the closest ancestor element to a form field and gets the classes ws-invalid (iVal.errorWrapperClass) or ws-success (iVal.successWrapperClass).

iVal.fieldWrapper can be used to group multiple form fields to one "validation group" with one errormessage (i.e.: radio buttons or separated telephone fields) or to control the placement of errormessages.

Grouping multiple form fields to one validation group can be achieved with the following code:

- +

iVal.fieldWrapper in conjunction with iVal.errorBoxClass (ws-errorbox) can be also used to place the errormessages.

Normally the ws-errorbox is automatically created and appended to the fieldWrapper. If a ws-errorbox already exists inside of fieldWrapper or is associated with a fieldWrapper using the data-errorbox attribute this ws-errorbox is used.

- +

Among other ways to control errormessages. Forms matching the iVal.sel can have a more descriptive way to define errormessages. Simply by adding one or more child elements to ws-errorbox. The data-errortype can be used to switch between the different error types. The value of the data-errortype attribute is case-sensitive. All standard validity properties als can be written as dashed classes (i.e.: .value-missing is treated as [data-errortype="valueMissing"]).

- +

Programatically updating or resetting the validation UI

In case a value was changed, through script the validation UI can be updated by triggering the updatevalidation on the given element:


@@ -276,7 +276,7 @@ 
dependent

 			
 			
Examples:

 
-			
+			
 
 			
ajaxvalidate

 			
An input with the attribute data-ajaxvalidate referencing a validation service will start an AJAX validation.

@@ -311,9 +311,9 @@ 
ajaxvalidate

 
 			
Controlling the errormessages of custom errors

 			
The customError helper hook into the descriptive ways to define errormessage in webshim. Therefore the data-errormessage attribute and in case of the iVal feature the data-errortype can be used to define errormessages for the field.

-			
+			
 			
For a more general way the JS API can be used to change the errormessage for the given type:

-			
+			
 
 			
Creating new customErrors

 			
While webshim allows the developer to use the native or polyfilled setCustomValidity method to add custom errors. Webshims provides two additional ways to add new constraints:

@@ -329,11 +329,11 @@ 
validatevalue event

 });

The validatevalue event is also called while building input widgets like a datepicker:

- +

Adding constraints without adding events to each form control

webshims also exposes the custom error helper to generate new custom constraints

- +

Updating validation constraints without affecting the validation UI

In case a script changes a value custom constraints might need to be updated. This can be done either with the updatevalidation or updatecustomvalidity event.

diff --git a/demos/demos/mediaelement.html b/demos/demos/mediaelement.html index 4abe3597..ed2266db 100644 --- a/demos/demos/mediaelement.html +++ b/demos/demos/mediaelement.html @@ -74,7 +74,7 @@ padding: 0; } - + @@ -228,7 +228,7 @@

Configure the controlbar

While the controls are fully styleable through CSS, the markup can be controlled by changing the barTemplate option:

- +

Add overlays to the mediaplayer

Adding new overlays to a mediaplayer, for example to add share buttons (like, twitter), a logo or title and credits for a given video or audio source is easy without writing any JS code.


@@ -257,7 +257,7 @@ 
Add overlays to the mediaplayer

Here is a simple example creating a title and a social bookmark/share menu:

- +

Creating new Plugins and Controls

Creating new plugins/controls for the jme mediaplayer is quite easy using the $.jme.registerPlugin method. Due to the fact, that jme is loaded async, the plugin registration has to be wrapped inside a webshim.ready('jme', function(){}); call.

Let's create a control, which jumps the timeline by 10 seconds forward:

@@ -339,7 +339,7 @@

Creating new Plugins and Controls

Here you find the full featured running example for a JME controlbar plugin:

- +

Activating existing plugins

Webshim also comes with some predefined plugins. All plugins can be loaded/activated thourgh the plugins option, which takes an array of plugins to be automatically loaded.

diff --git a/demos/demos/mediaelement/responsive-mediaelement.html b/demos/demos/mediaelement/responsive-mediaelement.html index f037d2a6..99137edb 100644 --- a/demos/demos/mediaelement/responsive-mediaelement.html +++ b/demos/demos/mediaelement/responsive-mediaelement.html @@ -150,7 +150,7 @@ - + + @@ -143,7 +143,7 @@

Multi-celled organisms

Multi-celled organisms have different types of cells that perform specialised functions. Most life that can be seen with the naked eye is multi-cellular. These organisms are though to have evolved around 1 billion years ago with plants, animals and fungi having independent evolutionary paths.

- Read original article + Read original article diff --git a/demos/demos/mediaelement/video-bg.html b/demos/demos/mediaelement/video-bg.html index dd2b30db..48ee0919 100644 --- a/demos/demos/mediaelement/video-bg.html +++ b/demos/demos/mediaelement/video-bg.html @@ -68,7 +68,7 @@ - + + + diff --git a/demos/demos/webforms/jquery-mobile.html b/demos/demos/webforms/jquery-mobile.html index d1a20a2b..1babd123 100644 --- a/demos/demos/webforms/jquery-mobile.html +++ b/demos/demos/webforms/jquery-mobile.html @@ -8,7 +8,7 @@ - + diff --git a/demos/index.html b/demos/index.html index 1321f436..478c60a0 100644 --- a/demos/index.html +++ b/demos/index.html @@ -11,7 +11,7 @@ - + @@ -136,7 +136,7 @@

- The project is hosted on GitHub, and is available for use under the MIT software license. + The project is hosted on GitHub, and is available for use under the MIT software license.

@@ -156,7 +156,7 @@

Downloads & Dependencies

Introduction

- There are many appealing HTML5 features such as form validation, geolocation, mediaelements and UI widgets which ease the burden of writing rich web applications. + There are many appealing HTML5 features such as form validation, geolocation, mediaelements and UI widgets which ease the burden of writing rich web applications.

@@ -692,7 +692,7 @@

ES5

The es5 - feature uses the ES5 shim by Kris Kowal (all object methods, which can't be used cross-browser are removed.). + feature uses the ES5 shim by Kris Kowal (all object methods, which can't be used cross-browser are removed.).

The script implements the following methods: @@ -1025,7 +1025,7 @@

default: date time range number
  • - widgets object widgets is a general options object for all input widgets. example widgets with different themes, example widgets with different configurations + widgets object widgets is a general options object for all input widgets. example widgets with different themes, example widgets with different configurations 
    
 webshim.setOptions("forms-ext", {
 	"widgets": {
@@ -1174,7 +1174,7 @@ 
    Canvas
    
 ctx.fillRect(30, 30, 55, 50);

    - Webshim Lib can implement excanvas or FlashCanvas/FlashCanvas Pro: + Webshim Lib can implement excanvas or FlashCanvas/FlashCanvas Pro: 

    
 // always run configuration before calling webshim.polyfill();
@@ -1371,7 +1371,7 @@ 
    Using customstyleable controls
    
 			
    Here you can find more information about customizing controls and extending the mediaplayer's behavior.
    
 			
    Examples/Demos
    
 			
 			
    Examples
    
 			
@@ -1453,7 +1453,7 @@ 
    Geolocation
    
 			
 
 			
    
-				The shim uses the geolocation information provided by http://freegeoip.net and/or googles API-Loader
+				The shim uses the geolocation information provided by http://freegeoip.net and/or googles API-Loader
 			
    
 
 			
    Options for geolocation
    
@@ -1531,7 +1531,7 @@ 
    Constraints of the details polyfill
    
 					The polyfill currently only allows other elements as direct children of the details. Simple text is not allowed as direct child of details.
  • - The details and summary element can be considered as experimental. It is not clear wether and if yes, how a developer can style the summary element. Safari nightly (6) and Chrome 12 are currently the only browsers supporting this element. Note: Please read Bruce Lawson's blog post. + The details and summary element can be considered as experimental. It is not clear wether and if yes, how a developer can style the summary element. Safari nightly (6) and Chrome 12 are currently the only browsers supporting this element. Note: Please read Bruce Lawson's blog post.
  • We currently haven't coded unit tests for this feature @@ -1660,7 +1660,7 @@

    usermedia

    navigator.getUserMedia. It includes also a polyfill for URL and the srcObj property.

    - A demo with code example of getUserMedia polyfill. + A demo with code example of getUserMedia polyfill.

    url

    @@ -1710,7 +1710,7 @@

    url

    Promise

    The promise feature is a polyfill of - ES6 + ES6 Promises. For instructions on using promises and details of the API, read JavaScript Promises at HTML5Rocks. @@ -1740,7 +1740,7 @@

    Responsive Images

    sticky (position: sticky)

    - The sticky feature is a polyfill for the CSS position value sticky (position sticky demo). + The sticky feature is a polyfill for the CSS position value sticky (position sticky demo).

    Descriptive/Markup Usage

    Simply add the class ws-sticky to all elements, which should become sticky and define either a top or bottom value:

    @@ -1806,7 +1806,7 @@

    Webshim's opinionated enhancement cross browser de

    Webshim has evolved form a general polyfill library to a sophisticated UI component / UI widget library which makes it easy to create scalable, responsive and highly adaptable websites and webapps.

    While webshim polyfills older browsers and automatically fixes a lot of bugs, it enables the developer to also enhance even modern browsers with highly customizable widgets (datepicker, form validation, slider, autosuggest, custom stylable controls for video/audio).

    Webshim is opinionated, that a developer should always solve a problem the HTML5 way.

    -

    For example most datepickers have a direct configuration option to disable certain days to be picked from the control. This is not possible with current implementations of input[type="date"], but it is possible to use the HTML 5 form validation API to constrain the user input to certain days. Therefore webshim offers a way to constrain the user input and those constraints are used to decide whether certain days should be disabled in the pickercontrol.

    +

    For example most datepickers have a direct configuration option to disable certain days to be picked from the control. This is not possible with current implementations of input[type="date"], but it is possible to use the HTML 5 form validation API to constrain the user input to certain days. Therefore webshim offers a way to constrain the user input and those constraints are used to decide whether certain days should be disabled in the pickercontrol.

    This way a developer can switch between polyfilled/enhanced and native widgets. While the appearance might be different the base functionality will work in all browsers. But if a certain feature is barley possible with HTML5 or a developer needs full control in all browsers/devices, he can always switch to a enhance all strategy.

    Webshim automatically scales your enhancements