Version Description
- Fix: Correctly set outer background color
Download this release
Release Info
Developer | pdclark |
Plugin | Styles |
Version | 1.0.4 |
Comparing to | |
See all releases |
Code changes from version 0.5.3 to 1.0.4
- classes/edd-sl-plugin-updater.php +140 -0
- classes/styles-admin.php +114 -0
- classes/styles-child-theme.php +46 -0
- classes/styles-child-updatable.php +195 -0
- classes/styles-child.php +98 -0
- classes/styles-control-background-color.php +66 -0
- classes/styles-control-border-bottom-color.php +13 -0
- classes/styles-control-border-color.php +29 -0
- classes/styles-control-border-left-color.php +13 -0
- classes/styles-control-border-right-color.php +13 -0
- classes/styles-control-border-top-color.php +13 -0
- classes/styles-control-color.php +64 -0
- classes/styles-control-text.php +201 -0
- classes/styles-control.php +170 -0
- classes/styles-css.php +104 -0
- classes/styles-customize.php +193 -0
- classes/styles-helpers.php +108 -0
- classes/styles-plugin.php +144 -0
- css/styles-admin.css +1 -0
- css/styles-customize.css +88 -0
- js/PIE/PIE.htc +81 -81
- js/PIE/PIE.js +73 -73
- js/PIE/PIE.php +18 -18
- js/PIE/PIE_uncompressed.htc +3713 -3713
- js/PIE/PIE_uncompressed.js +3687 -3687
- js/admin.js +432 -432
- js/jq.gradientpicker.js +366 -366
- js/jquery.ui.mouse.js +162 -162
- js/jquery.ui.slider.js +666 -666
- js/jquery.ui.slider.min.js +65 -65
- js/jquery.ui.widget.js +268 -268
- js/post-message-part-background-color.js +5 -0
- js/post-message-part-border-color.js +5 -0
- js/post-message-part-color.js +5 -0
- js/post-message-part-text.js +5 -0
- js/styles-customize-controls.js +44 -0
- phpunit.php +40 -0
- phpunit.xml +19 -0
- readme.txt +135 -128
- screenshot-1.png +0 -0
- screenshot-2.png +0 -0
- screenshot-3.png +0 -0
- styles.php +49 -73
- tests/bootstrap.php +13 -0
- tests/styles/init.php +30 -0
- tests/styles/tests-styles-customize.php +26 -0
- tests/styles/tests-styles-plugin.php +16 -0
- uninstall.php +35 -21
- views/licenses.php +62 -0
classes/edd-sl-plugin-updater.php
ADDED
@@ -0,0 +1,140 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
// uncomment this line for testing
|
4 |
+
//set_site_transient( 'update_plugins', null );
|
5 |
+
|
6 |
+
/**
|
7 |
+
* Allows plugins to use their own update API.
|
8 |
+
*
|
9 |
+
* @author Pippin Williamson
|
10 |
+
* @version 1.0
|
11 |
+
*/
|
12 |
+
class EDD_SL_Plugin_Updater {
|
13 |
+
private $api_url = '';
|
14 |
+
private $api_data = array();
|
15 |
+
private $name = '';
|
16 |
+
private $slug = '';
|
17 |
+
|
18 |
+
/**
|
19 |
+
* Class constructor.
|
20 |
+
*
|
21 |
+
* @uses plugin_basename()
|
22 |
+
* @uses hook()
|
23 |
+
*
|
24 |
+
* @param string $_api_url The URL pointing to the custom API endpoint.
|
25 |
+
* @param string $_plugin_file Path to the plugin file.
|
26 |
+
* @param array $_api_data Optional data to send with API calls.
|
27 |
+
* @return void
|
28 |
+
*/
|
29 |
+
function __construct( $_api_url, $_plugin_file, $_api_data = null ) {
|
30 |
+
$this->api_url = trailingslashit( $_api_url );
|
31 |
+
$this->api_data = urlencode_deep( $_api_data );
|
32 |
+
$this->name = plugin_basename( $_plugin_file );
|
33 |
+
$this->slug = basename( $_plugin_file, '.php');
|
34 |
+
$this->version = $_api_data['version'];
|
35 |
+
|
36 |
+
// Set up hooks.
|
37 |
+
$this->hook();
|
38 |
+
}
|
39 |
+
|
40 |
+
/**
|
41 |
+
* Set up Wordpress filters to hook into WP's update process.
|
42 |
+
*
|
43 |
+
* @uses add_filter()
|
44 |
+
*
|
45 |
+
* @return void
|
46 |
+
*/
|
47 |
+
private function hook() {
|
48 |
+
add_filter( 'pre_set_site_transient_update_plugins', array( $this, 'pre_set_site_transient_update_plugins_filter' ) );
|
49 |
+
add_filter( 'plugins_api', array( $this, 'plugins_api_filter' ), 10, 3);
|
50 |
+
}
|
51 |
+
|
52 |
+
/**
|
53 |
+
* Check for Updates at the defined API endpoint and modify the update array.
|
54 |
+
*
|
55 |
+
* This function dives into the update api just when Wordpress creates its update array,
|
56 |
+
* then adds a custom API call and injects the custom plugin data retrieved from the API.
|
57 |
+
* It is reassembled from parts of the native Wordpress plugin update code.
|
58 |
+
* See wp-includes/update.php line 121 for the original wp_update_plugins() function.
|
59 |
+
*
|
60 |
+
* @uses api_request()
|
61 |
+
*
|
62 |
+
* @param array $_transient_data Update array build by Wordpress.
|
63 |
+
* @return array Modified update array with custom plugin data.
|
64 |
+
*/
|
65 |
+
function pre_set_site_transient_update_plugins_filter( $_transient_data ) {
|
66 |
+
|
67 |
+
|
68 |
+
if( empty( $_transient_data ) ) return $_transient_data;
|
69 |
+
|
70 |
+
$to_send = array( 'slug' => $this->slug );
|
71 |
+
|
72 |
+
$api_response = $this->api_request( 'plugin_latest_version', $to_send );
|
73 |
+
|
74 |
+
if( false !== $api_response && is_object( $api_response ) ) {
|
75 |
+
if( version_compare( $this->version, $api_response->new_version, '<' ) )
|
76 |
+
$_transient_data->response[$this->name] = $api_response;
|
77 |
+
}
|
78 |
+
return $_transient_data;
|
79 |
+
}
|
80 |
+
|
81 |
+
|
82 |
+
/**
|
83 |
+
* Updates information on the "View version x.x details" page with custom data.
|
84 |
+
*
|
85 |
+
* @uses api_request()
|
86 |
+
*
|
87 |
+
* @param mixed $_data
|
88 |
+
* @param string $_action
|
89 |
+
* @param object $_args
|
90 |
+
* @return object $_data
|
91 |
+
*/
|
92 |
+
function plugins_api_filter( $_data, $_action = '', $_args = null ) {
|
93 |
+
if ( ( $_action != 'plugin_information' ) || !isset( $_args->slug ) || ( $_args->slug != $this->slug ) ) return $_data;
|
94 |
+
|
95 |
+
$to_send = array( 'slug' => $this->slug );
|
96 |
+
|
97 |
+
$api_response = $this->api_request( 'plugin_information', $to_send );
|
98 |
+
if ( false !== $api_response ) $_data = $api_response;
|
99 |
+
|
100 |
+
return $_data;
|
101 |
+
}
|
102 |
+
|
103 |
+
/**
|
104 |
+
* Calls the API and, if successfull, returns the object delivered by the API.
|
105 |
+
*
|
106 |
+
* @uses get_bloginfo()
|
107 |
+
* @uses wp_remote_post()
|
108 |
+
* @uses is_wp_error()
|
109 |
+
*
|
110 |
+
* @param string $_action The requested action.
|
111 |
+
* @param array $_data Parameters for the API action.
|
112 |
+
* @return false||object
|
113 |
+
*/
|
114 |
+
private function api_request( $_action, $_data ) {
|
115 |
+
|
116 |
+
global $wp_version;
|
117 |
+
|
118 |
+
$data = array_merge( $this->api_data, $_data );
|
119 |
+
if( $data['slug'] != $this->slug )
|
120 |
+
return;
|
121 |
+
|
122 |
+
$api_params = array(
|
123 |
+
'edd_action' => 'get_version',
|
124 |
+
'license' => $data['license'],
|
125 |
+
'name' => $data['item_name'],
|
126 |
+
'slug' => $this->slug,
|
127 |
+
'author' => $data['author']
|
128 |
+
);
|
129 |
+
$request = wp_remote_post( $this->api_url, array( 'timeout' => 15, 'sslverify' => false, 'body' => $api_params ) );
|
130 |
+
|
131 |
+
if ( !is_wp_error( $request ) ):
|
132 |
+
$request = json_decode( wp_remote_retrieve_body( $request ) );
|
133 |
+
if( $request )
|
134 |
+
$request->sections = maybe_unserialize( $request->sections );
|
135 |
+
return $request;
|
136 |
+
else:
|
137 |
+
return false;
|
138 |
+
endif;
|
139 |
+
}
|
140 |
+
}
|
classes/styles-admin.php
ADDED
@@ -0,0 +1,114 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class Styles_Admin {
|
4 |
+
|
5 |
+
/**
|
6 |
+
* @var Styles_Plugin
|
7 |
+
*/
|
8 |
+
var $plugin;
|
9 |
+
|
10 |
+
/**
|
11 |
+
* Admin notices
|
12 |
+
*/
|
13 |
+
var $notices = array();
|
14 |
+
|
15 |
+
var $default_themes = array(
|
16 |
+
'twentyten',
|
17 |
+
'twentyeleven',
|
18 |
+
'twentytwelve',
|
19 |
+
'twentythirteen',
|
20 |
+
);
|
21 |
+
|
22 |
+
/**
|
23 |
+
* @var Styles_License
|
24 |
+
*/
|
25 |
+
var $license;
|
26 |
+
|
27 |
+
function __construct( $plugin ) {
|
28 |
+
$this->plugin = $plugin;
|
29 |
+
|
30 |
+
// Notices
|
31 |
+
add_action( 'admin_init', array( $this, 'install_default_themes_notice' ), 20 );
|
32 |
+
add_action( 'admin_init', array( $this, 'activate_notice' ), 30 );
|
33 |
+
add_action( 'admin_notices', array( $this, 'admin_notices' ) );
|
34 |
+
|
35 |
+
// Scripts
|
36 |
+
add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
|
37 |
+
|
38 |
+
// Plugin Meta
|
39 |
+
add_filter( 'plugin_row_meta', array( $this, 'plugin_row_meta' ), 10, 2 );
|
40 |
+
|
41 |
+
// License Menu
|
42 |
+
add_action( 'admin_menu', array( $this, 'license_menu' ) );
|
43 |
+
}
|
44 |
+
|
45 |
+
/**
|
46 |
+
* Enqueue admin stylesheet
|
47 |
+
*/
|
48 |
+
public function admin_enqueue_scripts() {
|
49 |
+
wp_enqueue_style( 'storm-styles-admin', plugins_url('css/styles-admin.css', STYLES_BASENAME), array(), $this->plugin->version, 'all' );
|
50 |
+
}
|
51 |
+
|
52 |
+
public function plugin_row_meta( $meta, $basename ) {
|
53 |
+
if ( STYLES_BASENAME == $basename ) {
|
54 |
+
$meta[2] = str_replace( 'Visit plugin site', 'Get More Themes', $meta[2] );
|
55 |
+
$meta[] = '<a class="button button-primary" href="' . network_admin_url( 'customize.php' ) . '">Customize Theme</a>';
|
56 |
+
}
|
57 |
+
return $meta;
|
58 |
+
}
|
59 |
+
|
60 |
+
public function install_default_themes_notice() {
|
61 |
+
if ( !in_array( get_template(), $this->default_themes )
|
62 |
+
|| 'update.php' == basename( $_SERVER['PHP_SELF'] )
|
63 |
+
|| !current_user_can('install_plugins')
|
64 |
+
) {
|
65 |
+
return false;
|
66 |
+
}
|
67 |
+
|
68 |
+
$slug = 'styles-' . get_template();
|
69 |
+
|
70 |
+
if ( !is_dir( WP_PLUGIN_DIR . '/' . $slug ) ) {
|
71 |
+
// Plugin not installed
|
72 |
+
$theme = wp_get_theme();
|
73 |
+
$url = wp_nonce_url( self_admin_url( 'update.php?action=install-plugin&plugin=' . $slug), 'install-plugin_' . $slug );
|
74 |
+
$this->notices[] = "<p>Styles is almost ready! To add theme options for <strong>{$theme->name}</strong>, please <a href='$url'>install Styles: {$theme->name}</a>.</p>";
|
75 |
+
return true;
|
76 |
+
}
|
77 |
+
}
|
78 |
+
|
79 |
+
/**
|
80 |
+
* If plugin for this theme is installed, but not activated, display notice.
|
81 |
+
*/
|
82 |
+
public function activate_notice() {
|
83 |
+
$slug = 'styles-' . get_template();
|
84 |
+
$plugin_file = $slug . '/' . 'plugin.php';
|
85 |
+
|
86 |
+
if ( is_dir( WP_PLUGIN_DIR . '/' . $slug ) ) {
|
87 |
+
if ( is_plugin_inactive( $plugin_file ) ) {
|
88 |
+
$theme = wp_get_theme();
|
89 |
+
$url = wp_nonce_url(self_admin_url('plugins.php?action=activate&plugin=' . $plugin_file ), 'activate-plugin_' . $plugin_file );
|
90 |
+
$this->notices[] = "<p><strong>Styles: {$theme->name}</strong> is installed, but not active. Please <a href='$url'>activate Styles: {$theme->name}</a>.</p>";
|
91 |
+
}
|
92 |
+
}
|
93 |
+
}
|
94 |
+
|
95 |
+
public function admin_notices() {
|
96 |
+
foreach( $this->notices as $key => $message ) {
|
97 |
+
echo "<div class='updated fade' id='styles-$key'>$message</div>";
|
98 |
+
}
|
99 |
+
}
|
100 |
+
|
101 |
+
function license_menu() {
|
102 |
+
$plugins = apply_filters( 'styles_license_form_plugins', array() );
|
103 |
+
|
104 |
+
if ( !empty( $plugins ) ) {
|
105 |
+
add_plugins_page( 'Styles Licenses', 'Styles Licenses', 'manage_options', 'styles-license', array( $this, 'license_page' ) );
|
106 |
+
}
|
107 |
+
}
|
108 |
+
|
109 |
+
function license_page() {
|
110 |
+
require_once STYLES_DIR . '/views/licenses.php';
|
111 |
+
exit;
|
112 |
+
}
|
113 |
+
|
114 |
+
}
|
classes/styles-child-theme.php
ADDED
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class Styles_Child_Theme extends Styles_Child_Updatable {
|
4 |
+
|
5 |
+
var $template;
|
6 |
+
var $styles_css;
|
7 |
+
|
8 |
+
public function __construct( $args ) {
|
9 |
+
parent::__construct( $args );
|
10 |
+
|
11 |
+
$this->template = str_replace( ' ', '-', strtolower( $this->item_name ) );
|
12 |
+
$this->styles_css = dirname( $this->plugin_file ) . '/style.css';
|
13 |
+
|
14 |
+
add_filter( 'styles_css_output', array( $this, 'styles_css_output' ) );
|
15 |
+
}
|
16 |
+
|
17 |
+
public function is_active() {
|
18 |
+
if ( Styles_Helpers::get_template() == $this->template ) {
|
19 |
+
return true;
|
20 |
+
}else {
|
21 |
+
return false;
|
22 |
+
}
|
23 |
+
}
|
24 |
+
|
25 |
+
public function get_json_path() {
|
26 |
+
if ( $this->is_active() ) {
|
27 |
+
$json_file = dirname( $this->plugin_file ) . '/customize.json';
|
28 |
+
return $json_file;
|
29 |
+
}else {
|
30 |
+
return false;
|
31 |
+
}
|
32 |
+
|
33 |
+
}
|
34 |
+
|
35 |
+
/**
|
36 |
+
* If styles.css exists in the plugin folder, prepend it to final CSS output
|
37 |
+
*/
|
38 |
+
public function styles_css_output( $css ) {
|
39 |
+
if ( $this->is_active() && file_exists( $this->styles_css ) ) {
|
40 |
+
$css = file_get_contents( $this->styles_css ) . $css;
|
41 |
+
}
|
42 |
+
|
43 |
+
return $css;
|
44 |
+
}
|
45 |
+
|
46 |
+
}
|
classes/styles-child-updatable.php
ADDED
@@ -0,0 +1,195 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
if ( !class_exists( 'EDD_SL_Plugin_Updater' ) ) {
|
4 |
+
require dirname( __FILE__ ) . '/edd-sl-plugin-updater.php';
|
5 |
+
}
|
6 |
+
|
7 |
+
/**
|
8 |
+
* Allow child plugins to update through WordPress updater
|
9 |
+
*/
|
10 |
+
class Styles_Child_Updatable {
|
11 |
+
|
12 |
+
/**
|
13 |
+
* @var EDD_SL_Plugin_Updater
|
14 |
+
*/
|
15 |
+
private $updater;
|
16 |
+
private $updates;
|
17 |
+
private $license_option_key;
|
18 |
+
|
19 |
+
var $plugin_file;
|
20 |
+
var $plugin_basename;
|
21 |
+
var $api_url;
|
22 |
+
|
23 |
+
var $default_args = array(
|
24 |
+
'api_url' => 'http://store.stylesplugin.com',
|
25 |
+
);
|
26 |
+
|
27 |
+
public function __construct( $args ) {
|
28 |
+
$args = wp_parse_args( $args, $this->default_args );
|
29 |
+
|
30 |
+
$this->updates = !empty( $args['styles updates'] );
|
31 |
+
$this->license_option_key = dirname( $args['slug'] ) . '-' . 'license';
|
32 |
+
$this->plugin_file = WP_PLUGIN_DIR . '/' . $args['slug'];
|
33 |
+
$this->plugin_basename = $args[ 'slug' ];
|
34 |
+
$this->item_name = $this->maybe_guess_item_name( $args );
|
35 |
+
$this->api_url = $args['api_url'];
|
36 |
+
$this->name = $args['Name'];
|
37 |
+
|
38 |
+
$this->init_updater( $args );
|
39 |
+
}
|
40 |
+
|
41 |
+
public function maybe_guess_item_name( $args ) {
|
42 |
+
if ( !empty( $args['styles item'] ) ) {
|
43 |
+
return $args['styles item'];
|
44 |
+
}
|
45 |
+
|
46 |
+
return trim( str_replace( 'Styles:', '', $args['Title'] ) );
|
47 |
+
}
|
48 |
+
|
49 |
+
/**
|
50 |
+
* Initialize EDD Updater and licensing if updates are enabled
|
51 |
+
*/
|
52 |
+
public function init_updater( $args ) {
|
53 |
+
if ( !$this->updates ) { return; }
|
54 |
+
|
55 |
+
// License activation hooks
|
56 |
+
add_action( 'plugin_action_links_' . $this->plugin_basename, array( $this, 'plugin_action_links' ), 10, 4 );
|
57 |
+
add_action( 'admin_init', array( $this, 'register_setting') );
|
58 |
+
|
59 |
+
add_action( 'admin_init', array( $this, 'activate_license') );
|
60 |
+
add_action( 'admin_init', array( $this, 'deactivate_license') );
|
61 |
+
|
62 |
+
add_filter( 'styles_license_form_plugins', array( $this, 'styles_license_form_plugins' ) );
|
63 |
+
|
64 |
+
// EDD Plugin Updater
|
65 |
+
$edd_api_data = array(
|
66 |
+
'author' => $args['AuthorName'],
|
67 |
+
'version' => $args['Version'],
|
68 |
+
'license' => get_option( $this->license_option_key ),
|
69 |
+
'item_name' => $this->item_name, // match EDD item post_title
|
70 |
+
);
|
71 |
+
|
72 |
+
$this->updater = new EDD_SL_Plugin_Updater( $args['api_url'], $this->plugin_file, $edd_api_data );
|
73 |
+
|
74 |
+
}
|
75 |
+
|
76 |
+
public function styles_license_form_plugins( $plugins ) {
|
77 |
+
$plugins[] = array(
|
78 |
+
'name' => $this->name,
|
79 |
+
'license_option_key' => $this->license_option_key,
|
80 |
+
);
|
81 |
+
|
82 |
+
return $plugins;
|
83 |
+
}
|
84 |
+
|
85 |
+
/**
|
86 |
+
* Add a license link to the plugin actions
|
87 |
+
* Skips free plugins
|
88 |
+
*
|
89 |
+
* @param $value
|
90 |
+
* @return array
|
91 |
+
*/
|
92 |
+
function plugin_action_links( $actions, $plugin_file, $plugin_data, $context ) {
|
93 |
+
if ( !current_user_can( 'manage_options' ) ) { return $actions; }
|
94 |
+
|
95 |
+
$admin_url = admin_url( 'plugins.php?page=styles-license' );
|
96 |
+
|
97 |
+
$actions[ sizeof( $actions ) ] = '<a href="' . $admin_url . '" title="' . esc_html__( 'Styles Licenses', 'styles' ) . '">' . esc_html__( 'Licenses', 'styles' ) . '</a>';
|
98 |
+
|
99 |
+
return $actions;
|
100 |
+
}
|
101 |
+
|
102 |
+
/**
|
103 |
+
* Creates settings in options table
|
104 |
+
*/
|
105 |
+
function register_setting() {
|
106 |
+
register_setting( 'styles_licenses', $this->license_option_key, array( $this, 'sanitize_license' ) );
|
107 |
+
}
|
108 |
+
|
109 |
+
function sanitize_license( $new ) {
|
110 |
+
|
111 |
+
$old = get_option( $this->license_option_key );
|
112 |
+
|
113 |
+
if( $old && $old != $new ) {
|
114 |
+
// new license has been entered, so must reactivate
|
115 |
+
delete_option( $option_key . '_status' );
|
116 |
+
}
|
117 |
+
|
118 |
+
return $new;
|
119 |
+
}
|
120 |
+
|
121 |
+
function activate_license() {
|
122 |
+
|
123 |
+
// listen for our activate button to be clicked
|
124 |
+
if( isset( $_POST['edd_license_activate'] ) ) {
|
125 |
+
|
126 |
+
// run a quick security check
|
127 |
+
if( ! check_admin_referer( 'edd_sample_nonce', 'edd_sample_nonce' ) )
|
128 |
+
return; // get out if we didn't click the Activate button
|
129 |
+
|
130 |
+
// retrieve the license from the database
|
131 |
+
$license = trim( get_option( $this->license_option_key ) );
|
132 |
+
|
133 |
+
// data to send in our API request
|
134 |
+
$api_params = array(
|
135 |
+
'edd_action'=> 'activate_license',
|
136 |
+
'license' => $license,
|
137 |
+
'item_name' => urlencode( $this->item_name ) // the name of our product in EDD
|
138 |
+
);
|
139 |
+
|
140 |
+
// Call the custom API.
|
141 |
+
$response = wp_remote_get( add_query_arg( $api_params, $this->api_url ), array( 'timeout' => 15, 'sslverify' => false ) );
|
142 |
+
|
143 |
+
// make sure the response came back okay
|
144 |
+
if ( is_wp_error( $response ) )
|
145 |
+
return false;
|
146 |
+
|
147 |
+
// decode the license data
|
148 |
+
$license_data = json_decode( wp_remote_retrieve_body( $response ) );
|
149 |
+
|
150 |
+
// $license_data->license will be either "active" or "inactive"
|
151 |
+
|
152 |
+
update_option( $this->license_option_key . '_status', $license_data->license );
|
153 |
+
|
154 |
+
}
|
155 |
+
}
|
156 |
+
|
157 |
+
function deactivate_license() {
|
158 |
+
|
159 |
+
// listen for our activate button to be clicked
|
160 |
+
if( isset( $_POST['edd_license_deactivate'] ) ) {
|
161 |
+
|
162 |
+
// run a quick security check
|
163 |
+
if( ! check_admin_referer( 'edd_sample_nonce', 'edd_sample_nonce' ) )
|
164 |
+
return; // get out if we didn't click the Activate button
|
165 |
+
|
166 |
+
// retrieve the license from the database
|
167 |
+
$license = trim( get_option( $this->license_option_key ) );
|
168 |
+
|
169 |
+
// data to send in our API request
|
170 |
+
$api_params = array(
|
171 |
+
'edd_action'=> 'deactivate_license',
|
172 |
+
'license' => $license,
|
173 |
+
'item_name' => urlencode( $this->item_name ) // the name of our product in EDD
|
174 |
+
);
|
175 |
+
|
176 |
+
// Call the custom API.
|
177 |
+
$response = wp_remote_get( add_query_arg( $api_params, $this->api_url ), array( 'timeout' => 15, 'sslverify' => false ) );
|
178 |
+
|
179 |
+
// make sure the response came back okay
|
180 |
+
if ( is_wp_error( $response ) ) {
|
181 |
+
return false;
|
182 |
+
}
|
183 |
+
|
184 |
+
// decode the license data
|
185 |
+
$license_data = json_decode( wp_remote_retrieve_body( $response ) );
|
186 |
+
|
187 |
+
// $license_data->license will be either "deactivated" or "failed"
|
188 |
+
if( $license_data->license == 'deactivated' ) {
|
189 |
+
delete_option( $this->license_option_key . '_status' );
|
190 |
+
}
|
191 |
+
|
192 |
+
}
|
193 |
+
}
|
194 |
+
|
195 |
+
}
|
classes/styles-child.php
ADDED
@@ -0,0 +1,98 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
/**
|
4 |
+
* Detect and initialize plugins meant to extend Styles in common ways
|
5 |
+
* For example, add customize.json for a theme
|
6 |
+
*/
|
7 |
+
class Styles_Child {
|
8 |
+
|
9 |
+
/**
|
10 |
+
* Styles_Plugin
|
11 |
+
*/
|
12 |
+
var $plugin;
|
13 |
+
|
14 |
+
/**
|
15 |
+
* Array of plugin objects
|
16 |
+
* @var array
|
17 |
+
*/
|
18 |
+
var $plugins = array();
|
19 |
+
|
20 |
+
public function __construct( $plugin ) {
|
21 |
+
$this->plugin = $plugin;
|
22 |
+
|
23 |
+
add_action( 'plugins_loaded', array( $this, 'plugins_loaded'), 20 );
|
24 |
+
add_filter( 'extra_plugin_headers', array( $this, 'extra_plugin_headers') );
|
25 |
+
add_action( 'update_option_active_plugins', array( $this, 'update_option_active_plugins' ) );
|
26 |
+
|
27 |
+
if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
|
28 |
+
$this->update_option_active_plugins();
|
29 |
+
}
|
30 |
+
}
|
31 |
+
|
32 |
+
/**
|
33 |
+
* Additional headers
|
34 |
+
*
|
35 |
+
* @return array plugin header search terms
|
36 |
+
*/
|
37 |
+
public function extra_plugin_headers() {
|
38 |
+
return array( 'styles class', 'styles item', 'styles updates' );
|
39 |
+
}
|
40 |
+
|
41 |
+
/**
|
42 |
+
* Build $this->plugins, a list of Styles child plugins based on plugin headers
|
43 |
+
*
|
44 |
+
* @return void
|
45 |
+
*/
|
46 |
+
public function plugins_loaded( $plugins ) {
|
47 |
+
if ( !function_exists( 'is_plugin_active') ) {
|
48 |
+
include_once ABSPATH . 'wp-admin/includes/plugin.php';
|
49 |
+
}
|
50 |
+
|
51 |
+
foreach ( $this->get_plugins_meta() as $meta ) {
|
52 |
+
|
53 |
+
$class = $meta['styles class'];
|
54 |
+
|
55 |
+
if ( class_exists( $class ) && is_plugin_active( $meta['slug'] ) ) {
|
56 |
+
// For example,
|
57 |
+
// new Styles_Child_Theme( $meta )
|
58 |
+
$this->plugins[] = new $class( $meta );
|
59 |
+
}
|
60 |
+
}
|
61 |
+
}
|
62 |
+
|
63 |
+
public function get_plugins_meta() {
|
64 |
+
$child_plugins_meta = get_site_transient( 'styles_child_plugins' );
|
65 |
+
|
66 |
+
if ( false !== $child_plugins_meta ) {
|
67 |
+
return $child_plugins_meta;
|
68 |
+
}
|
69 |
+
|
70 |
+
if ( !function_exists( 'get_plugins') ) {
|
71 |
+
require_once ABSPATH . '/wp-admin/includes/plugin.php';
|
72 |
+
}
|
73 |
+
|
74 |
+
$child_plugins_meta = array();
|
75 |
+
|
76 |
+
foreach ( get_plugins() as $slug => $meta ) {
|
77 |
+
// Only include Styles child plugins with styles_class set in header
|
78 |
+
if ( empty( $meta['styles class'] ) ) { continue; }
|
79 |
+
|
80 |
+
$meta['slug'] = $slug;
|
81 |
+
|
82 |
+
$child_plugins_meta[] = $meta;
|
83 |
+
}
|
84 |
+
|
85 |
+
// Refresh plugin list and metadata every 6 hours (or on activate/deactivate)
|
86 |
+
set_site_transient( 'styles_child_plugins', $child_plugins_meta, 60*60*6 );
|
87 |
+
|
88 |
+
return $child_plugins_meta;
|
89 |
+
}
|
90 |
+
|
91 |
+
/**
|
92 |
+
* Clear child plugins transient cache any time plugins are activated or deactivated.
|
93 |
+
*/
|
94 |
+
public function update_option_active_plugins() {
|
95 |
+
delete_site_transient( 'styles_child_plugins' );
|
96 |
+
}
|
97 |
+
|
98 |
+
}
|
classes/styles-control-background-color.php
ADDED
@@ -0,0 +1,66 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class Styles_Control_Background_Color extends Styles_Control {
|
4 |
+
var $suffix = 'background color';
|
5 |
+
var $template = '$selector { background-color: $value; }';
|
6 |
+
|
7 |
+
public function __construct( $group, $element ) {
|
8 |
+
parent::__construct( $group, $element );
|
9 |
+
}
|
10 |
+
|
11 |
+
/**
|
12 |
+
* Register item with $wp_customize
|
13 |
+
*/
|
14 |
+
public function add_item() {
|
15 |
+
global $wp_customize;
|
16 |
+
|
17 |
+
$args = array(
|
18 |
+
'default' => $this->default,
|
19 |
+
'type' => 'option',
|
20 |
+
'capability' => 'edit_theme_options',
|
21 |
+
'transport' => $this->get_transport(),
|
22 |
+
);
|
23 |
+
|
24 |
+
$wp_customize->add_setting( $this->setting, $args );
|
25 |
+
|
26 |
+
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, Styles_Helpers::get_control_id( $this->id ), array(
|
27 |
+
'label' => __( $this->label, 'styles' ),
|
28 |
+
'section' => $this->group,
|
29 |
+
'settings' => $this->setting,
|
30 |
+
'priority' => $this->priority . $this->group_priority,
|
31 |
+
) ) );
|
32 |
+
|
33 |
+
}
|
34 |
+
|
35 |
+
/**
|
36 |
+
* Return CSS based on setting value
|
37 |
+
*/
|
38 |
+
public function get_css(){
|
39 |
+
$value = $this->get_element_setting_value();
|
40 |
+
|
41 |
+
$css = '';
|
42 |
+
if ( $value ) {
|
43 |
+
$args = array(
|
44 |
+
'template' => $this->template,
|
45 |
+
'value' => $value,
|
46 |
+
);
|
47 |
+
$css = $this->apply_template( $args );
|
48 |
+
}
|
49 |
+
|
50 |
+
// Filter effects final CSS output, but not postMessage updates
|
51 |
+
return apply_filters( 'styles_css_background_color', $css );
|
52 |
+
}
|
53 |
+
|
54 |
+
public function post_message( $js ) {
|
55 |
+
$selector = str_replace( "'", "\'", $this->selector );
|
56 |
+
|
57 |
+
$js .= str_replace(
|
58 |
+
array( '@setting@', '@selector@' ),
|
59 |
+
array( $this->setting, $selector ),
|
60 |
+
file_get_contents( STYLES_DIR . '/js/post-message-part-background-color.js' )
|
61 |
+
);
|
62 |
+
|
63 |
+
return $js . PHP_EOL;
|
64 |
+
}
|
65 |
+
|
66 |
+
}
|
classes/styles-control-border-bottom-color.php
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
if ( !class_exists( 'Styles_Control_Border_Color' ) ) {
|
3 |
+
require_once dirname( __FILE__ ) . '/styles-control-border-color.php';
|
4 |
+
}
|
5 |
+
|
6 |
+
class Styles_Control_Border_Bottom_Color extends Styles_Control_Border_Color {
|
7 |
+
var $property = 'border-bottom-color';
|
8 |
+
var $suffix = 'bottom border color';
|
9 |
+
|
10 |
+
public function __construct( $group, $element ) {
|
11 |
+
parent::__construct( $group, $element );
|
12 |
+
}
|
13 |
+
}
|
classes/styles-control-border-color.php
ADDED
@@ -0,0 +1,29 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
if ( !class_exists( 'Styles_Control_Color' ) ) {
|
4 |
+
require_once dirname( __FILE__ ) . '/styles-control-color.php';
|
5 |
+
}
|
6 |
+
|
7 |
+
class Styles_Control_Border_Color extends Styles_Control_Color {
|
8 |
+
var $suffix = 'border color';
|
9 |
+
var $property = 'border-color';
|
10 |
+
var $template = '$selector { $property: $value; }';
|
11 |
+
|
12 |
+
public function __construct( $group, $element ) {
|
13 |
+
parent::__construct( $group, $element );
|
14 |
+
|
15 |
+
// Replace $property in $template for child classes
|
16 |
+
$this->template = str_replace( '$property', $this->property, $this->template );
|
17 |
+
}
|
18 |
+
|
19 |
+
public function post_message( $js ) {
|
20 |
+
$js .= str_replace(
|
21 |
+
array( '@setting@', '@selector@', '@property@' ),
|
22 |
+
array( $this->setting, $this->jquery_selector(), $this->property ),
|
23 |
+
file_get_contents( STYLES_DIR . '/js/post-message-part-border-color.js' )
|
24 |
+
);
|
25 |
+
|
26 |
+
return $js . PHP_EOL;
|
27 |
+
}
|
28 |
+
|
29 |
+
}
|
classes/styles-control-border-left-color.php
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
if ( !class_exists( 'Styles_Control_Border_Color' ) ) {
|
3 |
+
require_once dirname( __FILE__ ) . '/styles-control-border-color.php';
|
4 |
+
}
|
5 |
+
|
6 |
+
class Styles_Control_Border_Left_Color extends Styles_Control_Border_Color {
|
7 |
+
var $property = 'border-left-color';
|
8 |
+
var $suffix = 'left border color';
|
9 |
+
|
10 |
+
public function __construct( $group, $element ) {
|
11 |
+
parent::__construct( $group, $element );
|
12 |
+
}
|
13 |
+
}
|
classes/styles-control-border-right-color.php
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
if ( !class_exists( 'Styles_Control_Border_Color' ) ) {
|
3 |
+
require_once dirname( __FILE__ ) . '/styles-control-border-color.php';
|
4 |
+
}
|
5 |
+
|
6 |
+
class Styles_Control_Border_Right_Color extends Styles_Control_Border_Color {
|
7 |
+
var $property = 'border-right-color';
|
8 |
+
var $suffix = 'right border color';
|
9 |
+
|
10 |
+
public function __construct( $group, $element ) {
|
11 |
+
parent::__construct( $group, $element );
|
12 |
+
}
|
13 |
+
}
|
classes/styles-control-border-top-color.php
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
if ( !class_exists( 'Styles_Control_Border_Color' ) ) {
|
3 |
+
require_once dirname( __FILE__ ) . '/styles-control-border-color.php';
|
4 |
+
}
|
5 |
+
|
6 |
+
class Styles_Control_Border_Top_Color extends Styles_Control_Border_Color {
|
7 |
+
var $property = 'border-top-color';
|
8 |
+
var $suffix = 'top border color';
|
9 |
+
|
10 |
+
public function __construct( $group, $element ) {
|
11 |
+
parent::__construct( $group, $element );
|
12 |
+
}
|
13 |
+
}
|
classes/styles-control-color.php
ADDED
@@ -0,0 +1,64 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class Styles_Control_Color extends Styles_Control {
|
4 |
+
var $suffix = 'color';
|
5 |
+
var $template = '$selector { color: $value; }';
|
6 |
+
|
7 |
+
public function __construct( $group, $element ) {
|
8 |
+
parent::__construct( $group, $element );
|
9 |
+
}
|
10 |
+
|
11 |
+
/**
|
12 |
+
* Register item with $wp_customize
|
13 |
+
*/
|
14 |
+
public function add_item() {
|
15 |
+
global $wp_customize;
|
16 |
+
|
17 |
+
$args = array(
|
18 |
+
'default' => $this->default,
|
19 |
+
'type' => 'option',
|
20 |
+
'capability' => 'edit_theme_options',
|
21 |
+
'transport' => $this->get_transport(),
|
22 |
+
);
|
23 |
+
|
24 |
+
$wp_customize->add_setting( $this->setting, $args );
|
25 |
+
|
26 |
+
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, Styles_Helpers::get_control_id( $this->id ), array(
|
27 |
+
'label' => __( $this->label, 'styles' ),
|
28 |
+
'section' => $this->group,
|
29 |
+
'settings' => $this->setting,
|
30 |
+
'priority' => $this->priority . $this->group_priority,
|
31 |
+
) ) );
|
32 |
+
}
|
33 |
+
|
34 |
+
/**
|
35 |
+
* Return CSS based on setting value
|
36 |
+
*/
|
37 |
+
public function get_css(){
|
38 |
+
$selector = $this->selector;
|
39 |
+
$value = $this->get_element_setting_value();
|
40 |
+
|
41 |
+
$css = '';
|
42 |
+
if ( $value ) {
|
43 |
+
$args = array(
|
44 |
+
'template' => $this->template,
|
45 |
+
'value' => $value,
|
46 |
+
);
|
47 |
+
$css = $this->apply_template( $args );
|
48 |
+
}
|
49 |
+
|
50 |
+
// Filter effects final CSS output, but not postMessage updates
|
51 |
+
return apply_filters( 'styles_css_color', $css );
|
52 |
+
}
|
53 |
+
|
54 |
+
public function post_message( $js ) {
|
55 |
+
$js .= str_replace(
|
56 |
+
array( '@setting@', '@selector@' ),
|
57 |
+
array( $this->setting, $this->jquery_selector() ),
|
58 |
+
file_get_contents( STYLES_DIR . '/js/post-message-part-color.js' )
|
59 |
+
);
|
60 |
+
|
61 |
+
return $js . PHP_EOL;
|
62 |
+
}
|
63 |
+
|
64 |
+
}
|
classes/styles-control-text.php
ADDED
@@ -0,0 +1,201 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class Styles_Control_Text extends Styles_Control {
|
4 |
+
var $suffix = 'text';
|
5 |
+
|
6 |
+
// CSS Templates
|
7 |
+
var $template = '$selector { $value }';
|
8 |
+
var $template_font_size = 'font-size: $valuepx;';
|
9 |
+
var $template_font_family = 'font-family: $value;';
|
10 |
+
|
11 |
+
static $families = array( 'Arial' => 'Arial, Helvetica, sans-serif', 'Bookman' => 'Bookman, Palatino, Georgia, serif', 'Century Gothic' => '"Century Gothic", Helvetica, Arial, sans-serif', 'Comic Sans MS' => '"Comic Sans MS", Arial, sans-serif', 'Courier' => 'Courier, monospace', 'Garamond' => 'Garamond, Palatino, Georgia, serif', 'Georgia' => 'Georgia, Times, serif', 'Helvetica' => 'Helvetica, Arial, sans-serif', 'Lucida Grande' => '"Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif', 'Palatino' => 'Palatino, Georgia, serif', 'Tahoma' => 'Tahoma, Verdana, Helvetica, sans-serif', 'Times' => 'Times, Georgia, serif', 'Trebuchet MS' => '"Trebuchet MS", Tahoma, Helvetica, sans-serif', 'Verdana' => 'Verdana, Tahoma, sans-serif', );
|
12 |
+
static $google_families = array( 'Abel' => 'Abel', 'Aclonica' => 'Aclonica', 'Actor' => 'Actor', 'Allan' => 'Allan:bold', 'Allerta' => 'Allerta', 'Allerta Stencil' => 'Allerta+Stencil', 'Amaranth' => 'Amaranth:700,400,italic700,italic400', 'Andika' => 'Andika', 'Angkor' => 'Angkor', 'Annie Use Your Telescope' => 'Annie+Use+Your+Telescope', 'Anonymous Pro' => 'Anonymous+Pro:bold,italicbold,normal,italic', 'Anton' => 'Anton', 'Architects Daughter' => 'Architects+Daughter', 'Arimo' => 'Arimo:italicbold,bold,normal,italic', 'Artifika' => 'Artifika', 'Arvo' => 'Arvo:italic,bold,italicbold,normal', 'Asset' => 'Asset', 'Astloch' => 'Astloch:normal,bold', 'Aubrey' => 'Aubrey', 'Bangers' => 'Bangers', 'Battambang' => 'Battambang:bold,normal', 'Bayon' => 'Bayon', 'Bentham' => 'Bentham', 'Bevan' => 'Bevan', 'Bigshot One' => 'Bigshot+One', 'Black Ops One' => 'Black+Ops+One', 'Bokor' => 'Bokor', 'Bowlby One' => 'Bowlby+One', 'Bowlby One SC' => 'Bowlby+One+SC', 'Brawler' => 'Brawler', 'Buda' => 'Buda:300', 'Cabin' => 'Cabin:italic600,500,italicbold,italic500,italic400,400,600,bold', 'Cabin Sketch' => 'Cabin+Sketch:bold', 'Calligraffitti' => 'Calligraffitti', 'Candal' => 'Candal', 'Cantarell' => 'Cantarell:italic,bold,italicbold,normal', 'Cardo' => 'Cardo', 'Carme' => 'Carme', 'Carter One' => 'Carter+One', 'Caudex' => 'Caudex:italic,italic700,400,700', 'Cedarville Cursive' => 'Cedarville+Cursive', 'Chenla' => 'Chenla', 'Cherry Cream Soda' => 'Cherry+Cream+Soda', 'Chewy' => 'Chewy', 'Coda' => 'Coda:800', 'Coda Caption' => 'Coda+Caption:800', 'Coming Soon' => 'Coming+Soon', 'Content' => 'Content:bold,normal', 'Copse' => 'Copse', 'Corben' => 'Corben:700', 'Comfortaa' => 'Comfortaa', 'Cousine' => 'Cousine:italic,normal,italicbold,bold', 'Covered By Your Grace' => 'Covered+By+Your+Grace', 'Crafty Girls' => 'Crafty+Girls', 'Crimson Text' => 'Crimson+Text:700,italic400,400,italic600,italic700,600', 'Crushed' => 'Crushed', 'Cuprum' => 'Cuprum', 'Damion' => 'Damion', 'Dancing Script' => 'Dancing+Script:bold,normal', 'Dangrek' => 'Dangrek', 'Dawning of a New Day' => 'Dawning+of+a+New+Day', 'Delius' => 'Delius:400', 'Delius Swash Caps' => 'Delius+Swash+Caps:400', 'Delius Unicase' => 'Delius+Unicase:400', 'Didact Gothic' => 'Didact+Gothic', 'Droid Arabic Kufi' => 'Droid+Arabic+Kufi:bold,normal', 'Droid Arabic Naskh' => 'Droid+Arabic+Naskh:normal,bold', 'Droid Sans' => 'Droid+Sans:bold,normal', 'Droid Sans Mono' => 'Droid+Sans+Mono', 'Droid Sans Thai' => 'Droid+Sans+Thai:bold,normal', 'Droid Serif' => 'Droid+Serif:bold,normal,italicbold,italic', 'Droid Serif Thai' => 'Droid+Serif+Thai:bold,normal', 'EB Garamond' => 'EB+Garamond', 'Expletus Sans' => 'Expletus+Sans:500,italic600,600,italic400,italic700,700,400,italic500', 'Federo' => 'Federo', 'Fontdiner Swanky' => 'Fontdiner+Swanky', 'Forum' => 'Forum', 'Francois One' => 'Francois+One', 'Freehand' => 'Freehand', 'GFS Didot' => 'GFS+Didot', 'GFS Neohellenic' => 'GFS+Neohellenic:italic,italicbold,normal,bold', 'Gentium Basic' => 'Gentium+Basic:italicbold,bold,normal,italic', 'Geo' => 'Geo:normal,oblique', 'Geostar' => 'Geostar', 'Geostar Fill' => 'Geostar+Fill', 'Give You Glory' => 'Give+You+Glory', 'Gloria Hallelujah' => 'Gloria+Hallelujah', 'Goblin One' => 'Goblin+One', 'Goudy Bookletter 1911' => 'Goudy+Bookletter+1911', 'Gravitas One' => 'Gravitas+One', 'Gruppo' => 'Gruppo', 'Hammersmith One' => 'Hammersmith+One', 'Hanuman' => 'Hanuman:normal,bold', 'Holtwood One SC' => 'Holtwood+One+SC', 'Homemade Apple' => 'Homemade+Apple', 'IM Fell DW Pica' => 'IM+Fell+DW+Pica:italic,normal', 'IM Fell DW Pica SC' => 'IM+Fell+DW+Pica+SC', 'IM Fell Double Pica' => 'IM+Fell+Double+Pica:normal,italic', 'IM Fell Double Pica SC' => 'IM+Fell+Double+Pica+SC', 'IM Fell English' => 'IM+Fell+English:italic,normal', 'IM Fell English SC' => 'IM+Fell+English+SC', 'IM Fell French Canon' => 'IM+Fell+French+Canon:italic,normal', 'IM Fell French Canon SC' => 'IM+Fell+French+Canon+SC', 'IM Fell Great Primer' => 'IM+Fell+Great+Primer:italic,normal', 'IM Fell Great Primer SC' => 'IM+Fell+Great+Primer+SC', 'Inconsolata' => 'Inconsolata', 'Indie Flower' => 'Indie+Flower', 'Irish Grover' => 'Irish+Grover', 'Irish Growler' => 'Irish+Growler', 'Istok Web' => 'Istok+Web:italic700,400,700,italic400', 'Josefin Sans' => 'Josefin+Sans:italic600,italic100,600,italic400,700,italic700,100,italic300,400,300', 'Josefin Sans Std Light' => 'Josefin+Sans+Std+Light', 'Josefin Slab' => 'Josefin+Slab:100,italic600,700,italic400,600,italic100,italic300,300,400,italic700', 'Judson' => 'Judson:700,italic400,400', 'Jura' => 'Jura:400,500,600,300', 'Just Another Hand' => 'Just+Another+Hand', 'Just Me Again Down Here' => 'Just+Me+Again+Down+Here', 'Kameron' => 'Kameron:400,700', 'Kelly Slab' => 'Kelly+Slab', 'Kenia' => 'Kenia', 'Khmer' => 'Khmer', 'Koulen' => 'Koulen', 'Kranky' => 'Kranky', 'Kreon' => 'Kreon:700,400,300', 'Kristi' => 'Kristi', 'La Belle Aurore' => 'La+Belle+Aurore', 'Lato' => 'Lato:italic300,300,900,700,italic100,100,italic700,400,italic900,italic400', 'League Script' => 'League+Script:400', 'Leckerli One' => 'Leckerli+One', 'Lekton' => 'Lekton:italic,400,700', 'Limelight' => 'Limelight', 'Lobster' => 'Lobster', 'Lobster Two' => 'Lobster+Two:italic400,700,400,italic700', 'Lora' => 'Lora:italic,normal,bold,italicbold', 'Love Ya Like A Sister' => 'Love+Ya+Like+A+Sister', 'Loved by the King' => 'Loved+by+the+King', 'Luckiest Guy' => 'Luckiest+Guy', 'Maiden Orange' => 'Maiden+Orange', 'Mako' => 'Mako', 'Marvel' => 'Marvel:400,700,italic700,italic400', 'Maven Pro' => 'Maven+Pro:700,900,500,400', 'Meddon' => 'Meddon', 'MedievalSharp' => 'MedievalSharp', 'Megrim' => 'Megrim', 'Merriweather' => 'Merriweather:700,900,400,300', 'Metal' => 'Metal', 'Metrophobic' => 'Metrophobic', 'Miama' => 'Miama', 'Michroma' => 'Michroma', 'Miltonian' => 'Miltonian', 'Miltonian Tattoo' => 'Miltonian+Tattoo', 'Modern Antiqua' => 'Modern+Antiqua', 'Molengo' => 'Molengo', 'Monofett' => 'Monofett', 'Moul' => 'Moul', 'Moulpali' => 'Moulpali', 'Mountains of Christmas' => 'Mountains+of+Christmas', 'Muli' => 'Muli:italic400,400,italic300,300', 'Nanum Brush Script' => 'Nanum+Brush+Script', 'Nanum Gothic' => 'Nanum+Gothic:800,700,normal', 'Nanum Gothic Coding' => 'Nanum+Gothic+Coding:normal,700', 'Nanum Myeongjo' => 'Nanum+Myeongjo:700,normal,800', 'Nanum Pen Script' => 'Nanum+Pen+Script', 'Neucha' => 'Neucha', 'Neuton' => 'Neuton:italic,normal', 'Neuton Cursive' => 'Neuton+Cursive', 'News Cycle' => 'News+Cycle', 'Nixie One' => 'Nixie+One', 'Nobile' => 'Nobile:700,italic500,400,italic700,500,italic400', 'Nothing You Could Do' => 'Nothing+You+Could+Do', 'Nova Cut' => 'Nova+Cut', 'Nova Flat' => 'Nova+Flat', 'Nova Mono' => 'Nova+Mono', 'Nova Oval' => 'Nova+Oval', 'Nova Round' => 'Nova+Round', 'Nova Script' => 'Nova+Script', 'Nova Slim' => 'Nova+Slim', 'Nova Square' => 'Nova+Square', 'Nunito' => 'Nunito:700,300,400', 'OFL Sorts Mill Goudy TT' => 'OFL+Sorts+Mill+Goudy+TT:italic,normal', 'OFL Sorts Mill Goudy TT' => 'OFL+Sorts+Mill+Goudy+TT:italic,normal', 'Odor Mean Chey' => 'Odor+Mean+Chey', 'Old Standard TT' => 'Old+Standard+TT:italic,bold,normal', 'Open Sans' => 'Open+Sans:italic300,italic800,600,300,italic400,italic600,italic700,700,800,400', 'Open Sans Condensed' => 'Open+Sans+Condensed:italic300,300', 'Orbitron' => 'Orbitron:500,900,400,700', 'Oswald' => 'Oswald', 'Over the Rainbow' => 'Over+the+Rainbow', 'Ovo' => 'Ovo', 'PT Sans' => 'PT+Sans:italic,bold,normal,italicbold', 'PT Sans Caption' => 'PT+Sans+Caption:normal,bold', 'PT Sans Narrow' => 'PT+Sans+Narrow:normal,bold', 'PT Serif' => 'PT+Serif:italic,normal,bold,italicbold', 'PT Serif Caption' => 'PT+Serif+Caption:normal,italic', 'Pacifico' => 'Pacifico', 'Patrick Hand' => 'Patrick+Hand', 'Paytone One' => 'Paytone+One', 'Pecita' => 'Pecita', 'Permanent Marker' => 'Permanent+Marker', 'Philosopher' => 'Philosopher:bold,normal,italic,italicbold', 'Play' => 'Play:bold,normal', 'Playfair Display' => 'Playfair+Display', 'Podkova' => 'Podkova', 'Pompiere' => 'Pompiere', 'Preahvihear' => 'Preahvihear', 'Puritan' => 'Puritan:bold,italic,italicbold,normal', 'Quattrocento' => 'Quattrocento', 'Quattrocento Sans' => 'Quattrocento+Sans', 'Radley' => 'Radley', 'Raleway' => 'Raleway:100', 'Rationale' => 'Rationale', 'Redressed' => 'Redressed', 'Reenie Beanie' => 'Reenie+Beanie', 'Rochester' => 'Rochester', 'Rock Salt' => 'Rock+Salt', 'Rokkitt' => 'Rokkitt:700,400', 'Rosario' => 'Rosario', 'Ruslan Display' => 'Ruslan+Display', 'Schoolbell' => 'Schoolbell', 'Shadows Into Light' => 'Shadows+Into+Light', 'Shanti' => 'Shanti', 'Siamreap' => 'Siamreap', 'Siemreap' => 'Siemreap', 'Sigmar One' => 'Sigmar+One', 'Six Caps' => 'Six+Caps', 'Slackey' => 'Slackey', 'Smokum' => 'Smokum', 'Smythe' => 'Smythe', 'Sniglet' => 'Sniglet:800', 'Snippet' => 'Snippet', 'Special Elite' => 'Special+Elite', 'Stardos Stencil' => 'Stardos+Stencil:normal,bold', 'Sue Ellen Francisco' => 'Sue+Ellen+Francisco', 'Sunshiney' => 'Sunshiney', 'Suwannaphum' => 'Suwannaphum', 'Swanky and Moo Moo' => 'Swanky+and+Moo+Moo', 'Syncopate' => 'Syncopate:normal,bold', 'Tangerine' => 'Tangerine:normal,bold', 'Taprom' => 'Taprom', 'Tenor Sans' => 'Tenor+Sans', 'Terminal Dosis Light' => 'Terminal+Dosis+Light', 'Thabit' => 'Thabit:italic,italicbold,normal,bold', 'The Girl Next Door' => 'The+Girl+Next+Door', 'Tienne' => 'Tienne:400,900,700', 'Tinos' => 'Tinos:italicbold,normal,italic,bold', 'Tulpen One' => 'Tulpen+One', 'Ubuntu' => 'Ubuntu:bold,300,normal,italicbold,italic,italic500,500,italic300', 'Ultra' => 'Ultra', 'UnifrakturCook' => 'UnifrakturCook:bold', 'UnifrakturMaguntia' => 'UnifrakturMaguntia', 'Unkempt' => 'Unkempt', 'Unna' => 'Unna', 'VT323' => 'VT323', 'Varela' => 'Varela', 'Varela Round' => 'Varela+Round', 'Vibur' => 'Vibur', 'Vollkorn' => 'Vollkorn:bold,italic,italicbold,normal', 'Waiting for the Sunrise' => 'Waiting+for+the+Sunrise', 'Wallpoet' => 'Wallpoet', 'Walter Turncoat' => 'Walter+Turncoat', 'Wire One' => 'Wire+One', 'Yanone Kaffeesatz' => 'Yanone+Kaffeesatz:700,200,400,300', 'Yellowtail' => 'Yellowtail', 'Yeseva One' => 'Yeseva+One', 'Zeyada' => 'Zeyada', /*'jsMath cmbx10' => 'jsMath+cmbx10', 'jsMath cmex10' => 'jsMath+cmex10', 'jsMath cmmi10' => 'jsMath+cmmi10', 'jsMath cmr10' => 'jsMath+cmr10', 'jsMath cmsy10' => 'jsMath+cmsy10', 'jsMath cmti10' => 'jsMath+cmti10',*/ );
|
13 |
+
|
14 |
+
public function __construct( $group, $element ) {
|
15 |
+
parent::__construct( $group, $element );
|
16 |
+
|
17 |
+
if ( !empty( $element['template_font_size'] ) ) {
|
18 |
+
$this->template_font_size = $element['template_font_size'];
|
19 |
+
}
|
20 |
+
|
21 |
+
if ( !empty( $element['template_font_family'] ) ) {
|
22 |
+
$this->template_font_family = $element['template_font_family'];
|
23 |
+
}
|
24 |
+
|
25 |
+
}
|
26 |
+
|
27 |
+
/**
|
28 |
+
* Register item with $wp_customize
|
29 |
+
*/
|
30 |
+
public function add_item() {
|
31 |
+
global $wp_customize;
|
32 |
+
|
33 |
+
$args_size = array(
|
34 |
+
'default' => $this->default,
|
35 |
+
'type' => 'option',
|
36 |
+
'capability' => 'edit_theme_options',
|
37 |
+
'transport' => $this->get_transport(),
|
38 |
+
);
|
39 |
+
|
40 |
+
$args_family = array(
|
41 |
+
'default' => $this->default,
|
42 |
+
'type' => 'option',
|
43 |
+
'capability' => 'edit_theme_options',
|
44 |
+
);
|
45 |
+
|
46 |
+
$wp_customize->add_setting( $this->setting.'[font_size]', $args_size );
|
47 |
+
$wp_customize->add_setting( $this->setting.'[font_family]', $args_family );
|
48 |
+
|
49 |
+
$wp_customize->add_control( new Styles_Customize_Text_Control( $wp_customize, Styles_Helpers::get_control_id( $this->id ), array(
|
50 |
+
'label' => __( $this->label, 'styles' ),
|
51 |
+
'section' => $this->group,
|
52 |
+
'settings' => array(
|
53 |
+
'font_size' => $this->setting.'[font_size]',
|
54 |
+
'font_family' => $this->setting.'[font_family]',
|
55 |
+
),
|
56 |
+
'priority' => $this->priority . $this->group_priority,
|
57 |
+
) ) );
|
58 |
+
}
|
59 |
+
|
60 |
+
/**
|
61 |
+
* Return CSS based on setting value
|
62 |
+
*
|
63 |
+
* @return string
|
64 |
+
*/
|
65 |
+
public function get_css(){
|
66 |
+
$value = $this->get_element_setting_value();
|
67 |
+
|
68 |
+
$css = $this->get_css_font_size( $value );
|
69 |
+
$css .= $this->get_css_font_family( $value );
|
70 |
+
|
71 |
+
if ( !empty( $css ) ) {
|
72 |
+
$args = array(
|
73 |
+
'template' => $this->template,
|
74 |
+
'value' => $css,
|
75 |
+
);
|
76 |
+
$css = $this->apply_template( $args );
|
77 |
+
}
|
78 |
+
|
79 |
+
// Filter effects final CSS output, but not postMessage updates
|
80 |
+
return apply_filters( 'styles_css_text', $css );
|
81 |
+
}
|
82 |
+
|
83 |
+
public function get_css_font_size( $value ) {
|
84 |
+
if ( is_array( $value ) ) { $value = $value['font_size']; }
|
85 |
+
|
86 |
+
$css = '';
|
87 |
+
if ( $value ) {
|
88 |
+
$args = array(
|
89 |
+
'template' => $this->template_font_size,
|
90 |
+
'value' => $value,
|
91 |
+
);
|
92 |
+
$css = $this->apply_template( $args );
|
93 |
+
}
|
94 |
+
|
95 |
+
// Filter effects final CSS output, but not postMessage updates
|
96 |
+
return apply_filters( 'styles_css_font_size', $css );
|
97 |
+
}
|
98 |
+
|
99 |
+
public function get_css_font_family( $value = false ) {
|
100 |
+
if ( !$value ) { return ''; }
|
101 |
+
if ( is_array( $value ) ) { $value = $value['font_family']; }
|
102 |
+
|
103 |
+
if ( array_key_exists( $value, self::$families ) ) {
|
104 |
+
|
105 |
+
// Standard Font families. Convert values to stacks.
|
106 |
+
$value = self::$families[ $value ];
|
107 |
+
|
108 |
+
}else if ( array_key_exists( $value, self::$google_families ) ) {
|
109 |
+
|
110 |
+
// Google Font families
|
111 |
+
global $storm_styles;
|
112 |
+
$src = self::$google_families[ $value ];
|
113 |
+
// Add Google Font @import to beginning of CSS
|
114 |
+
$storm_styles->css->google_fonts[ $value ] = "@import url(//fonts.googleapis.com/css?family=$src);\r";
|
115 |
+
|
116 |
+
}
|
117 |
+
|
118 |
+
$css = '';
|
119 |
+
if ( $value ) {
|
120 |
+
$args = array(
|
121 |
+
'template' => $this->template_font_family,
|
122 |
+
'value' => $value,
|
123 |
+
);
|
124 |
+
$css = $this->apply_template( $args );
|
125 |
+
}
|
126 |
+
|
127 |
+
// Filter effects final CSS output, but not postMessage updates
|
128 |
+
return apply_filters( 'styles_css_font_family', $css );
|
129 |
+
}
|
130 |
+
|
131 |
+
public function post_message( $js ) {
|
132 |
+
$setting_font_size = $this->setting . '[font_size]';
|
133 |
+
$selector = str_replace( "'", "\'", $this->selector );
|
134 |
+
|
135 |
+
$js .= str_replace(
|
136 |
+
array( '@setting_font_size@', '@selector@' ),
|
137 |
+
array( $setting_font_size, $selector ),
|
138 |
+
file_get_contents( STYLES_DIR . '/js/post-message-part-text.js' )
|
139 |
+
);
|
140 |
+
|
141 |
+
return $js . PHP_EOL;
|
142 |
+
}
|
143 |
+
|
144 |
+
}
|
145 |
+
|
146 |
+
if (class_exists('WP_Customize_Control')) :
|
147 |
+
|
148 |
+
class Styles_Customize_Text_Control extends WP_Customize_Control {
|
149 |
+
public $type = 'text_formatting';
|
150 |
+
|
151 |
+
public function render_content() {
|
152 |
+
?>
|
153 |
+
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
|
154 |
+
<?php
|
155 |
+
$this->font_size();
|
156 |
+
$this->font_family();
|
157 |
+
}
|
158 |
+
|
159 |
+
public function font_size() {
|
160 |
+
$saved_value = $this->value( 'font_size' );
|
161 |
+
|
162 |
+
?>
|
163 |
+
<label>
|
164 |
+
<input type="text" placeholder="Size" value="<?php echo esc_attr( $saved_value ); ?>" <?php $this->link( 'font_size' ); ?> class="styles-font-size"/> px
|
165 |
+
</label>
|
166 |
+
<?php
|
167 |
+
}
|
168 |
+
|
169 |
+
public function font_family() {
|
170 |
+
$saved_value = $this->value( 'font_family' );
|
171 |
+
|
172 |
+
foreach ( Styles_Control_Text::$families as $name => $value ) {
|
173 |
+
if ( empty( $value ) ) continue;
|
174 |
+
$fonts[esc_attr( $name )] = $name;
|
175 |
+
}
|
176 |
+
|
177 |
+
foreach ( Styles_Control_Text::$google_families as $name => $value ) {
|
178 |
+
if ( empty( $value ) ) continue;
|
179 |
+
$fonts[esc_attr( $name )] = $name;
|
180 |
+
}
|
181 |
+
|
182 |
+
?>
|
183 |
+
|
184 |
+
<label>
|
185 |
+
<select <?php $this->link( 'font_family' ); ?> class="styles-font-family" data-selected="<?php echo $saved_value ?>">
|
186 |
+
<option class="label first" value="">Select Font</option>
|
187 |
+
|
188 |
+
<option class="label" value="">Standard Fonts</option>
|
189 |
+
<?php foreach ( Styles_Control_Text::$families as $name => $value ) : if ( empty( $value ) ) continue; ?>
|
190 |
+
<option value='<?php esc_attr_e( $name ) ?>' <?php selected( $name, $saved_value ) ?> ><?php echo $name ?></option>
|
191 |
+
<?php endforeach; ?>
|
192 |
+
|
193 |
+
<option class="label" value="">Google Fonts</option>
|
194 |
+
<?php // Google fonts populated by styles-customize.js to save bandwidth ?>
|
195 |
+
</select>
|
196 |
+
</label>
|
197 |
+
<?php
|
198 |
+
}
|
199 |
+
}
|
200 |
+
|
201 |
+
endif;
|
classes/styles-control.php
ADDED
@@ -0,0 +1,170 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
abstract class Styles_Control {
|
4 |
+
|
5 |
+
var $group_priority = 1;
|
6 |
+
|
7 |
+
/**
|
8 |
+
* Default setting value
|
9 |
+
*/
|
10 |
+
var $default = '';
|
11 |
+
|
12 |
+
// From $element
|
13 |
+
var $selector;
|
14 |
+
var $type;
|
15 |
+
var $label;
|
16 |
+
var $priority;
|
17 |
+
var $id;
|
18 |
+
var $setting;
|
19 |
+
|
20 |
+
/**
|
21 |
+
* Template CSS for $selector and $value to be filled into
|
22 |
+
*
|
23 |
+
* @var string
|
24 |
+
**/
|
25 |
+
public $template;
|
26 |
+
|
27 |
+
public function __construct( $group, $element ) {
|
28 |
+
$this->group = $group;
|
29 |
+
$this->element = $element;
|
30 |
+
|
31 |
+
if ( !empty( $element['template'] ) ) {
|
32 |
+
$this->template = $element['template'];
|
33 |
+
}
|
34 |
+
|
35 |
+
if ( empty( $this->label) ) {
|
36 |
+
$this->label = $this->selector;
|
37 |
+
}
|
38 |
+
|
39 |
+
$this->selector = $element['selector'];
|
40 |
+
$this->type = $element['type'];
|
41 |
+
$this->label = @ $element['label'];
|
42 |
+
$this->priority = @ $element['priority'];
|
43 |
+
|
44 |
+
$this->append_suffix_to_label();
|
45 |
+
|
46 |
+
$this->id = $this->get_element_id(); // must call append_suffix_to_label first
|
47 |
+
$this->setting = $this->get_setting_id(); // must call append_suffix_to_label first
|
48 |
+
|
49 |
+
if ( empty( $this->selector ) ) { return false; }
|
50 |
+
|
51 |
+
// postMessage javascript callback
|
52 |
+
if ( 'postMessage' == $this->get_transport() ) {
|
53 |
+
add_filter( 'styles_customize_preview', array( $this, 'post_message' ) );
|
54 |
+
}
|
55 |
+
|
56 |
+
}
|
57 |
+
|
58 |
+
/**
|
59 |
+
* Register control and setting with $wp_customize
|
60 |
+
* @return null
|
61 |
+
*/
|
62 |
+
abstract public function add_item();
|
63 |
+
|
64 |
+
public function append_suffix_to_label() {
|
65 |
+
if ( !empty( $this->element['suffix'] ) ) {
|
66 |
+
|
67 |
+
// A custom suffix has been set in the JSON
|
68 |
+
$this->suffix = $element['suffix'];
|
69 |
+
|
70 |
+
}else if ( !empty( $this->suffix ) ){
|
71 |
+
|
72 |
+
// No custom suffix set
|
73 |
+
|
74 |
+
// Add indications for pseudo-selectors
|
75 |
+
if ( false !== strpos( $this->selector, ':hover' ) ) {
|
76 |
+
|
77 |
+
// Prepend "hover" if in selector
|
78 |
+
$this->suffix = 'hover ' . $this->suffix;
|
79 |
+
|
80 |
+
}else if ( false !== strpos( $this->selector, ':focus' ) ) {
|
81 |
+
|
82 |
+
// Prepend "focus" if in selector
|
83 |
+
$this->suffix = 'focused ' . $this->suffix;
|
84 |
+
|
85 |
+
}
|
86 |
+
|
87 |
+
}
|
88 |
+
|
89 |
+
// We have some suffix; append it to the label
|
90 |
+
if ( !empty( $this->suffix ) ) {
|
91 |
+
$this->label .= '::' . $this->suffix;
|
92 |
+
}
|
93 |
+
|
94 |
+
}
|
95 |
+
|
96 |
+
/**
|
97 |
+
* @param array $element Values related to this control, like CSS selector and control type
|
98 |
+
* @return string Unique, sanatized ID for this element based on label and type
|
99 |
+
*/
|
100 |
+
public function get_element_id() {
|
101 |
+
$key = trim( sanitize_key( $this->label . '_' . $this->type ), '_' );
|
102 |
+
return str_replace( '-', '_', $key );
|
103 |
+
}
|
104 |
+
|
105 |
+
/**
|
106 |
+
* @param string $group Name of Customizer group this element is in
|
107 |
+
* @param string $id unique element ID
|
108 |
+
* @return string $setting_id unique setting ID for use in form input names
|
109 |
+
*/
|
110 |
+
public function get_setting_id() {
|
111 |
+
$group = $this->group;
|
112 |
+
$id = str_replace( '-', '_', trim( $this->id, '_' ) );
|
113 |
+
|
114 |
+
$setting_id = Styles_Helpers::get_option_key() . "[$group][$id]";
|
115 |
+
|
116 |
+
return $setting_id;
|
117 |
+
}
|
118 |
+
|
119 |
+
public function get_element_setting_value() {
|
120 |
+
$settings = get_option( Styles_Helpers::get_option_key() );
|
121 |
+
|
122 |
+
$group_id = Styles_Helpers::get_group_id( $this->group );
|
123 |
+
|
124 |
+
$value = @$settings[ $group_id ][ $this->id ];
|
125 |
+
|
126 |
+
if ( !empty( $value ) ) {
|
127 |
+
return $value;
|
128 |
+
}else {
|
129 |
+
return false;
|
130 |
+
}
|
131 |
+
}
|
132 |
+
|
133 |
+
public function get_transport() {
|
134 |
+
$transport = 'refresh';
|
135 |
+
|
136 |
+
if (
|
137 |
+
method_exists( $this, 'post_message' )
|
138 |
+
&& empty( $this->element['template'] ) // No custom CSS template set
|
139 |
+
&& false == strpos( $this->selector, ':' ) // jQuery doesn't understand pseudo-selectors like :hover and :focus
|
140 |
+
) {
|
141 |
+
// postMessage supported
|
142 |
+
$transport = 'postMessage';
|
143 |
+
}
|
144 |
+
|
145 |
+
return $transport;
|
146 |
+
}
|
147 |
+
|
148 |
+
public function apply_template( $args ) {
|
149 |
+
$template = $args['template'];
|
150 |
+
unset( $args['template'] );
|
151 |
+
|
152 |
+
foreach ( $args as $key => $value ) {
|
153 |
+
$template = str_replace( '$'.$key, $value, $template );
|
154 |
+
}
|
155 |
+
|
156 |
+
$template = str_replace( '$selector', $this->selector, $template );
|
157 |
+
|
158 |
+
return $template;
|
159 |
+
}
|
160 |
+
|
161 |
+
/**
|
162 |
+
* Convert CSS selector into jQuery-compatible selector
|
163 |
+
*/
|
164 |
+
public function jquery_selector() {
|
165 |
+
$selector = str_replace( "'", "\'", $this->selector );
|
166 |
+
|
167 |
+
return $selector;
|
168 |
+
}
|
169 |
+
|
170 |
+
}
|
classes/styles-css.php
ADDED
@@ -0,0 +1,104 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class Styles_CSS {
|
4 |
+
|
5 |
+
/**
|
6 |
+
* @var Styles_Plugin
|
7 |
+
*/
|
8 |
+
var $plugin;
|
9 |
+
|
10 |
+
/**
|
11 |
+
* Class added to body and all selectors
|
12 |
+
*
|
13 |
+
* @var string
|
14 |
+
*/
|
15 |
+
var $body_class = 'styles';
|
16 |
+
|
17 |
+
/**
|
18 |
+
* @import declarations to be added to top of CSS
|
19 |
+
*
|
20 |
+
* @var string
|
21 |
+
*/
|
22 |
+
public $google_fonts = array();
|
23 |
+
|
24 |
+
function __construct( $plugin ) {
|
25 |
+
$this->plugin = $plugin;
|
26 |
+
|
27 |
+
add_filter( 'styles_pre_get_css', array( $this, 'selector_prefix' ) );
|
28 |
+
add_filter( 'body_class', array( $this, 'body_class' ) );
|
29 |
+
}
|
30 |
+
|
31 |
+
public function selector_prefix( $element ) {
|
32 |
+
if ( !empty( $element['selector'] ) ) {
|
33 |
+
$selector_array = explode( ',', $element['selector'] );
|
34 |
+
|
35 |
+
foreach( $selector_array as &$sub_selector ) {
|
36 |
+
|
37 |
+
if ( 'body' == $sub_selector ) {
|
38 |
+
// body selector without class; add it
|
39 |
+
$sub_selector = $sub_selector . '.' . $this->body_class;
|
40 |
+
}else if ( 'body ' == substr( $sub_selector, 0 ) ){
|
41 |
+
// body selector with sub-item without class
|
42 |
+
$sub_selector = str_replace( 'body ', 'body'. $this->body_class . ' ', $sub_selector );
|
43 |
+
}else if ( 'html' == substr( $sub_selector, 0 ) || 'body' == substr( $sub_selector, 0 ) ) {
|
44 |
+
// html or body selector
|
45 |
+
continue;
|
46 |
+
}else {
|
47 |
+
// All others, prepend body class
|
48 |
+
$sub_selector = '.' . $this->body_class . ' ' . $sub_selector;
|
49 |
+
}
|
50 |
+
|
51 |
+
}
|
52 |
+
|
53 |
+
$element['selector'] = implode( ',', $selector_array );
|
54 |
+
}
|
55 |
+
|
56 |
+
return $element;
|
57 |
+
}
|
58 |
+
|
59 |
+
public function body_class( $classes ) {
|
60 |
+
$classes[] = $this->body_class;
|
61 |
+
return $classes;
|
62 |
+
}
|
63 |
+
|
64 |
+
public function output_css() {
|
65 |
+
global $wp_customize;
|
66 |
+
|
67 |
+
$css = false;
|
68 |
+
|
69 |
+
if ( empty( $wp_customize ) ) {
|
70 |
+
$css = get_option( Styles_Helpers::get_option_key( 'css' ) );
|
71 |
+
}
|
72 |
+
|
73 |
+
if ( !empty( $wp_customize ) || empty( $css ) ) {
|
74 |
+
// Refresh
|
75 |
+
|
76 |
+
$css = '';
|
77 |
+
|
78 |
+
$this->plugin->customize_register( $wp_customize );
|
79 |
+
|
80 |
+
foreach ( $this->plugin->customize->get_settings() as $group => $elements ) {
|
81 |
+
foreach ( $elements as $element ) {
|
82 |
+
if ( $class = Styles_Helpers::get_element_class( $element ) ) {
|
83 |
+
|
84 |
+
$element = apply_filters( 'styles_pre_get_css', $element );
|
85 |
+
$control = new $class( $group, $element );
|
86 |
+
|
87 |
+
$css .= $control->get_css();
|
88 |
+
// $css .= call_user_func_array( $class . '::get_css', array( $group, $element ) );
|
89 |
+
|
90 |
+
}
|
91 |
+
}
|
92 |
+
}
|
93 |
+
$css = apply_filters( 'styles_css_output', $css );
|
94 |
+
|
95 |
+
$css = implode( '', $this->google_fonts ) . $css;
|
96 |
+
|
97 |
+
update_option( Styles_Helpers::get_option_key( 'css' ), $css );
|
98 |
+
}
|
99 |
+
|
100 |
+
echo '<style id="storm-styles">' . $css . '</style>';
|
101 |
+
|
102 |
+
}
|
103 |
+
|
104 |
+
}
|
classes/styles-customize.php
ADDED
@@ -0,0 +1,193 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class Styles_Customize {
|
4 |
+
|
5 |
+
/**
|
6 |
+
* @var Styles_Plugin
|
7 |
+
*/
|
8 |
+
var $plugin;
|
9 |
+
|
10 |
+
/**
|
11 |
+
* Customize settings loaded from customize.json in plugin or theme
|
12 |
+
* @var array
|
13 |
+
*/
|
14 |
+
var $settings = array();
|
15 |
+
|
16 |
+
/**
|
17 |
+
* Styles_Control objects that register with wp_customize
|
18 |
+
*
|
19 |
+
* @var array contains Styles_Control objects
|
20 |
+
*/
|
21 |
+
var $controls;
|
22 |
+
|
23 |
+
function __construct( $plugin ) {
|
24 |
+
$this->plugin = &$plugin;
|
25 |
+
|
26 |
+
add_action( 'customize_register', array( $this, 'add_sections' ), 10 );
|
27 |
+
add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_controls_enqueue' ) );
|
28 |
+
add_action( 'customize_preview_init', array( $this, 'customize_preview_init_enqueue' ) );
|
29 |
+
|
30 |
+
// Load settings from various sources with filters
|
31 |
+
add_filter( 'styles_theme_settings', array( $this, 'load_theme_settings_from_plugin' ), 1 );
|
32 |
+
add_filter( 'styles_theme_settings', array( $this, 'load_settings_from_theme' ), 5 );
|
33 |
+
|
34 |
+
// Set storm-styles option to not autoload; does nothing if setting already exists
|
35 |
+
add_option( Styles_Helpers::get_option_key(), '', '', 'no' );
|
36 |
+
|
37 |
+
}
|
38 |
+
|
39 |
+
public function customize_preview_init_enqueue() {
|
40 |
+
// Version set to md5 of settings because JS generated from settings
|
41 |
+
$custom_preview_version = md5( serialize( $this->settings ) );
|
42 |
+
|
43 |
+
$custom_preview_url = add_query_arg( 'styles-action', 'customize-preview-js', site_url() );
|
44 |
+
|
45 |
+
// Account for theme previews
|
46 |
+
$custom_preview_url = add_query_arg( 'theme', Styles_Helpers::get_template(), $custom_preview_url );
|
47 |
+
|
48 |
+
wp_enqueue_script( 'styles-customize-preview', $custom_preview_url, array( 'jquery', 'customize-preview' ), $custom_preview_version, true );
|
49 |
+
}
|
50 |
+
|
51 |
+
public function customize_controls_enqueue() {
|
52 |
+
|
53 |
+
// Stylesheets
|
54 |
+
wp_enqueue_style( 'styles-customize', plugins_url( '/css/styles-customize.css', STYLES_BASENAME ), array(), $this->plugin->version );
|
55 |
+
|
56 |
+
// Javascript
|
57 |
+
wp_enqueue_script( 'styles-customize-controls', plugins_url( '/js/styles-customize-controls.js', STYLES_BASENAME ), array(), $this->plugin->version );
|
58 |
+
|
59 |
+
}
|
60 |
+
|
61 |
+
/**
|
62 |
+
* Output javascript for WP Customizer preview postMessage transport
|
63 |
+
*/
|
64 |
+
public function preview_js() {
|
65 |
+
// This fires on a very early hook (parse_request)
|
66 |
+
// So we neet to init settings
|
67 |
+
foreach ( $this->get_settings() as $group => $elements ) {
|
68 |
+
$group_id = Styles_Helpers::get_group_id( $group );
|
69 |
+
$this->add_items( $group_id, $elements, false );
|
70 |
+
}
|
71 |
+
|
72 |
+
header( 'content-type: text/javascript' ); ?>
|
73 |
+
|
74 |
+
( function( $ ){
|
75 |
+
|
76 |
+
<?php echo apply_filters( 'styles_customize_preview', '' ) ?>
|
77 |
+
|
78 |
+
} )( jQuery );
|
79 |
+
|
80 |
+
<?php
|
81 |
+
|
82 |
+
exit;
|
83 |
+
}
|
84 |
+
|
85 |
+
/**
|
86 |
+
* Register sections with WordPress theme customizer in WordPress 3.4+
|
87 |
+
* e.g., General, Header, Footer, Content, Sidebar
|
88 |
+
*/
|
89 |
+
function add_sections( $wp_customize ) {
|
90 |
+
global $wp_customize;
|
91 |
+
|
92 |
+
$i = 950;
|
93 |
+
foreach ( $this->get_settings() as $group => $elements ) {
|
94 |
+
$i++;
|
95 |
+
|
96 |
+
// Groups
|
97 |
+
$group_id = Styles_Helpers::get_group_id( $group );
|
98 |
+
$wp_customize->add_section( $group_id, array(
|
99 |
+
'title' => __( $group, 'storm' ),
|
100 |
+
'priority' => $i,
|
101 |
+
) );
|
102 |
+
|
103 |
+
$this->add_items( $group_id, $elements );
|
104 |
+
}
|
105 |
+
}
|
106 |
+
|
107 |
+
|
108 |
+
/**
|
109 |
+
* Register individual customize fields in WordPress 3.4+
|
110 |
+
* Settings & Controls are within each class (type calls different classes)
|
111 |
+
*/
|
112 |
+
public function add_items( $group_id, $elements, $add_item = true ) {
|
113 |
+
static $i;
|
114 |
+
foreach ( $elements as $element ) {
|
115 |
+
$i++;
|
116 |
+
$element['priority'] = $i;
|
117 |
+
if ( $class = Styles_Helpers::get_element_class( $element ) ) {
|
118 |
+
|
119 |
+
// PHP <= 5.2 support
|
120 |
+
// Otherwise, would be: $class::add_item( $group_id, $element );
|
121 |
+
$control = new $class( $group_id, $element );
|
122 |
+
|
123 |
+
if ( $add_item ) {
|
124 |
+
$control->add_item();
|
125 |
+
}
|
126 |
+
|
127 |
+
$this->controls[] = $control;
|
128 |
+
}
|
129 |
+
}
|
130 |
+
|
131 |
+
}
|
132 |
+
|
133 |
+
/**
|
134 |
+
* Load settings as JSON either from transient / API or theme file
|
135 |
+
*
|
136 |
+
* @return array
|
137 |
+
*/
|
138 |
+
public function get_settings() {
|
139 |
+
|
140 |
+
// Return cached settings if they've already been processed
|
141 |
+
if ( !empty( $this->settings ) ) {
|
142 |
+
return $this->settings;
|
143 |
+
}
|
144 |
+
|
145 |
+
// Plugin Authors: Filter to override settings sources
|
146 |
+
$this->settings = apply_filters( 'styles_theme_settings', $this->settings );
|
147 |
+
|
148 |
+
return $this->settings;
|
149 |
+
}
|
150 |
+
|
151 |
+
/**
|
152 |
+
* Load settings from path provided by plugin
|
153 |
+
*/
|
154 |
+
public function load_theme_settings_from_plugin( $defaults = array() ) {
|
155 |
+
foreach( $this->plugin->child->plugins as $plugin ) {
|
156 |
+
|
157 |
+
if(
|
158 |
+
is_a( $plugin, 'Styles_Child_Theme')
|
159 |
+
&& method_exists( $plugin, 'get_json_path' )
|
160 |
+
) {
|
161 |
+
|
162 |
+
$json_file = $plugin->get_json_path();
|
163 |
+
$defaults = $this->load_settings_from_json_file( $json_file, $defaults );
|
164 |
+
|
165 |
+
}
|
166 |
+
|
167 |
+
}
|
168 |
+
|
169 |
+
return $defaults;
|
170 |
+
}
|
171 |
+
|
172 |
+
/**
|
173 |
+
* Load settings from theme file formatted as JSON
|
174 |
+
*/
|
175 |
+
public function load_settings_from_theme( $defaults = array() ) {
|
176 |
+
$json_file = get_stylesheet_directory() . '/customize.json';
|
177 |
+
return $this->load_settings_from_json_file( $json_file, $defaults );
|
178 |
+
}
|
179 |
+
|
180 |
+
public function load_settings_from_json_file( $json_file, $default_settings = array() ) {
|
181 |
+
$settings = array();
|
182 |
+
if ( file_exists( $json_file ) ) {
|
183 |
+
$json = preg_replace('!/\*.*?\*/!s', '', file_get_contents( $json_file ) ); // strip comments before decoding
|
184 |
+
$settings = json_decode( $json, true );
|
185 |
+
|
186 |
+
if ( $json_error = Styles_Helpers::get_json_error( $json_file, $settings ) ) {
|
187 |
+
wp_die( $json_error );
|
188 |
+
}
|
189 |
+
}
|
190 |
+
return wp_parse_args( $settings, $default_settings );
|
191 |
+
}
|
192 |
+
|
193 |
+
}
|
classes/styles-helpers.php
ADDED
@@ -0,0 +1,108 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class Styles_Helpers {
|
4 |
+
|
5 |
+
static public $prefix = 'st_';
|
6 |
+
static public $control_id_counter = 0;
|
7 |
+
static private $template;
|
8 |
+
|
9 |
+
static public function sanitize_type( $type ) {
|
10 |
+
$type = str_replace( array('-', '_'), ' ', $type );
|
11 |
+
$type = ucwords( $type );
|
12 |
+
$type = str_replace( ' ', '_', $type );
|
13 |
+
return $type;
|
14 |
+
}
|
15 |
+
|
16 |
+
static public function get_group_id( $group ) {
|
17 |
+
return self::$prefix . sanitize_key( $group );
|
18 |
+
}
|
19 |
+
|
20 |
+
static public function get_control_id( $id ) {
|
21 |
+
self::$control_id_counter++;
|
22 |
+
return self::$prefix . $id . '_' . self::$control_id_counter;
|
23 |
+
}
|
24 |
+
|
25 |
+
/**
|
26 |
+
* Return name of static class for Customizer Control based on "type"
|
27 |
+
*/
|
28 |
+
public static function get_element_class( $element ) {
|
29 |
+
if ( empty( $element['type'] ) ) { return false; }
|
30 |
+
$type = self::sanitize_type( $element['type'] );
|
31 |
+
|
32 |
+
// e.g., Styles_Control_Background_Color
|
33 |
+
$class = "Styles_Control_$type";
|
34 |
+
|
35 |
+
if ( class_exists( $class ) ) {
|
36 |
+
return $class;
|
37 |
+
}else {
|
38 |
+
|
39 |
+
$file = dirname( __FILE__ ) . '/' . strtolower( str_replace('_', '-', $class ) ) . '.php';
|
40 |
+
|
41 |
+
if ( file_exists( $file ) ) {
|
42 |
+
include $file;
|
43 |
+
return $class;
|
44 |
+
}else {
|
45 |
+
// trigger_error( 'Could not find class ' . $class, E_USER_ERROR );
|
46 |
+
return false;
|
47 |
+
}
|
48 |
+
|
49 |
+
}
|
50 |
+
|
51 |
+
}
|
52 |
+
|
53 |
+
public static function get_json_error( $json_file, $json_result ) {
|
54 |
+
$path = str_replace( ABSPATH, '', $json_file );
|
55 |
+
$url = site_url( $path );
|
56 |
+
|
57 |
+
$syntax_error = 'Malformed JSON. Check for errors. PHP <a href="http://php.net/manual/en/function.json-decode.php" target="_blank">json_decode</a> does not support comments or trailing commas.';
|
58 |
+
$template = '<h3>JSON error</h3>%s<p>Please check <code><a href="%s" target="_blank">%s</a></code></p>';
|
59 |
+
|
60 |
+
// PHP 5.2
|
61 |
+
if ( !function_exists( 'json_last_error' ) ) {
|
62 |
+
if ( null == $json_result ) {
|
63 |
+
return sprintf( $template, $syntax_error, $url, $path );
|
64 |
+
}
|
65 |
+
return false;
|
66 |
+
}
|
67 |
+
|
68 |
+
// PHP 5.3+
|
69 |
+
switch ( json_last_error() ) {
|
70 |
+
case JSON_ERROR_NONE: return false; break;
|
71 |
+
case JSON_ERROR_DEPTH: $error = 'Maximum stack depth exceeded.'; break;
|
72 |
+
case JSON_ERROR_STATE_MISMATCH: $error = 'Underflow or the modes mismatch.'; break;
|
73 |
+
case JSON_ERROR_CTRL_CHAR: $error = 'Unexpected control character.'; break;
|
74 |
+
case JSON_ERROR_SYNTAX: $error = $syntax_error; break;
|
75 |
+
case JSON_ERROR_UTF8: $error = 'Malformed UTF-8 characters, possibly incorrectly encoded.'; break;
|
76 |
+
default: $error = 'Unknown JSON error.'; break;
|
77 |
+
}
|
78 |
+
|
79 |
+
return sprintf( $template, $error, $url, $path );
|
80 |
+
}
|
81 |
+
|
82 |
+
public static function get_template() {
|
83 |
+
if ( isset( self::$template ) ) {
|
84 |
+
return self::$template;
|
85 |
+
}
|
86 |
+
|
87 |
+
global $wp_customize;
|
88 |
+
|
89 |
+
if ( isset( $_GET['theme'] ) ) {
|
90 |
+
self::$template = $_GET['theme'];
|
91 |
+
}else if ( is_a( $wp_customize, 'WP_Customize_Manager' ) ) {
|
92 |
+
self::$template = $wp_customize->theme()->template;
|
93 |
+
}else {
|
94 |
+
self::$template = get_template();
|
95 |
+
}
|
96 |
+
|
97 |
+
return self::$template;
|
98 |
+
|
99 |
+
}
|
100 |
+
|
101 |
+
public static function get_option_key( $suffix = false ) {
|
102 |
+
if ( $suffix ) {
|
103 |
+
return 'storm-styles-' . self::get_template() . '-' . $suffix;
|
104 |
+
}else {
|
105 |
+
return 'storm-styles-' . self::get_template();
|
106 |
+
}
|
107 |
+
}
|
108 |
+
}
|
classes/styles-plugin.php
ADDED
@@ -0,0 +1,144 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
/**
|
4 |
+
* Plugin wrapper
|
5 |
+
**/
|
6 |
+
class Styles_Plugin {
|
7 |
+
|
8 |
+
/**
|
9 |
+
* Plugin Version
|
10 |
+
*
|
11 |
+
* Holds the current plugin version.
|
12 |
+
*
|
13 |
+
* @var string
|
14 |
+
**/
|
15 |
+
var $version = '1.0.4';
|
16 |
+
|
17 |
+
/**
|
18 |
+
* Plugin DB version
|
19 |
+
*
|
20 |
+
* Holds the current plugin database version.
|
21 |
+
* Not the same as the current plugin version.
|
22 |
+
*
|
23 |
+
* @var string
|
24 |
+
**/
|
25 |
+
var $db_version = '1.0';
|
26 |
+
|
27 |
+
/**
|
28 |
+
* @var Styles_CSS
|
29 |
+
*/
|
30 |
+
var $css;
|
31 |
+
|
32 |
+
/**
|
33 |
+
* @var Styles_Customize
|
34 |
+
*/
|
35 |
+
var $customize;
|
36 |
+
|
37 |
+
/**
|
38 |
+
* @var Styles_Admin
|
39 |
+
*/
|
40 |
+
var $admin;
|
41 |
+
|
42 |
+
/**
|
43 |
+
* @var Styles_Child
|
44 |
+
*/
|
45 |
+
var $child;
|
46 |
+
|
47 |
+
var $query_var = 'styles-action';
|
48 |
+
|
49 |
+
public function __construct() {
|
50 |
+
|
51 |
+
require_once dirname( __FILE__ ) . '/styles-helpers.php';
|
52 |
+
|
53 |
+
add_action( 'wp_head', array( $this, 'wp_head' ), 1000 );
|
54 |
+
|
55 |
+
add_action( 'plugins_loaded', array( $this, 'plugins_loaded' ), 15 );
|
56 |
+
add_action( 'admin_menu', array( $this, 'admin_menu' ), 1 );
|
57 |
+
add_action( 'customize_register', array( $this, 'customize_register' ), 1 );
|
58 |
+
|
59 |
+
// Generated javascript from settings for Customize postMessage transport
|
60 |
+
add_filter( 'query_vars', array( $this, 'query_vars' ) );
|
61 |
+
add_action( 'parse_request', array( $this, 'parse_request' ) );
|
62 |
+
|
63 |
+
}
|
64 |
+
|
65 |
+
/**
|
66 |
+
* Set up detection for child plugins that follow common patterns
|
67 |
+
*/
|
68 |
+
public function plugins_loaded() {
|
69 |
+
if ( !is_a( $this->child, 'Styles_Child') ) {
|
70 |
+
|
71 |
+
require_once dirname( __FILE__ ) . '/styles-child.php';
|
72 |
+
require_once dirname( __FILE__ ) . '/styles-child-updatable.php';
|
73 |
+
require_once dirname( __FILE__ ) . '/styles-child-theme.php';
|
74 |
+
|
75 |
+
$this->child = new Styles_Child( $this );
|
76 |
+
}
|
77 |
+
}
|
78 |
+
|
79 |
+
/**
|
80 |
+
* Setup WP Admin user interface
|
81 |
+
*/
|
82 |
+
public function admin_menu() {
|
83 |
+
if ( !is_a( $this->admin, 'Styles_Admin') ) {
|
84 |
+
|
85 |
+
require_once dirname( __FILE__ ) . '/styles-admin.php';
|
86 |
+
|
87 |
+
$this->admin = new Styles_Admin( $this );
|
88 |
+
}
|
89 |
+
}
|
90 |
+
|
91 |
+
/**
|
92 |
+
* Add settings to WP Customize
|
93 |
+
*/
|
94 |
+
public function customize_register( $wp_customize = null ) {
|
95 |
+
if ( !is_a( $this->customize, 'Styles_Customize') ) {
|
96 |
+
|
97 |
+
require_once dirname( __FILE__ ) . '/styles-control.php';
|
98 |
+
require_once dirname( __FILE__ ) . '/styles-customize.php';
|
99 |
+
|
100 |
+
$this->customize = new Styles_Customize( $this );
|
101 |
+
}
|
102 |
+
}
|
103 |
+
|
104 |
+
/**
|
105 |
+
* Output CSS
|
106 |
+
*/
|
107 |
+
public function wp_head() {
|
108 |
+
if ( !is_a( $this->css, 'Styles_CSS') ) {
|
109 |
+
|
110 |
+
require_once dirname( __FILE__ ) . '/styles-control.php';
|
111 |
+
require_once dirname( __FILE__ ) . '/styles-css.php';
|
112 |
+
|
113 |
+
$this->css = new Styles_CSS( $this );
|
114 |
+
}
|
115 |
+
$this->css->output_css();
|
116 |
+
}
|
117 |
+
|
118 |
+
/**
|
119 |
+
* Whitelist query var to trigger custom requests
|
120 |
+
*/
|
121 |
+
public function query_vars( $vars ) {
|
122 |
+
$vars[] = $this->query_var;
|
123 |
+
return $vars;
|
124 |
+
}
|
125 |
+
|
126 |
+
/**
|
127 |
+
* Handle custom requests for our custom query_var
|
128 |
+
*/
|
129 |
+
public function parse_request( $wp ) {
|
130 |
+
if ( !array_key_exists( $this->query_var, $wp->query_vars ) ) {
|
131 |
+
return;
|
132 |
+
}
|
133 |
+
switch ( $wp->query_vars[ $this->query_var ] ) {
|
134 |
+
case 'customize-preview-js':
|
135 |
+
|
136 |
+
$this->customize_register();
|
137 |
+
|
138 |
+
$this->customize->preview_js();
|
139 |
+
|
140 |
+
break;
|
141 |
+
}
|
142 |
+
}
|
143 |
+
|
144 |
+
}
|
css/styles-admin.css
ADDED
@@ -0,0 +1 @@
|
|
|
1 |
+
#styles a.button-primary { height:20px; line-height: 19px; font-size: 12px; padding-left: 6px; padding-right: 6px; }
|
css/styles-customize.css
ADDED
@@ -0,0 +1,88 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/* Control Type Labels (override or remove with "suffix" in JSON)*/
|
2 |
+
span.styles-type {
|
3 |
+
font-weight:normal;
|
4 |
+
text-transform: uppercase;
|
5 |
+
font-size: 10px;
|
6 |
+
color: #797979;
|
7 |
+
padding-left: 6px;
|
8 |
+
}
|
9 |
+
|
10 |
+
/* Styles_Customize_Text_Control */
|
11 |
+
|
12 |
+
#customize-controls input.styles-font-size {
|
13 |
+
width: 32px;
|
14 |
+
}
|
15 |
+
|
16 |
+
.styles-font-family option {
|
17 |
+
text-indent: 10px;
|
18 |
+
}
|
19 |
+
|
20 |
+
.styles-font-family option.label {
|
21 |
+
font-family: Helvetica, Arial, sans-serif;
|
22 |
+
font-size: 11px;
|
23 |
+
color: #666;
|
24 |
+
font-style: normal;
|
25 |
+
font-weight: normal;
|
26 |
+
text-indent: 0;
|
27 |
+
margin-top: 10px;
|
28 |
+
}
|
29 |
+
|
30 |
+
.styles-font-family option.first {
|
31 |
+
margin-top: 0;
|
32 |
+
}
|
33 |
+
|
34 |
+
|
35 |
+
/* Subsection */
|
36 |
+
|
37 |
+
/*
|
38 |
+
.styles-subsection-title:after {
|
39 |
+
border-color: #CCCCCC transparent;
|
40 |
+
border-style: solid;
|
41 |
+
border-width: 6px 6px 0;
|
42 |
+
content: "";
|
43 |
+
height: 0;
|
44 |
+
position: absolute;
|
45 |
+
right: 20px;
|
46 |
+
top: 15px;
|
47 |
+
width: 0;
|
48 |
+
z-index: 1;
|
49 |
+
}
|
50 |
+
|
51 |
+
.styles-subsection-title {
|
52 |
+
background-color: #F5F5F5;
|
53 |
+
background-image: -moz-linear-gradient(center top, #e8e8e8, #e0e0e0);
|
54 |
+
font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
|
55 |
+
font-size: 15px;
|
56 |
+
font-weight: normal;
|
57 |
+
padding: 11px 20px;
|
58 |
+
text-shadow: 0 1px 0 #FFFFFF;
|
59 |
+
-moz-user-select: none;
|
60 |
+
cursor: pointer;
|
61 |
+
position: relative;
|
62 |
+
margin: 0 -20px -8px;
|
63 |
+
border-bottom: 1px solid #efefef;
|
64 |
+
}
|
65 |
+
|
66 |
+
.customize-section-content li:first-child .styles-subsection-title {
|
67 |
+
margin-top: -10px;
|
68 |
+
}
|
69 |
+
|
70 |
+
.open-subsection .styles-subsection-title {
|
71 |
+
border-bottom: 1px solid #6D6D6D;
|
72 |
+
}
|
73 |
+
|
74 |
+
.control-section .styles-subsection-title:hover, .open-subsection .styles-subsection-title {
|
75 |
+
background-color: #808080;
|
76 |
+
background-image: -moz-linear-gradient(center top, #9B9B9B, #848484);
|
77 |
+
color: #FFFFFF;
|
78 |
+
text-shadow: 0 -1px 0 #333333;
|
79 |
+
}
|
80 |
+
|
81 |
+
.customize-section-content {
|
82 |
+
padding-bottom: 0;
|
83 |
+
}
|
84 |
+
|
85 |
+
.styles-subsection {
|
86 |
+
padding: 20px 0;
|
87 |
+
}
|
88 |
+
*/
|
js/PIE/PIE.htc
CHANGED
@@ -1,81 +1,81 @@
|
|
1 |
-
<!--
|
2 |
-
PIE: CSS3 rendering for IE
|
3 |
-
Version 1.0beta4
|
4 |
-
http://css3pie.com
|
5 |
-
Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
|
6 |
-
-->
|
7 |
-
<PUBLIC:COMPONENT lightWeight="true">
|
8 |
-
<PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" />
|
9 |
-
<PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="init()" />
|
10 |
-
<PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />
|
11 |
-
|
12 |
-
<script type="text/javascript">
|
13 |
-
var doc = element.document;var g=window.PIE;
|
14 |
-
if(!g){g=window.PIE={F:"-pie-",Sa:"Pie",Pa:"pie_",Jb:{TD:1,TH:1}};try{doc.execCommand("BackgroundImageCache",false,true)}catch(L){}g.J=function(){for(var a=4,b=doc.createElement("div"),c=b.getElementsByTagName("i");b.innerHTML="<!--[if gt IE "+ ++a+"]><i></i><![endif]--\>",c[0];);return a}();if(g.J===6)g.F=g.F.replace(/^-/,"");g.Ab=doc.documentMode||g.J;(function(){var a,b=0,c={};g.p={Ga:function(e){if(!a){a=doc.createDocumentFragment();a.namespaces.add("css3vml","urn:schemas-microsoft-com:vml")}return a.createElement("css3vml:"+e)},
|
15 |
-
ta:function(e){return e&&e._pieId||(e._pieId=++b)},fb:function(e){var f,h,j,d,i=arguments;f=1;for(h=i.length;f<h;f++){d=i[f];for(j in d)if(d.hasOwnProperty(j))e[j]=d[j]}return e},Pb:function(e,f,h){var j=c[e],d,i;if(j)Object.prototype.toString.call(j)==="[object Array]"?j.push([f,h]):f.call(h,j);else{i=c[e]=[[f,h]];d=new Image;d.onload=function(){j=c[e]={i:d.width,f:d.height};for(var k=0,m=i.length;k<m;k++)i[k][0].call(i[k][1],j);d.onload=null};d.src=e}}}})();g.ia=function(){this.hb=[];this.Db={}};
|
16 |
-
g.ia.prototype={aa:function(a){var b=g.p.ta(a),c=this.Db,e=this.hb;if(!(b in c)){c[b]=e.length;e.push(a)}},Ma:function(a){a=g.p.ta(a);var b=this.Db;if(a&&a in b){delete this.hb[b[a]];delete b[a]}},Ia:function(){for(var a=this.hb,b=a.length;b--;)a[b]&&a[b]()}};g.ya=new g.ia;g.ya.Tc=function(){var a=this;if(!a.Uc){setInterval(function(){a.Ia()},250);a.Uc=1}};g.G=new g.ia;window.attachEvent("onbeforeunload",function(){g.G.Ia()});g.G.Ea=function(a,b,c){a.attachEvent(b,c);this.aa(function(){a.detachEvent(b,
|
17 |
-
c)})};(function(){function a(){g.za.Ia()}g.za=new g.ia;g.G.Ea(window,"onresize",a)})();(function(){function a(){g.Ra.Ia()}g.Ra=new g.ia;g.G.Ea(window,"onscroll",a);g.za.aa(a)})();(function(){function a(){c=g.Qa.wc()}function b(){if(c){for(var e=0,f=c.length;e<f;e++)g.attach(c[e]);c=0}}var c;g.G.Ea(window,"onbeforeprint",a);g.G.Ea(window,"onafterprint",b)})();g.hd=function(){function a(i){this.V=i}var b=doc.createElement("length-calc"),c=doc.documentElement,e=b.style,f={},h=["mm","cm","in","pt","pc"],
|
18 |
-
j=h.length,d={};e.position="absolute";e.top=e.left="-9999px";for(c.appendChild(b);j--;){b.style.width="100"+h[j];f[h[j]]=b.offsetWidth/100}c.removeChild(b);a.prototype={ib:/(px|em|ex|mm|cm|in|pt|pc|%)$/,vb:function(){var i=this.Lc;if(i===void 0)i=this.Lc=parseFloat(this.V);return i},ab:function(){var i=this.ad;if(!i)i=this.ad=(i=this.V.match(this.ib))&&i[0]||"px";return i},a:function(i,k){var m=this.vb(),l=this.ab();switch(l){case "px":return m;case "%":return m*(typeof k==="function"?k():k)/100;
|
19 |
-
case "em":return m*this.tb(i);case "ex":return m*this.tb(i)/2;default:return m*f[l]}},tb:function(i){var k=i.currentStyle.fontSize;if(k.indexOf("px")>0)return parseFloat(k);else{b.style.width="1em";i.appendChild(b);k=b.offsetWidth;b.parentNode===i&&i.removeChild(b);return k}}};g.k=function(i){return d[i]||(d[i]=new a(i))};return a}();g.Na=function(){function a(f){this.U=f}var b=g.k("50%"),c={top:1,center:1,bottom:1},e={left:1,center:1,right:1};a.prototype={Dc:function(){if(!this.sb){var f=this.U,
|
20 |
-
h=f.length,j=g.u,d=j.ja,i=g.k("0");d=d.fa;i=["left",i,"top",i];if(h===1){f.push(new j.Ta(d,"center"));h++}if(h===2){d&(f[0].h|f[1].h)&&f[0].d in c&&f[1].d in e&&f.push(f.shift());if(f[0].h&d)if(f[0].d==="center")i[1]=b;else i[0]=f[0].d;else if(f[0].Y())i[1]=g.k(f[0].d);if(f[1].h&d)if(f[1].d==="center")i[3]=b;else i[2]=f[1].d;else if(f[1].Y())i[3]=g.k(f[1].d)}this.sb=i}return this.sb},coords:function(f,h,j){var d=this.Dc(),i=d[1].a(f,h);f=d[3].a(f,j);return{x:d[0]==="right"?h-i:i,y:d[2]==="bottom"?
|
21 |
-
j-f:f}}};return a}();g.Rb=function(){function a(b){this.V=b}a.prototype={ib:/[a-z]+$/i,ab:function(){return this.lc||(this.lc=this.V.match(this.ib)[0].toLowerCase())},vc:function(){var b=this.fc,c;if(b===undefined){b=this.ab();c=parseFloat(this.V,10);b=this.fc=b==="deg"?c:b==="rad"?c/Math.PI*180:b==="grad"?c/400*360:b==="turn"?c*360:0}return b}};return a}();g.$b=function(){function a(c){this.V=c}var b={};a.Sc=/\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;a.gb=
|
22 |
-
{aliceblue:"F0F8FF",antiquewhite:"FAEBD7",aqua:"0FF",aquamarine:"7FFFD4",azure:"F0FFFF",beige:"F5F5DC",bisque:"FFE4C4",black:"000",blanchedalmond:"FFEBCD",blue:"00F",blueviolet:"8A2BE2",brown:"A52A2A",burlywood:"DEB887",cadetblue:"5F9EA0",chartreuse:"7FFF00",chocolate:"D2691E",coral:"FF7F50",cornflowerblue:"6495ED",cornsilk:"FFF8DC",crimson:"DC143C",cyan:"0FF",darkblue:"00008B",darkcyan:"008B8B",darkgoldenrod:"B8860B",darkgray:"A9A9A9",darkgreen:"006400",darkkhaki:"BDB76B",darkmagenta:"8B008B",darkolivegreen:"556B2F",
|
23 |
-
darkorange:"FF8C00",darkorchid:"9932CC",darkred:"8B0000",darksalmon:"E9967A",darkseagreen:"8FBC8F",darkslateblue:"483D8B",darkslategray:"2F4F4F",darkturquoise:"00CED1",darkviolet:"9400D3",deeppink:"FF1493",deepskyblue:"00BFFF",dimgray:"696969",dodgerblue:"1E90FF",firebrick:"B22222",floralwhite:"FFFAF0",forestgreen:"228B22",fuchsia:"F0F",gainsboro:"DCDCDC",ghostwhite:"F8F8FF",gold:"FFD700",goldenrod:"DAA520",gray:"808080",green:"008000",greenyellow:"ADFF2F",honeydew:"F0FFF0",hotpink:"FF69B4",indianred:"CD5C5C",
|
24 |
-
indigo:"4B0082",ivory:"FFFFF0",khaki:"F0E68C",lavender:"E6E6FA",lavenderblush:"FFF0F5",lawngreen:"7CFC00",lemonchiffon:"FFFACD",lightblue:"ADD8E6",lightcoral:"F08080",lightcyan:"E0FFFF",lightgoldenrodyellow:"FAFAD2",lightgreen:"90EE90",lightgrey:"D3D3D3",lightpink:"FFB6C1",lightsalmon:"FFA07A",lightseagreen:"20B2AA",lightskyblue:"87CEFA",lightslategray:"789",lightsteelblue:"B0C4DE",lightyellow:"FFFFE0",lime:"0F0",limegreen:"32CD32",linen:"FAF0E6",magenta:"F0F",maroon:"800000",mediumauqamarine:"66CDAA",
|
25 |
-
mediumblue:"0000CD",mediumorchid:"BA55D3",mediumpurple:"9370D8",mediumseagreen:"3CB371",mediumslateblue:"7B68EE",mediumspringgreen:"00FA9A",mediumturquoise:"48D1CC",mediumvioletred:"C71585",midnightblue:"191970",mintcream:"F5FFFA",mistyrose:"FFE4E1",moccasin:"FFE4B5",navajowhite:"FFDEAD",navy:"000080",oldlace:"FDF5E6",olive:"808000",olivedrab:"688E23",orange:"FFA500",orangered:"FF4500",orchid:"DA70D6",palegoldenrod:"EEE8AA",palegreen:"98FB98",paleturquoise:"AFEEEE",palevioletred:"D87093",papayawhip:"FFEFD5",
|
26 |
-
peachpuff:"FFDAB9",peru:"CD853F",pink:"FFC0CB",plum:"DDA0DD",powderblue:"B0E0E6",purple:"800080",red:"F00",rosybrown:"BC8F8F",royalblue:"4169E1",saddlebrown:"8B4513",salmon:"FA8072",sandybrown:"F4A460",seagreen:"2E8B57",seashell:"FFF5EE",sienna:"A0522D",silver:"C0C0C0",skyblue:"87CEEB",slateblue:"6A5ACD",slategray:"708090",snow:"FFFAFA",springgreen:"00FF7F",steelblue:"4682B4",tan:"D2B48C",teal:"008080",thistle:"D8BFD8",tomato:"FF6347",turquoise:"40E0D0",violet:"EE82EE",wheat:"F5DEB3",white:"FFF",
|
27 |
-
whitesmoke:"F5F5F5",yellow:"FF0",yellowgreen:"9ACD32"};a.prototype={parse:function(){if(!this.Ca){var c=this.V,e;if(e=c.match(a.Sc)){this.Ca="rgb("+e[1]+","+e[2]+","+e[3]+")";this.qb=parseFloat(e[4])}else{if((e=c.toLowerCase())in a.gb)c="#"+a.gb[e];this.Ca=c;this.qb=c==="transparent"?0:1}}},O:function(c){this.parse();return this.Ca==="currentColor"?c.currentStyle.color:this.Ca},la:function(){this.parse();return this.qb}};g.pa=function(c){return b[c]||(b[c]=new a(c))};return a}();g.u=function(){function a(c){this.Ha=
|
28 |
-
c;this.ch=0;this.U=[];this.wa=0}var b=a.ja={xa:1,ob:2,ea:4,ac:8,pb:16,fa:32,A:64,ga:128,ha:256,Aa:512,dc:1024,URL:2048};a.Ta=function(c,e){this.h=c;this.d=e};a.Ta.prototype={db:function(){return this.h&b.A||this.h&b.ga&&this.d==="0"},Y:function(){return this.db()||this.h&b.Aa}};a.prototype={dd:/\s/,Mc:/^[\+\-]?(\d*\.)?\d+/,url:/^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,zb:/^\-?[_a-z][\w-]*/i,Yc:/^("([^"]*)"|'([^']*)')/,Fc:/^#([\da-f]{6}|[\da-f]{3})/i,bd:{px:b.A,em:b.A,ex:b.A,mm:b.A,cm:b.A,
|
29 |
-
"in":b.A,pt:b.A,pc:b.A,deg:b.xa,rad:b.xa,grad:b.xa},sc:{rgb:1,rgba:1,hsl:1,hsla:1},next:function(c){function e(t,n){t=new a.Ta(t,n);if(!c){k.U.push(t);k.wa++}return t}function f(){k.wa++;return null}var h,j,d,i,k=this;if(this.wa<this.U.length)return this.U[this.wa++];for(;this.dd.test(this.Ha.charAt(this.ch));)this.ch++;if(this.ch>=this.Ha.length)return f();j=this.ch;h=this.Ha.substring(this.ch);d=h.charAt(0);switch(d){case "#":if(i=h.match(this.Fc)){this.ch+=i[0].length;return e(b.ea,i[0])}break;
|
30 |
-
case '"':case "'":if(i=h.match(this.Yc)){this.ch+=i[0].length;return e(b.dc,i[2]||i[3]||"")}break;case "/":case ",":this.ch++;return e(b.ha,d);case "u":if(i=h.match(this.url)){this.ch+=i[0].length;return e(b.URL,i[2]||i[3]||i[4]||"")}}if(i=h.match(this.Mc)){d=i[0];this.ch+=d.length;if(h.charAt(d.length)==="%"){this.ch++;return e(b.Aa,d+"%")}if(i=h.substring(d.length).match(this.zb)){d+=i[0];this.ch+=i[0].length;return e(this.bd[i[0].toLowerCase()]||b.ac,d)}return e(b.ga,d)}if(i=h.match(this.zb)){d=
|
31 |
-
i[0];this.ch+=d.length;if(d.toLowerCase()in g.$b.gb||d==="currentColor")return e(b.ea,d);if(h.charAt(d.length)==="("){this.ch++;if(d.toLowerCase()in this.sc){h=function(t){return t&&t.h&b.ga};i=function(t){return t&&t.h&(b.ga|b.Aa)};var m=function(t,n){return t&&t.d===n},l=function(){return k.next(1)};if((d.charAt(0)==="r"?i(l()):h(l()))&&m(l(),",")&&i(l())&&m(l(),",")&&i(l())&&(d==="rgb"||d==="hsa"||m(l(),",")&&h(l()))&&m(l(),")"))return e(b.ea,this.Ha.substring(j,this.ch));return f()}return e(b.pb,
|
32 |
-
d)}return e(b.fa,d)}this.ch++;return e(b.ob,d)},z:function(){return this.U[this.wa-- -2]},all:function(){for(;this.next(););return this.U},da:function(c,e){for(var f=[],h,j;h=this.next();){if(c(h)){j=true;this.z();break}f.push(h)}return e&&!j?null:f}};return a}();var M=function(a){this.e=a};M.prototype={K:0,Qc:function(){var a=this.Ua,b;return!a||(b=this.o())&&(a.x!==b.x||a.y!==b.y)},Vc:function(){var a=this.Ua,b;return!a||(b=this.o())&&(a.i!==b.i||a.f!==b.f)},ub:function(){var a=this.e.getBoundingClientRect();
|
33 |
-
return{x:a.left,y:a.top,i:a.right-a.left,f:a.bottom-a.top}},o:function(){return this.K?this.Da||(this.Da=this.ub()):this.ub()},Ec:function(){return!!this.Ua},Ja:function(){++this.K},La:function(){if(!--this.K){if(this.Da)this.Ua=this.Da;this.Da=null}}};(function(){function a(b){var c=g.p.ta(b);return function(){if(this.K){var e=this.rb||(this.rb={});return c in e?e[c]:(e[c]=b.call(this))}else return b.call(this)}}g.s={K:0,$:function(b){function c(e){this.e=e}g.p.fb(c.prototype,g.s,b);c.kc={};return c},
|
34 |
-
m:function(){var b=this.qa(),c=this.constructor.kc;return b?b in c?c[b]:(c[b]=this.ba(b)):null},qa:a(function(){var b=this.e,c=this.constructor,e=b.style;b=b.currentStyle;var f=this.na,h=this.va,j=c.ic||(c.ic=g.F+f);c=c.jc||(c.jc=g.Sa+h.charAt(0).toUpperCase()+h.substring(1));return e[c]||b.getAttribute(j)||e[h]||b.getAttribute(f)}),g:a(function(){return!!this.m()}),D:a(function(){var b=this.qa(),c=b!==this.gc;this.gc=b;return c}),ma:a,Ja:function(){++this.K},La:function(){--this.K||delete this.rb}}})();
|
35 |
-
g.Tb=g.s.$({na:g.F+"background",va:g.Sa+"Background",nc:{scroll:1,fixed:1,local:1},Ka:{"repeat-x":1,"repeat-y":1,repeat:1,"no-repeat":1},Nc:{"padding-box":1,"border-box":1,"content-box":1},rc:{"padding-box":1,"border-box":1},Rc:{top:1,right:1,bottom:1,left:1,center:1},Wc:{contain:1,cover:1},ba:function(a){function b(u){return u.Y()||u.h&i&&u.d in t}function c(u){return u.Y()&&g.k(u.d)||u.d==="auto"&&"auto"}var e=this.e.currentStyle,f,h,j=g.u.ja,d=j.ha,i=j.fa,k=j.ea,m,l,t=this.Rc,n,p,s=null;if(this.$a()){a=
|
36 |
-
new g.u(a);s={M:[]};for(h={};f=a.next();){m=f.h;l=f.d;if(!h.P&&m&j.pb&&l==="linear-gradient"){n={ca:[],P:l};for(p={};f=a.next();){m=f.h;l=f.d;if(m&j.ob&&l===")"){p.color&&n.ca.push(p);n.ca.length>1&&g.p.fb(h,n);break}if(m&k){if(n.Xa||n.bb){f=a.z();if(f.h!==d)break;a.next()}p={color:g.pa(l)};f=a.next();if(f.Y())p.Fb=g.k(f.d);else a.z()}else if(m&j.xa&&!n.Xa&&!p.color&&!n.ca.length)n.Xa=new g.Rb(f.d);else if(b(f)&&!n.bb&&!p.color&&!n.ca.length){a.z();n.bb=new g.Na(a.da(function(u){return!b(u)},false))}else if(m&
|
37 |
-
d&&l===","){if(p.color){n.ca.push(p);p={}}}else break}}else if(!h.P&&m&j.URL){h.Cb=l;h.P="image"}else if(b(f)&&!h.size){a.z();h.Ya=new g.Na(a.da(function(u){return!b(u)},false))}else if(m&i)if(l in this.Ka)h.Bb=l;else if(l in this.Nc){h.kd=l;if(l in this.rc)h.clip=l}else{if(l in this.nc)h.jd=l}else if(m&k&&!s.color)s.color=g.pa(l);else if(m&d)if(l==="/"){f=a.next();m=f.h;l=f.d;if(m&i&&l in this.Wc)h.size=l;else if(l=c(f))h.size={i:l,f:c(a.next())||a.z()&&l}}else{if(l===","&&h.P){s.M.push(h);h={}}}else return null}h.P&&
|
38 |
-
s.M.push(h)}else this.Nb(function(){var u=e.backgroundPositionX,w=e.backgroundPositionY,r=e.backgroundImage,o=e.backgroundColor;s={};if(o!=="transparent")s.color=g.pa(o);if(r!=="none")s.M=[{P:"image",Cb:(new g.u(r)).next().d,Bb:e.backgroundRepeat,Ya:new g.Na((new g.u(u+" "+w)).all())}]});return s&&(s.color||s.M&&s.M[0])?s:null},Nb:function(a){var b=this.e.runtimeStyle,c=b.backgroundImage,e=b.backgroundColor;if(c)b.backgroundImage="";if(e)b.backgroundColor="";a=a.call(this);if(c)b.backgroundImage=
|
39 |
-
c;if(e)b.backgroundColor=e;return a},qa:g.s.ma(function(){return this.$a()||this.Nb(function(){var a=this.e.currentStyle;return a.backgroundColor+" "+a.backgroundImage+" "+a.backgroundRepeat+" "+a.backgroundPositionX+" "+a.backgroundPositionY})}),$a:g.s.ma(function(){var a=this.e;return a.style[this.va]||a.currentStyle.getAttribute(this.na)}),Eb:function(){var a=0;if(g.J<7){a=this.e;a=""+(a.style[g.Sa+"PngFix"]||a.currentStyle.getAttribute(g.F+"png-fix"))==="true"}return a},g:g.s.ma(function(){return(this.$a()||
|
40 |
-
this.Eb())&&!!this.m()})});g.Xb=g.s.$({Ib:["Top","Right","Bottom","Left"],Kc:{thin:"1px",medium:"3px",thick:"5px"},ba:function(){var a={},b={},c={},e=false,f=true,h=true,j=true;this.Ob(function(){for(var d=this.e.currentStyle,i=0,k,m,l,t,n,p,s;i<4;i++){l=this.Ib[i];s=l.charAt(0).toLowerCase();k=b[s]=d["border"+l+"Style"];m=d["border"+l+"Color"];l=d["border"+l+"Width"];if(i>0){if(k!==t)h=false;if(m!==n)f=false;if(l!==p)j=false}t=k;n=m;p=l;c[s]=g.pa(m);l=a[s]=g.k(b[s]==="none"?"0":this.Kc[l]||l);if(l.a(this.e)>
|
41 |
-
0)e=true}});return e?{nb:a,Zc:b,tc:c,ed:j,uc:f,$c:h}:null},qa:g.s.ma(function(){var a=this.e,b=a.currentStyle,c;a.tagName in g.Jb&&a.offsetParent.currentStyle.borderCollapse==="collapse"||this.Ob(function(){c=b.borderWidth+"|"+b.borderStyle+"|"+b.borderColor});return c}),Ob:function(a){var b=this.e.runtimeStyle,c=b.borderWidth,e=b.borderColor;if(c)b.borderWidth="";if(e)b.borderColor="";a=a.call(this);if(c)b.borderWidth=c;if(e)b.borderColor=e;return a}});(function(){g.Oa=g.s.$({na:"border-radius",
|
42 |
-
va:"borderRadius",ba:function(b){var c=null,e,f,h,j,d=false;if(b){f=new g.u(b);var i=function(){for(var k=[],m;(h=f.next())&&h.Y();){j=g.k(h.d);m=j.vb();if(m<0)return null;if(m>0)d=true;k.push(j)}return k.length>0&&k.length<5?{tl:k[0],tr:k[1]||k[0],br:k[2]||k[0],bl:k[3]||k[1]||k[0]}:null};if(b=i()){if(h){if(h.h&g.u.ja.ha&&h.d==="/")e=i()}else e=b;if(d&&b&&e)c={x:b,y:e}}}return c}});var a=g.k("0");a={tl:a,tr:a,br:a,bl:a};g.Oa.Qb={x:a,y:a}})();g.Vb=g.s.$({na:"border-image",va:"borderImage",Ka:{stretch:1,
|
43 |
-
round:1,repeat:1,space:1},ba:function(a){var b=null,c,e,f,h,j,d,i=0,k,m=g.u.ja,l=m.fa,t=m.ga,n=m.A,p=m.Aa;if(a){c=new g.u(a);b={};for(var s=function(r){return r&&r.h&m.ha&&r.d==="/"},u=function(r){return r&&r.h&l&&r.d==="fill"},w=function(){h=c.da(function(r){return!(r.h&(t|p))});if(u(c.next())&&!b.fill)b.fill=true;else c.z();if(s(c.next())){i++;j=c.da(function(){return!(e.h&(t|p|n))&&!(e.h&l&&e.d==="auto")});if(s(c.next())){i++;d=c.da(function(){return!(e.h&(t|n))})}}else c.z()};e=c.next();){a=e.h;
|
44 |
-
f=e.d;if(a&(t|p)&&!h){c.z();w()}else if(u(e)&&!b.fill){b.fill=true;w()}else if(a&l&&this.Ka[f]&&!b.repeat){b.repeat={f:f};if(e=c.next())if(e.h&l&&this.Ka[e.d])b.repeat.kb=e.d;else c.z()}else if(a&m.URL&&!b.src)b.src=f;else return null}if(!b.src||!h||h.length<1||h.length>4||j&&j.length>4||i===1&&j.length<1||d&&d.length>4||i===2&&d.length<1)return null;if(!b.repeat)b.repeat={f:"stretch"};if(!b.repeat.kb)b.repeat.kb=b.repeat.f;a=function(r,o){return{T:o(r[0]),S:o(r[1]||r[0]),L:o(r[2]||r[0]),Q:o(r[3]||
|
45 |
-
r[1]||r[0])}};b.slice=a(h,function(r){return g.k(r.h&t?r.d+"px":r.d)});b.width=j&&j.length>0?a(j,function(r){return r.h&(n|p)?g.k(r.d):r.d}):(k=this.e.currentStyle)&&{T:g.k(k.borderTopWidth),S:g.k(k.borderRightWidth),L:g.k(k.borderBottomWidth),Q:g.k(k.borderLeftWidth)};b.ua=a(d||[0],function(r){return r.h&n?g.k(r.d):r.d})}return b}});g.Zb=g.s.$({na:"box-shadow",va:"boxShadow",ba:function(a){var b,c=g.k,e=g.u.ja,f;if(a){f=new g.u(a);b={ua:[],cb:[]};for(a=function(){for(var h,j,d,i,k,m;h=f.next();){d=
|
46 |
-
h.d;j=h.h;if(j&e.ha&&d===",")break;else if(h.db()&&!k){f.z();k=f.da(function(l){return!l.db()})}else if(j&e.ea&&!i)i=d;else if(j&e.fa&&d==="inset"&&!m)m=true;else return false}h=k&&k.length;if(h>1&&h<5){(m?b.cb:b.ua).push({fd:c(k[0].d),gd:c(k[1].d),blur:c(k[2]?k[2].d:"0"),Xc:c(k[3]?k[3].d:"0"),color:g.pa(i||"currentColor")});return true}return false};a(););}return b&&(b.cb.length||b.ua.length)?b:null}});g.ec=g.s.$({qa:g.s.ma(function(){var a=this.e.currentStyle;return a.visibility+"|"+a.display}),
|
47 |
-
ba:function(){var a=this.e,b=a.runtimeStyle;a=a.currentStyle;var c=b.visibility,e;b.visibility="";e=a.visibility;b.visibility=c;return{cd:e!=="hidden",xc:a.display!=="none"}},g:function(){return false}});g.B={Z:function(a){function b(c,e,f,h){this.e=c;this.q=e;this.j=f;this.parent=h}g.p.fb(b.prototype,g.B,a);return b},eb:false,R:function(){return false},Kb:function(){this.n();this.g()&&this.X()},jb:function(){this.eb=true},Lb:function(){this.g()?this.X():this.n()},Wa:function(a,b){this.Hb(a);for(var c=
|
48 |
-
this.ka||(this.ka=[]),e=a+1,f=c.length,h;e<f;e++)if(h=c[e])break;c[a]=b;this.w().insertBefore(b,h||null)},ra:function(a){var b=this.ka;return b&&b[a]||null},Hb:function(a){var b=this.ra(a),c=this.Ba;if(b&&c){c.removeChild(b);this.ka[a]=null}},sa:function(a,b,c,e){var f=this.Va||(this.Va={}),h=f[a];if(!h){h=f[a]=g.p.Ga("shape");if(b)h.appendChild(h[b]=g.p.Ga(b));if(e){c=this.ra(e);if(!c){this.Wa(e,doc.createElement("group"+e));c=this.ra(e)}}c.appendChild(h);a=h.style;a.position="absolute";a.left=a.top=
|
49 |
-
0;a.behavior="url(#default#VML)"}return h},Za:function(a){var b=this.Va,c=b&&b[a];if(c){c.parentNode.removeChild(c);delete b[a]}return!!c},xb:function(a){var b=this.e,c=this.q.o(),e=c.i,f=c.f,h,j,d,i,k,m;c=a.x.tl.a(b,e);h=a.y.tl.a(b,f);j=a.x.tr.a(b,e);d=a.y.tr.a(b,f);i=a.x.br.a(b,e);k=a.y.br.a(b,f);m=a.x.bl.a(b,e);a=a.y.bl.a(b,f);e=Math.min(e/(c+j),f/(d+k),e/(m+i),f/(h+a));if(e<1){c*=e;h*=e;j*=e;d*=e;i*=e;k*=e;m*=e;a*=e}return{x:{tl:c,tr:j,br:i,bl:m},y:{tl:h,tr:d,br:k,bl:a}}},oa:function(a,b,c){b=
|
50 |
-
b||1;var e,f,h=this.q.o();f=h.i*b;h=h.f*b;var j=this.j.v,d=Math.floor,i=Math.ceil,k=a?a.T*b:0,m=a?a.S*b:0,l=a?a.L*b:0;a=a?a.Q*b:0;var t,n,p,s,u;if(c||j.g()){e=this.xb(c||j.m());c=e.x.tl*b;j=e.y.tl*b;t=e.x.tr*b;n=e.y.tr*b;p=e.x.br*b;s=e.y.br*b;u=e.x.bl*b;b=e.y.bl*b;f="m"+d(a)+","+d(j)+"qy"+d(c)+","+d(k)+"l"+i(f-t)+","+d(k)+"qx"+i(f-m)+","+d(n)+"l"+i(f-m)+","+i(h-s)+"qy"+i(f-p)+","+i(h-l)+"l"+d(u)+","+i(h-l)+"qx"+d(a)+","+i(h-b)+" x e"}else f="m"+d(a)+","+d(k)+"l"+i(f-m)+","+d(k)+"l"+i(f-m)+","+i(h-
|
51 |
-
l)+"l"+d(a)+","+i(h-l)+"xe";return f},w:function(){var a=this.parent.ra(this.C),b;if(!a){a=doc.createElement(this.Fa);b=a.style;b.position="absolute";b.top=b.left=0;this.parent.Wa(this.C,a)}return a},n:function(){this.parent.Hb(this.C);delete this.Va;delete this.ka}};g.cc=g.B.Z({g:function(){var a=this.oc;for(var b in a)if(a.hasOwnProperty(b)&&a[b].g())return true;return false},R:function(){return this.j.lb.D()},jb:function(){if(this.g()){var a=this.wb(),b=a,c;a=a.currentStyle;var e=a.position,f=
|
52 |
-
this.w().style,h=0,j=0;j=this.q.o();if(e==="fixed"&&g.J>6){h=j.x;j=j.y;b=e}else{do b=b.offsetParent;while(b&&b.currentStyle.position==="static");if(b){c=b.getBoundingClientRect();b=b.currentStyle;h=j.x-c.left-(parseFloat(b.borderLeftWidth)||0);j=j.y-c.top-(parseFloat(b.borderTopWidth)||0)}else{b=doc.documentElement;h=j.x+b.scrollLeft-b.clientLeft;j=j.y+b.scrollTop-b.clientTop}b="absolute"}f.position=b;f.left=h;f.top=j;f.zIndex=e==="static"?-1:a.zIndex;this.eb=true}},Lb:function(){},Mb:function(){var a=
|
53 |
-
this.j.lb.m();this.w().style.display=a.cd&&a.xc?"":"none"},Kb:function(){this.g()?this.Mb():this.n()},wb:function(){var a=this.e;return a.tagName in g.Jb?a.offsetParent:a},w:function(){var a=this.Ba,b;if(!a){b=this.wb();a=this.Ba=doc.createElement("css3-container");a.style.direction="ltr";this.Mb();b.parentNode.insertBefore(a,b)}return a},n:function(){var a=this.Ba,b;if(a&&(b=a.parentNode))b.removeChild(a);delete this.Ba;delete this.ka}});g.Sb=g.B.Z({C:2,Fa:"background",R:function(){var a=this.j;
|
54 |
-
return a.H.D()||a.v.D()},g:function(){var a=this.j;return a.N.g()||a.v.g()||a.H.g()||a.W.g()&&a.W.m().cb},X:function(){var a=this.q.o();if(a.i&&a.f){this.yc();this.zc()}},yc:function(){var a=this.j.H.m(),b=this.q.o(),c=this.e,e=a&&a.color,f,h;if(e&&e.la()>0){this.yb();a=this.sa("bgColor","fill",this.w(),1);f=b.i;b=b.f;a.stroked=false;a.coordsize=f*2+","+b*2;a.coordorigin="1,1";a.path=this.oa(null,2);h=a.style;h.width=f;h.height=b;a.fill.color=e.O(c);c=e.la();if(c<1)a.fill.opacity=c}else this.Za("bgColor")},
|
55 |
-
zc:function(){var a=this.j.H.m(),b=this.q.o();a=a&&a.M;var c,e,f,h,j;if(a){this.yb();e=b.i;f=b.f;for(j=a.length;j--;){b=a[j];c=this.sa("bgImage"+j,"fill",this.w(),2);c.stroked=false;c.fill.type="tile";c.fillcolor="none";c.coordsize=e*2+","+f*2;c.coordorigin="1,1";c.path=this.oa(0,2);h=c.style;h.width=e;h.height=f;if(b.P==="linear-gradient")this.mc(c,b);else{c.fill.src=b.Cb;this.Pc(c,j)}}}for(j=a?a.length:0;this.Za("bgImage"+j++););},Pc:function(a,b){g.p.Pb(a.fill.src,function(c){var e=a.fill,f=this.e,
|
56 |
-
h=this.q.o(),j=h.i;h=h.f;var d=this.j,i=d.I.m(),k=i&&i.nb;i=k?k.t.a(f):0;var m=k?k.r.a(f):0,l=k?k.b.a(f):0;k=k?k.l.a(f):0;d=d.H.m().M[b];f=d.Ya?d.Ya.coords(f,j-c.i-k-m,h-c.f-i-l):{x:0,y:0};d=d.Bb;l=m=0;var t=j+1,n=h+1,p=g.J===8?0:1;k=Math.round(f.x)+k+0.5;i=Math.round(f.y)+i+0.5;e.position=k/j+","+i/h;if(d&&d!=="repeat"){if(d==="repeat-x"||d==="no-repeat"){m=i+1;n=i+c.f+p}if(d==="repeat-y"||d==="no-repeat"){l=k+1;t=k+c.i+p}a.style.clip="rect("+m+"px,"+t+"px,"+n+"px,"+l+"px)"}},this)},mc:function(a,
|
57 |
-
b){function c(B,C,z,F,H){if(z===0||z===180)return[F,C];else if(z===90||z===270)return[B,H];else{z=Math.tan(-z*t/180);B=z*B-C;C=-1/z;F=C*F-H;H=C-z;return[(F-B)/H,(z*F-C*B)/H]}}function e(){w=m>=90&&m<270?i:0;r=m<180?k:0;o=i-w;x=k-r}function f(){for(;m<0;)m+=360;m%=360}function h(B,C){var z=C[0]-B[0];B=C[1]-B[1];return Math.abs(z===0?B:B===0?z:Math.sqrt(z*z+B*B))}var j=this.e,d=this.q.o(),i=d.i,k=d.f;a=a.fill;var m=b.Xa,l=b.bb;b=b.ca;d=b.length;var t=Math.PI,n,p,s,u,w,r,o,x,q,y,A,D;if(l){l=l.coords(j,
|
58 |
-
i,k);n=l.x;p=l.y}if(m){m=m.vc();f();e();if(!l){n=w;p=r}l=c(n,p,m,o,x);s=l[0];u=l[1]}else if(l){s=i-n;u=k-p}else{n=p=s=0;u=k}l=s-n;q=u-p;if(m===void 0){m=!l?q<0?90:270:!q?l<0?180:0:-Math.atan2(q,l)/t*180;f();e()}l=m%90?Math.atan2(l*i/k,q)/t*180:m+90;l+=180;l%=360;y=h([n,p],[s,u]);s=h([w,r],c(w,r,m,o,x));u=[];p=h([n,p],c(n,p,m,w,r))/s*100;n=[];for(q=0;q<d;q++)n.push(b[q].Fb?b[q].Fb.a(j,y):q===0?0:q===d-1?y:null);for(q=1;q<d;q++){if(n[q]===null){A=n[q-1];y=q;do D=n[++y];while(D===null);n[q]=A+(D-A)/
|
59 |
-
(y-q+1)}n[q]=Math.max(n[q],n[q-1])}for(q=0;q<d;q++)u.push(p+n[q]/s*100+"% "+b[q].color.O(j));a.angle=l;a.type="gradient";a.method="sigma";a.color=b[0].color.O(j);a.color2=b[d-1].color.O(j);a.colors.value=u.join(",")},yb:function(){var a=this.e.runtimeStyle;a.backgroundImage="url(about:blank)";a.backgroundColor="transparent"},n:function(){g.B.n.call(this);var a=this.e.runtimeStyle;a.backgroundImage=a.backgroundColor=""}});g.Wb=g.B.Z({C:4,Fa:"border",qc:{TABLE:1,INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,
|
60 |
-
IMG:1,HR:1,FIELDSET:1},Jc:{submit:1,button:1,reset:1},R:function(){var a=this.j;return a.I.D()||a.v.D()},g:function(){var a=this.j;return(a.N.g()||a.v.g()||a.H.g())&&a.I.g()},X:function(){var a=this.e,b=this.j.I.m(),c=this.q.o(),e=c.i;c=c.f;var f,h,j,d,i;if(b){this.Hc();b=this.Bc(2);d=0;for(i=b.length;d<i;d++){j=b[d];f=this.sa("borderPiece"+d,j.stroke?"stroke":"fill",this.w());f.coordsize=e*2+","+c*2;f.coordorigin="1,1";f.path=j.path;h=f.style;h.width=e;h.height=c;f.filled=!!j.fill;f.stroked=!!j.stroke;
|
61 |
-
if(j.stroke){f=f.stroke;f.weight=j.mb+"px";f.color=j.color.O(a);f.dashstyle=j.stroke==="dashed"?"2 2":j.stroke==="dotted"?"1 1":"solid";f.linestyle=j.stroke==="double"&&j.mb>2?"ThinThin":"Single"}else f.fill.color=j.fill.O(a)}for(;this.Za("borderPiece"+d++););}},Hc:function(){var a=this.e,b=a.currentStyle,c=a.runtimeStyle,e=a.tagName,f=g.J===6,h;if(f&&e in this.qc||e==="BUTTON"||e==="INPUT"&&a.type in this.Jc){c.borderWidth="";e=this.j.I.Ib;for(h=e.length;h--;){f=e[h];c["padding"+f]="";c["padding"+
|
62 |
-
f]=g.k(b["padding"+f]).a(a)+g.k(b["border"+f+"Width"]).a(a)+(!g.J===8&&h%2?1:0)}c.borderWidth=0}else if(f){if(a.childNodes.length!==1||a.firstChild.tagName!=="ie6-mask"){b=doc.createElement("ie6-mask");e=b.style;e.visibility="visible";for(e.zoom=1;e=a.firstChild;)b.appendChild(e);a.appendChild(b);c.visibility="hidden"}}else c.borderColor="transparent"},Bc:function(a){var b=this.e,c,e,f,h=this.j.I,j=[],d,i,k,m,l=Math.round,t,n,p;if(h.g()){c=h.m();h=c.nb;n=c.Zc;p=c.tc;if(c.ed&&c.$c&&c.uc){if(p.t.la()>
|
63 |
-
0){c=h.t.a(b);k=c/2;j.push({path:this.oa({T:k,S:k,L:k,Q:k},a),stroke:n.t,color:p.t,mb:c})}}else{a=a||1;c=this.q.o();e=c.i;f=c.f;c=l(h.t.a(b));k=l(h.r.a(b));m=l(h.b.a(b));b=l(h.l.a(b));var s={t:c,r:k,b:m,l:b};b=this.j.v;if(b.g())t=this.xb(b.m());d=Math.floor;i=Math.ceil;var u=function(o,x){return t?t[o][x]:0},w=function(o,x,q,y,A,D){var B=u("x",o),C=u("y",o),z=o.charAt(1)==="r";o=o.charAt(0)==="b";return B>0&&C>0?(D?"al":"ae")+(z?i(e-B):d(B))*a+","+(o?i(f-C):d(C))*a+","+(d(B)-x)*a+","+(d(C)-q)*a+","+
|
64 |
-
y*65535+","+2949075*(A?1:-1):(D?"m":"l")+(z?e-x:x)*a+","+(o?f-q:q)*a},r=function(o,x,q,y){var A=o==="t"?d(u("x","tl"))*a+","+i(x)*a:o==="r"?i(e-x)*a+","+d(u("y","tr"))*a:o==="b"?i(e-u("x","br"))*a+","+d(f-x)*a:d(x)*a+","+i(f-u("y","bl"))*a;o=o==="t"?i(e-u("x","tr"))*a+","+i(x)*a:o==="r"?i(e-x)*a+","+i(f-u("y","br"))*a:o==="b"?d(u("x","bl"))*a+","+d(f-x)*a:d(x)*a+","+d(u("y","tl"))*a;return q?(y?"m"+o:"")+"l"+A:(y?"m"+A:"")+"l"+o};b=function(o,x,q,y,A,D){var B=o==="l"||o==="r",C=s[o],z,F;if(C>0&&n[o]!==
|
65 |
-
"none"&&p[o].la()>0){z=s[B?o:x];x=s[B?x:o];F=s[B?o:q];q=s[B?q:o];if(n[o]==="dashed"||n[o]==="dotted"){j.push({path:w(y,z,x,D+45,0,1)+w(y,0,0,D,1,0),fill:p[o]});j.push({path:r(o,C/2,0,1),stroke:n[o],mb:C,color:p[o]});j.push({path:w(A,F,q,D,0,1)+w(A,0,0,D-45,1,0),fill:p[o]})}else j.push({path:w(y,z,x,D+45,0,1)+r(o,C,0,0)+w(A,F,q,D,0,0)+(n[o]==="double"&&C>2?w(A,F-d(F/3),q-d(q/3),D-45,1,0)+r(o,i(C/3*2),1,0)+w(y,z-d(z/3),x-d(x/3),D,1,0)+"x "+w(y,d(z/3),d(x/3),D+45,0,1)+r(o,d(C/3),1,0)+w(A,d(F/3),d(q/
|
66 |
-
3),D,0,0):"")+w(A,0,0,D-45,1,0)+r(o,0,1,0)+w(y,0,0,D,1,0),fill:p[o]})}};b("t","l","r","tl","tr",90);b("r","t","b","tr","br",0);b("b","r","l","br","bl",-90);b("l","b","t","bl","tl",-180)}}return j},n:function(){g.B.n.call(this);this.e.runtimeStyle.borderColor=""}});g.Ub=g.B.Z({C:5,Oc:["t","tr","r","br","b","bl","l","tl","c"],R:function(){return this.j.N.D()},g:function(){return this.j.N.g()},X:function(){this.w();var a=this.j.N.m(),b=this.q.o(),c=this.e,e=this.Gb;g.p.Pb(a.src,function(f){function h(w,
|
67 |
-
r,o,x,q){w=e[w].style;var y=Math.max;w.width=y(r,0);w.height=y(o,0);w.left=x;w.top=q}function j(w,r,o){for(var x=0,q=w.length;x<q;x++)e[w[x]].imagedata[r]=o}var d=b.i,i=b.f,k=a.width,m=k.T.a(c),l=k.S.a(c),t=k.L.a(c);k=k.Q.a(c);var n=a.slice,p=n.T.a(c),s=n.S.a(c),u=n.L.a(c);n=n.Q.a(c);h("tl",k,m,0,0);h("t",d-k-l,m,k,0);h("tr",l,m,d-l,0);h("r",l,i-m-t,d-l,m);h("br",l,t,d-l,i-t);h("b",d-k-l,t,k,i-t);h("bl",k,t,0,i-t);h("l",k,i-m-t,0,m);h("c",d-k-l,i-m-t,k,m);j(["tl","t","tr"],"cropBottom",(f.f-p)/f.f);
|
68 |
-
j(["tl","l","bl"],"cropRight",(f.i-n)/f.i);j(["bl","b","br"],"cropTop",(f.f-u)/f.f);j(["tr","r","br"],"cropLeft",(f.i-s)/f.i);if(a.repeat.kb==="stretch"){j(["l","r","c"],"cropTop",p/f.f);j(["l","r","c"],"cropBottom",u/f.f)}if(a.repeat.f==="stretch"){j(["t","b","c"],"cropLeft",n/f.i);j(["t","b","c"],"cropRight",s/f.i)}e.c.style.display=a.fill?"":"none"},this)},w:function(){var a=this.parent.ra(this.C),b,c,e,f=this.Oc,h=f.length;if(!a){a=doc.createElement("border-image");b=a.style;b.position="absolute";
|
69 |
-
this.Gb={};for(e=0;e<h;e++){c=this.Gb[f[e]]=g.p.Ga("rect");c.appendChild(g.p.Ga("imagedata"));b=c.style;b.behavior="url(#default#VML)";b.position="absolute";b.top=b.left=0;c.imagedata.src=this.j.N.m().src;c.stroked=false;c.filled=false;a.appendChild(c)}this.parent.Wa(this.C,a)}return a}});g.Yb=g.B.Z({C:1,Fa:"outset-box-shadow",R:function(){var a=this.j;return a.W.D()||a.v.D()},g:function(){var a=this.j.W;return a.g()&&a.m().ua[0]},X:function(){function a(z,F,H,K,J,v,E){z=b.sa("shadow"+z+F,"fill",
|
70 |
-
e,j-z);F=z.fill;z.coordsize=m*2+","+l*2;z.coordorigin="1,1";z.stroked=false;z.filled=true;F.color=J.O(c);if(v){F.type="gradienttitle";F.color2=F.color;F.opacity=0}z.path=E;u=z.style;u.left=H;u.top=K;u.width=m;u.height=l;return z}var b=this,c=this.e,e=this.w(),f=this.j,h=f.W.m().ua;f=f.v.m();var j=h.length,d=j,i,k=this.q.o(),m=k.i,l=k.f;k=g.J===8?1:0;for(var t=["tl","tr","br","bl"],n,p,s,u,w,r,o,x,q,y,A,D,B,C;d--;){p=h[d];w=p.fd.a(c);r=p.gd.a(c);i=p.Xc.a(c);o=p.blur.a(c);p=p.color;x=-i-o;if(!f&&o)f=
|
71 |
-
g.Oa.Qb;x=this.oa({T:x,S:x,L:x,Q:x},2,f);if(o){q=(i+o)*2+m;y=(i+o)*2+l;A=o*2/q;D=o*2/y;if(o-i>m/2||o-i>l/2)for(i=4;i--;){n=t[i];B=n.charAt(0)==="b";C=n.charAt(1)==="r";n=a(d,n,w,r,p,o,x);s=n.fill;s.focusposition=(C?1-A:A)+","+(B?1-D:D);s.focussize="0,0";n.style.clip="rect("+((B?y/2:0)+k)+"px,"+(C?q:q/2)+"px,"+(B?y:y/2)+"px,"+((C?q/2:0)+k)+"px)"}else{n=a(d,"",w,r,p,o,x);s=n.fill;s.focusposition=A+","+D;s.focussize=1-A*2+","+(1-D*2)}}else{n=a(d,"",w,r,p,o,x);w=p.la();if(w<1)n.fill.opacity=w}}}});g.bc=
|
72 |
-
g.B.Z({C:6,Fa:"imgEl",R:function(){var a=this.j;return this.e.src!==this.hc||a.v.D()},g:function(){var a=this.j;return a.v.g()||a.H.Eb()},X:function(){this.hc=j;this.Gc();var a=this.sa("img","fill",this.w()),b=a.fill,c=this.q.o(),e=c.i;c=c.f;var f=this.j.I.m();f=f&&f.nb;var h=this.e,j=h.src,d=Math.round;a.stroked=false;b.type="frame";b.src=j;b.position=(e?0.5/e:0)+","+(c?0.5/c:0);a.coordsize=e*2+","+c*2;a.coordorigin="1,1";a.path=this.oa(f?{T:d(f.t.a(h)),S:d(f.r.a(h)),L:d(f.b.a(h)),Q:d(f.l.a(h))}:
|
73 |
-
0,2);a=a.style;a.width=e;a.height=c},Gc:function(){this.e.runtimeStyle.filter="alpha(opacity=0)"},n:function(){g.B.n.call(this);this.e.runtimeStyle.filter=""}});g.Qa=function(){function a(d){function i(){if(!z){var v,E,G=d.currentStyle,I=G.getAttribute(c)==="true";J=G.getAttribute(e);J=g.Ab===8?J!=="false":J==="true";if(!C){C=1;d.runtimeStyle.zoom=1;G=d;for(var O=1;G=G.previousSibling;)if(G.nodeType===1){O=0;break}if(O)d.className+=" "+g.Pa+"first-child"}y.Ja();if(I&&(E=y.o())&&(v=doc.documentElement||
|
74 |
-
doc.body)&&(E.y>v.clientHeight||E.x>v.clientWidth||E.y+E.f<0||E.x+E.i<0)){if(!H){H=1;g.Ra.aa(i)}}else{z=1;H=C=0;g.Ra.Ma(i);A={H:new g.Tb(d),I:new g.Xb(d),N:new g.Vb(d),v:new g.Oa(d),W:new g.Zb(d),lb:new g.ec(d)};D=[A.H,A.I,A.N,A.v,A.W,A.lb];v=new g.cc(d,y,A);E=[new g.Yb(d,y,A,v),new g.Sb(d,y,A,v),new g.Wb(d,y,A,v),new g.Ub(d,y,A,v)];d.tagName==="IMG"&&E.push(new g.bc(d,y,A,v));v.oc=E;q=[v].concat(E);if(v=d.currentStyle.getAttribute(g.F+"watch-ancestors")){B=[];v=parseInt(v,10);E=0;for(I=d.parentNode;I&&
|
75 |
-
(v==="NaN"||E++<v);){B.push(I);I.attachEvent("onpropertychange",u);I.attachEvent("onmouseenter",p);I.attachEvent("onmouseleave",s);I=I.parentNode}}if(J){g.ya.aa(m);g.ya.Tc()}m(1)}if(!F){F=1;d.attachEvent("onmove",k);d.attachEvent("onresize",k);d.attachEvent("onpropertychange",l);d.attachEvent("onmouseenter",p);d.attachEvent("onmouseleave",s);g.za.aa(k);g.G.aa(o)}y.La()}}function k(){y&&y.Ec()&&m()}function m(v){if(!K)if(z){var E,G;w();if(v||y.Qc()){E=0;for(G=q.length;E<G;E++)q[E].jb()}if(v||y.Vc()){E=
|
76 |
-
0;for(G=q.length;E<G;E++)q[E].Lb()}r()}else C||i()}function l(){var v,E,G;v=event;if(!K&&!(v&&v.propertyName in j))if(z){w();v=0;for(E=q.length;v<E;v++){G=q[v];G.eb||G.jb();G.R()&&G.Kb()}r()}else C||i()}function t(){if(d)d.className+=f}function n(){if(d)d.className=d.className.replace(h,"")}function p(){setTimeout(t,0)}function s(){setTimeout(n,0)}function u(){var v=event.propertyName;if(v==="className"||v==="id")l()}function w(){y.Ja();for(var v=D.length;v--;)D[v].Ja()}function r(){for(var v=D.length;v--;)D[v].La();
|
77 |
-
y.La()}function o(){if(F){if(B)for(var v=0,E=B.length,G;v<E;v++){G=B[v];G.detachEvent("onpropertychange",u);G.detachEvent("onmouseenter",p);G.detachEvent("onmouseleave",s)}d.detachEvent("onmove",m);d.detachEvent("onresize",m);d.detachEvent("onpropertychange",l);d.detachEvent("onmouseenter",p);d.detachEvent("onmouseleave",s);g.G.Ma(o);F=0}}function x(){if(!K){var v,E;o();K=1;if(q){v=0;for(E=q.length;v<E;v++)q[v].n()}J&&g.ya.Ma(m);g.za.Ma(m);q=y=A=D=B=d=null}}var q,y=new M(d),A,D,B,C,z,F,H,K,J;this.Ic=
|
78 |
-
i;this.update=m;this.n=x;this.Ac=d}var b={},c=g.F+"lazy-init",e=g.F+"poll",f=" "+g.Pa+"hover",h=new RegExp("\\b"+g.Pa+"hover\\b","g"),j={background:1,bgColor:1,display:1};a.Cc=function(d){var i=g.p.ta(d);return b[i]||(b[i]=new a(d))};a.n=function(d){d=g.p.ta(d);var i=b[d];if(i){i.n();delete b[d]}};a.wc=function(){var d=[],i;if(b){for(var k in b)if(b.hasOwnProperty(k)){i=b[k];d.push(i.Ac);i.n()}b={}}return d};return a}();g.attach=function(a){g.Ab<9&&g.Qa.Cc(a).Ic()};g.detach=function(a){g.Qa.n(a)}};
|
79 |
-
var N=window.PIE,P=element;function init(){N&&doc.media!=="print"&&N.attach(P)}function cleanup(){if(N){N.detach(P);N=P=0}}P.readyState==="complete"&&init();
|
80 |
-
</script>
|
81 |
-
</PUBLIC:COMPONENT>
|
1 |
+
<!--
|
2 |
+
PIE: CSS3 rendering for IE
|
3 |
+
Version 1.0beta4
|
4 |
+
http://css3pie.com
|
5 |
+
Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
|
6 |
+
-->
|
7 |
+
<PUBLIC:COMPONENT lightWeight="true">
|
8 |
+
<PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" />
|
9 |
+
<PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="init()" />
|
10 |
+
<PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />
|
11 |
+
|
12 |
+
<script type="text/javascript">
|
13 |
+
var doc = element.document;var g=window.PIE;
|
14 |
+
if(!g){g=window.PIE={F:"-pie-",Sa:"Pie",Pa:"pie_",Jb:{TD:1,TH:1}};try{doc.execCommand("BackgroundImageCache",false,true)}catch(L){}g.J=function(){for(var a=4,b=doc.createElement("div"),c=b.getElementsByTagName("i");b.innerHTML="<!--[if gt IE "+ ++a+"]><i></i><![endif]--\>",c[0];);return a}();if(g.J===6)g.F=g.F.replace(/^-/,"");g.Ab=doc.documentMode||g.J;(function(){var a,b=0,c={};g.p={Ga:function(e){if(!a){a=doc.createDocumentFragment();a.namespaces.add("css3vml","urn:schemas-microsoft-com:vml")}return a.createElement("css3vml:"+e)},
|
15 |
+
ta:function(e){return e&&e._pieId||(e._pieId=++b)},fb:function(e){var f,h,j,d,i=arguments;f=1;for(h=i.length;f<h;f++){d=i[f];for(j in d)if(d.hasOwnProperty(j))e[j]=d[j]}return e},Pb:function(e,f,h){var j=c[e],d,i;if(j)Object.prototype.toString.call(j)==="[object Array]"?j.push([f,h]):f.call(h,j);else{i=c[e]=[[f,h]];d=new Image;d.onload=function(){j=c[e]={i:d.width,f:d.height};for(var k=0,m=i.length;k<m;k++)i[k][0].call(i[k][1],j);d.onload=null};d.src=e}}}})();g.ia=function(){this.hb=[];this.Db={}};
|
16 |
+
g.ia.prototype={aa:function(a){var b=g.p.ta(a),c=this.Db,e=this.hb;if(!(b in c)){c[b]=e.length;e.push(a)}},Ma:function(a){a=g.p.ta(a);var b=this.Db;if(a&&a in b){delete this.hb[b[a]];delete b[a]}},Ia:function(){for(var a=this.hb,b=a.length;b--;)a[b]&&a[b]()}};g.ya=new g.ia;g.ya.Tc=function(){var a=this;if(!a.Uc){setInterval(function(){a.Ia()},250);a.Uc=1}};g.G=new g.ia;window.attachEvent("onbeforeunload",function(){g.G.Ia()});g.G.Ea=function(a,b,c){a.attachEvent(b,c);this.aa(function(){a.detachEvent(b,
|
17 |
+
c)})};(function(){function a(){g.za.Ia()}g.za=new g.ia;g.G.Ea(window,"onresize",a)})();(function(){function a(){g.Ra.Ia()}g.Ra=new g.ia;g.G.Ea(window,"onscroll",a);g.za.aa(a)})();(function(){function a(){c=g.Qa.wc()}function b(){if(c){for(var e=0,f=c.length;e<f;e++)g.attach(c[e]);c=0}}var c;g.G.Ea(window,"onbeforeprint",a);g.G.Ea(window,"onafterprint",b)})();g.hd=function(){function a(i){this.V=i}var b=doc.createElement("length-calc"),c=doc.documentElement,e=b.style,f={},h=["mm","cm","in","pt","pc"],
|
18 |
+
j=h.length,d={};e.position="absolute";e.top=e.left="-9999px";for(c.appendChild(b);j--;){b.style.width="100"+h[j];f[h[j]]=b.offsetWidth/100}c.removeChild(b);a.prototype={ib:/(px|em|ex|mm|cm|in|pt|pc|%)$/,vb:function(){var i=this.Lc;if(i===void 0)i=this.Lc=parseFloat(this.V);return i},ab:function(){var i=this.ad;if(!i)i=this.ad=(i=this.V.match(this.ib))&&i[0]||"px";return i},a:function(i,k){var m=this.vb(),l=this.ab();switch(l){case "px":return m;case "%":return m*(typeof k==="function"?k():k)/100;
|
19 |
+
case "em":return m*this.tb(i);case "ex":return m*this.tb(i)/2;default:return m*f[l]}},tb:function(i){var k=i.currentStyle.fontSize;if(k.indexOf("px")>0)return parseFloat(k);else{b.style.width="1em";i.appendChild(b);k=b.offsetWidth;b.parentNode===i&&i.removeChild(b);return k}}};g.k=function(i){return d[i]||(d[i]=new a(i))};return a}();g.Na=function(){function a(f){this.U=f}var b=g.k("50%"),c={top:1,center:1,bottom:1},e={left:1,center:1,right:1};a.prototype={Dc:function(){if(!this.sb){var f=this.U,
|
20 |
+
h=f.length,j=g.u,d=j.ja,i=g.k("0");d=d.fa;i=["left",i,"top",i];if(h===1){f.push(new j.Ta(d,"center"));h++}if(h===2){d&(f[0].h|f[1].h)&&f[0].d in c&&f[1].d in e&&f.push(f.shift());if(f[0].h&d)if(f[0].d==="center")i[1]=b;else i[0]=f[0].d;else if(f[0].Y())i[1]=g.k(f[0].d);if(f[1].h&d)if(f[1].d==="center")i[3]=b;else i[2]=f[1].d;else if(f[1].Y())i[3]=g.k(f[1].d)}this.sb=i}return this.sb},coords:function(f,h,j){var d=this.Dc(),i=d[1].a(f,h);f=d[3].a(f,j);return{x:d[0]==="right"?h-i:i,y:d[2]==="bottom"?
|
21 |
+
j-f:f}}};return a}();g.Rb=function(){function a(b){this.V=b}a.prototype={ib:/[a-z]+$/i,ab:function(){return this.lc||(this.lc=this.V.match(this.ib)[0].toLowerCase())},vc:function(){var b=this.fc,c;if(b===undefined){b=this.ab();c=parseFloat(this.V,10);b=this.fc=b==="deg"?c:b==="rad"?c/Math.PI*180:b==="grad"?c/400*360:b==="turn"?c*360:0}return b}};return a}();g.$b=function(){function a(c){this.V=c}var b={};a.Sc=/\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;a.gb=
|
22 |
+
{aliceblue:"F0F8FF",antiquewhite:"FAEBD7",aqua:"0FF",aquamarine:"7FFFD4",azure:"F0FFFF",beige:"F5F5DC",bisque:"FFE4C4",black:"000",blanchedalmond:"FFEBCD",blue:"00F",blueviolet:"8A2BE2",brown:"A52A2A",burlywood:"DEB887",cadetblue:"5F9EA0",chartreuse:"7FFF00",chocolate:"D2691E",coral:"FF7F50",cornflowerblue:"6495ED",cornsilk:"FFF8DC",crimson:"DC143C",cyan:"0FF",darkblue:"00008B",darkcyan:"008B8B",darkgoldenrod:"B8860B",darkgray:"A9A9A9",darkgreen:"006400",darkkhaki:"BDB76B",darkmagenta:"8B008B",darkolivegreen:"556B2F",
|
23 |
+
darkorange:"FF8C00",darkorchid:"9932CC",darkred:"8B0000",darksalmon:"E9967A",darkseagreen:"8FBC8F",darkslateblue:"483D8B",darkslategray:"2F4F4F",darkturquoise:"00CED1",darkviolet:"9400D3",deeppink:"FF1493",deepskyblue:"00BFFF",dimgray:"696969",dodgerblue:"1E90FF",firebrick:"B22222",floralwhite:"FFFAF0",forestgreen:"228B22",fuchsia:"F0F",gainsboro:"DCDCDC",ghostwhite:"F8F8FF",gold:"FFD700",goldenrod:"DAA520",gray:"808080",green:"008000",greenyellow:"ADFF2F",honeydew:"F0FFF0",hotpink:"FF69B4",indianred:"CD5C5C",
|
24 |
+
indigo:"4B0082",ivory:"FFFFF0",khaki:"F0E68C",lavender:"E6E6FA",lavenderblush:"FFF0F5",lawngreen:"7CFC00",lemonchiffon:"FFFACD",lightblue:"ADD8E6",lightcoral:"F08080",lightcyan:"E0FFFF",lightgoldenrodyellow:"FAFAD2",lightgreen:"90EE90",lightgrey:"D3D3D3",lightpink:"FFB6C1",lightsalmon:"FFA07A",lightseagreen:"20B2AA",lightskyblue:"87CEFA",lightslategray:"789",lightsteelblue:"B0C4DE",lightyellow:"FFFFE0",lime:"0F0",limegreen:"32CD32",linen:"FAF0E6",magenta:"F0F",maroon:"800000",mediumauqamarine:"66CDAA",
|
25 |
+
mediumblue:"0000CD",mediumorchid:"BA55D3",mediumpurple:"9370D8",mediumseagreen:"3CB371",mediumslateblue:"7B68EE",mediumspringgreen:"00FA9A",mediumturquoise:"48D1CC",mediumvioletred:"C71585",midnightblue:"191970",mintcream:"F5FFFA",mistyrose:"FFE4E1",moccasin:"FFE4B5",navajowhite:"FFDEAD",navy:"000080",oldlace:"FDF5E6",olive:"808000",olivedrab:"688E23",orange:"FFA500",orangered:"FF4500",orchid:"DA70D6",palegoldenrod:"EEE8AA",palegreen:"98FB98",paleturquoise:"AFEEEE",palevioletred:"D87093",papayawhip:"FFEFD5",
|
26 |
+
peachpuff:"FFDAB9",peru:"CD853F",pink:"FFC0CB",plum:"DDA0DD",powderblue:"B0E0E6",purple:"800080",red:"F00",rosybrown:"BC8F8F",royalblue:"4169E1",saddlebrown:"8B4513",salmon:"FA8072",sandybrown:"F4A460",seagreen:"2E8B57",seashell:"FFF5EE",sienna:"A0522D",silver:"C0C0C0",skyblue:"87CEEB",slateblue:"6A5ACD",slategray:"708090",snow:"FFFAFA",springgreen:"00FF7F",steelblue:"4682B4",tan:"D2B48C",teal:"008080",thistle:"D8BFD8",tomato:"FF6347",turquoise:"40E0D0",violet:"EE82EE",wheat:"F5DEB3",white:"FFF",
|
27 |
+
whitesmoke:"F5F5F5",yellow:"FF0",yellowgreen:"9ACD32"};a.prototype={parse:function(){if(!this.Ca){var c=this.V,e;if(e=c.match(a.Sc)){this.Ca="rgb("+e[1]+","+e[2]+","+e[3]+")";this.qb=parseFloat(e[4])}else{if((e=c.toLowerCase())in a.gb)c="#"+a.gb[e];this.Ca=c;this.qb=c==="transparent"?0:1}}},O:function(c){this.parse();return this.Ca==="currentColor"?c.currentStyle.color:this.Ca},la:function(){this.parse();return this.qb}};g.pa=function(c){return b[c]||(b[c]=new a(c))};return a}();g.u=function(){function a(c){this.Ha=
|
28 |
+
c;this.ch=0;this.U=[];this.wa=0}var b=a.ja={xa:1,ob:2,ea:4,ac:8,pb:16,fa:32,A:64,ga:128,ha:256,Aa:512,dc:1024,URL:2048};a.Ta=function(c,e){this.h=c;this.d=e};a.Ta.prototype={db:function(){return this.h&b.A||this.h&b.ga&&this.d==="0"},Y:function(){return this.db()||this.h&b.Aa}};a.prototype={dd:/\s/,Mc:/^[\+\-]?(\d*\.)?\d+/,url:/^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,zb:/^\-?[_a-z][\w-]*/i,Yc:/^("([^"]*)"|'([^']*)')/,Fc:/^#([\da-f]{6}|[\da-f]{3})/i,bd:{px:b.A,em:b.A,ex:b.A,mm:b.A,cm:b.A,
|
29 |
+
"in":b.A,pt:b.A,pc:b.A,deg:b.xa,rad:b.xa,grad:b.xa},sc:{rgb:1,rgba:1,hsl:1,hsla:1},next:function(c){function e(t,n){t=new a.Ta(t,n);if(!c){k.U.push(t);k.wa++}return t}function f(){k.wa++;return null}var h,j,d,i,k=this;if(this.wa<this.U.length)return this.U[this.wa++];for(;this.dd.test(this.Ha.charAt(this.ch));)this.ch++;if(this.ch>=this.Ha.length)return f();j=this.ch;h=this.Ha.substring(this.ch);d=h.charAt(0);switch(d){case "#":if(i=h.match(this.Fc)){this.ch+=i[0].length;return e(b.ea,i[0])}break;
|
30 |
+
case '"':case "'":if(i=h.match(this.Yc)){this.ch+=i[0].length;return e(b.dc,i[2]||i[3]||"")}break;case "/":case ",":this.ch++;return e(b.ha,d);case "u":if(i=h.match(this.url)){this.ch+=i[0].length;return e(b.URL,i[2]||i[3]||i[4]||"")}}if(i=h.match(this.Mc)){d=i[0];this.ch+=d.length;if(h.charAt(d.length)==="%"){this.ch++;return e(b.Aa,d+"%")}if(i=h.substring(d.length).match(this.zb)){d+=i[0];this.ch+=i[0].length;return e(this.bd[i[0].toLowerCase()]||b.ac,d)}return e(b.ga,d)}if(i=h.match(this.zb)){d=
|
31 |
+
i[0];this.ch+=d.length;if(d.toLowerCase()in g.$b.gb||d==="currentColor")return e(b.ea,d);if(h.charAt(d.length)==="("){this.ch++;if(d.toLowerCase()in this.sc){h=function(t){return t&&t.h&b.ga};i=function(t){return t&&t.h&(b.ga|b.Aa)};var m=function(t,n){return t&&t.d===n},l=function(){return k.next(1)};if((d.charAt(0)==="r"?i(l()):h(l()))&&m(l(),",")&&i(l())&&m(l(),",")&&i(l())&&(d==="rgb"||d==="hsa"||m(l(),",")&&h(l()))&&m(l(),")"))return e(b.ea,this.Ha.substring(j,this.ch));return f()}return e(b.pb,
|
32 |
+
d)}return e(b.fa,d)}this.ch++;return e(b.ob,d)},z:function(){return this.U[this.wa-- -2]},all:function(){for(;this.next(););return this.U},da:function(c,e){for(var f=[],h,j;h=this.next();){if(c(h)){j=true;this.z();break}f.push(h)}return e&&!j?null:f}};return a}();var M=function(a){this.e=a};M.prototype={K:0,Qc:function(){var a=this.Ua,b;return!a||(b=this.o())&&(a.x!==b.x||a.y!==b.y)},Vc:function(){var a=this.Ua,b;return!a||(b=this.o())&&(a.i!==b.i||a.f!==b.f)},ub:function(){var a=this.e.getBoundingClientRect();
|
33 |
+
return{x:a.left,y:a.top,i:a.right-a.left,f:a.bottom-a.top}},o:function(){return this.K?this.Da||(this.Da=this.ub()):this.ub()},Ec:function(){return!!this.Ua},Ja:function(){++this.K},La:function(){if(!--this.K){if(this.Da)this.Ua=this.Da;this.Da=null}}};(function(){function a(b){var c=g.p.ta(b);return function(){if(this.K){var e=this.rb||(this.rb={});return c in e?e[c]:(e[c]=b.call(this))}else return b.call(this)}}g.s={K:0,$:function(b){function c(e){this.e=e}g.p.fb(c.prototype,g.s,b);c.kc={};return c},
|
34 |
+
m:function(){var b=this.qa(),c=this.constructor.kc;return b?b in c?c[b]:(c[b]=this.ba(b)):null},qa:a(function(){var b=this.e,c=this.constructor,e=b.style;b=b.currentStyle;var f=this.na,h=this.va,j=c.ic||(c.ic=g.F+f);c=c.jc||(c.jc=g.Sa+h.charAt(0).toUpperCase()+h.substring(1));return e[c]||b.getAttribute(j)||e[h]||b.getAttribute(f)}),g:a(function(){return!!this.m()}),D:a(function(){var b=this.qa(),c=b!==this.gc;this.gc=b;return c}),ma:a,Ja:function(){++this.K},La:function(){--this.K||delete this.rb}}})();
|
35 |
+
g.Tb=g.s.$({na:g.F+"background",va:g.Sa+"Background",nc:{scroll:1,fixed:1,local:1},Ka:{"repeat-x":1,"repeat-y":1,repeat:1,"no-repeat":1},Nc:{"padding-box":1,"border-box":1,"content-box":1},rc:{"padding-box":1,"border-box":1},Rc:{top:1,right:1,bottom:1,left:1,center:1},Wc:{contain:1,cover:1},ba:function(a){function b(u){return u.Y()||u.h&i&&u.d in t}function c(u){return u.Y()&&g.k(u.d)||u.d==="auto"&&"auto"}var e=this.e.currentStyle,f,h,j=g.u.ja,d=j.ha,i=j.fa,k=j.ea,m,l,t=this.Rc,n,p,s=null;if(this.$a()){a=
|
36 |
+
new g.u(a);s={M:[]};for(h={};f=a.next();){m=f.h;l=f.d;if(!h.P&&m&j.pb&&l==="linear-gradient"){n={ca:[],P:l};for(p={};f=a.next();){m=f.h;l=f.d;if(m&j.ob&&l===")"){p.color&&n.ca.push(p);n.ca.length>1&&g.p.fb(h,n);break}if(m&k){if(n.Xa||n.bb){f=a.z();if(f.h!==d)break;a.next()}p={color:g.pa(l)};f=a.next();if(f.Y())p.Fb=g.k(f.d);else a.z()}else if(m&j.xa&&!n.Xa&&!p.color&&!n.ca.length)n.Xa=new g.Rb(f.d);else if(b(f)&&!n.bb&&!p.color&&!n.ca.length){a.z();n.bb=new g.Na(a.da(function(u){return!b(u)},false))}else if(m&
|
37 |
+
d&&l===","){if(p.color){n.ca.push(p);p={}}}else break}}else if(!h.P&&m&j.URL){h.Cb=l;h.P="image"}else if(b(f)&&!h.size){a.z();h.Ya=new g.Na(a.da(function(u){return!b(u)},false))}else if(m&i)if(l in this.Ka)h.Bb=l;else if(l in this.Nc){h.kd=l;if(l in this.rc)h.clip=l}else{if(l in this.nc)h.jd=l}else if(m&k&&!s.color)s.color=g.pa(l);else if(m&d)if(l==="/"){f=a.next();m=f.h;l=f.d;if(m&i&&l in this.Wc)h.size=l;else if(l=c(f))h.size={i:l,f:c(a.next())||a.z()&&l}}else{if(l===","&&h.P){s.M.push(h);h={}}}else return null}h.P&&
|
38 |
+
s.M.push(h)}else this.Nb(function(){var u=e.backgroundPositionX,w=e.backgroundPositionY,r=e.backgroundImage,o=e.backgroundColor;s={};if(o!=="transparent")s.color=g.pa(o);if(r!=="none")s.M=[{P:"image",Cb:(new g.u(r)).next().d,Bb:e.backgroundRepeat,Ya:new g.Na((new g.u(u+" "+w)).all())}]});return s&&(s.color||s.M&&s.M[0])?s:null},Nb:function(a){var b=this.e.runtimeStyle,c=b.backgroundImage,e=b.backgroundColor;if(c)b.backgroundImage="";if(e)b.backgroundColor="";a=a.call(this);if(c)b.backgroundImage=
|
39 |
+
c;if(e)b.backgroundColor=e;return a},qa:g.s.ma(function(){return this.$a()||this.Nb(function(){var a=this.e.currentStyle;return a.backgroundColor+" "+a.backgroundImage+" "+a.backgroundRepeat+" "+a.backgroundPositionX+" "+a.backgroundPositionY})}),$a:g.s.ma(function(){var a=this.e;return a.style[this.va]||a.currentStyle.getAttribute(this.na)}),Eb:function(){var a=0;if(g.J<7){a=this.e;a=""+(a.style[g.Sa+"PngFix"]||a.currentStyle.getAttribute(g.F+"png-fix"))==="true"}return a},g:g.s.ma(function(){return(this.$a()||
|
40 |
+
this.Eb())&&!!this.m()})});g.Xb=g.s.$({Ib:["Top","Right","Bottom","Left"],Kc:{thin:"1px",medium:"3px",thick:"5px"},ba:function(){var a={},b={},c={},e=false,f=true,h=true,j=true;this.Ob(function(){for(var d=this.e.currentStyle,i=0,k,m,l,t,n,p,s;i<4;i++){l=this.Ib[i];s=l.charAt(0).toLowerCase();k=b[s]=d["border"+l+"Style"];m=d["border"+l+"Color"];l=d["border"+l+"Width"];if(i>0){if(k!==t)h=false;if(m!==n)f=false;if(l!==p)j=false}t=k;n=m;p=l;c[s]=g.pa(m);l=a[s]=g.k(b[s]==="none"?"0":this.Kc[l]||l);if(l.a(this.e)>
|
41 |
+
0)e=true}});return e?{nb:a,Zc:b,tc:c,ed:j,uc:f,$c:h}:null},qa:g.s.ma(function(){var a=this.e,b=a.currentStyle,c;a.tagName in g.Jb&&a.offsetParent.currentStyle.borderCollapse==="collapse"||this.Ob(function(){c=b.borderWidth+"|"+b.borderStyle+"|"+b.borderColor});return c}),Ob:function(a){var b=this.e.runtimeStyle,c=b.borderWidth,e=b.borderColor;if(c)b.borderWidth="";if(e)b.borderColor="";a=a.call(this);if(c)b.borderWidth=c;if(e)b.borderColor=e;return a}});(function(){g.Oa=g.s.$({na:"border-radius",
|
42 |
+
va:"borderRadius",ba:function(b){var c=null,e,f,h,j,d=false;if(b){f=new g.u(b);var i=function(){for(var k=[],m;(h=f.next())&&h.Y();){j=g.k(h.d);m=j.vb();if(m<0)return null;if(m>0)d=true;k.push(j)}return k.length>0&&k.length<5?{tl:k[0],tr:k[1]||k[0],br:k[2]||k[0],bl:k[3]||k[1]||k[0]}:null};if(b=i()){if(h){if(h.h&g.u.ja.ha&&h.d==="/")e=i()}else e=b;if(d&&b&&e)c={x:b,y:e}}}return c}});var a=g.k("0");a={tl:a,tr:a,br:a,bl:a};g.Oa.Qb={x:a,y:a}})();g.Vb=g.s.$({na:"border-image",va:"borderImage",Ka:{stretch:1,
|
43 |
+
round:1,repeat:1,space:1},ba:function(a){var b=null,c,e,f,h,j,d,i=0,k,m=g.u.ja,l=m.fa,t=m.ga,n=m.A,p=m.Aa;if(a){c=new g.u(a);b={};for(var s=function(r){return r&&r.h&m.ha&&r.d==="/"},u=function(r){return r&&r.h&l&&r.d==="fill"},w=function(){h=c.da(function(r){return!(r.h&(t|p))});if(u(c.next())&&!b.fill)b.fill=true;else c.z();if(s(c.next())){i++;j=c.da(function(){return!(e.h&(t|p|n))&&!(e.h&l&&e.d==="auto")});if(s(c.next())){i++;d=c.da(function(){return!(e.h&(t|n))})}}else c.z()};e=c.next();){a=e.h;
|
44 |
+
f=e.d;if(a&(t|p)&&!h){c.z();w()}else if(u(e)&&!b.fill){b.fill=true;w()}else if(a&l&&this.Ka[f]&&!b.repeat){b.repeat={f:f};if(e=c.next())if(e.h&l&&this.Ka[e.d])b.repeat.kb=e.d;else c.z()}else if(a&m.URL&&!b.src)b.src=f;else return null}if(!b.src||!h||h.length<1||h.length>4||j&&j.length>4||i===1&&j.length<1||d&&d.length>4||i===2&&d.length<1)return null;if(!b.repeat)b.repeat={f:"stretch"};if(!b.repeat.kb)b.repeat.kb=b.repeat.f;a=function(r,o){return{T:o(r[0]),S:o(r[1]||r[0]),L:o(r[2]||r[0]),Q:o(r[3]||
|
45 |
+
r[1]||r[0])}};b.slice=a(h,function(r){return g.k(r.h&t?r.d+"px":r.d)});b.width=j&&j.length>0?a(j,function(r){return r.h&(n|p)?g.k(r.d):r.d}):(k=this.e.currentStyle)&&{T:g.k(k.borderTopWidth),S:g.k(k.borderRightWidth),L:g.k(k.borderBottomWidth),Q:g.k(k.borderLeftWidth)};b.ua=a(d||[0],function(r){return r.h&n?g.k(r.d):r.d})}return b}});g.Zb=g.s.$({na:"box-shadow",va:"boxShadow",ba:function(a){var b,c=g.k,e=g.u.ja,f;if(a){f=new g.u(a);b={ua:[],cb:[]};for(a=function(){for(var h,j,d,i,k,m;h=f.next();){d=
|
46 |
+
h.d;j=h.h;if(j&e.ha&&d===",")break;else if(h.db()&&!k){f.z();k=f.da(function(l){return!l.db()})}else if(j&e.ea&&!i)i=d;else if(j&e.fa&&d==="inset"&&!m)m=true;else return false}h=k&&k.length;if(h>1&&h<5){(m?b.cb:b.ua).push({fd:c(k[0].d),gd:c(k[1].d),blur:c(k[2]?k[2].d:"0"),Xc:c(k[3]?k[3].d:"0"),color:g.pa(i||"currentColor")});return true}return false};a(););}return b&&(b.cb.length||b.ua.length)?b:null}});g.ec=g.s.$({qa:g.s.ma(function(){var a=this.e.currentStyle;return a.visibility+"|"+a.display}),
|
47 |
+
ba:function(){var a=this.e,b=a.runtimeStyle;a=a.currentStyle;var c=b.visibility,e;b.visibility="";e=a.visibility;b.visibility=c;return{cd:e!=="hidden",xc:a.display!=="none"}},g:function(){return false}});g.B={Z:function(a){function b(c,e,f,h){this.e=c;this.q=e;this.j=f;this.parent=h}g.p.fb(b.prototype,g.B,a);return b},eb:false,R:function(){return false},Kb:function(){this.n();this.g()&&this.X()},jb:function(){this.eb=true},Lb:function(){this.g()?this.X():this.n()},Wa:function(a,b){this.Hb(a);for(var c=
|
48 |
+
this.ka||(this.ka=[]),e=a+1,f=c.length,h;e<f;e++)if(h=c[e])break;c[a]=b;this.w().insertBefore(b,h||null)},ra:function(a){var b=this.ka;return b&&b[a]||null},Hb:function(a){var b=this.ra(a),c=this.Ba;if(b&&c){c.removeChild(b);this.ka[a]=null}},sa:function(a,b,c,e){var f=this.Va||(this.Va={}),h=f[a];if(!h){h=f[a]=g.p.Ga("shape");if(b)h.appendChild(h[b]=g.p.Ga(b));if(e){c=this.ra(e);if(!c){this.Wa(e,doc.createElement("group"+e));c=this.ra(e)}}c.appendChild(h);a=h.style;a.position="absolute";a.left=a.top=
|
49 |
+
0;a.behavior="url(#default#VML)"}return h},Za:function(a){var b=this.Va,c=b&&b[a];if(c){c.parentNode.removeChild(c);delete b[a]}return!!c},xb:function(a){var b=this.e,c=this.q.o(),e=c.i,f=c.f,h,j,d,i,k,m;c=a.x.tl.a(b,e);h=a.y.tl.a(b,f);j=a.x.tr.a(b,e);d=a.y.tr.a(b,f);i=a.x.br.a(b,e);k=a.y.br.a(b,f);m=a.x.bl.a(b,e);a=a.y.bl.a(b,f);e=Math.min(e/(c+j),f/(d+k),e/(m+i),f/(h+a));if(e<1){c*=e;h*=e;j*=e;d*=e;i*=e;k*=e;m*=e;a*=e}return{x:{tl:c,tr:j,br:i,bl:m},y:{tl:h,tr:d,br:k,bl:a}}},oa:function(a,b,c){b=
|
50 |
+
b||1;var e,f,h=this.q.o();f=h.i*b;h=h.f*b;var j=this.j.v,d=Math.floor,i=Math.ceil,k=a?a.T*b:0,m=a?a.S*b:0,l=a?a.L*b:0;a=a?a.Q*b:0;var t,n,p,s,u;if(c||j.g()){e=this.xb(c||j.m());c=e.x.tl*b;j=e.y.tl*b;t=e.x.tr*b;n=e.y.tr*b;p=e.x.br*b;s=e.y.br*b;u=e.x.bl*b;b=e.y.bl*b;f="m"+d(a)+","+d(j)+"qy"+d(c)+","+d(k)+"l"+i(f-t)+","+d(k)+"qx"+i(f-m)+","+d(n)+"l"+i(f-m)+","+i(h-s)+"qy"+i(f-p)+","+i(h-l)+"l"+d(u)+","+i(h-l)+"qx"+d(a)+","+i(h-b)+" x e"}else f="m"+d(a)+","+d(k)+"l"+i(f-m)+","+d(k)+"l"+i(f-m)+","+i(h-
|
51 |
+
l)+"l"+d(a)+","+i(h-l)+"xe";return f},w:function(){var a=this.parent.ra(this.C),b;if(!a){a=doc.createElement(this.Fa);b=a.style;b.position="absolute";b.top=b.left=0;this.parent.Wa(this.C,a)}return a},n:function(){this.parent.Hb(this.C);delete this.Va;delete this.ka}};g.cc=g.B.Z({g:function(){var a=this.oc;for(var b in a)if(a.hasOwnProperty(b)&&a[b].g())return true;return false},R:function(){return this.j.lb.D()},jb:function(){if(this.g()){var a=this.wb(),b=a,c;a=a.currentStyle;var e=a.position,f=
|
52 |
+
this.w().style,h=0,j=0;j=this.q.o();if(e==="fixed"&&g.J>6){h=j.x;j=j.y;b=e}else{do b=b.offsetParent;while(b&&b.currentStyle.position==="static");if(b){c=b.getBoundingClientRect();b=b.currentStyle;h=j.x-c.left-(parseFloat(b.borderLeftWidth)||0);j=j.y-c.top-(parseFloat(b.borderTopWidth)||0)}else{b=doc.documentElement;h=j.x+b.scrollLeft-b.clientLeft;j=j.y+b.scrollTop-b.clientTop}b="absolute"}f.position=b;f.left=h;f.top=j;f.zIndex=e==="static"?-1:a.zIndex;this.eb=true}},Lb:function(){},Mb:function(){var a=
|
53 |
+
this.j.lb.m();this.w().style.display=a.cd&&a.xc?"":"none"},Kb:function(){this.g()?this.Mb():this.n()},wb:function(){var a=this.e;return a.tagName in g.Jb?a.offsetParent:a},w:function(){var a=this.Ba,b;if(!a){b=this.wb();a=this.Ba=doc.createElement("css3-container");a.style.direction="ltr";this.Mb();b.parentNode.insertBefore(a,b)}return a},n:function(){var a=this.Ba,b;if(a&&(b=a.parentNode))b.removeChild(a);delete this.Ba;delete this.ka}});g.Sb=g.B.Z({C:2,Fa:"background",R:function(){var a=this.j;
|
54 |
+
return a.H.D()||a.v.D()},g:function(){var a=this.j;return a.N.g()||a.v.g()||a.H.g()||a.W.g()&&a.W.m().cb},X:function(){var a=this.q.o();if(a.i&&a.f){this.yc();this.zc()}},yc:function(){var a=this.j.H.m(),b=this.q.o(),c=this.e,e=a&&a.color,f,h;if(e&&e.la()>0){this.yb();a=this.sa("bgColor","fill",this.w(),1);f=b.i;b=b.f;a.stroked=false;a.coordsize=f*2+","+b*2;a.coordorigin="1,1";a.path=this.oa(null,2);h=a.style;h.width=f;h.height=b;a.fill.color=e.O(c);c=e.la();if(c<1)a.fill.opacity=c}else this.Za("bgColor")},
|
55 |
+
zc:function(){var a=this.j.H.m(),b=this.q.o();a=a&&a.M;var c,e,f,h,j;if(a){this.yb();e=b.i;f=b.f;for(j=a.length;j--;){b=a[j];c=this.sa("bgImage"+j,"fill",this.w(),2);c.stroked=false;c.fill.type="tile";c.fillcolor="none";c.coordsize=e*2+","+f*2;c.coordorigin="1,1";c.path=this.oa(0,2);h=c.style;h.width=e;h.height=f;if(b.P==="linear-gradient")this.mc(c,b);else{c.fill.src=b.Cb;this.Pc(c,j)}}}for(j=a?a.length:0;this.Za("bgImage"+j++););},Pc:function(a,b){g.p.Pb(a.fill.src,function(c){var e=a.fill,f=this.e,
|
56 |
+
h=this.q.o(),j=h.i;h=h.f;var d=this.j,i=d.I.m(),k=i&&i.nb;i=k?k.t.a(f):0;var m=k?k.r.a(f):0,l=k?k.b.a(f):0;k=k?k.l.a(f):0;d=d.H.m().M[b];f=d.Ya?d.Ya.coords(f,j-c.i-k-m,h-c.f-i-l):{x:0,y:0};d=d.Bb;l=m=0;var t=j+1,n=h+1,p=g.J===8?0:1;k=Math.round(f.x)+k+0.5;i=Math.round(f.y)+i+0.5;e.position=k/j+","+i/h;if(d&&d!=="repeat"){if(d==="repeat-x"||d==="no-repeat"){m=i+1;n=i+c.f+p}if(d==="repeat-y"||d==="no-repeat"){l=k+1;t=k+c.i+p}a.style.clip="rect("+m+"px,"+t+"px,"+n+"px,"+l+"px)"}},this)},mc:function(a,
|
57 |
+
b){function c(B,C,z,F,H){if(z===0||z===180)return[F,C];else if(z===90||z===270)return[B,H];else{z=Math.tan(-z*t/180);B=z*B-C;C=-1/z;F=C*F-H;H=C-z;return[(F-B)/H,(z*F-C*B)/H]}}function e(){w=m>=90&&m<270?i:0;r=m<180?k:0;o=i-w;x=k-r}function f(){for(;m<0;)m+=360;m%=360}function h(B,C){var z=C[0]-B[0];B=C[1]-B[1];return Math.abs(z===0?B:B===0?z:Math.sqrt(z*z+B*B))}var j=this.e,d=this.q.o(),i=d.i,k=d.f;a=a.fill;var m=b.Xa,l=b.bb;b=b.ca;d=b.length;var t=Math.PI,n,p,s,u,w,r,o,x,q,y,A,D;if(l){l=l.coords(j,
|
58 |
+
i,k);n=l.x;p=l.y}if(m){m=m.vc();f();e();if(!l){n=w;p=r}l=c(n,p,m,o,x);s=l[0];u=l[1]}else if(l){s=i-n;u=k-p}else{n=p=s=0;u=k}l=s-n;q=u-p;if(m===void 0){m=!l?q<0?90:270:!q?l<0?180:0:-Math.atan2(q,l)/t*180;f();e()}l=m%90?Math.atan2(l*i/k,q)/t*180:m+90;l+=180;l%=360;y=h([n,p],[s,u]);s=h([w,r],c(w,r,m,o,x));u=[];p=h([n,p],c(n,p,m,w,r))/s*100;n=[];for(q=0;q<d;q++)n.push(b[q].Fb?b[q].Fb.a(j,y):q===0?0:q===d-1?y:null);for(q=1;q<d;q++){if(n[q]===null){A=n[q-1];y=q;do D=n[++y];while(D===null);n[q]=A+(D-A)/
|
59 |
+
(y-q+1)}n[q]=Math.max(n[q],n[q-1])}for(q=0;q<d;q++)u.push(p+n[q]/s*100+"% "+b[q].color.O(j));a.angle=l;a.type="gradient";a.method="sigma";a.color=b[0].color.O(j);a.color2=b[d-1].color.O(j);a.colors.value=u.join(",")},yb:function(){var a=this.e.runtimeStyle;a.backgroundImage="url(about:blank)";a.backgroundColor="transparent"},n:function(){g.B.n.call(this);var a=this.e.runtimeStyle;a.backgroundImage=a.backgroundColor=""}});g.Wb=g.B.Z({C:4,Fa:"border",qc:{TABLE:1,INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,
|
60 |
+
IMG:1,HR:1,FIELDSET:1},Jc:{submit:1,button:1,reset:1},R:function(){var a=this.j;return a.I.D()||a.v.D()},g:function(){var a=this.j;return(a.N.g()||a.v.g()||a.H.g())&&a.I.g()},X:function(){var a=this.e,b=this.j.I.m(),c=this.q.o(),e=c.i;c=c.f;var f,h,j,d,i;if(b){this.Hc();b=this.Bc(2);d=0;for(i=b.length;d<i;d++){j=b[d];f=this.sa("borderPiece"+d,j.stroke?"stroke":"fill",this.w());f.coordsize=e*2+","+c*2;f.coordorigin="1,1";f.path=j.path;h=f.style;h.width=e;h.height=c;f.filled=!!j.fill;f.stroked=!!j.stroke;
|
61 |
+
if(j.stroke){f=f.stroke;f.weight=j.mb+"px";f.color=j.color.O(a);f.dashstyle=j.stroke==="dashed"?"2 2":j.stroke==="dotted"?"1 1":"solid";f.linestyle=j.stroke==="double"&&j.mb>2?"ThinThin":"Single"}else f.fill.color=j.fill.O(a)}for(;this.Za("borderPiece"+d++););}},Hc:function(){var a=this.e,b=a.currentStyle,c=a.runtimeStyle,e=a.tagName,f=g.J===6,h;if(f&&e in this.qc||e==="BUTTON"||e==="INPUT"&&a.type in this.Jc){c.borderWidth="";e=this.j.I.Ib;for(h=e.length;h--;){f=e[h];c["padding"+f]="";c["padding"+
|
62 |
+
f]=g.k(b["padding"+f]).a(a)+g.k(b["border"+f+"Width"]).a(a)+(!g.J===8&&h%2?1:0)}c.borderWidth=0}else if(f){if(a.childNodes.length!==1||a.firstChild.tagName!=="ie6-mask"){b=doc.createElement("ie6-mask");e=b.style;e.visibility="visible";for(e.zoom=1;e=a.firstChild;)b.appendChild(e);a.appendChild(b);c.visibility="hidden"}}else c.borderColor="transparent"},Bc:function(a){var b=this.e,c,e,f,h=this.j.I,j=[],d,i,k,m,l=Math.round,t,n,p;if(h.g()){c=h.m();h=c.nb;n=c.Zc;p=c.tc;if(c.ed&&c.$c&&c.uc){if(p.t.la()>
|
63 |
+
0){c=h.t.a(b);k=c/2;j.push({path:this.oa({T:k,S:k,L:k,Q:k},a),stroke:n.t,color:p.t,mb:c})}}else{a=a||1;c=this.q.o();e=c.i;f=c.f;c=l(h.t.a(b));k=l(h.r.a(b));m=l(h.b.a(b));b=l(h.l.a(b));var s={t:c,r:k,b:m,l:b};b=this.j.v;if(b.g())t=this.xb(b.m());d=Math.floor;i=Math.ceil;var u=function(o,x){return t?t[o][x]:0},w=function(o,x,q,y,A,D){var B=u("x",o),C=u("y",o),z=o.charAt(1)==="r";o=o.charAt(0)==="b";return B>0&&C>0?(D?"al":"ae")+(z?i(e-B):d(B))*a+","+(o?i(f-C):d(C))*a+","+(d(B)-x)*a+","+(d(C)-q)*a+","+
|
64 |
+
y*65535+","+2949075*(A?1:-1):(D?"m":"l")+(z?e-x:x)*a+","+(o?f-q:q)*a},r=function(o,x,q,y){var A=o==="t"?d(u("x","tl"))*a+","+i(x)*a:o==="r"?i(e-x)*a+","+d(u("y","tr"))*a:o==="b"?i(e-u("x","br"))*a+","+d(f-x)*a:d(x)*a+","+i(f-u("y","bl"))*a;o=o==="t"?i(e-u("x","tr"))*a+","+i(x)*a:o==="r"?i(e-x)*a+","+i(f-u("y","br"))*a:o==="b"?d(u("x","bl"))*a+","+d(f-x)*a:d(x)*a+","+d(u("y","tl"))*a;return q?(y?"m"+o:"")+"l"+A:(y?"m"+A:"")+"l"+o};b=function(o,x,q,y,A,D){var B=o==="l"||o==="r",C=s[o],z,F;if(C>0&&n[o]!==
|
65 |
+
"none"&&p[o].la()>0){z=s[B?o:x];x=s[B?x:o];F=s[B?o:q];q=s[B?q:o];if(n[o]==="dashed"||n[o]==="dotted"){j.push({path:w(y,z,x,D+45,0,1)+w(y,0,0,D,1,0),fill:p[o]});j.push({path:r(o,C/2,0,1),stroke:n[o],mb:C,color:p[o]});j.push({path:w(A,F,q,D,0,1)+w(A,0,0,D-45,1,0),fill:p[o]})}else j.push({path:w(y,z,x,D+45,0,1)+r(o,C,0,0)+w(A,F,q,D,0,0)+(n[o]==="double"&&C>2?w(A,F-d(F/3),q-d(q/3),D-45,1,0)+r(o,i(C/3*2),1,0)+w(y,z-d(z/3),x-d(x/3),D,1,0)+"x "+w(y,d(z/3),d(x/3),D+45,0,1)+r(o,d(C/3),1,0)+w(A,d(F/3),d(q/
|
66 |
+
3),D,0,0):"")+w(A,0,0,D-45,1,0)+r(o,0,1,0)+w(y,0,0,D,1,0),fill:p[o]})}};b("t","l","r","tl","tr",90);b("r","t","b","tr","br",0);b("b","r","l","br","bl",-90);b("l","b","t","bl","tl",-180)}}return j},n:function(){g.B.n.call(this);this.e.runtimeStyle.borderColor=""}});g.Ub=g.B.Z({C:5,Oc:["t","tr","r","br","b","bl","l","tl","c"],R:function(){return this.j.N.D()},g:function(){return this.j.N.g()},X:function(){this.w();var a=this.j.N.m(),b=this.q.o(),c=this.e,e=this.Gb;g.p.Pb(a.src,function(f){function h(w,
|
67 |
+
r,o,x,q){w=e[w].style;var y=Math.max;w.width=y(r,0);w.height=y(o,0);w.left=x;w.top=q}function j(w,r,o){for(var x=0,q=w.length;x<q;x++)e[w[x]].imagedata[r]=o}var d=b.i,i=b.f,k=a.width,m=k.T.a(c),l=k.S.a(c),t=k.L.a(c);k=k.Q.a(c);var n=a.slice,p=n.T.a(c),s=n.S.a(c),u=n.L.a(c);n=n.Q.a(c);h("tl",k,m,0,0);h("t",d-k-l,m,k,0);h("tr",l,m,d-l,0);h("r",l,i-m-t,d-l,m);h("br",l,t,d-l,i-t);h("b",d-k-l,t,k,i-t);h("bl",k,t,0,i-t);h("l",k,i-m-t,0,m);h("c",d-k-l,i-m-t,k,m);j(["tl","t","tr"],"cropBottom",(f.f-p)/f.f);
|
68 |
+
j(["tl","l","bl"],"cropRight",(f.i-n)/f.i);j(["bl","b","br"],"cropTop",(f.f-u)/f.f);j(["tr","r","br"],"cropLeft",(f.i-s)/f.i);if(a.repeat.kb==="stretch"){j(["l","r","c"],"cropTop",p/f.f);j(["l","r","c"],"cropBottom",u/f.f)}if(a.repeat.f==="stretch"){j(["t","b","c"],"cropLeft",n/f.i);j(["t","b","c"],"cropRight",s/f.i)}e.c.style.display=a.fill?"":"none"},this)},w:function(){var a=this.parent.ra(this.C),b,c,e,f=this.Oc,h=f.length;if(!a){a=doc.createElement("border-image");b=a.style;b.position="absolute";
|
69 |
+
this.Gb={};for(e=0;e<h;e++){c=this.Gb[f[e]]=g.p.Ga("rect");c.appendChild(g.p.Ga("imagedata"));b=c.style;b.behavior="url(#default#VML)";b.position="absolute";b.top=b.left=0;c.imagedata.src=this.j.N.m().src;c.stroked=false;c.filled=false;a.appendChild(c)}this.parent.Wa(this.C,a)}return a}});g.Yb=g.B.Z({C:1,Fa:"outset-box-shadow",R:function(){var a=this.j;return a.W.D()||a.v.D()},g:function(){var a=this.j.W;return a.g()&&a.m().ua[0]},X:function(){function a(z,F,H,K,J,v,E){z=b.sa("shadow"+z+F,"fill",
|
70 |
+
e,j-z);F=z.fill;z.coordsize=m*2+","+l*2;z.coordorigin="1,1";z.stroked=false;z.filled=true;F.color=J.O(c);if(v){F.type="gradienttitle";F.color2=F.color;F.opacity=0}z.path=E;u=z.style;u.left=H;u.top=K;u.width=m;u.height=l;return z}var b=this,c=this.e,e=this.w(),f=this.j,h=f.W.m().ua;f=f.v.m();var j=h.length,d=j,i,k=this.q.o(),m=k.i,l=k.f;k=g.J===8?1:0;for(var t=["tl","tr","br","bl"],n,p,s,u,w,r,o,x,q,y,A,D,B,C;d--;){p=h[d];w=p.fd.a(c);r=p.gd.a(c);i=p.Xc.a(c);o=p.blur.a(c);p=p.color;x=-i-o;if(!f&&o)f=
|
71 |
+
g.Oa.Qb;x=this.oa({T:x,S:x,L:x,Q:x},2,f);if(o){q=(i+o)*2+m;y=(i+o)*2+l;A=o*2/q;D=o*2/y;if(o-i>m/2||o-i>l/2)for(i=4;i--;){n=t[i];B=n.charAt(0)==="b";C=n.charAt(1)==="r";n=a(d,n,w,r,p,o,x);s=n.fill;s.focusposition=(C?1-A:A)+","+(B?1-D:D);s.focussize="0,0";n.style.clip="rect("+((B?y/2:0)+k)+"px,"+(C?q:q/2)+"px,"+(B?y:y/2)+"px,"+((C?q/2:0)+k)+"px)"}else{n=a(d,"",w,r,p,o,x);s=n.fill;s.focusposition=A+","+D;s.focussize=1-A*2+","+(1-D*2)}}else{n=a(d,"",w,r,p,o,x);w=p.la();if(w<1)n.fill.opacity=w}}}});g.bc=
|
72 |
+
g.B.Z({C:6,Fa:"imgEl",R:function(){var a=this.j;return this.e.src!==this.hc||a.v.D()},g:function(){var a=this.j;return a.v.g()||a.H.Eb()},X:function(){this.hc=j;this.Gc();var a=this.sa("img","fill",this.w()),b=a.fill,c=this.q.o(),e=c.i;c=c.f;var f=this.j.I.m();f=f&&f.nb;var h=this.e,j=h.src,d=Math.round;a.stroked=false;b.type="frame";b.src=j;b.position=(e?0.5/e:0)+","+(c?0.5/c:0);a.coordsize=e*2+","+c*2;a.coordorigin="1,1";a.path=this.oa(f?{T:d(f.t.a(h)),S:d(f.r.a(h)),L:d(f.b.a(h)),Q:d(f.l.a(h))}:
|
73 |
+
0,2);a=a.style;a.width=e;a.height=c},Gc:function(){this.e.runtimeStyle.filter="alpha(opacity=0)"},n:function(){g.B.n.call(this);this.e.runtimeStyle.filter=""}});g.Qa=function(){function a(d){function i(){if(!z){var v,E,G=d.currentStyle,I=G.getAttribute(c)==="true";J=G.getAttribute(e);J=g.Ab===8?J!=="false":J==="true";if(!C){C=1;d.runtimeStyle.zoom=1;G=d;for(var O=1;G=G.previousSibling;)if(G.nodeType===1){O=0;break}if(O)d.className+=" "+g.Pa+"first-child"}y.Ja();if(I&&(E=y.o())&&(v=doc.documentElement||
|
74 |
+
doc.body)&&(E.y>v.clientHeight||E.x>v.clientWidth||E.y+E.f<0||E.x+E.i<0)){if(!H){H=1;g.Ra.aa(i)}}else{z=1;H=C=0;g.Ra.Ma(i);A={H:new g.Tb(d),I:new g.Xb(d),N:new g.Vb(d),v:new g.Oa(d),W:new g.Zb(d),lb:new g.ec(d)};D=[A.H,A.I,A.N,A.v,A.W,A.lb];v=new g.cc(d,y,A);E=[new g.Yb(d,y,A,v),new g.Sb(d,y,A,v),new g.Wb(d,y,A,v),new g.Ub(d,y,A,v)];d.tagName==="IMG"&&E.push(new g.bc(d,y,A,v));v.oc=E;q=[v].concat(E);if(v=d.currentStyle.getAttribute(g.F+"watch-ancestors")){B=[];v=parseInt(v,10);E=0;for(I=d.parentNode;I&&
|
75 |
+
(v==="NaN"||E++<v);){B.push(I);I.attachEvent("onpropertychange",u);I.attachEvent("onmouseenter",p);I.attachEvent("onmouseleave",s);I=I.parentNode}}if(J){g.ya.aa(m);g.ya.Tc()}m(1)}if(!F){F=1;d.attachEvent("onmove",k);d.attachEvent("onresize",k);d.attachEvent("onpropertychange",l);d.attachEvent("onmouseenter",p);d.attachEvent("onmouseleave",s);g.za.aa(k);g.G.aa(o)}y.La()}}function k(){y&&y.Ec()&&m()}function m(v){if(!K)if(z){var E,G;w();if(v||y.Qc()){E=0;for(G=q.length;E<G;E++)q[E].jb()}if(v||y.Vc()){E=
|
76 |
+
0;for(G=q.length;E<G;E++)q[E].Lb()}r()}else C||i()}function l(){var v,E,G;v=event;if(!K&&!(v&&v.propertyName in j))if(z){w();v=0;for(E=q.length;v<E;v++){G=q[v];G.eb||G.jb();G.R()&&G.Kb()}r()}else C||i()}function t(){if(d)d.className+=f}function n(){if(d)d.className=d.className.replace(h,"")}function p(){setTimeout(t,0)}function s(){setTimeout(n,0)}function u(){var v=event.propertyName;if(v==="className"||v==="id")l()}function w(){y.Ja();for(var v=D.length;v--;)D[v].Ja()}function r(){for(var v=D.length;v--;)D[v].La();
|
77 |
+
y.La()}function o(){if(F){if(B)for(var v=0,E=B.length,G;v<E;v++){G=B[v];G.detachEvent("onpropertychange",u);G.detachEvent("onmouseenter",p);G.detachEvent("onmouseleave",s)}d.detachEvent("onmove",m);d.detachEvent("onresize",m);d.detachEvent("onpropertychange",l);d.detachEvent("onmouseenter",p);d.detachEvent("onmouseleave",s);g.G.Ma(o);F=0}}function x(){if(!K){var v,E;o();K=1;if(q){v=0;for(E=q.length;v<E;v++)q[v].n()}J&&g.ya.Ma(m);g.za.Ma(m);q=y=A=D=B=d=null}}var q,y=new M(d),A,D,B,C,z,F,H,K,J;this.Ic=
|
78 |
+
i;this.update=m;this.n=x;this.Ac=d}var b={},c=g.F+"lazy-init",e=g.F+"poll",f=" "+g.Pa+"hover",h=new RegExp("\\b"+g.Pa+"hover\\b","g"),j={background:1,bgColor:1,display:1};a.Cc=function(d){var i=g.p.ta(d);return b[i]||(b[i]=new a(d))};a.n=function(d){d=g.p.ta(d);var i=b[d];if(i){i.n();delete b[d]}};a.wc=function(){var d=[],i;if(b){for(var k in b)if(b.hasOwnProperty(k)){i=b[k];d.push(i.Ac);i.n()}b={}}return d};return a}();g.attach=function(a){g.Ab<9&&g.Qa.Cc(a).Ic()};g.detach=function(a){g.Qa.n(a)}};
|
79 |
+
var N=window.PIE,P=element;function init(){N&&doc.media!=="print"&&N.attach(P)}function cleanup(){if(N){N.detach(P);N=P=0}}P.readyState==="complete"&&init();
|
80 |
+
</script>
|
81 |
+
</PUBLIC:COMPONENT>
|
js/PIE/PIE.js
CHANGED
@@ -1,74 +1,74 @@
|
|
1 |
-
/*
|
2 |
-
PIE: CSS3 rendering for IE
|
3 |
-
Version 1.0beta4
|
4 |
-
http://css3pie.com
|
5 |
-
Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
|
6 |
-
*/
|
7 |
-
(function(){
|
8 |
-
var doc = document;var g=window.PIE;
|
9 |
-
if(!g){g=window.PIE={F:"-pie-",Sa:"Pie",Pa:"pie_",Jb:{TD:1,TH:1}};try{doc.execCommand("BackgroundImageCache",false,true)}catch(L){}g.J=function(){for(var a=4,b=doc.createElement("div"),c=b.getElementsByTagName("i");b.innerHTML="<!--[if gt IE "+ ++a+"]><i></i><![endif]--\>",c[0];);return a}();if(g.J===6)g.F=g.F.replace(/^-/,"");g.Ab=doc.documentMode||g.J;(function(){var a,b=0,c={};g.p={Ga:function(e){if(!a){a=doc.createDocumentFragment();a.namespaces.add("css3vml","urn:schemas-microsoft-com:vml")}return a.createElement("css3vml:"+e)},
|
10 |
-
ta:function(e){return e&&e._pieId||(e._pieId=++b)},fb:function(e){var f,h,j,d,i=arguments;f=1;for(h=i.length;f<h;f++){d=i[f];for(j in d)if(d.hasOwnProperty(j))e[j]=d[j]}return e},Pb:function(e,f,h){var j=c[e],d,i;if(j)Object.prototype.toString.call(j)==="[object Array]"?j.push([f,h]):f.call(h,j);else{i=c[e]=[[f,h]];d=new Image;d.onload=function(){j=c[e]={i:d.width,f:d.height};for(var k=0,m=i.length;k<m;k++)i[k][0].call(i[k][1],j);d.onload=null};d.src=e}}}})();g.ia=function(){this.hb=[];this.Db={}};
|
11 |
-
g.ia.prototype={aa:function(a){var b=g.p.ta(a),c=this.Db,e=this.hb;if(!(b in c)){c[b]=e.length;e.push(a)}},Ma:function(a){a=g.p.ta(a);var b=this.Db;if(a&&a in b){delete this.hb[b[a]];delete b[a]}},Ia:function(){for(var a=this.hb,b=a.length;b--;)a[b]&&a[b]()}};g.ya=new g.ia;g.ya.Tc=function(){var a=this;if(!a.Uc){setInterval(function(){a.Ia()},250);a.Uc=1}};g.G=new g.ia;window.attachEvent("onbeforeunload",function(){g.G.Ia()});g.G.Ea=function(a,b,c){a.attachEvent(b,c);this.aa(function(){a.detachEvent(b,
|
12 |
-
c)})};(function(){function a(){g.za.Ia()}g.za=new g.ia;g.G.Ea(window,"onresize",a)})();(function(){function a(){g.Ra.Ia()}g.Ra=new g.ia;g.G.Ea(window,"onscroll",a);g.za.aa(a)})();(function(){function a(){c=g.Qa.wc()}function b(){if(c){for(var e=0,f=c.length;e<f;e++)g.attach(c[e]);c=0}}var c;g.G.Ea(window,"onbeforeprint",a);g.G.Ea(window,"onafterprint",b)})();g.hd=function(){function a(i){this.V=i}var b=doc.createElement("length-calc"),c=doc.documentElement,e=b.style,f={},h=["mm","cm","in","pt","pc"],
|
13 |
-
j=h.length,d={};e.position="absolute";e.top=e.left="-9999px";for(c.appendChild(b);j--;){b.style.width="100"+h[j];f[h[j]]=b.offsetWidth/100}c.removeChild(b);a.prototype={ib:/(px|em|ex|mm|cm|in|pt|pc|%)$/,vb:function(){var i=this.Lc;if(i===void 0)i=this.Lc=parseFloat(this.V);return i},ab:function(){var i=this.ad;if(!i)i=this.ad=(i=this.V.match(this.ib))&&i[0]||"px";return i},a:function(i,k){var m=this.vb(),l=this.ab();switch(l){case "px":return m;case "%":return m*(typeof k==="function"?k():k)/100;
|
14 |
-
case "em":return m*this.tb(i);case "ex":return m*this.tb(i)/2;default:return m*f[l]}},tb:function(i){var k=i.currentStyle.fontSize;if(k.indexOf("px")>0)return parseFloat(k);else{b.style.width="1em";i.appendChild(b);k=b.offsetWidth;b.parentNode===i&&i.removeChild(b);return k}}};g.k=function(i){return d[i]||(d[i]=new a(i))};return a}();g.Na=function(){function a(f){this.U=f}var b=g.k("50%"),c={top:1,center:1,bottom:1},e={left:1,center:1,right:1};a.prototype={Dc:function(){if(!this.sb){var f=this.U,
|
15 |
-
h=f.length,j=g.u,d=j.ja,i=g.k("0");d=d.fa;i=["left",i,"top",i];if(h===1){f.push(new j.Ta(d,"center"));h++}if(h===2){d&(f[0].h|f[1].h)&&f[0].d in c&&f[1].d in e&&f.push(f.shift());if(f[0].h&d)if(f[0].d==="center")i[1]=b;else i[0]=f[0].d;else if(f[0].Y())i[1]=g.k(f[0].d);if(f[1].h&d)if(f[1].d==="center")i[3]=b;else i[2]=f[1].d;else if(f[1].Y())i[3]=g.k(f[1].d)}this.sb=i}return this.sb},coords:function(f,h,j){var d=this.Dc(),i=d[1].a(f,h);f=d[3].a(f,j);return{x:d[0]==="right"?h-i:i,y:d[2]==="bottom"?
|
16 |
-
j-f:f}}};return a}();g.Rb=function(){function a(b){this.V=b}a.prototype={ib:/[a-z]+$/i,ab:function(){return this.lc||(this.lc=this.V.match(this.ib)[0].toLowerCase())},vc:function(){var b=this.fc,c;if(b===undefined){b=this.ab();c=parseFloat(this.V,10);b=this.fc=b==="deg"?c:b==="rad"?c/Math.PI*180:b==="grad"?c/400*360:b==="turn"?c*360:0}return b}};return a}();g.$b=function(){function a(c){this.V=c}var b={};a.Sc=/\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;a.gb=
|
17 |
-
{aliceblue:"F0F8FF",antiquewhite:"FAEBD7",aqua:"0FF",aquamarine:"7FFFD4",azure:"F0FFFF",beige:"F5F5DC",bisque:"FFE4C4",black:"000",blanchedalmond:"FFEBCD",blue:"00F",blueviolet:"8A2BE2",brown:"A52A2A",burlywood:"DEB887",cadetblue:"5F9EA0",chartreuse:"7FFF00",chocolate:"D2691E",coral:"FF7F50",cornflowerblue:"6495ED",cornsilk:"FFF8DC",crimson:"DC143C",cyan:"0FF",darkblue:"00008B",darkcyan:"008B8B",darkgoldenrod:"B8860B",darkgray:"A9A9A9",darkgreen:"006400",darkkhaki:"BDB76B",darkmagenta:"8B008B",darkolivegreen:"556B2F",
|
18 |
-
darkorange:"FF8C00",darkorchid:"9932CC",darkred:"8B0000",darksalmon:"E9967A",darkseagreen:"8FBC8F",darkslateblue:"483D8B",darkslategray:"2F4F4F",darkturquoise:"00CED1",darkviolet:"9400D3",deeppink:"FF1493",deepskyblue:"00BFFF",dimgray:"696969",dodgerblue:"1E90FF",firebrick:"B22222",floralwhite:"FFFAF0",forestgreen:"228B22",fuchsia:"F0F",gainsboro:"DCDCDC",ghostwhite:"F8F8FF",gold:"FFD700",goldenrod:"DAA520",gray:"808080",green:"008000",greenyellow:"ADFF2F",honeydew:"F0FFF0",hotpink:"FF69B4",indianred:"CD5C5C",
|
19 |
-
indigo:"4B0082",ivory:"FFFFF0",khaki:"F0E68C",lavender:"E6E6FA",lavenderblush:"FFF0F5",lawngreen:"7CFC00",lemonchiffon:"FFFACD",lightblue:"ADD8E6",lightcoral:"F08080",lightcyan:"E0FFFF",lightgoldenrodyellow:"FAFAD2",lightgreen:"90EE90",lightgrey:"D3D3D3",lightpink:"FFB6C1",lightsalmon:"FFA07A",lightseagreen:"20B2AA",lightskyblue:"87CEFA",lightslategray:"789",lightsteelblue:"B0C4DE",lightyellow:"FFFFE0",lime:"0F0",limegreen:"32CD32",linen:"FAF0E6",magenta:"F0F",maroon:"800000",mediumauqamarine:"66CDAA",
|
20 |
-
mediumblue:"0000CD",mediumorchid:"BA55D3",mediumpurple:"9370D8",mediumseagreen:"3CB371",mediumslateblue:"7B68EE",mediumspringgreen:"00FA9A",mediumturquoise:"48D1CC",mediumvioletred:"C71585",midnightblue:"191970",mintcream:"F5FFFA",mistyrose:"FFE4E1",moccasin:"FFE4B5",navajowhite:"FFDEAD",navy:"000080",oldlace:"FDF5E6",olive:"808000",olivedrab:"688E23",orange:"FFA500",orangered:"FF4500",orchid:"DA70D6",palegoldenrod:"EEE8AA",palegreen:"98FB98",paleturquoise:"AFEEEE",palevioletred:"D87093",papayawhip:"FFEFD5",
|
21 |
-
peachpuff:"FFDAB9",peru:"CD853F",pink:"FFC0CB",plum:"DDA0DD",powderblue:"B0E0E6",purple:"800080",red:"F00",rosybrown:"BC8F8F",royalblue:"4169E1",saddlebrown:"8B4513",salmon:"FA8072",sandybrown:"F4A460",seagreen:"2E8B57",seashell:"FFF5EE",sienna:"A0522D",silver:"C0C0C0",skyblue:"87CEEB",slateblue:"6A5ACD",slategray:"708090",snow:"FFFAFA",springgreen:"00FF7F",steelblue:"4682B4",tan:"D2B48C",teal:"008080",thistle:"D8BFD8",tomato:"FF6347",turquoise:"40E0D0",violet:"EE82EE",wheat:"F5DEB3",white:"FFF",
|
22 |
-
whitesmoke:"F5F5F5",yellow:"FF0",yellowgreen:"9ACD32"};a.prototype={parse:function(){if(!this.Ca){var c=this.V,e;if(e=c.match(a.Sc)){this.Ca="rgb("+e[1]+","+e[2]+","+e[3]+")";this.qb=parseFloat(e[4])}else{if((e=c.toLowerCase())in a.gb)c="#"+a.gb[e];this.Ca=c;this.qb=c==="transparent"?0:1}}},O:function(c){this.parse();return this.Ca==="currentColor"?c.currentStyle.color:this.Ca},la:function(){this.parse();return this.qb}};g.pa=function(c){return b[c]||(b[c]=new a(c))};return a}();g.u=function(){function a(c){this.Ha=
|
23 |
-
c;this.ch=0;this.U=[];this.wa=0}var b=a.ja={xa:1,ob:2,ea:4,ac:8,pb:16,fa:32,A:64,ga:128,ha:256,Aa:512,dc:1024,URL:2048};a.Ta=function(c,e){this.h=c;this.d=e};a.Ta.prototype={db:function(){return this.h&b.A||this.h&b.ga&&this.d==="0"},Y:function(){return this.db()||this.h&b.Aa}};a.prototype={dd:/\s/,Mc:/^[\+\-]?(\d*\.)?\d+/,url:/^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,zb:/^\-?[_a-z][\w-]*/i,Yc:/^("([^"]*)"|'([^']*)')/,Fc:/^#([\da-f]{6}|[\da-f]{3})/i,bd:{px:b.A,em:b.A,ex:b.A,mm:b.A,cm:b.A,
|
24 |
-
"in":b.A,pt:b.A,pc:b.A,deg:b.xa,rad:b.xa,grad:b.xa},sc:{rgb:1,rgba:1,hsl:1,hsla:1},next:function(c){function e(t,n){t=new a.Ta(t,n);if(!c){k.U.push(t);k.wa++}return t}function f(){k.wa++;return null}var h,j,d,i,k=this;if(this.wa<this.U.length)return this.U[this.wa++];for(;this.dd.test(this.Ha.charAt(this.ch));)this.ch++;if(this.ch>=this.Ha.length)return f();j=this.ch;h=this.Ha.substring(this.ch);d=h.charAt(0);switch(d){case "#":if(i=h.match(this.Fc)){this.ch+=i[0].length;return e(b.ea,i[0])}break;
|
25 |
-
case '"':case "'":if(i=h.match(this.Yc)){this.ch+=i[0].length;return e(b.dc,i[2]||i[3]||"")}break;case "/":case ",":this.ch++;return e(b.ha,d);case "u":if(i=h.match(this.url)){this.ch+=i[0].length;return e(b.URL,i[2]||i[3]||i[4]||"")}}if(i=h.match(this.Mc)){d=i[0];this.ch+=d.length;if(h.charAt(d.length)==="%"){this.ch++;return e(b.Aa,d+"%")}if(i=h.substring(d.length).match(this.zb)){d+=i[0];this.ch+=i[0].length;return e(this.bd[i[0].toLowerCase()]||b.ac,d)}return e(b.ga,d)}if(i=h.match(this.zb)){d=
|
26 |
-
i[0];this.ch+=d.length;if(d.toLowerCase()in g.$b.gb||d==="currentColor")return e(b.ea,d);if(h.charAt(d.length)==="("){this.ch++;if(d.toLowerCase()in this.sc){h=function(t){return t&&t.h&b.ga};i=function(t){return t&&t.h&(b.ga|b.Aa)};var m=function(t,n){return t&&t.d===n},l=function(){return k.next(1)};if((d.charAt(0)==="r"?i(l()):h(l()))&&m(l(),",")&&i(l())&&m(l(),",")&&i(l())&&(d==="rgb"||d==="hsa"||m(l(),",")&&h(l()))&&m(l(),")"))return e(b.ea,this.Ha.substring(j,this.ch));return f()}return e(b.pb,
|
27 |
-
d)}return e(b.fa,d)}this.ch++;return e(b.ob,d)},z:function(){return this.U[this.wa-- -2]},all:function(){for(;this.next(););return this.U},da:function(c,e){for(var f=[],h,j;h=this.next();){if(c(h)){j=true;this.z();break}f.push(h)}return e&&!j?null:f}};return a}();var M=function(a){this.e=a};M.prototype={K:0,Qc:function(){var a=this.Ua,b;return!a||(b=this.o())&&(a.x!==b.x||a.y!==b.y)},Vc:function(){var a=this.Ua,b;return!a||(b=this.o())&&(a.i!==b.i||a.f!==b.f)},ub:function(){var a=this.e.getBoundingClientRect();
|
28 |
-
return{x:a.left,y:a.top,i:a.right-a.left,f:a.bottom-a.top}},o:function(){return this.K?this.Da||(this.Da=this.ub()):this.ub()},Ec:function(){return!!this.Ua},Ja:function(){++this.K},La:function(){if(!--this.K){if(this.Da)this.Ua=this.Da;this.Da=null}}};(function(){function a(b){var c=g.p.ta(b);return function(){if(this.K){var e=this.rb||(this.rb={});return c in e?e[c]:(e[c]=b.call(this))}else return b.call(this)}}g.s={K:0,$:function(b){function c(e){this.e=e}g.p.fb(c.prototype,g.s,b);c.kc={};return c},
|
29 |
-
m:function(){var b=this.qa(),c=this.constructor.kc;return b?b in c?c[b]:(c[b]=this.ba(b)):null},qa:a(function(){var b=this.e,c=this.constructor,e=b.style;b=b.currentStyle;var f=this.na,h=this.va,j=c.ic||(c.ic=g.F+f);c=c.jc||(c.jc=g.Sa+h.charAt(0).toUpperCase()+h.substring(1));return e[c]||b.getAttribute(j)||e[h]||b.getAttribute(f)}),g:a(function(){return!!this.m()}),D:a(function(){var b=this.qa(),c=b!==this.gc;this.gc=b;return c}),ma:a,Ja:function(){++this.K},La:function(){--this.K||delete this.rb}}})();
|
30 |
-
g.Tb=g.s.$({na:g.F+"background",va:g.Sa+"Background",nc:{scroll:1,fixed:1,local:1},Ka:{"repeat-x":1,"repeat-y":1,repeat:1,"no-repeat":1},Nc:{"padding-box":1,"border-box":1,"content-box":1},rc:{"padding-box":1,"border-box":1},Rc:{top:1,right:1,bottom:1,left:1,center:1},Wc:{contain:1,cover:1},ba:function(a){function b(u){return u.Y()||u.h&i&&u.d in t}function c(u){return u.Y()&&g.k(u.d)||u.d==="auto"&&"auto"}var e=this.e.currentStyle,f,h,j=g.u.ja,d=j.ha,i=j.fa,k=j.ea,m,l,t=this.Rc,n,p,s=null;if(this.$a()){a=
|
31 |
-
new g.u(a);s={M:[]};for(h={};f=a.next();){m=f.h;l=f.d;if(!h.P&&m&j.pb&&l==="linear-gradient"){n={ca:[],P:l};for(p={};f=a.next();){m=f.h;l=f.d;if(m&j.ob&&l===")"){p.color&&n.ca.push(p);n.ca.length>1&&g.p.fb(h,n);break}if(m&k){if(n.Xa||n.bb){f=a.z();if(f.h!==d)break;a.next()}p={color:g.pa(l)};f=a.next();if(f.Y())p.Fb=g.k(f.d);else a.z()}else if(m&j.xa&&!n.Xa&&!p.color&&!n.ca.length)n.Xa=new g.Rb(f.d);else if(b(f)&&!n.bb&&!p.color&&!n.ca.length){a.z();n.bb=new g.Na(a.da(function(u){return!b(u)},false))}else if(m&
|
32 |
-
d&&l===","){if(p.color){n.ca.push(p);p={}}}else break}}else if(!h.P&&m&j.URL){h.Cb=l;h.P="image"}else if(b(f)&&!h.size){a.z();h.Ya=new g.Na(a.da(function(u){return!b(u)},false))}else if(m&i)if(l in this.Ka)h.Bb=l;else if(l in this.Nc){h.kd=l;if(l in this.rc)h.clip=l}else{if(l in this.nc)h.jd=l}else if(m&k&&!s.color)s.color=g.pa(l);else if(m&d)if(l==="/"){f=a.next();m=f.h;l=f.d;if(m&i&&l in this.Wc)h.size=l;else if(l=c(f))h.size={i:l,f:c(a.next())||a.z()&&l}}else{if(l===","&&h.P){s.M.push(h);h={}}}else return null}h.P&&
|
33 |
-
s.M.push(h)}else this.Nb(function(){var u=e.backgroundPositionX,w=e.backgroundPositionY,r=e.backgroundImage,o=e.backgroundColor;s={};if(o!=="transparent")s.color=g.pa(o);if(r!=="none")s.M=[{P:"image",Cb:(new g.u(r)).next().d,Bb:e.backgroundRepeat,Ya:new g.Na((new g.u(u+" "+w)).all())}]});return s&&(s.color||s.M&&s.M[0])?s:null},Nb:function(a){var b=this.e.runtimeStyle,c=b.backgroundImage,e=b.backgroundColor;if(c)b.backgroundImage="";if(e)b.backgroundColor="";a=a.call(this);if(c)b.backgroundImage=
|
34 |
-
c;if(e)b.backgroundColor=e;return a},qa:g.s.ma(function(){return this.$a()||this.Nb(function(){var a=this.e.currentStyle;return a.backgroundColor+" "+a.backgroundImage+" "+a.backgroundRepeat+" "+a.backgroundPositionX+" "+a.backgroundPositionY})}),$a:g.s.ma(function(){var a=this.e;return a.style[this.va]||a.currentStyle.getAttribute(this.na)}),Eb:function(){var a=0;if(g.J<7){a=this.e;a=""+(a.style[g.Sa+"PngFix"]||a.currentStyle.getAttribute(g.F+"png-fix"))==="true"}return a},g:g.s.ma(function(){return(this.$a()||
|
35 |
-
this.Eb())&&!!this.m()})});g.Xb=g.s.$({Ib:["Top","Right","Bottom","Left"],Kc:{thin:"1px",medium:"3px",thick:"5px"},ba:function(){var a={},b={},c={},e=false,f=true,h=true,j=true;this.Ob(function(){for(var d=this.e.currentStyle,i=0,k,m,l,t,n,p,s;i<4;i++){l=this.Ib[i];s=l.charAt(0).toLowerCase();k=b[s]=d["border"+l+"Style"];m=d["border"+l+"Color"];l=d["border"+l+"Width"];if(i>0){if(k!==t)h=false;if(m!==n)f=false;if(l!==p)j=false}t=k;n=m;p=l;c[s]=g.pa(m);l=a[s]=g.k(b[s]==="none"?"0":this.Kc[l]||l);if(l.a(this.e)>
|
36 |
-
0)e=true}});return e?{nb:a,Zc:b,tc:c,ed:j,uc:f,$c:h}:null},qa:g.s.ma(function(){var a=this.e,b=a.currentStyle,c;a.tagName in g.Jb&&a.offsetParent.currentStyle.borderCollapse==="collapse"||this.Ob(function(){c=b.borderWidth+"|"+b.borderStyle+"|"+b.borderColor});return c}),Ob:function(a){var b=this.e.runtimeStyle,c=b.borderWidth,e=b.borderColor;if(c)b.borderWidth="";if(e)b.borderColor="";a=a.call(this);if(c)b.borderWidth=c;if(e)b.borderColor=e;return a}});(function(){g.Oa=g.s.$({na:"border-radius",
|
37 |
-
va:"borderRadius",ba:function(b){var c=null,e,f,h,j,d=false;if(b){f=new g.u(b);var i=function(){for(var k=[],m;(h=f.next())&&h.Y();){j=g.k(h.d);m=j.vb();if(m<0)return null;if(m>0)d=true;k.push(j)}return k.length>0&&k.length<5?{tl:k[0],tr:k[1]||k[0],br:k[2]||k[0],bl:k[3]||k[1]||k[0]}:null};if(b=i()){if(h){if(h.h&g.u.ja.ha&&h.d==="/")e=i()}else e=b;if(d&&b&&e)c={x:b,y:e}}}return c}});var a=g.k("0");a={tl:a,tr:a,br:a,bl:a};g.Oa.Qb={x:a,y:a}})();g.Vb=g.s.$({na:"border-image",va:"borderImage",Ka:{stretch:1,
|
38 |
-
round:1,repeat:1,space:1},ba:function(a){var b=null,c,e,f,h,j,d,i=0,k,m=g.u.ja,l=m.fa,t=m.ga,n=m.A,p=m.Aa;if(a){c=new g.u(a);b={};for(var s=function(r){return r&&r.h&m.ha&&r.d==="/"},u=function(r){return r&&r.h&l&&r.d==="fill"},w=function(){h=c.da(function(r){return!(r.h&(t|p))});if(u(c.next())&&!b.fill)b.fill=true;else c.z();if(s(c.next())){i++;j=c.da(function(){return!(e.h&(t|p|n))&&!(e.h&l&&e.d==="auto")});if(s(c.next())){i++;d=c.da(function(){return!(e.h&(t|n))})}}else c.z()};e=c.next();){a=e.h;
|
39 |
-
f=e.d;if(a&(t|p)&&!h){c.z();w()}else if(u(e)&&!b.fill){b.fill=true;w()}else if(a&l&&this.Ka[f]&&!b.repeat){b.repeat={f:f};if(e=c.next())if(e.h&l&&this.Ka[e.d])b.repeat.kb=e.d;else c.z()}else if(a&m.URL&&!b.src)b.src=f;else return null}if(!b.src||!h||h.length<1||h.length>4||j&&j.length>4||i===1&&j.length<1||d&&d.length>4||i===2&&d.length<1)return null;if(!b.repeat)b.repeat={f:"stretch"};if(!b.repeat.kb)b.repeat.kb=b.repeat.f;a=function(r,o){return{T:o(r[0]),S:o(r[1]||r[0]),L:o(r[2]||r[0]),Q:o(r[3]||
|
40 |
-
r[1]||r[0])}};b.slice=a(h,function(r){return g.k(r.h&t?r.d+"px":r.d)});b.width=j&&j.length>0?a(j,function(r){return r.h&(n|p)?g.k(r.d):r.d}):(k=this.e.currentStyle)&&{T:g.k(k.borderTopWidth),S:g.k(k.borderRightWidth),L:g.k(k.borderBottomWidth),Q:g.k(k.borderLeftWidth)};b.ua=a(d||[0],function(r){return r.h&n?g.k(r.d):r.d})}return b}});g.Zb=g.s.$({na:"box-shadow",va:"boxShadow",ba:function(a){var b,c=g.k,e=g.u.ja,f;if(a){f=new g.u(a);b={ua:[],cb:[]};for(a=function(){for(var h,j,d,i,k,m;h=f.next();){d=
|
41 |
-
h.d;j=h.h;if(j&e.ha&&d===",")break;else if(h.db()&&!k){f.z();k=f.da(function(l){return!l.db()})}else if(j&e.ea&&!i)i=d;else if(j&e.fa&&d==="inset"&&!m)m=true;else return false}h=k&&k.length;if(h>1&&h<5){(m?b.cb:b.ua).push({fd:c(k[0].d),gd:c(k[1].d),blur:c(k[2]?k[2].d:"0"),Xc:c(k[3]?k[3].d:"0"),color:g.pa(i||"currentColor")});return true}return false};a(););}return b&&(b.cb.length||b.ua.length)?b:null}});g.ec=g.s.$({qa:g.s.ma(function(){var a=this.e.currentStyle;return a.visibility+"|"+a.display}),
|
42 |
-
ba:function(){var a=this.e,b=a.runtimeStyle;a=a.currentStyle;var c=b.visibility,e;b.visibility="";e=a.visibility;b.visibility=c;return{cd:e!=="hidden",xc:a.display!=="none"}},g:function(){return false}});g.B={Z:function(a){function b(c,e,f,h){this.e=c;this.q=e;this.j=f;this.parent=h}g.p.fb(b.prototype,g.B,a);return b},eb:false,R:function(){return false},Kb:function(){this.n();this.g()&&this.X()},jb:function(){this.eb=true},Lb:function(){this.g()?this.X():this.n()},Wa:function(a,b){this.Hb(a);for(var c=
|
43 |
-
this.ka||(this.ka=[]),e=a+1,f=c.length,h;e<f;e++)if(h=c[e])break;c[a]=b;this.w().insertBefore(b,h||null)},ra:function(a){var b=this.ka;return b&&b[a]||null},Hb:function(a){var b=this.ra(a),c=this.Ba;if(b&&c){c.removeChild(b);this.ka[a]=null}},sa:function(a,b,c,e){var f=this.Va||(this.Va={}),h=f[a];if(!h){h=f[a]=g.p.Ga("shape");if(b)h.appendChild(h[b]=g.p.Ga(b));if(e){c=this.ra(e);if(!c){this.Wa(e,doc.createElement("group"+e));c=this.ra(e)}}c.appendChild(h);a=h.style;a.position="absolute";a.left=a.top=
|
44 |
-
0;a.behavior="url(#default#VML)"}return h},Za:function(a){var b=this.Va,c=b&&b[a];if(c){c.parentNode.removeChild(c);delete b[a]}return!!c},xb:function(a){var b=this.e,c=this.q.o(),e=c.i,f=c.f,h,j,d,i,k,m;c=a.x.tl.a(b,e);h=a.y.tl.a(b,f);j=a.x.tr.a(b,e);d=a.y.tr.a(b,f);i=a.x.br.a(b,e);k=a.y.br.a(b,f);m=a.x.bl.a(b,e);a=a.y.bl.a(b,f);e=Math.min(e/(c+j),f/(d+k),e/(m+i),f/(h+a));if(e<1){c*=e;h*=e;j*=e;d*=e;i*=e;k*=e;m*=e;a*=e}return{x:{tl:c,tr:j,br:i,bl:m},y:{tl:h,tr:d,br:k,bl:a}}},oa:function(a,b,c){b=
|
45 |
-
b||1;var e,f,h=this.q.o();f=h.i*b;h=h.f*b;var j=this.j.v,d=Math.floor,i=Math.ceil,k=a?a.T*b:0,m=a?a.S*b:0,l=a?a.L*b:0;a=a?a.Q*b:0;var t,n,p,s,u;if(c||j.g()){e=this.xb(c||j.m());c=e.x.tl*b;j=e.y.tl*b;t=e.x.tr*b;n=e.y.tr*b;p=e.x.br*b;s=e.y.br*b;u=e.x.bl*b;b=e.y.bl*b;f="m"+d(a)+","+d(j)+"qy"+d(c)+","+d(k)+"l"+i(f-t)+","+d(k)+"qx"+i(f-m)+","+d(n)+"l"+i(f-m)+","+i(h-s)+"qy"+i(f-p)+","+i(h-l)+"l"+d(u)+","+i(h-l)+"qx"+d(a)+","+i(h-b)+" x e"}else f="m"+d(a)+","+d(k)+"l"+i(f-m)+","+d(k)+"l"+i(f-m)+","+i(h-
|
46 |
-
l)+"l"+d(a)+","+i(h-l)+"xe";return f},w:function(){var a=this.parent.ra(this.C),b;if(!a){a=doc.createElement(this.Fa);b=a.style;b.position="absolute";b.top=b.left=0;this.parent.Wa(this.C,a)}return a},n:function(){this.parent.Hb(this.C);delete this.Va;delete this.ka}};g.cc=g.B.Z({g:function(){var a=this.oc;for(var b in a)if(a.hasOwnProperty(b)&&a[b].g())return true;return false},R:function(){return this.j.lb.D()},jb:function(){if(this.g()){var a=this.wb(),b=a,c;a=a.currentStyle;var e=a.position,f=
|
47 |
-
this.w().style,h=0,j=0;j=this.q.o();if(e==="fixed"&&g.J>6){h=j.x;j=j.y;b=e}else{do b=b.offsetParent;while(b&&b.currentStyle.position==="static");if(b){c=b.getBoundingClientRect();b=b.currentStyle;h=j.x-c.left-(parseFloat(b.borderLeftWidth)||0);j=j.y-c.top-(parseFloat(b.borderTopWidth)||0)}else{b=doc.documentElement;h=j.x+b.scrollLeft-b.clientLeft;j=j.y+b.scrollTop-b.clientTop}b="absolute"}f.position=b;f.left=h;f.top=j;f.zIndex=e==="static"?-1:a.zIndex;this.eb=true}},Lb:function(){},Mb:function(){var a=
|
48 |
-
this.j.lb.m();this.w().style.display=a.cd&&a.xc?"":"none"},Kb:function(){this.g()?this.Mb():this.n()},wb:function(){var a=this.e;return a.tagName in g.Jb?a.offsetParent:a},w:function(){var a=this.Ba,b;if(!a){b=this.wb();a=this.Ba=doc.createElement("css3-container");a.style.direction="ltr";this.Mb();b.parentNode.insertBefore(a,b)}return a},n:function(){var a=this.Ba,b;if(a&&(b=a.parentNode))b.removeChild(a);delete this.Ba;delete this.ka}});g.Sb=g.B.Z({C:2,Fa:"background",R:function(){var a=this.j;
|
49 |
-
return a.H.D()||a.v.D()},g:function(){var a=this.j;return a.N.g()||a.v.g()||a.H.g()||a.W.g()&&a.W.m().cb},X:function(){var a=this.q.o();if(a.i&&a.f){this.yc();this.zc()}},yc:function(){var a=this.j.H.m(),b=this.q.o(),c=this.e,e=a&&a.color,f,h;if(e&&e.la()>0){this.yb();a=this.sa("bgColor","fill",this.w(),1);f=b.i;b=b.f;a.stroked=false;a.coordsize=f*2+","+b*2;a.coordorigin="1,1";a.path=this.oa(null,2);h=a.style;h.width=f;h.height=b;a.fill.color=e.O(c);c=e.la();if(c<1)a.fill.opacity=c}else this.Za("bgColor")},
|
50 |
-
zc:function(){var a=this.j.H.m(),b=this.q.o();a=a&&a.M;var c,e,f,h,j;if(a){this.yb();e=b.i;f=b.f;for(j=a.length;j--;){b=a[j];c=this.sa("bgImage"+j,"fill",this.w(),2);c.stroked=false;c.fill.type="tile";c.fillcolor="none";c.coordsize=e*2+","+f*2;c.coordorigin="1,1";c.path=this.oa(0,2);h=c.style;h.width=e;h.height=f;if(b.P==="linear-gradient")this.mc(c,b);else{c.fill.src=b.Cb;this.Pc(c,j)}}}for(j=a?a.length:0;this.Za("bgImage"+j++););},Pc:function(a,b){g.p.Pb(a.fill.src,function(c){var e=a.fill,f=this.e,
|
51 |
-
h=this.q.o(),j=h.i;h=h.f;var d=this.j,i=d.I.m(),k=i&&i.nb;i=k?k.t.a(f):0;var m=k?k.r.a(f):0,l=k?k.b.a(f):0;k=k?k.l.a(f):0;d=d.H.m().M[b];f=d.Ya?d.Ya.coords(f,j-c.i-k-m,h-c.f-i-l):{x:0,y:0};d=d.Bb;l=m=0;var t=j+1,n=h+1,p=g.J===8?0:1;k=Math.round(f.x)+k+0.5;i=Math.round(f.y)+i+0.5;e.position=k/j+","+i/h;if(d&&d!=="repeat"){if(d==="repeat-x"||d==="no-repeat"){m=i+1;n=i+c.f+p}if(d==="repeat-y"||d==="no-repeat"){l=k+1;t=k+c.i+p}a.style.clip="rect("+m+"px,"+t+"px,"+n+"px,"+l+"px)"}},this)},mc:function(a,
|
52 |
-
b){function c(B,C,z,F,H){if(z===0||z===180)return[F,C];else if(z===90||z===270)return[B,H];else{z=Math.tan(-z*t/180);B=z*B-C;C=-1/z;F=C*F-H;H=C-z;return[(F-B)/H,(z*F-C*B)/H]}}function e(){w=m>=90&&m<270?i:0;r=m<180?k:0;o=i-w;x=k-r}function f(){for(;m<0;)m+=360;m%=360}function h(B,C){var z=C[0]-B[0];B=C[1]-B[1];return Math.abs(z===0?B:B===0?z:Math.sqrt(z*z+B*B))}var j=this.e,d=this.q.o(),i=d.i,k=d.f;a=a.fill;var m=b.Xa,l=b.bb;b=b.ca;d=b.length;var t=Math.PI,n,p,s,u,w,r,o,x,q,y,A,D;if(l){l=l.coords(j,
|
53 |
-
i,k);n=l.x;p=l.y}if(m){m=m.vc();f();e();if(!l){n=w;p=r}l=c(n,p,m,o,x);s=l[0];u=l[1]}else if(l){s=i-n;u=k-p}else{n=p=s=0;u=k}l=s-n;q=u-p;if(m===void 0){m=!l?q<0?90:270:!q?l<0?180:0:-Math.atan2(q,l)/t*180;f();e()}l=m%90?Math.atan2(l*i/k,q)/t*180:m+90;l+=180;l%=360;y=h([n,p],[s,u]);s=h([w,r],c(w,r,m,o,x));u=[];p=h([n,p],c(n,p,m,w,r))/s*100;n=[];for(q=0;q<d;q++)n.push(b[q].Fb?b[q].Fb.a(j,y):q===0?0:q===d-1?y:null);for(q=1;q<d;q++){if(n[q]===null){A=n[q-1];y=q;do D=n[++y];while(D===null);n[q]=A+(D-A)/
|
54 |
-
(y-q+1)}n[q]=Math.max(n[q],n[q-1])}for(q=0;q<d;q++)u.push(p+n[q]/s*100+"% "+b[q].color.O(j));a.angle=l;a.type="gradient";a.method="sigma";a.color=b[0].color.O(j);a.color2=b[d-1].color.O(j);a.colors.value=u.join(",")},yb:function(){var a=this.e.runtimeStyle;a.backgroundImage="url(about:blank)";a.backgroundColor="transparent"},n:function(){g.B.n.call(this);var a=this.e.runtimeStyle;a.backgroundImage=a.backgroundColor=""}});g.Wb=g.B.Z({C:4,Fa:"border",qc:{TABLE:1,INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,
|
55 |
-
IMG:1,HR:1,FIELDSET:1},Jc:{submit:1,button:1,reset:1},R:function(){var a=this.j;return a.I.D()||a.v.D()},g:function(){var a=this.j;return(a.N.g()||a.v.g()||a.H.g())&&a.I.g()},X:function(){var a=this.e,b=this.j.I.m(),c=this.q.o(),e=c.i;c=c.f;var f,h,j,d,i;if(b){this.Hc();b=this.Bc(2);d=0;for(i=b.length;d<i;d++){j=b[d];f=this.sa("borderPiece"+d,j.stroke?"stroke":"fill",this.w());f.coordsize=e*2+","+c*2;f.coordorigin="1,1";f.path=j.path;h=f.style;h.width=e;h.height=c;f.filled=!!j.fill;f.stroked=!!j.stroke;
|
56 |
-
if(j.stroke){f=f.stroke;f.weight=j.mb+"px";f.color=j.color.O(a);f.dashstyle=j.stroke==="dashed"?"2 2":j.stroke==="dotted"?"1 1":"solid";f.linestyle=j.stroke==="double"&&j.mb>2?"ThinThin":"Single"}else f.fill.color=j.fill.O(a)}for(;this.Za("borderPiece"+d++););}},Hc:function(){var a=this.e,b=a.currentStyle,c=a.runtimeStyle,e=a.tagName,f=g.J===6,h;if(f&&e in this.qc||e==="BUTTON"||e==="INPUT"&&a.type in this.Jc){c.borderWidth="";e=this.j.I.Ib;for(h=e.length;h--;){f=e[h];c["padding"+f]="";c["padding"+
|
57 |
-
f]=g.k(b["padding"+f]).a(a)+g.k(b["border"+f+"Width"]).a(a)+(!g.J===8&&h%2?1:0)}c.borderWidth=0}else if(f){if(a.childNodes.length!==1||a.firstChild.tagName!=="ie6-mask"){b=doc.createElement("ie6-mask");e=b.style;e.visibility="visible";for(e.zoom=1;e=a.firstChild;)b.appendChild(e);a.appendChild(b);c.visibility="hidden"}}else c.borderColor="transparent"},Bc:function(a){var b=this.e,c,e,f,h=this.j.I,j=[],d,i,k,m,l=Math.round,t,n,p;if(h.g()){c=h.m();h=c.nb;n=c.Zc;p=c.tc;if(c.ed&&c.$c&&c.uc){if(p.t.la()>
|
58 |
-
0){c=h.t.a(b);k=c/2;j.push({path:this.oa({T:k,S:k,L:k,Q:k},a),stroke:n.t,color:p.t,mb:c})}}else{a=a||1;c=this.q.o();e=c.i;f=c.f;c=l(h.t.a(b));k=l(h.r.a(b));m=l(h.b.a(b));b=l(h.l.a(b));var s={t:c,r:k,b:m,l:b};b=this.j.v;if(b.g())t=this.xb(b.m());d=Math.floor;i=Math.ceil;var u=function(o,x){return t?t[o][x]:0},w=function(o,x,q,y,A,D){var B=u("x",o),C=u("y",o),z=o.charAt(1)==="r";o=o.charAt(0)==="b";return B>0&&C>0?(D?"al":"ae")+(z?i(e-B):d(B))*a+","+(o?i(f-C):d(C))*a+","+(d(B)-x)*a+","+(d(C)-q)*a+","+
|
59 |
-
y*65535+","+2949075*(A?1:-1):(D?"m":"l")+(z?e-x:x)*a+","+(o?f-q:q)*a},r=function(o,x,q,y){var A=o==="t"?d(u("x","tl"))*a+","+i(x)*a:o==="r"?i(e-x)*a+","+d(u("y","tr"))*a:o==="b"?i(e-u("x","br"))*a+","+d(f-x)*a:d(x)*a+","+i(f-u("y","bl"))*a;o=o==="t"?i(e-u("x","tr"))*a+","+i(x)*a:o==="r"?i(e-x)*a+","+i(f-u("y","br"))*a:o==="b"?d(u("x","bl"))*a+","+d(f-x)*a:d(x)*a+","+d(u("y","tl"))*a;return q?(y?"m"+o:"")+"l"+A:(y?"m"+A:"")+"l"+o};b=function(o,x,q,y,A,D){var B=o==="l"||o==="r",C=s[o],z,F;if(C>0&&n[o]!==
|
60 |
-
"none"&&p[o].la()>0){z=s[B?o:x];x=s[B?x:o];F=s[B?o:q];q=s[B?q:o];if(n[o]==="dashed"||n[o]==="dotted"){j.push({path:w(y,z,x,D+45,0,1)+w(y,0,0,D,1,0),fill:p[o]});j.push({path:r(o,C/2,0,1),stroke:n[o],mb:C,color:p[o]});j.push({path:w(A,F,q,D,0,1)+w(A,0,0,D-45,1,0),fill:p[o]})}else j.push({path:w(y,z,x,D+45,0,1)+r(o,C,0,0)+w(A,F,q,D,0,0)+(n[o]==="double"&&C>2?w(A,F-d(F/3),q-d(q/3),D-45,1,0)+r(o,i(C/3*2),1,0)+w(y,z-d(z/3),x-d(x/3),D,1,0)+"x "+w(y,d(z/3),d(x/3),D+45,0,1)+r(o,d(C/3),1,0)+w(A,d(F/3),d(q/
|
61 |
-
3),D,0,0):"")+w(A,0,0,D-45,1,0)+r(o,0,1,0)+w(y,0,0,D,1,0),fill:p[o]})}};b("t","l","r","tl","tr",90);b("r","t","b","tr","br",0);b("b","r","l","br","bl",-90);b("l","b","t","bl","tl",-180)}}return j},n:function(){g.B.n.call(this);this.e.runtimeStyle.borderColor=""}});g.Ub=g.B.Z({C:5,Oc:["t","tr","r","br","b","bl","l","tl","c"],R:function(){return this.j.N.D()},g:function(){return this.j.N.g()},X:function(){this.w();var a=this.j.N.m(),b=this.q.o(),c=this.e,e=this.Gb;g.p.Pb(a.src,function(f){function h(w,
|
62 |
-
r,o,x,q){w=e[w].style;var y=Math.max;w.width=y(r,0);w.height=y(o,0);w.left=x;w.top=q}function j(w,r,o){for(var x=0,q=w.length;x<q;x++)e[w[x]].imagedata[r]=o}var d=b.i,i=b.f,k=a.width,m=k.T.a(c),l=k.S.a(c),t=k.L.a(c);k=k.Q.a(c);var n=a.slice,p=n.T.a(c),s=n.S.a(c),u=n.L.a(c);n=n.Q.a(c);h("tl",k,m,0,0);h("t",d-k-l,m,k,0);h("tr",l,m,d-l,0);h("r",l,i-m-t,d-l,m);h("br",l,t,d-l,i-t);h("b",d-k-l,t,k,i-t);h("bl",k,t,0,i-t);h("l",k,i-m-t,0,m);h("c",d-k-l,i-m-t,k,m);j(["tl","t","tr"],"cropBottom",(f.f-p)/f.f);
|
63 |
-
j(["tl","l","bl"],"cropRight",(f.i-n)/f.i);j(["bl","b","br"],"cropTop",(f.f-u)/f.f);j(["tr","r","br"],"cropLeft",(f.i-s)/f.i);if(a.repeat.kb==="stretch"){j(["l","r","c"],"cropTop",p/f.f);j(["l","r","c"],"cropBottom",u/f.f)}if(a.repeat.f==="stretch"){j(["t","b","c"],"cropLeft",n/f.i);j(["t","b","c"],"cropRight",s/f.i)}e.c.style.display=a.fill?"":"none"},this)},w:function(){var a=this.parent.ra(this.C),b,c,e,f=this.Oc,h=f.length;if(!a){a=doc.createElement("border-image");b=a.style;b.position="absolute";
|
64 |
-
this.Gb={};for(e=0;e<h;e++){c=this.Gb[f[e]]=g.p.Ga("rect");c.appendChild(g.p.Ga("imagedata"));b=c.style;b.behavior="url(#default#VML)";b.position="absolute";b.top=b.left=0;c.imagedata.src=this.j.N.m().src;c.stroked=false;c.filled=false;a.appendChild(c)}this.parent.Wa(this.C,a)}return a}});g.Yb=g.B.Z({C:1,Fa:"outset-box-shadow",R:function(){var a=this.j;return a.W.D()||a.v.D()},g:function(){var a=this.j.W;return a.g()&&a.m().ua[0]},X:function(){function a(z,F,H,K,J,v,E){z=b.sa("shadow"+z+F,"fill",
|
65 |
-
e,j-z);F=z.fill;z.coordsize=m*2+","+l*2;z.coordorigin="1,1";z.stroked=false;z.filled=true;F.color=J.O(c);if(v){F.type="gradienttitle";F.color2=F.color;F.opacity=0}z.path=E;u=z.style;u.left=H;u.top=K;u.width=m;u.height=l;return z}var b=this,c=this.e,e=this.w(),f=this.j,h=f.W.m().ua;f=f.v.m();var j=h.length,d=j,i,k=this.q.o(),m=k.i,l=k.f;k=g.J===8?1:0;for(var t=["tl","tr","br","bl"],n,p,s,u,w,r,o,x,q,y,A,D,B,C;d--;){p=h[d];w=p.fd.a(c);r=p.gd.a(c);i=p.Xc.a(c);o=p.blur.a(c);p=p.color;x=-i-o;if(!f&&o)f=
|
66 |
-
g.Oa.Qb;x=this.oa({T:x,S:x,L:x,Q:x},2,f);if(o){q=(i+o)*2+m;y=(i+o)*2+l;A=o*2/q;D=o*2/y;if(o-i>m/2||o-i>l/2)for(i=4;i--;){n=t[i];B=n.charAt(0)==="b";C=n.charAt(1)==="r";n=a(d,n,w,r,p,o,x);s=n.fill;s.focusposition=(C?1-A:A)+","+(B?1-D:D);s.focussize="0,0";n.style.clip="rect("+((B?y/2:0)+k)+"px,"+(C?q:q/2)+"px,"+(B?y:y/2)+"px,"+((C?q/2:0)+k)+"px)"}else{n=a(d,"",w,r,p,o,x);s=n.fill;s.focusposition=A+","+D;s.focussize=1-A*2+","+(1-D*2)}}else{n=a(d,"",w,r,p,o,x);w=p.la();if(w<1)n.fill.opacity=w}}}});g.bc=
|
67 |
-
g.B.Z({C:6,Fa:"imgEl",R:function(){var a=this.j;return this.e.src!==this.hc||a.v.D()},g:function(){var a=this.j;return a.v.g()||a.H.Eb()},X:function(){this.hc=j;this.Gc();var a=this.sa("img","fill",this.w()),b=a.fill,c=this.q.o(),e=c.i;c=c.f;var f=this.j.I.m();f=f&&f.nb;var h=this.e,j=h.src,d=Math.round;a.stroked=false;b.type="frame";b.src=j;b.position=(e?0.5/e:0)+","+(c?0.5/c:0);a.coordsize=e*2+","+c*2;a.coordorigin="1,1";a.path=this.oa(f?{T:d(f.t.a(h)),S:d(f.r.a(h)),L:d(f.b.a(h)),Q:d(f.l.a(h))}:
|
68 |
-
0,2);a=a.style;a.width=e;a.height=c},Gc:function(){this.e.runtimeStyle.filter="alpha(opacity=0)"},n:function(){g.B.n.call(this);this.e.runtimeStyle.filter=""}});g.Qa=function(){function a(d){function i(){if(!z){var v,E,G=d.currentStyle,I=G.getAttribute(c)==="true";J=G.getAttribute(e);J=g.Ab===8?J!=="false":J==="true";if(!C){C=1;d.runtimeStyle.zoom=1;G=d;for(var O=1;G=G.previousSibling;)if(G.nodeType===1){O=0;break}if(O)d.className+=" "+g.Pa+"first-child"}y.Ja();if(I&&(E=y.o())&&(v=doc.documentElement||
|
69 |
-
doc.body)&&(E.y>v.clientHeight||E.x>v.clientWidth||E.y+E.f<0||E.x+E.i<0)){if(!H){H=1;g.Ra.aa(i)}}else{z=1;H=C=0;g.Ra.Ma(i);A={H:new g.Tb(d),I:new g.Xb(d),N:new g.Vb(d),v:new g.Oa(d),W:new g.Zb(d),lb:new g.ec(d)};D=[A.H,A.I,A.N,A.v,A.W,A.lb];v=new g.cc(d,y,A);E=[new g.Yb(d,y,A,v),new g.Sb(d,y,A,v),new g.Wb(d,y,A,v),new g.Ub(d,y,A,v)];d.tagName==="IMG"&&E.push(new g.bc(d,y,A,v));v.oc=E;q=[v].concat(E);if(v=d.currentStyle.getAttribute(g.F+"watch-ancestors")){B=[];v=parseInt(v,10);E=0;for(I=d.parentNode;I&&
|
70 |
-
(v==="NaN"||E++<v);){B.push(I);I.attachEvent("onpropertychange",u);I.attachEvent("onmouseenter",p);I.attachEvent("onmouseleave",s);I=I.parentNode}}if(J){g.ya.aa(m);g.ya.Tc()}m(1)}if(!F){F=1;d.attachEvent("onmove",k);d.attachEvent("onresize",k);d.attachEvent("onpropertychange",l);d.attachEvent("onmouseenter",p);d.attachEvent("onmouseleave",s);g.za.aa(k);g.G.aa(o)}y.La()}}function k(){y&&y.Ec()&&m()}function m(v){if(!K)if(z){var E,G;w();if(v||y.Qc()){E=0;for(G=q.length;E<G;E++)q[E].jb()}if(v||y.Vc()){E=
|
71 |
-
0;for(G=q.length;E<G;E++)q[E].Lb()}r()}else C||i()}function l(){var v,E,G;v=event;if(!K&&!(v&&v.propertyName in j))if(z){w();v=0;for(E=q.length;v<E;v++){G=q[v];G.eb||G.jb();G.R()&&G.Kb()}r()}else C||i()}function t(){if(d)d.className+=f}function n(){if(d)d.className=d.className.replace(h,"")}function p(){setTimeout(t,0)}function s(){setTimeout(n,0)}function u(){var v=event.propertyName;if(v==="className"||v==="id")l()}function w(){y.Ja();for(var v=D.length;v--;)D[v].Ja()}function r(){for(var v=D.length;v--;)D[v].La();
|
72 |
-
y.La()}function o(){if(F){if(B)for(var v=0,E=B.length,G;v<E;v++){G=B[v];G.detachEvent("onpropertychange",u);G.detachEvent("onmouseenter",p);G.detachEvent("onmouseleave",s)}d.detachEvent("onmove",m);d.detachEvent("onresize",m);d.detachEvent("onpropertychange",l);d.detachEvent("onmouseenter",p);d.detachEvent("onmouseleave",s);g.G.Ma(o);F=0}}function x(){if(!K){var v,E;o();K=1;if(q){v=0;for(E=q.length;v<E;v++)q[v].n()}J&&g.ya.Ma(m);g.za.Ma(m);q=y=A=D=B=d=null}}var q,y=new M(d),A,D,B,C,z,F,H,K,J;this.Ic=
|
73 |
-
i;this.update=m;this.n=x;this.Ac=d}var b={},c=g.F+"lazy-init",e=g.F+"poll",f=" "+g.Pa+"hover",h=new RegExp("\\b"+g.Pa+"hover\\b","g"),j={background:1,bgColor:1,display:1};a.Cc=function(d){var i=g.p.ta(d);return b[i]||(b[i]=new a(d))};a.n=function(d){d=g.p.ta(d);var i=b[d];if(i){i.n();delete b[d]}};a.wc=function(){var d=[],i;if(b){for(var k in b)if(b.hasOwnProperty(k)){i=b[k];d.push(i.Ac);i.n()}b={}}return d};return a}();g.attach=function(a){g.Ab<9&&g.Qa.Cc(a).Ic()};g.detach=function(a){g.Qa.n(a)}};
|
74 |
})();
|
1 |
+
/*
|
2 |
+
PIE: CSS3 rendering for IE
|
3 |
+
Version 1.0beta4
|
4 |
+
http://css3pie.com
|
5 |
+
Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
|
6 |
+
*/
|
7 |
+
(function(){
|
8 |
+
var doc = document;var g=window.PIE;
|
9 |
+
if(!g){g=window.PIE={F:"-pie-",Sa:"Pie",Pa:"pie_",Jb:{TD:1,TH:1}};try{doc.execCommand("BackgroundImageCache",false,true)}catch(L){}g.J=function(){for(var a=4,b=doc.createElement("div"),c=b.getElementsByTagName("i");b.innerHTML="<!--[if gt IE "+ ++a+"]><i></i><![endif]--\>",c[0];);return a}();if(g.J===6)g.F=g.F.replace(/^-/,"");g.Ab=doc.documentMode||g.J;(function(){var a,b=0,c={};g.p={Ga:function(e){if(!a){a=doc.createDocumentFragment();a.namespaces.add("css3vml","urn:schemas-microsoft-com:vml")}return a.createElement("css3vml:"+e)},
|
10 |
+
ta:function(e){return e&&e._pieId||(e._pieId=++b)},fb:function(e){var f,h,j,d,i=arguments;f=1;for(h=i.length;f<h;f++){d=i[f];for(j in d)if(d.hasOwnProperty(j))e[j]=d[j]}return e},Pb:function(e,f,h){var j=c[e],d,i;if(j)Object.prototype.toString.call(j)==="[object Array]"?j.push([f,h]):f.call(h,j);else{i=c[e]=[[f,h]];d=new Image;d.onload=function(){j=c[e]={i:d.width,f:d.height};for(var k=0,m=i.length;k<m;k++)i[k][0].call(i[k][1],j);d.onload=null};d.src=e}}}})();g.ia=function(){this.hb=[];this.Db={}};
|
11 |
+
g.ia.prototype={aa:function(a){var b=g.p.ta(a),c=this.Db,e=this.hb;if(!(b in c)){c[b]=e.length;e.push(a)}},Ma:function(a){a=g.p.ta(a);var b=this.Db;if(a&&a in b){delete this.hb[b[a]];delete b[a]}},Ia:function(){for(var a=this.hb,b=a.length;b--;)a[b]&&a[b]()}};g.ya=new g.ia;g.ya.Tc=function(){var a=this;if(!a.Uc){setInterval(function(){a.Ia()},250);a.Uc=1}};g.G=new g.ia;window.attachEvent("onbeforeunload",function(){g.G.Ia()});g.G.Ea=function(a,b,c){a.attachEvent(b,c);this.aa(function(){a.detachEvent(b,
|
12 |
+
c)})};(function(){function a(){g.za.Ia()}g.za=new g.ia;g.G.Ea(window,"onresize",a)})();(function(){function a(){g.Ra.Ia()}g.Ra=new g.ia;g.G.Ea(window,"onscroll",a);g.za.aa(a)})();(function(){function a(){c=g.Qa.wc()}function b(){if(c){for(var e=0,f=c.length;e<f;e++)g.attach(c[e]);c=0}}var c;g.G.Ea(window,"onbeforeprint",a);g.G.Ea(window,"onafterprint",b)})();g.hd=function(){function a(i){this.V=i}var b=doc.createElement("length-calc"),c=doc.documentElement,e=b.style,f={},h=["mm","cm","in","pt","pc"],
|
13 |
+
j=h.length,d={};e.position="absolute";e.top=e.left="-9999px";for(c.appendChild(b);j--;){b.style.width="100"+h[j];f[h[j]]=b.offsetWidth/100}c.removeChild(b);a.prototype={ib:/(px|em|ex|mm|cm|in|pt|pc|%)$/,vb:function(){var i=this.Lc;if(i===void 0)i=this.Lc=parseFloat(this.V);return i},ab:function(){var i=this.ad;if(!i)i=this.ad=(i=this.V.match(this.ib))&&i[0]||"px";return i},a:function(i,k){var m=this.vb(),l=this.ab();switch(l){case "px":return m;case "%":return m*(typeof k==="function"?k():k)/100;
|
14 |
+
case "em":return m*this.tb(i);case "ex":return m*this.tb(i)/2;default:return m*f[l]}},tb:function(i){var k=i.currentStyle.fontSize;if(k.indexOf("px")>0)return parseFloat(k);else{b.style.width="1em";i.appendChild(b);k=b.offsetWidth;b.parentNode===i&&i.removeChild(b);return k}}};g.k=function(i){return d[i]||(d[i]=new a(i))};return a}();g.Na=function(){function a(f){this.U=f}var b=g.k("50%"),c={top:1,center:1,bottom:1},e={left:1,center:1,right:1};a.prototype={Dc:function(){if(!this.sb){var f=this.U,
|
15 |
+
h=f.length,j=g.u,d=j.ja,i=g.k("0");d=d.fa;i=["left",i,"top",i];if(h===1){f.push(new j.Ta(d,"center"));h++}if(h===2){d&(f[0].h|f[1].h)&&f[0].d in c&&f[1].d in e&&f.push(f.shift());if(f[0].h&d)if(f[0].d==="center")i[1]=b;else i[0]=f[0].d;else if(f[0].Y())i[1]=g.k(f[0].d);if(f[1].h&d)if(f[1].d==="center")i[3]=b;else i[2]=f[1].d;else if(f[1].Y())i[3]=g.k(f[1].d)}this.sb=i}return this.sb},coords:function(f,h,j){var d=this.Dc(),i=d[1].a(f,h);f=d[3].a(f,j);return{x:d[0]==="right"?h-i:i,y:d[2]==="bottom"?
|
16 |
+
j-f:f}}};return a}();g.Rb=function(){function a(b){this.V=b}a.prototype={ib:/[a-z]+$/i,ab:function(){return this.lc||(this.lc=this.V.match(this.ib)[0].toLowerCase())},vc:function(){var b=this.fc,c;if(b===undefined){b=this.ab();c=parseFloat(this.V,10);b=this.fc=b==="deg"?c:b==="rad"?c/Math.PI*180:b==="grad"?c/400*360:b==="turn"?c*360:0}return b}};return a}();g.$b=function(){function a(c){this.V=c}var b={};a.Sc=/\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;a.gb=
|
17 |
+
{aliceblue:"F0F8FF",antiquewhite:"FAEBD7",aqua:"0FF",aquamarine:"7FFFD4",azure:"F0FFFF",beige:"F5F5DC",bisque:"FFE4C4",black:"000",blanchedalmond:"FFEBCD",blue:"00F",blueviolet:"8A2BE2",brown:"A52A2A",burlywood:"DEB887",cadetblue:"5F9EA0",chartreuse:"7FFF00",chocolate:"D2691E",coral:"FF7F50",cornflowerblue:"6495ED",cornsilk:"FFF8DC",crimson:"DC143C",cyan:"0FF",darkblue:"00008B",darkcyan:"008B8B",darkgoldenrod:"B8860B",darkgray:"A9A9A9",darkgreen:"006400",darkkhaki:"BDB76B",darkmagenta:"8B008B",darkolivegreen:"556B2F",
|
18 |
+
darkorange:"FF8C00",darkorchid:"9932CC",darkred:"8B0000",darksalmon:"E9967A",darkseagreen:"8FBC8F",darkslateblue:"483D8B",darkslategray:"2F4F4F",darkturquoise:"00CED1",darkviolet:"9400D3",deeppink:"FF1493",deepskyblue:"00BFFF",dimgray:"696969",dodgerblue:"1E90FF",firebrick:"B22222",floralwhite:"FFFAF0",forestgreen:"228B22",fuchsia:"F0F",gainsboro:"DCDCDC",ghostwhite:"F8F8FF",gold:"FFD700",goldenrod:"DAA520",gray:"808080",green:"008000",greenyellow:"ADFF2F",honeydew:"F0FFF0",hotpink:"FF69B4",indianred:"CD5C5C",
|
19 |
+
indigo:"4B0082",ivory:"FFFFF0",khaki:"F0E68C",lavender:"E6E6FA",lavenderblush:"FFF0F5",lawngreen:"7CFC00",lemonchiffon:"FFFACD",lightblue:"ADD8E6",lightcoral:"F08080",lightcyan:"E0FFFF",lightgoldenrodyellow:"FAFAD2",lightgreen:"90EE90",lightgrey:"D3D3D3",lightpink:"FFB6C1",lightsalmon:"FFA07A",lightseagreen:"20B2AA",lightskyblue:"87CEFA",lightslategray:"789",lightsteelblue:"B0C4DE",lightyellow:"FFFFE0",lime:"0F0",limegreen:"32CD32",linen:"FAF0E6",magenta:"F0F",maroon:"800000",mediumauqamarine:"66CDAA",
|
20 |
+
mediumblue:"0000CD",mediumorchid:"BA55D3",mediumpurple:"9370D8",mediumseagreen:"3CB371",mediumslateblue:"7B68EE",mediumspringgreen:"00FA9A",mediumturquoise:"48D1CC",mediumvioletred:"C71585",midnightblue:"191970",mintcream:"F5FFFA",mistyrose:"FFE4E1",moccasin:"FFE4B5",navajowhite:"FFDEAD",navy:"000080",oldlace:"FDF5E6",olive:"808000",olivedrab:"688E23",orange:"FFA500",orangered:"FF4500",orchid:"DA70D6",palegoldenrod:"EEE8AA",palegreen:"98FB98",paleturquoise:"AFEEEE",palevioletred:"D87093",papayawhip:"FFEFD5",
|
21 |
+
peachpuff:"FFDAB9",peru:"CD853F",pink:"FFC0CB",plum:"DDA0DD",powderblue:"B0E0E6",purple:"800080",red:"F00",rosybrown:"BC8F8F",royalblue:"4169E1",saddlebrown:"8B4513",salmon:"FA8072",sandybrown:"F4A460",seagreen:"2E8B57",seashell:"FFF5EE",sienna:"A0522D",silver:"C0C0C0",skyblue:"87CEEB",slateblue:"6A5ACD",slategray:"708090",snow:"FFFAFA",springgreen:"00FF7F",steelblue:"4682B4",tan:"D2B48C",teal:"008080",thistle:"D8BFD8",tomato:"FF6347",turquoise:"40E0D0",violet:"EE82EE",wheat:"F5DEB3",white:"FFF",
|
22 |
+
whitesmoke:"F5F5F5",yellow:"FF0",yellowgreen:"9ACD32"};a.prototype={parse:function(){if(!this.Ca){var c=this.V,e;if(e=c.match(a.Sc)){this.Ca="rgb("+e[1]+","+e[2]+","+e[3]+")";this.qb=parseFloat(e[4])}else{if((e=c.toLowerCase())in a.gb)c="#"+a.gb[e];this.Ca=c;this.qb=c==="transparent"?0:1}}},O:function(c){this.parse();return this.Ca==="currentColor"?c.currentStyle.color:this.Ca},la:function(){this.parse();return this.qb}};g.pa=function(c){return b[c]||(b[c]=new a(c))};return a}();g.u=function(){function a(c){this.Ha=
|
23 |
+
c;this.ch=0;this.U=[];this.wa=0}var b=a.ja={xa:1,ob:2,ea:4,ac:8,pb:16,fa:32,A:64,ga:128,ha:256,Aa:512,dc:1024,URL:2048};a.Ta=function(c,e){this.h=c;this.d=e};a.Ta.prototype={db:function(){return this.h&b.A||this.h&b.ga&&this.d==="0"},Y:function(){return this.db()||this.h&b.Aa}};a.prototype={dd:/\s/,Mc:/^[\+\-]?(\d*\.)?\d+/,url:/^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,zb:/^\-?[_a-z][\w-]*/i,Yc:/^("([^"]*)"|'([^']*)')/,Fc:/^#([\da-f]{6}|[\da-f]{3})/i,bd:{px:b.A,em:b.A,ex:b.A,mm:b.A,cm:b.A,
|
24 |
+
"in":b.A,pt:b.A,pc:b.A,deg:b.xa,rad:b.xa,grad:b.xa},sc:{rgb:1,rgba:1,hsl:1,hsla:1},next:function(c){function e(t,n){t=new a.Ta(t,n);if(!c){k.U.push(t);k.wa++}return t}function f(){k.wa++;return null}var h,j,d,i,k=this;if(this.wa<this.U.length)return this.U[this.wa++];for(;this.dd.test(this.Ha.charAt(this.ch));)this.ch++;if(this.ch>=this.Ha.length)return f();j=this.ch;h=this.Ha.substring(this.ch);d=h.charAt(0);switch(d){case "#":if(i=h.match(this.Fc)){this.ch+=i[0].length;return e(b.ea,i[0])}break;
|
25 |
+
case '"':case "'":if(i=h.match(this.Yc)){this.ch+=i[0].length;return e(b.dc,i[2]||i[3]||"")}break;case "/":case ",":this.ch++;return e(b.ha,d);case "u":if(i=h.match(this.url)){this.ch+=i[0].length;return e(b.URL,i[2]||i[3]||i[4]||"")}}if(i=h.match(this.Mc)){d=i[0];this.ch+=d.length;if(h.charAt(d.length)==="%"){this.ch++;return e(b.Aa,d+"%")}if(i=h.substring(d.length).match(this.zb)){d+=i[0];this.ch+=i[0].length;return e(this.bd[i[0].toLowerCase()]||b.ac,d)}return e(b.ga,d)}if(i=h.match(this.zb)){d=
|
26 |
+
i[0];this.ch+=d.length;if(d.toLowerCase()in g.$b.gb||d==="currentColor")return e(b.ea,d);if(h.charAt(d.length)==="("){this.ch++;if(d.toLowerCase()in this.sc){h=function(t){return t&&t.h&b.ga};i=function(t){return t&&t.h&(b.ga|b.Aa)};var m=function(t,n){return t&&t.d===n},l=function(){return k.next(1)};if((d.charAt(0)==="r"?i(l()):h(l()))&&m(l(),",")&&i(l())&&m(l(),",")&&i(l())&&(d==="rgb"||d==="hsa"||m(l(),",")&&h(l()))&&m(l(),")"))return e(b.ea,this.Ha.substring(j,this.ch));return f()}return e(b.pb,
|
27 |
+
d)}return e(b.fa,d)}this.ch++;return e(b.ob,d)},z:function(){return this.U[this.wa-- -2]},all:function(){for(;this.next(););return this.U},da:function(c,e){for(var f=[],h,j;h=this.next();){if(c(h)){j=true;this.z();break}f.push(h)}return e&&!j?null:f}};return a}();var M=function(a){this.e=a};M.prototype={K:0,Qc:function(){var a=this.Ua,b;return!a||(b=this.o())&&(a.x!==b.x||a.y!==b.y)},Vc:function(){var a=this.Ua,b;return!a||(b=this.o())&&(a.i!==b.i||a.f!==b.f)},ub:function(){var a=this.e.getBoundingClientRect();
|
28 |
+
return{x:a.left,y:a.top,i:a.right-a.left,f:a.bottom-a.top}},o:function(){return this.K?this.Da||(this.Da=this.ub()):this.ub()},Ec:function(){return!!this.Ua},Ja:function(){++this.K},La:function(){if(!--this.K){if(this.Da)this.Ua=this.Da;this.Da=null}}};(function(){function a(b){var c=g.p.ta(b);return function(){if(this.K){var e=this.rb||(this.rb={});return c in e?e[c]:(e[c]=b.call(this))}else return b.call(this)}}g.s={K:0,$:function(b){function c(e){this.e=e}g.p.fb(c.prototype,g.s,b);c.kc={};return c},
|
29 |
+
m:function(){var b=this.qa(),c=this.constructor.kc;return b?b in c?c[b]:(c[b]=this.ba(b)):null},qa:a(function(){var b=this.e,c=this.constructor,e=b.style;b=b.currentStyle;var f=this.na,h=this.va,j=c.ic||(c.ic=g.F+f);c=c.jc||(c.jc=g.Sa+h.charAt(0).toUpperCase()+h.substring(1));return e[c]||b.getAttribute(j)||e[h]||b.getAttribute(f)}),g:a(function(){return!!this.m()}),D:a(function(){var b=this.qa(),c=b!==this.gc;this.gc=b;return c}),ma:a,Ja:function(){++this.K},La:function(){--this.K||delete this.rb}}})();
|
30 |
+
g.Tb=g.s.$({na:g.F+"background",va:g.Sa+"Background",nc:{scroll:1,fixed:1,local:1},Ka:{"repeat-x":1,"repeat-y":1,repeat:1,"no-repeat":1},Nc:{"padding-box":1,"border-box":1,"content-box":1},rc:{"padding-box":1,"border-box":1},Rc:{top:1,right:1,bottom:1,left:1,center:1},Wc:{contain:1,cover:1},ba:function(a){function b(u){return u.Y()||u.h&i&&u.d in t}function c(u){return u.Y()&&g.k(u.d)||u.d==="auto"&&"auto"}var e=this.e.currentStyle,f,h,j=g.u.ja,d=j.ha,i=j.fa,k=j.ea,m,l,t=this.Rc,n,p,s=null;if(this.$a()){a=
|
31 |
+
new g.u(a);s={M:[]};for(h={};f=a.next();){m=f.h;l=f.d;if(!h.P&&m&j.pb&&l==="linear-gradient"){n={ca:[],P:l};for(p={};f=a.next();){m=f.h;l=f.d;if(m&j.ob&&l===")"){p.color&&n.ca.push(p);n.ca.length>1&&g.p.fb(h,n);break}if(m&k){if(n.Xa||n.bb){f=a.z();if(f.h!==d)break;a.next()}p={color:g.pa(l)};f=a.next();if(f.Y())p.Fb=g.k(f.d);else a.z()}else if(m&j.xa&&!n.Xa&&!p.color&&!n.ca.length)n.Xa=new g.Rb(f.d);else if(b(f)&&!n.bb&&!p.color&&!n.ca.length){a.z();n.bb=new g.Na(a.da(function(u){return!b(u)},false))}else if(m&
|
32 |
+
d&&l===","){if(p.color){n.ca.push(p);p={}}}else break}}else if(!h.P&&m&j.URL){h.Cb=l;h.P="image"}else if(b(f)&&!h.size){a.z();h.Ya=new g.Na(a.da(function(u){return!b(u)},false))}else if(m&i)if(l in this.Ka)h.Bb=l;else if(l in this.Nc){h.kd=l;if(l in this.rc)h.clip=l}else{if(l in this.nc)h.jd=l}else if(m&k&&!s.color)s.color=g.pa(l);else if(m&d)if(l==="/"){f=a.next();m=f.h;l=f.d;if(m&i&&l in this.Wc)h.size=l;else if(l=c(f))h.size={i:l,f:c(a.next())||a.z()&&l}}else{if(l===","&&h.P){s.M.push(h);h={}}}else return null}h.P&&
|
33 |
+
s.M.push(h)}else this.Nb(function(){var u=e.backgroundPositionX,w=e.backgroundPositionY,r=e.backgroundImage,o=e.backgroundColor;s={};if(o!=="transparent")s.color=g.pa(o);if(r!=="none")s.M=[{P:"image",Cb:(new g.u(r)).next().d,Bb:e.backgroundRepeat,Ya:new g.Na((new g.u(u+" "+w)).all())}]});return s&&(s.color||s.M&&s.M[0])?s:null},Nb:function(a){var b=this.e.runtimeStyle,c=b.backgroundImage,e=b.backgroundColor;if(c)b.backgroundImage="";if(e)b.backgroundColor="";a=a.call(this);if(c)b.backgroundImage=
|
34 |
+
c;if(e)b.backgroundColor=e;return a},qa:g.s.ma(function(){return this.$a()||this.Nb(function(){var a=this.e.currentStyle;return a.backgroundColor+" "+a.backgroundImage+" "+a.backgroundRepeat+" "+a.backgroundPositionX+" "+a.backgroundPositionY})}),$a:g.s.ma(function(){var a=this.e;return a.style[this.va]||a.currentStyle.getAttribute(this.na)}),Eb:function(){var a=0;if(g.J<7){a=this.e;a=""+(a.style[g.Sa+"PngFix"]||a.currentStyle.getAttribute(g.F+"png-fix"))==="true"}return a},g:g.s.ma(function(){return(this.$a()||
|
35 |
+
this.Eb())&&!!this.m()})});g.Xb=g.s.$({Ib:["Top","Right","Bottom","Left"],Kc:{thin:"1px",medium:"3px",thick:"5px"},ba:function(){var a={},b={},c={},e=false,f=true,h=true,j=true;this.Ob(function(){for(var d=this.e.currentStyle,i=0,k,m,l,t,n,p,s;i<4;i++){l=this.Ib[i];s=l.charAt(0).toLowerCase();k=b[s]=d["border"+l+"Style"];m=d["border"+l+"Color"];l=d["border"+l+"Width"];if(i>0){if(k!==t)h=false;if(m!==n)f=false;if(l!==p)j=false}t=k;n=m;p=l;c[s]=g.pa(m);l=a[s]=g.k(b[s]==="none"?"0":this.Kc[l]||l);if(l.a(this.e)>
|
36 |
+
0)e=true}});return e?{nb:a,Zc:b,tc:c,ed:j,uc:f,$c:h}:null},qa:g.s.ma(function(){var a=this.e,b=a.currentStyle,c;a.tagName in g.Jb&&a.offsetParent.currentStyle.borderCollapse==="collapse"||this.Ob(function(){c=b.borderWidth+"|"+b.borderStyle+"|"+b.borderColor});return c}),Ob:function(a){var b=this.e.runtimeStyle,c=b.borderWidth,e=b.borderColor;if(c)b.borderWidth="";if(e)b.borderColor="";a=a.call(this);if(c)b.borderWidth=c;if(e)b.borderColor=e;return a}});(function(){g.Oa=g.s.$({na:"border-radius",
|
37 |
+
va:"borderRadius",ba:function(b){var c=null,e,f,h,j,d=false;if(b){f=new g.u(b);var i=function(){for(var k=[],m;(h=f.next())&&h.Y();){j=g.k(h.d);m=j.vb();if(m<0)return null;if(m>0)d=true;k.push(j)}return k.length>0&&k.length<5?{tl:k[0],tr:k[1]||k[0],br:k[2]||k[0],bl:k[3]||k[1]||k[0]}:null};if(b=i()){if(h){if(h.h&g.u.ja.ha&&h.d==="/")e=i()}else e=b;if(d&&b&&e)c={x:b,y:e}}}return c}});var a=g.k("0");a={tl:a,tr:a,br:a,bl:a};g.Oa.Qb={x:a,y:a}})();g.Vb=g.s.$({na:"border-image",va:"borderImage",Ka:{stretch:1,
|
38 |
+
round:1,repeat:1,space:1},ba:function(a){var b=null,c,e,f,h,j,d,i=0,k,m=g.u.ja,l=m.fa,t=m.ga,n=m.A,p=m.Aa;if(a){c=new g.u(a);b={};for(var s=function(r){return r&&r.h&m.ha&&r.d==="/"},u=function(r){return r&&r.h&l&&r.d==="fill"},w=function(){h=c.da(function(r){return!(r.h&(t|p))});if(u(c.next())&&!b.fill)b.fill=true;else c.z();if(s(c.next())){i++;j=c.da(function(){return!(e.h&(t|p|n))&&!(e.h&l&&e.d==="auto")});if(s(c.next())){i++;d=c.da(function(){return!(e.h&(t|n))})}}else c.z()};e=c.next();){a=e.h;
|
39 |
+
f=e.d;if(a&(t|p)&&!h){c.z();w()}else if(u(e)&&!b.fill){b.fill=true;w()}else if(a&l&&this.Ka[f]&&!b.repeat){b.repeat={f:f};if(e=c.next())if(e.h&l&&this.Ka[e.d])b.repeat.kb=e.d;else c.z()}else if(a&m.URL&&!b.src)b.src=f;else return null}if(!b.src||!h||h.length<1||h.length>4||j&&j.length>4||i===1&&j.length<1||d&&d.length>4||i===2&&d.length<1)return null;if(!b.repeat)b.repeat={f:"stretch"};if(!b.repeat.kb)b.repeat.kb=b.repeat.f;a=function(r,o){return{T:o(r[0]),S:o(r[1]||r[0]),L:o(r[2]||r[0]),Q:o(r[3]||
|
40 |
+
r[1]||r[0])}};b.slice=a(h,function(r){return g.k(r.h&t?r.d+"px":r.d)});b.width=j&&j.length>0?a(j,function(r){return r.h&(n|p)?g.k(r.d):r.d}):(k=this.e.currentStyle)&&{T:g.k(k.borderTopWidth),S:g.k(k.borderRightWidth),L:g.k(k.borderBottomWidth),Q:g.k(k.borderLeftWidth)};b.ua=a(d||[0],function(r){return r.h&n?g.k(r.d):r.d})}return b}});g.Zb=g.s.$({na:"box-shadow",va:"boxShadow",ba:function(a){var b,c=g.k,e=g.u.ja,f;if(a){f=new g.u(a);b={ua:[],cb:[]};for(a=function(){for(var h,j,d,i,k,m;h=f.next();){d=
|
41 |
+
h.d;j=h.h;if(j&e.ha&&d===",")break;else if(h.db()&&!k){f.z();k=f.da(function(l){return!l.db()})}else if(j&e.ea&&!i)i=d;else if(j&e.fa&&d==="inset"&&!m)m=true;else return false}h=k&&k.length;if(h>1&&h<5){(m?b.cb:b.ua).push({fd:c(k[0].d),gd:c(k[1].d),blur:c(k[2]?k[2].d:"0"),Xc:c(k[3]?k[3].d:"0"),color:g.pa(i||"currentColor")});return true}return false};a(););}return b&&(b.cb.length||b.ua.length)?b:null}});g.ec=g.s.$({qa:g.s.ma(function(){var a=this.e.currentStyle;return a.visibility+"|"+a.display}),
|
42 |
+
ba:function(){var a=this.e,b=a.runtimeStyle;a=a.currentStyle;var c=b.visibility,e;b.visibility="";e=a.visibility;b.visibility=c;return{cd:e!=="hidden",xc:a.display!=="none"}},g:function(){return false}});g.B={Z:function(a){function b(c,e,f,h){this.e=c;this.q=e;this.j=f;this.parent=h}g.p.fb(b.prototype,g.B,a);return b},eb:false,R:function(){return false},Kb:function(){this.n();this.g()&&this.X()},jb:function(){this.eb=true},Lb:function(){this.g()?this.X():this.n()},Wa:function(a,b){this.Hb(a);for(var c=
|
43 |
+
this.ka||(this.ka=[]),e=a+1,f=c.length,h;e<f;e++)if(h=c[e])break;c[a]=b;this.w().insertBefore(b,h||null)},ra:function(a){var b=this.ka;return b&&b[a]||null},Hb:function(a){var b=this.ra(a),c=this.Ba;if(b&&c){c.removeChild(b);this.ka[a]=null}},sa:function(a,b,c,e){var f=this.Va||(this.Va={}),h=f[a];if(!h){h=f[a]=g.p.Ga("shape");if(b)h.appendChild(h[b]=g.p.Ga(b));if(e){c=this.ra(e);if(!c){this.Wa(e,doc.createElement("group"+e));c=this.ra(e)}}c.appendChild(h);a=h.style;a.position="absolute";a.left=a.top=
|
44 |
+
0;a.behavior="url(#default#VML)"}return h},Za:function(a){var b=this.Va,c=b&&b[a];if(c){c.parentNode.removeChild(c);delete b[a]}return!!c},xb:function(a){var b=this.e,c=this.q.o(),e=c.i,f=c.f,h,j,d,i,k,m;c=a.x.tl.a(b,e);h=a.y.tl.a(b,f);j=a.x.tr.a(b,e);d=a.y.tr.a(b,f);i=a.x.br.a(b,e);k=a.y.br.a(b,f);m=a.x.bl.a(b,e);a=a.y.bl.a(b,f);e=Math.min(e/(c+j),f/(d+k),e/(m+i),f/(h+a));if(e<1){c*=e;h*=e;j*=e;d*=e;i*=e;k*=e;m*=e;a*=e}return{x:{tl:c,tr:j,br:i,bl:m},y:{tl:h,tr:d,br:k,bl:a}}},oa:function(a,b,c){b=
|
45 |
+
b||1;var e,f,h=this.q.o();f=h.i*b;h=h.f*b;var j=this.j.v,d=Math.floor,i=Math.ceil,k=a?a.T*b:0,m=a?a.S*b:0,l=a?a.L*b:0;a=a?a.Q*b:0;var t,n,p,s,u;if(c||j.g()){e=this.xb(c||j.m());c=e.x.tl*b;j=e.y.tl*b;t=e.x.tr*b;n=e.y.tr*b;p=e.x.br*b;s=e.y.br*b;u=e.x.bl*b;b=e.y.bl*b;f="m"+d(a)+","+d(j)+"qy"+d(c)+","+d(k)+"l"+i(f-t)+","+d(k)+"qx"+i(f-m)+","+d(n)+"l"+i(f-m)+","+i(h-s)+"qy"+i(f-p)+","+i(h-l)+"l"+d(u)+","+i(h-l)+"qx"+d(a)+","+i(h-b)+" x e"}else f="m"+d(a)+","+d(k)+"l"+i(f-m)+","+d(k)+"l"+i(f-m)+","+i(h-
|
46 |
+
l)+"l"+d(a)+","+i(h-l)+"xe";return f},w:function(){var a=this.parent.ra(this.C),b;if(!a){a=doc.createElement(this.Fa);b=a.style;b.position="absolute";b.top=b.left=0;this.parent.Wa(this.C,a)}return a},n:function(){this.parent.Hb(this.C);delete this.Va;delete this.ka}};g.cc=g.B.Z({g:function(){var a=this.oc;for(var b in a)if(a.hasOwnProperty(b)&&a[b].g())return true;return false},R:function(){return this.j.lb.D()},jb:function(){if(this.g()){var a=this.wb(),b=a,c;a=a.currentStyle;var e=a.position,f=
|
47 |
+
this.w().style,h=0,j=0;j=this.q.o();if(e==="fixed"&&g.J>6){h=j.x;j=j.y;b=e}else{do b=b.offsetParent;while(b&&b.currentStyle.position==="static");if(b){c=b.getBoundingClientRect();b=b.currentStyle;h=j.x-c.left-(parseFloat(b.borderLeftWidth)||0);j=j.y-c.top-(parseFloat(b.borderTopWidth)||0)}else{b=doc.documentElement;h=j.x+b.scrollLeft-b.clientLeft;j=j.y+b.scrollTop-b.clientTop}b="absolute"}f.position=b;f.left=h;f.top=j;f.zIndex=e==="static"?-1:a.zIndex;this.eb=true}},Lb:function(){},Mb:function(){var a=
|
48 |
+
this.j.lb.m();this.w().style.display=a.cd&&a.xc?"":"none"},Kb:function(){this.g()?this.Mb():this.n()},wb:function(){var a=this.e;return a.tagName in g.Jb?a.offsetParent:a},w:function(){var a=this.Ba,b;if(!a){b=this.wb();a=this.Ba=doc.createElement("css3-container");a.style.direction="ltr";this.Mb();b.parentNode.insertBefore(a,b)}return a},n:function(){var a=this.Ba,b;if(a&&(b=a.parentNode))b.removeChild(a);delete this.Ba;delete this.ka}});g.Sb=g.B.Z({C:2,Fa:"background",R:function(){var a=this.j;
|
49 |
+
return a.H.D()||a.v.D()},g:function(){var a=this.j;return a.N.g()||a.v.g()||a.H.g()||a.W.g()&&a.W.m().cb},X:function(){var a=this.q.o();if(a.i&&a.f){this.yc();this.zc()}},yc:function(){var a=this.j.H.m(),b=this.q.o(),c=this.e,e=a&&a.color,f,h;if(e&&e.la()>0){this.yb();a=this.sa("bgColor","fill",this.w(),1);f=b.i;b=b.f;a.stroked=false;a.coordsize=f*2+","+b*2;a.coordorigin="1,1";a.path=this.oa(null,2);h=a.style;h.width=f;h.height=b;a.fill.color=e.O(c);c=e.la();if(c<1)a.fill.opacity=c}else this.Za("bgColor")},
|
50 |
+
zc:function(){var a=this.j.H.m(),b=this.q.o();a=a&&a.M;var c,e,f,h,j;if(a){this.yb();e=b.i;f=b.f;for(j=a.length;j--;){b=a[j];c=this.sa("bgImage"+j,"fill",this.w(),2);c.stroked=false;c.fill.type="tile";c.fillcolor="none";c.coordsize=e*2+","+f*2;c.coordorigin="1,1";c.path=this.oa(0,2);h=c.style;h.width=e;h.height=f;if(b.P==="linear-gradient")this.mc(c,b);else{c.fill.src=b.Cb;this.Pc(c,j)}}}for(j=a?a.length:0;this.Za("bgImage"+j++););},Pc:function(a,b){g.p.Pb(a.fill.src,function(c){var e=a.fill,f=this.e,
|
51 |
+
h=this.q.o(),j=h.i;h=h.f;var d=this.j,i=d.I.m(),k=i&&i.nb;i=k?k.t.a(f):0;var m=k?k.r.a(f):0,l=k?k.b.a(f):0;k=k?k.l.a(f):0;d=d.H.m().M[b];f=d.Ya?d.Ya.coords(f,j-c.i-k-m,h-c.f-i-l):{x:0,y:0};d=d.Bb;l=m=0;var t=j+1,n=h+1,p=g.J===8?0:1;k=Math.round(f.x)+k+0.5;i=Math.round(f.y)+i+0.5;e.position=k/j+","+i/h;if(d&&d!=="repeat"){if(d==="repeat-x"||d==="no-repeat"){m=i+1;n=i+c.f+p}if(d==="repeat-y"||d==="no-repeat"){l=k+1;t=k+c.i+p}a.style.clip="rect("+m+"px,"+t+"px,"+n+"px,"+l+"px)"}},this)},mc:function(a,
|
52 |
+
b){function c(B,C,z,F,H){if(z===0||z===180)return[F,C];else if(z===90||z===270)return[B,H];else{z=Math.tan(-z*t/180);B=z*B-C;C=-1/z;F=C*F-H;H=C-z;return[(F-B)/H,(z*F-C*B)/H]}}function e(){w=m>=90&&m<270?i:0;r=m<180?k:0;o=i-w;x=k-r}function f(){for(;m<0;)m+=360;m%=360}function h(B,C){var z=C[0]-B[0];B=C[1]-B[1];return Math.abs(z===0?B:B===0?z:Math.sqrt(z*z+B*B))}var j=this.e,d=this.q.o(),i=d.i,k=d.f;a=a.fill;var m=b.Xa,l=b.bb;b=b.ca;d=b.length;var t=Math.PI,n,p,s,u,w,r,o,x,q,y,A,D;if(l){l=l.coords(j,
|
53 |
+
i,k);n=l.x;p=l.y}if(m){m=m.vc();f();e();if(!l){n=w;p=r}l=c(n,p,m,o,x);s=l[0];u=l[1]}else if(l){s=i-n;u=k-p}else{n=p=s=0;u=k}l=s-n;q=u-p;if(m===void 0){m=!l?q<0?90:270:!q?l<0?180:0:-Math.atan2(q,l)/t*180;f();e()}l=m%90?Math.atan2(l*i/k,q)/t*180:m+90;l+=180;l%=360;y=h([n,p],[s,u]);s=h([w,r],c(w,r,m,o,x));u=[];p=h([n,p],c(n,p,m,w,r))/s*100;n=[];for(q=0;q<d;q++)n.push(b[q].Fb?b[q].Fb.a(j,y):q===0?0:q===d-1?y:null);for(q=1;q<d;q++){if(n[q]===null){A=n[q-1];y=q;do D=n[++y];while(D===null);n[q]=A+(D-A)/
|
54 |
+
(y-q+1)}n[q]=Math.max(n[q],n[q-1])}for(q=0;q<d;q++)u.push(p+n[q]/s*100+"% "+b[q].color.O(j));a.angle=l;a.type="gradient";a.method="sigma";a.color=b[0].color.O(j);a.color2=b[d-1].color.O(j);a.colors.value=u.join(",")},yb:function(){var a=this.e.runtimeStyle;a.backgroundImage="url(about:blank)";a.backgroundColor="transparent"},n:function(){g.B.n.call(this);var a=this.e.runtimeStyle;a.backgroundImage=a.backgroundColor=""}});g.Wb=g.B.Z({C:4,Fa:"border",qc:{TABLE:1,INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,
|
55 |
+
IMG:1,HR:1,FIELDSET:1},Jc:{submit:1,button:1,reset:1},R:function(){var a=this.j;return a.I.D()||a.v.D()},g:function(){var a=this.j;return(a.N.g()||a.v.g()||a.H.g())&&a.I.g()},X:function(){var a=this.e,b=this.j.I.m(),c=this.q.o(),e=c.i;c=c.f;var f,h,j,d,i;if(b){this.Hc();b=this.Bc(2);d=0;for(i=b.length;d<i;d++){j=b[d];f=this.sa("borderPiece"+d,j.stroke?"stroke":"fill",this.w());f.coordsize=e*2+","+c*2;f.coordorigin="1,1";f.path=j.path;h=f.style;h.width=e;h.height=c;f.filled=!!j.fill;f.stroked=!!j.stroke;
|
56 |
+
if(j.stroke){f=f.stroke;f.weight=j.mb+"px";f.color=j.color.O(a);f.dashstyle=j.stroke==="dashed"?"2 2":j.stroke==="dotted"?"1 1":"solid";f.linestyle=j.stroke==="double"&&j.mb>2?"ThinThin":"Single"}else f.fill.color=j.fill.O(a)}for(;this.Za("borderPiece"+d++););}},Hc:function(){var a=this.e,b=a.currentStyle,c=a.runtimeStyle,e=a.tagName,f=g.J===6,h;if(f&&e in this.qc||e==="BUTTON"||e==="INPUT"&&a.type in this.Jc){c.borderWidth="";e=this.j.I.Ib;for(h=e.length;h--;){f=e[h];c["padding"+f]="";c["padding"+
|
57 |
+
f]=g.k(b["padding"+f]).a(a)+g.k(b["border"+f+"Width"]).a(a)+(!g.J===8&&h%2?1:0)}c.borderWidth=0}else if(f){if(a.childNodes.length!==1||a.firstChild.tagName!=="ie6-mask"){b=doc.createElement("ie6-mask");e=b.style;e.visibility="visible";for(e.zoom=1;e=a.firstChild;)b.appendChild(e);a.appendChild(b);c.visibility="hidden"}}else c.borderColor="transparent"},Bc:function(a){var b=this.e,c,e,f,h=this.j.I,j=[],d,i,k,m,l=Math.round,t,n,p;if(h.g()){c=h.m();h=c.nb;n=c.Zc;p=c.tc;if(c.ed&&c.$c&&c.uc){if(p.t.la()>
|
58 |
+
0){c=h.t.a(b);k=c/2;j.push({path:this.oa({T:k,S:k,L:k,Q:k},a),stroke:n.t,color:p.t,mb:c})}}else{a=a||1;c=this.q.o();e=c.i;f=c.f;c=l(h.t.a(b));k=l(h.r.a(b));m=l(h.b.a(b));b=l(h.l.a(b));var s={t:c,r:k,b:m,l:b};b=this.j.v;if(b.g())t=this.xb(b.m());d=Math.floor;i=Math.ceil;var u=function(o,x){return t?t[o][x]:0},w=function(o,x,q,y,A,D){var B=u("x",o),C=u("y",o),z=o.charAt(1)==="r";o=o.charAt(0)==="b";return B>0&&C>0?(D?"al":"ae")+(z?i(e-B):d(B))*a+","+(o?i(f-C):d(C))*a+","+(d(B)-x)*a+","+(d(C)-q)*a+","+
|
59 |
+
y*65535+","+2949075*(A?1:-1):(D?"m":"l")+(z?e-x:x)*a+","+(o?f-q:q)*a},r=function(o,x,q,y){var A=o==="t"?d(u("x","tl"))*a+","+i(x)*a:o==="r"?i(e-x)*a+","+d(u("y","tr"))*a:o==="b"?i(e-u("x","br"))*a+","+d(f-x)*a:d(x)*a+","+i(f-u("y","bl"))*a;o=o==="t"?i(e-u("x","tr"))*a+","+i(x)*a:o==="r"?i(e-x)*a+","+i(f-u("y","br"))*a:o==="b"?d(u("x","bl"))*a+","+d(f-x)*a:d(x)*a+","+d(u("y","tl"))*a;return q?(y?"m"+o:"")+"l"+A:(y?"m"+A:"")+"l"+o};b=function(o,x,q,y,A,D){var B=o==="l"||o==="r",C=s[o],z,F;if(C>0&&n[o]!==
|
60 |
+
"none"&&p[o].la()>0){z=s[B?o:x];x=s[B?x:o];F=s[B?o:q];q=s[B?q:o];if(n[o]==="dashed"||n[o]==="dotted"){j.push({path:w(y,z,x,D+45,0,1)+w(y,0,0,D,1,0),fill:p[o]});j.push({path:r(o,C/2,0,1),stroke:n[o],mb:C,color:p[o]});j.push({path:w(A,F,q,D,0,1)+w(A,0,0,D-45,1,0),fill:p[o]})}else j.push({path:w(y,z,x,D+45,0,1)+r(o,C,0,0)+w(A,F,q,D,0,0)+(n[o]==="double"&&C>2?w(A,F-d(F/3),q-d(q/3),D-45,1,0)+r(o,i(C/3*2),1,0)+w(y,z-d(z/3),x-d(x/3),D,1,0)+"x "+w(y,d(z/3),d(x/3),D+45,0,1)+r(o,d(C/3),1,0)+w(A,d(F/3),d(q/
|
61 |
+
3),D,0,0):"")+w(A,0,0,D-45,1,0)+r(o,0,1,0)+w(y,0,0,D,1,0),fill:p[o]})}};b("t","l","r","tl","tr",90);b("r","t","b","tr","br",0);b("b","r","l","br","bl",-90);b("l","b","t","bl","tl",-180)}}return j},n:function(){g.B.n.call(this);this.e.runtimeStyle.borderColor=""}});g.Ub=g.B.Z({C:5,Oc:["t","tr","r","br","b","bl","l","tl","c"],R:function(){return this.j.N.D()},g:function(){return this.j.N.g()},X:function(){this.w();var a=this.j.N.m(),b=this.q.o(),c=this.e,e=this.Gb;g.p.Pb(a.src,function(f){function h(w,
|
62 |
+
r,o,x,q){w=e[w].style;var y=Math.max;w.width=y(r,0);w.height=y(o,0);w.left=x;w.top=q}function j(w,r,o){for(var x=0,q=w.length;x<q;x++)e[w[x]].imagedata[r]=o}var d=b.i,i=b.f,k=a.width,m=k.T.a(c),l=k.S.a(c),t=k.L.a(c);k=k.Q.a(c);var n=a.slice,p=n.T.a(c),s=n.S.a(c),u=n.L.a(c);n=n.Q.a(c);h("tl",k,m,0,0);h("t",d-k-l,m,k,0);h("tr",l,m,d-l,0);h("r",l,i-m-t,d-l,m);h("br",l,t,d-l,i-t);h("b",d-k-l,t,k,i-t);h("bl",k,t,0,i-t);h("l",k,i-m-t,0,m);h("c",d-k-l,i-m-t,k,m);j(["tl","t","tr"],"cropBottom",(f.f-p)/f.f);
|
63 |
+
j(["tl","l","bl"],"cropRight",(f.i-n)/f.i);j(["bl","b","br"],"cropTop",(f.f-u)/f.f);j(["tr","r","br"],"cropLeft",(f.i-s)/f.i);if(a.repeat.kb==="stretch"){j(["l","r","c"],"cropTop",p/f.f);j(["l","r","c"],"cropBottom",u/f.f)}if(a.repeat.f==="stretch"){j(["t","b","c"],"cropLeft",n/f.i);j(["t","b","c"],"cropRight",s/f.i)}e.c.style.display=a.fill?"":"none"},this)},w:function(){var a=this.parent.ra(this.C),b,c,e,f=this.Oc,h=f.length;if(!a){a=doc.createElement("border-image");b=a.style;b.position="absolute";
|
64 |
+
this.Gb={};for(e=0;e<h;e++){c=this.Gb[f[e]]=g.p.Ga("rect");c.appendChild(g.p.Ga("imagedata"));b=c.style;b.behavior="url(#default#VML)";b.position="absolute";b.top=b.left=0;c.imagedata.src=this.j.N.m().src;c.stroked=false;c.filled=false;a.appendChild(c)}this.parent.Wa(this.C,a)}return a}});g.Yb=g.B.Z({C:1,Fa:"outset-box-shadow",R:function(){var a=this.j;return a.W.D()||a.v.D()},g:function(){var a=this.j.W;return a.g()&&a.m().ua[0]},X:function(){function a(z,F,H,K,J,v,E){z=b.sa("shadow"+z+F,"fill",
|
65 |
+
e,j-z);F=z.fill;z.coordsize=m*2+","+l*2;z.coordorigin="1,1";z.stroked=false;z.filled=true;F.color=J.O(c);if(v){F.type="gradienttitle";F.color2=F.color;F.opacity=0}z.path=E;u=z.style;u.left=H;u.top=K;u.width=m;u.height=l;return z}var b=this,c=this.e,e=this.w(),f=this.j,h=f.W.m().ua;f=f.v.m();var j=h.length,d=j,i,k=this.q.o(),m=k.i,l=k.f;k=g.J===8?1:0;for(var t=["tl","tr","br","bl"],n,p,s,u,w,r,o,x,q,y,A,D,B,C;d--;){p=h[d];w=p.fd.a(c);r=p.gd.a(c);i=p.Xc.a(c);o=p.blur.a(c);p=p.color;x=-i-o;if(!f&&o)f=
|
66 |
+
g.Oa.Qb;x=this.oa({T:x,S:x,L:x,Q:x},2,f);if(o){q=(i+o)*2+m;y=(i+o)*2+l;A=o*2/q;D=o*2/y;if(o-i>m/2||o-i>l/2)for(i=4;i--;){n=t[i];B=n.charAt(0)==="b";C=n.charAt(1)==="r";n=a(d,n,w,r,p,o,x);s=n.fill;s.focusposition=(C?1-A:A)+","+(B?1-D:D);s.focussize="0,0";n.style.clip="rect("+((B?y/2:0)+k)+"px,"+(C?q:q/2)+"px,"+(B?y:y/2)+"px,"+((C?q/2:0)+k)+"px)"}else{n=a(d,"",w,r,p,o,x);s=n.fill;s.focusposition=A+","+D;s.focussize=1-A*2+","+(1-D*2)}}else{n=a(d,"",w,r,p,o,x);w=p.la();if(w<1)n.fill.opacity=w}}}});g.bc=
|
67 |
+
g.B.Z({C:6,Fa:"imgEl",R:function(){var a=this.j;return this.e.src!==this.hc||a.v.D()},g:function(){var a=this.j;return a.v.g()||a.H.Eb()},X:function(){this.hc=j;this.Gc();var a=this.sa("img","fill",this.w()),b=a.fill,c=this.q.o(),e=c.i;c=c.f;var f=this.j.I.m();f=f&&f.nb;var h=this.e,j=h.src,d=Math.round;a.stroked=false;b.type="frame";b.src=j;b.position=(e?0.5/e:0)+","+(c?0.5/c:0);a.coordsize=e*2+","+c*2;a.coordorigin="1,1";a.path=this.oa(f?{T:d(f.t.a(h)),S:d(f.r.a(h)),L:d(f.b.a(h)),Q:d(f.l.a(h))}:
|
68 |
+
0,2);a=a.style;a.width=e;a.height=c},Gc:function(){this.e.runtimeStyle.filter="alpha(opacity=0)"},n:function(){g.B.n.call(this);this.e.runtimeStyle.filter=""}});g.Qa=function(){function a(d){function i(){if(!z){var v,E,G=d.currentStyle,I=G.getAttribute(c)==="true";J=G.getAttribute(e);J=g.Ab===8?J!=="false":J==="true";if(!C){C=1;d.runtimeStyle.zoom=1;G=d;for(var O=1;G=G.previousSibling;)if(G.nodeType===1){O=0;break}if(O)d.className+=" "+g.Pa+"first-child"}y.Ja();if(I&&(E=y.o())&&(v=doc.documentElement||
|
69 |
+
doc.body)&&(E.y>v.clientHeight||E.x>v.clientWidth||E.y+E.f<0||E.x+E.i<0)){if(!H){H=1;g.Ra.aa(i)}}else{z=1;H=C=0;g.Ra.Ma(i);A={H:new g.Tb(d),I:new g.Xb(d),N:new g.Vb(d),v:new g.Oa(d),W:new g.Zb(d),lb:new g.ec(d)};D=[A.H,A.I,A.N,A.v,A.W,A.lb];v=new g.cc(d,y,A);E=[new g.Yb(d,y,A,v),new g.Sb(d,y,A,v),new g.Wb(d,y,A,v),new g.Ub(d,y,A,v)];d.tagName==="IMG"&&E.push(new g.bc(d,y,A,v));v.oc=E;q=[v].concat(E);if(v=d.currentStyle.getAttribute(g.F+"watch-ancestors")){B=[];v=parseInt(v,10);E=0;for(I=d.parentNode;I&&
|
70 |
+
(v==="NaN"||E++<v);){B.push(I);I.attachEvent("onpropertychange",u);I.attachEvent("onmouseenter",p);I.attachEvent("onmouseleave",s);I=I.parentNode}}if(J){g.ya.aa(m);g.ya.Tc()}m(1)}if(!F){F=1;d.attachEvent("onmove",k);d.attachEvent("onresize",k);d.attachEvent("onpropertychange",l);d.attachEvent("onmouseenter",p);d.attachEvent("onmouseleave",s);g.za.aa(k);g.G.aa(o)}y.La()}}function k(){y&&y.Ec()&&m()}function m(v){if(!K)if(z){var E,G;w();if(v||y.Qc()){E=0;for(G=q.length;E<G;E++)q[E].jb()}if(v||y.Vc()){E=
|
71 |
+
0;for(G=q.length;E<G;E++)q[E].Lb()}r()}else C||i()}function l(){var v,E,G;v=event;if(!K&&!(v&&v.propertyName in j))if(z){w();v=0;for(E=q.length;v<E;v++){G=q[v];G.eb||G.jb();G.R()&&G.Kb()}r()}else C||i()}function t(){if(d)d.className+=f}function n(){if(d)d.className=d.className.replace(h,"")}function p(){setTimeout(t,0)}function s(){setTimeout(n,0)}function u(){var v=event.propertyName;if(v==="className"||v==="id")l()}function w(){y.Ja();for(var v=D.length;v--;)D[v].Ja()}function r(){for(var v=D.length;v--;)D[v].La();
|
72 |
+
y.La()}function o(){if(F){if(B)for(var v=0,E=B.length,G;v<E;v++){G=B[v];G.detachEvent("onpropertychange",u);G.detachEvent("onmouseenter",p);G.detachEvent("onmouseleave",s)}d.detachEvent("onmove",m);d.detachEvent("onresize",m);d.detachEvent("onpropertychange",l);d.detachEvent("onmouseenter",p);d.detachEvent("onmouseleave",s);g.G.Ma(o);F=0}}function x(){if(!K){var v,E;o();K=1;if(q){v=0;for(E=q.length;v<E;v++)q[v].n()}J&&g.ya.Ma(m);g.za.Ma(m);q=y=A=D=B=d=null}}var q,y=new M(d),A,D,B,C,z,F,H,K,J;this.Ic=
|
73 |
+
i;this.update=m;this.n=x;this.Ac=d}var b={},c=g.F+"lazy-init",e=g.F+"poll",f=" "+g.Pa+"hover",h=new RegExp("\\b"+g.Pa+"hover\\b","g"),j={background:1,bgColor:1,display:1};a.Cc=function(d){var i=g.p.ta(d);return b[i]||(b[i]=new a(d))};a.n=function(d){d=g.p.ta(d);var i=b[d];if(i){i.n();delete b[d]}};a.wc=function(){var d=[],i;if(b){for(var k in b)if(b.hasOwnProperty(k)){i=b[k];d.push(i.Ac);i.n()}b={}}return d};return a}();g.attach=function(a){g.Ab<9&&g.Qa.Cc(a).Ic()};g.detach=function(a){g.Qa.n(a)}};
|
74 |
})();
|
js/PIE/PIE.php
CHANGED
@@ -1,19 +1,19 @@
|
|
1 |
-
<?php
|
2 |
-
/*
|
3 |
-
This file is a wrapper, for use in PHP environments, which serves PIE.htc using the
|
4 |
-
correct content-type, so that IE will recognize it as a behavior. Simply specify the
|
5 |
-
behavior property to fetch this .php file instead of the .htc directly:
|
6 |
-
|
7 |
-
.myElement {
|
8 |
-
[ ...css3 properties... ]
|
9 |
-
behavior: url(PIE.php);
|
10 |
-
}
|
11 |
-
|
12 |
-
This is only necessary when the web server is not configured to serve .htc files with
|
13 |
-
the text/x-component content-type, and cannot easily be configured to do so (as is the
|
14 |
-
case with some shared hosting providers).
|
15 |
-
*/
|
16 |
-
|
17 |
-
header( 'Content-type: text/x-component' );
|
18 |
-
include( 'PIE.htc' );
|
19 |
?>
|
1 |
+
<?php
|
2 |
+
/*
|
3 |
+
This file is a wrapper, for use in PHP environments, which serves PIE.htc using the
|
4 |
+
correct content-type, so that IE will recognize it as a behavior. Simply specify the
|
5 |
+
behavior property to fetch this .php file instead of the .htc directly:
|
6 |
+
|
7 |
+
.myElement {
|
8 |
+
[ ...css3 properties... ]
|
9 |
+
behavior: url(PIE.php);
|
10 |
+
}
|
11 |
+
|
12 |
+
This is only necessary when the web server is not configured to serve .htc files with
|
13 |
+
the text/x-component content-type, and cannot easily be configured to do so (as is the
|
14 |
+
case with some shared hosting providers).
|
15 |
+
*/
|
16 |
+
|
17 |
+
header( 'Content-type: text/x-component' );
|
18 |
+
include( 'PIE.htc' );
|
19 |
?>
|
js/PIE/PIE_uncompressed.htc
CHANGED
@@ -1,3713 +1,3713 @@
|
|
1 |
-
<!--
|
2 |
-
PIE: CSS3 rendering for IE
|
3 |
-
Version 1.0beta4
|
4 |
-
http://css3pie.com
|
5 |
-
Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
|
6 |
-
-->
|
7 |
-
<PUBLIC:COMPONENT lightWeight="true">
|
8 |
-
<PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" />
|
9 |
-
<PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="init()" />
|
10 |
-
<PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />
|
11 |
-
|
12 |
-
<script type="text/javascript">
|
13 |
-
var doc = element.document;var PIE = window['PIE'];
|
14 |
-
|
15 |
-
if( !PIE ) {
|
16 |
-
PIE = window['PIE'] = {
|
17 |
-
CSS_PREFIX: '-pie-',
|
18 |
-
STYLE_PREFIX: 'Pie',
|
19 |
-
CLASS_PREFIX: 'pie_',
|
20 |
-
tableCellTags: {
|
21 |
-
'TD': 1,
|
22 |
-
'TH': 1
|
23 |
-
}
|
24 |
-
};
|
25 |
-
|
26 |
-
// Force the background cache to be used. No reason it shouldn't be.
|
27 |
-
try {
|
28 |
-
doc.execCommand( 'BackgroundImageCache', false, true );
|
29 |
-
} catch(e) {}
|
30 |
-
|
31 |
-
/*
|
32 |
-
* IE version detection approach by James Padolsey, with modifications -- from
|
33 |
-
* http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
|
34 |
-
*/
|
35 |
-
PIE.ieVersion = function(){
|
36 |
-
var v = 4,
|
37 |
-
div = doc.createElement('div'),
|
38 |
-
all = div.getElementsByTagName('i');
|
39 |
-
|
40 |
-
while (
|
41 |
-
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
|
42 |
-
all[0]
|
43 |
-
) {}
|
44 |
-
|
45 |
-
return v;
|
46 |
-
}();
|
47 |
-
|
48 |
-
// Detect IE6
|
49 |
-
if( PIE.ieVersion === 6 ) {
|
50 |
-
// IE6 can't access properties with leading dash, but can without it.
|
51 |
-
PIE.CSS_PREFIX = PIE.CSS_PREFIX.replace( /^-/, '' );
|
52 |
-
}
|
53 |
-
|
54 |
-
// Detect IE8
|
55 |
-
PIE.ieDocMode = doc.documentMode || PIE.ieVersion;
|
56 |
-
/**
|
57 |
-
* Utility functions
|
58 |
-
*/
|
59 |
-
(function() {
|
60 |
-
var vmlCreatorDoc,
|
61 |
-
idNum = 0,
|
62 |
-
imageSizes = {};
|
63 |
-
|
64 |
-
|
65 |
-
PIE.Util = {
|
66 |
-
|
67 |
-
/**
|
68 |
-
* To create a VML element, it must be created by a Document which has the VML
|
69 |
-
* namespace set. Unfortunately, if you try to add the namespace programatically
|
70 |
-
* into the main document, you will get an "Unspecified error" when trying to
|
71 |
-
* access document.namespaces before the document is finished loading. To get
|
72 |
-
* around this, we create a DocumentFragment, which in IE land is apparently a
|
73 |
-
* full-fledged Document. It allows adding namespaces immediately, so we add the
|
74 |
-
* namespace there and then have it create the VML element.
|
75 |
-
* @param {string} tag The tag name for the VML element
|
76 |
-
* @return {Element} The new VML element
|
77 |
-
*/
|
78 |
-
createVmlElement: function( tag ) {
|
79 |
-
var vmlPrefix = 'css3vml';
|
80 |
-
if( !vmlCreatorDoc ) {
|
81 |
-
vmlCreatorDoc = doc.createDocumentFragment();
|
82 |
-
vmlCreatorDoc.namespaces.add( vmlPrefix, 'urn:schemas-microsoft-com:vml' );
|
83 |
-
}
|
84 |
-
return vmlCreatorDoc.createElement( vmlPrefix + ':' + tag );
|
85 |
-
},
|
86 |
-
|
87 |
-
|
88 |
-
/**
|
89 |
-
* Generate and return a unique ID for a given object. The generated ID is stored
|
90 |
-
* as a property of the object for future reuse.
|
91 |
-
* @param {Object} obj
|
92 |
-
*/
|
93 |
-
getUID: function( obj ) {
|
94 |
-
return obj && obj[ '_pieId' ] || ( obj[ '_pieId' ] = ++idNum );
|
95 |
-
},
|
96 |
-
|
97 |
-
|
98 |
-
/**
|
99 |
-
* Simple utility for merging objects
|
100 |
-
* @param {Object} obj1 The main object into which all others will be merged
|
101 |
-
* @param {...Object} var_args Other objects which will be merged into the first, in order
|
102 |
-
*/
|
103 |
-
merge: function( obj1 ) {
|
104 |
-
var i, len, p, objN, args = arguments;
|
105 |
-
for( i = 1, len = args.length; i < len; i++ ) {
|
106 |
-
objN = args[i];
|
107 |
-
for( p in objN ) {
|
108 |
-
if( objN.hasOwnProperty( p ) ) {
|
109 |
-
obj1[ p ] = objN[ p ];
|
110 |
-
}
|
111 |
-
}
|
112 |
-
}
|
113 |
-
return obj1;
|
114 |
-
},
|
115 |
-
|
116 |
-
|
117 |
-
/**
|
118 |
-
* Execute a callback function, passing it the dimensions of a given image once
|
119 |
-
* they are known.
|
120 |
-
* @param {string} src The source URL of the image
|
121 |
-
* @param {function({w:number, h:number})} func The callback function to be called once the image dimensions are known
|
122 |
-
* @param {Object} ctx A context object which will be used as the 'this' value within the executed callback function
|
123 |
-
*/
|
124 |
-
withImageSize: function( src, func, ctx ) {
|
125 |
-
var size = imageSizes[ src ], img, queue;
|
126 |
-
if( size ) {
|
127 |
-
// If we have a queue, add to it
|
128 |
-
if( Object.prototype.toString.call( size ) === '[object Array]' ) {
|
129 |
-
size.push( [ func, ctx ] );
|
130 |
-
}
|
131 |
-
// Already have the size cached, call func right away
|
132 |
-
else {
|
133 |
-
func.call( ctx, size );
|
134 |
-
}
|
135 |
-
} else {
|
136 |
-
queue = imageSizes[ src ] = [ [ func, ctx ] ]; //create queue
|
137 |
-
img = new Image();
|
138 |
-
img.onload = function() {
|
139 |
-
size = imageSizes[ src ] = { w: img.width, h: img.height };
|
140 |
-
for( var i = 0, len = queue.length; i < len; i++ ) {
|
141 |
-
queue[ i ][ 0 ].call( queue[ i ][ 1 ], size );
|
142 |
-
}
|
143 |
-
img.onload = null;
|
144 |
-
};
|
145 |
-
img.src = src;
|
146 |
-
}
|
147 |
-
}
|
148 |
-
};
|
149 |
-
})();/**
|
150 |
-
*
|
151 |
-
*/
|
152 |
-
PIE.Observable = function() {
|
153 |
-
/**
|
154 |
-
* List of registered observer functions
|
155 |
-
*/
|
156 |
-
this.observers = [];
|
157 |
-
|
158 |
-
/**
|
159 |
-
* Hash of function ids to their position in the observers list, for fast lookup
|
160 |
-
*/
|
161 |
-
this.indexes = {};
|
162 |
-
};
|
163 |
-
PIE.Observable.prototype = {
|
164 |
-
|
165 |
-
observe: function( fn ) {
|
166 |
-
var id = PIE.Util.getUID( fn ),
|
167 |
-
indexes = this.indexes,
|
168 |
-
observers = this.observers;
|
169 |
-
if( !( id in indexes ) ) {
|
170 |
-
indexes[ id ] = observers.length;
|
171 |
-
observers.push( fn );
|
172 |
-
}
|
173 |
-
},
|
174 |
-
|
175 |
-
unobserve: function( fn ) {
|
176 |
-
var id = PIE.Util.getUID( fn ),
|
177 |
-
indexes = this.indexes;
|
178 |
-
if( id && id in indexes ) {
|
179 |
-
delete this.observers[ indexes[ id ] ];
|
180 |
-
delete indexes[ id ];
|
181 |
-
}
|
182 |
-
},
|
183 |
-
|
184 |
-
fire: function() {
|
185 |
-
var o = this.observers,
|
186 |
-
i = o.length;
|
187 |
-
while( i-- ) {
|
188 |
-
o[ i ] && o[ i ]();
|
189 |
-
}
|
190 |
-
}
|
191 |
-
|
192 |
-
};/*
|
193 |
-
* Simple heartbeat timer - this is a brute-force workaround for syncing issues caused by IE not
|
194 |
-
* always firing the onmove and onresize events when elements are moved or resized. We check a few
|
195 |
-
* times every second to make sure the elements have the correct position and size. See Element.js
|
196 |
-
* which adds heartbeat listeners based on the custom -pie-poll flag, which defaults to true in IE8
|
197 |
-
* and false elsewhere.
|
198 |
-
*/
|
199 |
-
|
200 |
-
PIE.Heartbeat = new PIE.Observable();
|
201 |
-
PIE.Heartbeat.run = function() {
|
202 |
-
var me = this;
|
203 |
-
if( !me.running ) {
|
204 |
-
setInterval( function() { me.fire() }, 250 );
|
205 |
-
me.running = 1;
|
206 |
-
}
|
207 |
-
};
|
208 |
-
/**
|
209 |
-
* Create an observable listener for the onbeforeunload event
|
210 |
-
*/
|
211 |
-
PIE.OnBeforeUnload = new PIE.Observable();
|
212 |
-
window.attachEvent( 'onbeforeunload', function() { PIE.OnBeforeUnload.fire(); } );
|
213 |
-
|
214 |
-
/**
|
215 |
-
* Attach an event which automatically gets detached onbeforeunload
|
216 |
-
*/
|
217 |
-
PIE.OnBeforeUnload.attachManagedEvent = function( target, name, handler ) {
|
218 |
-
target.attachEvent( name, handler );
|
219 |
-
this.observe( function() {
|
220 |
-
target.detachEvent( name, handler );
|
221 |
-
} );
|
222 |
-
};/**
|
223 |
-
* Create a single observable listener for window resize events.
|
224 |
-
*/
|
225 |
-
(function() {
|
226 |
-
PIE.OnResize = new PIE.Observable();
|
227 |
-
|
228 |
-
function resized() {
|
229 |
-
PIE.OnResize.fire();
|
230 |
-
}
|
231 |
-
|
232 |
-
PIE.OnBeforeUnload.attachManagedEvent( window, 'onresize', resized );
|
233 |
-
})();
|
234 |
-
/**
|
235 |
-
* Create a single observable listener for scroll events. Used for lazy loading based
|
236 |
-
* on the viewport, and for fixed position backgrounds.
|
237 |
-
*/
|
238 |
-
(function() {
|
239 |
-
PIE.OnScroll = new PIE.Observable();
|
240 |
-
|
241 |
-
function scrolled() {
|
242 |
-
PIE.OnScroll.fire();
|
243 |
-
}
|
244 |
-
|
245 |
-
PIE.OnBeforeUnload.attachManagedEvent( window, 'onscroll', scrolled );
|
246 |
-
|
247 |
-
PIE.OnResize.observe( scrolled );
|
248 |
-
})();
|
249 |
-
/**
|
250 |
-
* Listen for printing events, destroy all active PIE instances when printing, and
|
251 |
-
* restore them afterward.
|
252 |
-
*/
|
253 |
-
(function() {
|
254 |
-
|
255 |
-
var elements;
|
256 |
-
|
257 |
-
function beforePrint() {
|
258 |
-
elements = PIE.Element.destroyAll();
|
259 |
-
}
|
260 |
-
|
261 |
-
function afterPrint() {
|
262 |
-
if( elements ) {
|
263 |
-
for( var i = 0, len = elements.length; i < len; i++ ) {
|
264 |
-
PIE[ 'attach' ]( elements[i] );
|
265 |
-
}
|
266 |
-
elements = 0;
|
267 |
-
}
|
268 |
-
}
|
269 |
-
|
270 |
-
PIE.OnBeforeUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint );
|
271 |
-
PIE.OnBeforeUnload.attachManagedEvent( window, 'onafterprint', afterPrint );
|
272 |
-
|
273 |
-
})();/**
|
274 |
-
* Wrapper for length and percentage style values. The value is immutable. A singleton instance per unique
|
275 |
-
* value is returned from PIE.getLength() - always use that instead of instantiating directly.
|
276 |
-
* @constructor
|
277 |
-
* @param {string} val The CSS string representing the length. It is assumed that this will already have
|
278 |
-
* been validated as a valid length or percentage syntax.
|
279 |
-
*/
|
280 |
-
PIE.Length = (function() {
|
281 |
-
var lengthCalcEl = doc.createElement( 'length-calc' ),
|
282 |
-
parent = doc.documentElement,
|
283 |
-
s = lengthCalcEl.style,
|
284 |
-
conversions = {},
|
285 |
-
units = [ 'mm', 'cm', 'in', 'pt', 'pc' ],
|
286 |
-
i = units.length,
|
287 |
-
instances = {};
|
288 |
-
|
289 |
-
s.position = 'absolute';
|
290 |
-
s.top = s.left = '-9999px';
|
291 |
-
|
292 |
-
parent.appendChild( lengthCalcEl );
|
293 |
-
while( i-- ) {
|
294 |
-
lengthCalcEl.style.width = '100' + units[i];
|
295 |
-
conversions[ units[i] ] = lengthCalcEl.offsetWidth / 100;
|
296 |
-
}
|
297 |
-
parent.removeChild( lengthCalcEl );
|
298 |
-
|
299 |
-
|
300 |
-
function Length( val ) {
|
301 |
-
this.val = val;
|
302 |
-
}
|
303 |
-
Length.prototype = {
|
304 |
-
/**
|
305 |
-
* Regular expression for matching the length unit
|
306 |
-
* @private
|
307 |
-
*/
|
308 |
-
unitRE: /(px|em|ex|mm|cm|in|pt|pc|%)$/,
|
309 |
-
|
310 |
-
/**
|
311 |
-
* Get the numeric value of the length
|
312 |
-
* @return {number} The value
|
313 |
-
*/
|
314 |
-
getNumber: function() {
|
315 |
-
var num = this.num,
|
316 |
-
UNDEF;
|
317 |
-
if( num === UNDEF ) {
|
318 |
-
num = this.num = parseFloat( this.val );
|
319 |
-
}
|
320 |
-
return num;
|
321 |
-
},
|
322 |
-
|
323 |
-
/**
|
324 |
-
* Get the unit of the length
|
325 |
-
* @return {string} The unit
|
326 |
-
*/
|
327 |
-
getUnit: function() {
|
328 |
-
var unit = this.unit,
|
329 |
-
m;
|
330 |
-
if( !unit ) {
|
331 |
-
m = this.val.match( this.unitRE );
|
332 |
-
unit = this.unit = ( m && m[0] ) || 'px';
|
333 |
-
}
|
334 |
-
return unit;
|
335 |
-
},
|
336 |
-
|
337 |
-
/**
|
338 |
-
* Determine whether this is a percentage length value
|
339 |
-
* @return {boolean}
|
340 |
-
*/
|
341 |
-
isPercentage: function() {
|
342 |
-
return this.getUnit() === '%';
|
343 |
-
},
|
344 |
-
|
345 |
-
/**
|
346 |
-
* Resolve this length into a number of pixels.
|
347 |
-
* @param {Element} el - the context element, used to resolve font-relative values
|
348 |
-
* @param {(function():number|number)=} pct100 - the number of pixels that equal a 100% percentage. This can be either a number or a
|
349 |
-
* function which will be called to return the number.
|
350 |
-
*/
|
351 |
-
pixels: function( el, pct100 ) {
|
352 |
-
var num = this.getNumber(),
|
353 |
-
unit = this.getUnit();
|
354 |
-
switch( unit ) {
|
355 |
-
case "px":
|
356 |
-
return num;
|
357 |
-
case "%":
|
358 |
-
return num * ( typeof pct100 === 'function' ? pct100() : pct100 ) / 100;
|
359 |
-
case "em":
|
360 |
-
return num * this.getEmPixels( el );
|
361 |
-
case "ex":
|
362 |
-
return num * this.getEmPixels( el ) / 2;
|
363 |
-
default:
|
364 |
-
return num * conversions[ unit ];
|
365 |
-
}
|
366 |
-
},
|
367 |
-
|
368 |
-
/**
|
369 |
-
* The em and ex units are relative to the font-size of the current element,
|
370 |
-
* however if the font-size is set using non-pixel units then we get that value
|
371 |
-
* rather than a pixel conversion. To get around this, we keep a floating element
|
372 |
-
* with width:1em which we insert into the target element and then read its offsetWidth.
|
373 |
-
* But if the font-size *is* specified in pixels, then we use that directly to avoid
|
374 |
-
* the expensive DOM manipulation.
|
375 |
-
* @param el
|
376 |
-
*/
|
377 |
-
getEmPixels: function( el ) {
|
378 |
-
var fs = el.currentStyle.fontSize,
|
379 |
-
px;
|
380 |
-
|
381 |
-
if( fs.indexOf( 'px' ) > 0 ) {
|
382 |
-
return parseFloat( fs );
|
383 |
-
} else {
|
384 |
-
lengthCalcEl.style.width = '1em';
|
385 |
-
el.appendChild( lengthCalcEl );
|
386 |
-
px = lengthCalcEl.offsetWidth;
|
387 |
-
if( lengthCalcEl.parentNode === el ) { //not sure how this could be false but it sometimes is
|
388 |
-
el.removeChild( lengthCalcEl );
|
389 |
-
}
|
390 |
-
return px;
|
391 |
-
}
|
392 |
-
}
|
393 |
-
};
|
394 |
-
|
395 |
-
|
396 |
-
/**
|
397 |
-
* Retrieve a PIE.Length instance for the given value. A shared singleton instance is returned for each unique value.
|
398 |
-
* @param {string} val The CSS string representing the length. It is assumed that this will already have
|
399 |
-
* been validated as a valid length or percentage syntax.
|
400 |
-
*/
|
401 |
-
PIE.getLength = function( val ) {
|
402 |
-
return instances[ val ] || ( instances[ val ] = new Length( val ) );
|
403 |
-
};
|
404 |
-
|
405 |
-
return Length;
|
406 |
-
})();
|
407 |
-
/**
|
408 |
-
* Wrapper for a CSS3 bg-position value. Takes up to 2 position keywords and 2 lengths/percentages.
|
409 |
-
* @constructor
|
410 |
-
* @param {Array.<PIE.Tokenizer.Token>} tokens The tokens making up the background position value.
|
411 |
-
*/
|
412 |
-
PIE.BgPosition = (function() {
|
413 |
-
|
414 |
-
var length_fifty = PIE.getLength( '50%' ),
|
415 |
-
vert_idents = { 'top': 1, 'center': 1, 'bottom': 1 },
|
416 |
-
horiz_idents = { 'left': 1, 'center': 1, 'right': 1 };
|
417 |
-
|
418 |
-
|
419 |
-
function BgPosition( tokens ) {
|
420 |
-
this.tokens = tokens;
|
421 |
-
}
|
422 |
-
BgPosition.prototype = {
|
423 |
-
/**
|
424 |
-
* Normalize the values into the form:
|
425 |
-
* [ xOffsetSide, xOffsetLength, yOffsetSide, yOffsetLength ]
|
426 |
-
* where: xOffsetSide is either 'left' or 'right',
|
427 |
-
* yOffsetSide is either 'top' or 'bottom',
|
428 |
-
* and x/yOffsetLength are both PIE.Length objects.
|
429 |
-
* @return {Array}
|
430 |
-
*/
|
431 |
-
getValues: function() {
|
432 |
-
if( !this._values ) {
|
433 |
-
var tokens = this.tokens,
|
434 |
-
len = tokens.length,
|
435 |
-
Tokenizer = PIE.Tokenizer,
|
436 |
-
identType = Tokenizer.Type,
|
437 |
-
length_zero = PIE.getLength( '0' ),
|
438 |
-
type_ident = identType.IDENT,
|
439 |
-
type_length = identType.LENGTH,
|
440 |
-
type_percent = identType.PERCENT,
|
441 |
-
type, value,
|
442 |
-
vals = [ 'left', length_zero, 'top', length_zero ];
|
443 |
-
|
444 |
-
// If only one value, the second is assumed to be 'center'
|
445 |
-
if( len === 1 ) {
|
446 |
-
tokens.push( new Tokenizer.Token( type_ident, 'center' ) );
|
447 |
-
len++;
|
448 |
-
}
|
449 |
-
|
450 |
-
// Two values - CSS2
|
451 |
-
if( len === 2 ) {
|
452 |
-
// If both idents, they can appear in either order, so switch them if needed
|
453 |
-
if( type_ident & ( tokens[0].tokenType | tokens[1].tokenType ) &&
|
454 |
-
tokens[0].tokenValue in vert_idents && tokens[1].tokenValue in horiz_idents ) {
|
455 |
-
tokens.push( tokens.shift() );
|
456 |
-
}
|
457 |
-
if( tokens[0].tokenType & type_ident ) {
|
458 |
-
if( tokens[0].tokenValue === 'center' ) {
|
459 |
-
vals[1] = length_fifty;
|
460 |
-
} else {
|
461 |
-
vals[0] = tokens[0].tokenValue;
|
462 |
-
}
|
463 |
-
}
|
464 |
-
else if( tokens[0].isLengthOrPercent() ) {
|
465 |
-
vals[1] = PIE.getLength( tokens[0].tokenValue );
|
466 |
-
}
|
467 |
-
if( tokens[1].tokenType & type_ident ) {
|
468 |
-
if( tokens[1].tokenValue === 'center' ) {
|
469 |
-
vals[3] = length_fifty;
|
470 |
-
} else {
|
471 |
-
vals[2] = tokens[1].tokenValue;
|
472 |
-
}
|
473 |
-
}
|
474 |
-
else if( tokens[1].isLengthOrPercent() ) {
|
475 |
-
vals[3] = PIE.getLength( tokens[1].tokenValue );
|
476 |
-
}
|
477 |
-
}
|
478 |
-
|
479 |
-
// Three or four values - CSS3
|
480 |
-
else {
|
481 |
-
// TODO
|
482 |
-
}
|
483 |
-
|
484 |
-
this._values = vals;
|
485 |
-
}
|
486 |
-
return this._values;
|
487 |
-
},
|
488 |
-
|
489 |
-
/**
|
490 |
-
* Find the coordinates of the background image from the upper-left corner of the background area.
|
491 |
-
* Note that these coordinate values are not rounded.
|
492 |
-
* @param {Element} el
|
493 |
-
* @param {number} width - the width for percentages (background area width minus image width)
|
494 |
-
* @param {number} height - the height for percentages (background area height minus image height)
|
495 |
-
* @return {Object} { x: Number, y: Number }
|
496 |
-
*/
|
497 |
-
coords: function( el, width, height ) {
|
498 |
-
var vals = this.getValues(),
|
499 |
-
pxX = vals[1].pixels( el, width ),
|
500 |
-
pxY = vals[3].pixels( el, height );
|
501 |
-
|
502 |
-
return {
|
503 |
-
x: vals[0] === 'right' ? width - pxX : pxX,
|
504 |
-
y: vals[2] === 'bottom' ? height - pxY : pxY
|
505 |
-
};
|
506 |
-
}
|
507 |
-
};
|
508 |
-
|
509 |
-
return BgPosition;
|
510 |
-
})();
|
511 |
-
/**
|
512 |
-
* Wrapper for angle values; handles conversion to degrees from all allowed angle units
|
513 |
-
* @constructor
|
514 |
-
* @param {string} val The raw CSS value for the angle. It is assumed it has been pre-validated.
|
515 |
-
*/
|
516 |
-
PIE.Angle = (function() {
|
517 |
-
function Angle( val ) {
|
518 |
-
this.val = val;
|
519 |
-
}
|
520 |
-
Angle.prototype = {
|
521 |
-
unitRE: /[a-z]+$/i,
|
522 |
-
|
523 |
-
/**
|
524 |
-
* @return {string} The unit of the angle value
|
525 |
-
*/
|
526 |
-
getUnit: function() {
|
527 |
-
return this._unit || ( this._unit = this.val.match( this.unitRE )[0].toLowerCase() );
|
528 |
-
},
|
529 |
-
|
530 |
-
/**
|
531 |
-
* Get the numeric value of the angle in degrees.
|
532 |
-
* @return {number} The degrees value
|
533 |
-
*/
|
534 |
-
degrees: function() {
|
535 |
-
var deg = this._deg, u, n;
|
536 |
-
if( deg === undefined ) {
|
537 |
-
u = this.getUnit();
|
538 |
-
n = parseFloat( this.val, 10 );
|
539 |
-
deg = this._deg = ( u === 'deg' ? n : u === 'rad' ? n / Math.PI * 180 : u === 'grad' ? n / 400 * 360 : u === 'turn' ? n * 360 : 0 );
|
540 |
-
}
|
541 |
-
return deg;
|
542 |
-
}
|
543 |
-
};
|
544 |
-
|
545 |
-
return Angle;
|
546 |
-
})();/**
|
547 |
-
* Abstraction for colors values. Allows detection of rgba values. A singleton instance per unique
|
548 |
-
* value is returned from PIE.getColor() - always use that instead of instantiating directly.
|
549 |
-
* @constructor
|
550 |
-
* @param {string} val The raw CSS string value for the color
|
551 |
-
*/
|
552 |
-
PIE.Color = (function() {
|
553 |
-
var instances = {};
|
554 |
-
|
555 |
-
function Color( val ) {
|
556 |
-
this.val = val;
|
557 |
-
}
|
558 |
-
|
559 |
-
/**
|
560 |
-
* Regular expression for matching rgba colors and extracting their components
|
561 |
-
* @type {RegExp}
|
562 |
-
*/
|
563 |
-
Color.rgbaRE = /\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;
|
564 |
-
|
565 |
-
Color.names = {
|
566 |
-
"aliceblue":"F0F8FF", "antiquewhite":"FAEBD7", "aqua":"0FF",
|
567 |
-
"aquamarine":"7FFFD4", "azure":"F0FFFF", "beige":"F5F5DC",
|
568 |
-
"bisque":"FFE4C4", "black":"000", "blanchedalmond":"FFEBCD",
|
569 |
-
"blue":"00F", "blueviolet":"8A2BE2", "brown":"A52A2A",
|
570 |
-
"burlywood":"DEB887", "cadetblue":"5F9EA0", "chartreuse":"7FFF00",
|
571 |
-
"chocolate":"D2691E", "coral":"FF7F50", "cornflowerblue":"6495ED",
|
572 |
-
"cornsilk":"FFF8DC", "crimson":"DC143C", "cyan":"0FF",
|
573 |
-
"darkblue":"00008B", "darkcyan":"008B8B", "darkgoldenrod":"B8860B",
|
574 |
-
"darkgray":"A9A9A9", "darkgreen":"006400", "darkkhaki":"BDB76B",
|
575 |
-
"darkmagenta":"8B008B", "darkolivegreen":"556B2F", "darkorange":"FF8C00",
|
576 |
-
"darkorchid":"9932CC", "darkred":"8B0000", "darksalmon":"E9967A",
|
577 |
-
"darkseagreen":"8FBC8F", "darkslateblue":"483D8B", "darkslategray":"2F4F4F",
|
578 |
-
"darkturquoise":"00CED1", "darkviolet":"9400D3", "deeppink":"FF1493",
|
579 |
-
"deepskyblue":"00BFFF", "dimgray":"696969", "dodgerblue":"1E90FF",
|
580 |
-
"firebrick":"B22222", "floralwhite":"FFFAF0", "forestgreen":"228B22",
|
581 |
-
"fuchsia":"F0F", "gainsboro":"DCDCDC", "ghostwhite":"F8F8FF",
|
582 |
-
"gold":"FFD700", "goldenrod":"DAA520", "gray":"808080",
|
583 |
-
"green":"008000", "greenyellow":"ADFF2F", "honeydew":"F0FFF0",
|
584 |
-
"hotpink":"FF69B4", "indianred":"CD5C5C", "indigo":"4B0082",
|
585 |
-
"ivory":"FFFFF0", "khaki":"F0E68C", "lavender":"E6E6FA",
|
586 |
-
"lavenderblush":"FFF0F5", "lawngreen":"7CFC00", "lemonchiffon":"FFFACD",
|
587 |
-
"lightblue":"ADD8E6", "lightcoral":"F08080", "lightcyan":"E0FFFF",
|
588 |
-
"lightgoldenrodyellow":"FAFAD2", "lightgreen":"90EE90", "lightgrey":"D3D3D3",
|
589 |
-
"lightpink":"FFB6C1", "lightsalmon":"FFA07A", "lightseagreen":"20B2AA",
|
590 |
-
"lightskyblue":"87CEFA", "lightslategray":"789", "lightsteelblue":"B0C4DE",
|
591 |
-
"lightyellow":"FFFFE0", "lime":"0F0", "limegreen":"32CD32",
|
592 |
-
"linen":"FAF0E6", "magenta":"F0F", "maroon":"800000",
|
593 |
-
"mediumauqamarine":"66CDAA", "mediumblue":"0000CD", "mediumorchid":"BA55D3",
|
594 |
-
"mediumpurple":"9370D8", "mediumseagreen":"3CB371", "mediumslateblue":"7B68EE",
|
595 |
-
"mediumspringgreen":"00FA9A", "mediumturquoise":"48D1CC", "mediumvioletred":"C71585",
|
596 |
-
"midnightblue":"191970", "mintcream":"F5FFFA", "mistyrose":"FFE4E1",
|
597 |
-
"moccasin":"FFE4B5", "navajowhite":"FFDEAD", "navy":"000080",
|
598 |
-
"oldlace":"FDF5E6", "olive":"808000", "olivedrab":"688E23",
|
599 |
-
"orange":"FFA500", "orangered":"FF4500", "orchid":"DA70D6",
|
600 |
-
"palegoldenrod":"EEE8AA", "palegreen":"98FB98", "paleturquoise":"AFEEEE",
|
601 |
-
"palevioletred":"D87093", "papayawhip":"FFEFD5", "peachpuff":"FFDAB9",
|
602 |
-
"peru":"CD853F", "pink":"FFC0CB", "plum":"DDA0DD",
|
603 |
-
"powderblue":"B0E0E6", "purple":"800080", "red":"F00",
|
604 |
-
"rosybrown":"BC8F8F", "royalblue":"4169E1", "saddlebrown":"8B4513",
|
605 |
-
"salmon":"FA8072", "sandybrown":"F4A460", "seagreen":"2E8B57",
|
606 |
-
"seashell":"FFF5EE", "sienna":"A0522D", "silver":"C0C0C0",
|
607 |
-
"skyblue":"87CEEB", "slateblue":"6A5ACD", "slategray":"708090",
|
608 |
-
"snow":"FFFAFA", "springgreen":"00FF7F", "steelblue":"4682B4",
|
609 |
-
"tan":"D2B48C", "teal":"008080", "thistle":"D8BFD8",
|
610 |
-
"tomato":"FF6347", "turquoise":"40E0D0", "violet":"EE82EE",
|
611 |
-
"wheat":"F5DEB3", "white":"FFF", "whitesmoke":"F5F5F5",
|
612 |
-
"yellow":"FF0", "yellowgreen":"9ACD32"
|
613 |
-
};
|
614 |
-
|
615 |
-
Color.prototype = {
|
616 |
-
/**
|
617 |
-
* @private
|
618 |
-
*/
|
619 |
-
parse: function() {
|
620 |
-
if( !this._color ) {
|
621 |
-
var me = this,
|
622 |
-
v = me.val,
|
623 |
-
vLower,
|
624 |
-
m = v.match( Color.rgbaRE );
|
625 |
-
if( m ) {
|
626 |
-
me._color = 'rgb(' + m[1] + ',' + m[2] + ',' + m[3] + ')';
|
627 |
-
me._alpha = parseFloat( m[4] );
|
628 |
-
}
|
629 |
-
else {
|
630 |
-
if( ( vLower = v.toLowerCase() ) in Color.names ) {
|
631 |
-
v = '#' + Color.names[vLower];
|
632 |
-
}
|
633 |
-
me._color = v;
|
634 |
-
me._alpha = ( v === 'transparent' ? 0 : 1 );
|
635 |
-
}
|
636 |
-
}
|
637 |
-
},
|
638 |
-
|
639 |
-
/**
|
640 |
-
* Retrieve the value of the color in a format usable by IE natively. This will be the same as
|
641 |
-
* the raw input value, except for rgba values which will be converted to an rgb value.
|
642 |
-
* @param {Element} el The context element, used to get 'currentColor' keyword value.
|
643 |
-
* @return {string} Color value
|
644 |
-
*/
|
645 |
-
colorValue: function( el ) {
|
646 |
-
this.parse();
|
647 |
-
return this._color === 'currentColor' ? el.currentStyle.color : this._color;
|
648 |
-
},
|
649 |
-
|
650 |
-
/**
|
651 |
-
* Retrieve the alpha value of the color. Will be 1 for all values except for rgba values
|
652 |
-
* with an alpha component.
|
653 |
-
* @return {number} The alpha value, from 0 to 1.
|
654 |
-
*/
|
655 |
-
alpha: function() {
|
656 |
-
this.parse();
|
657 |
-
return this._alpha;
|
658 |
-
}
|
659 |
-
};
|
660 |
-
|
661 |
-
|
662 |
-
/**
|
663 |
-
* Retrieve a PIE.Color instance for the given value. A shared singleton instance is returned for each unique value.
|
664 |
-
* @param {string} val The CSS string representing the color. It is assumed that this will already have
|
665 |
-
* been validated as a valid color syntax.
|
666 |
-
*/
|
667 |
-
PIE.getColor = function(val) {
|
668 |
-
return instances[ val ] || ( instances[ val ] = new Color( val ) );
|
669 |
-
};
|
670 |
-
|
671 |
-
return Color;
|
672 |
-
})();/**
|
673 |
-
* A tokenizer for CSS value strings.
|
674 |
-
* @constructor
|
675 |
-
* @param {string} css The CSS value string
|
676 |
-
*/
|
677 |
-
PIE.Tokenizer = (function() {
|
678 |
-
function Tokenizer( css ) {
|
679 |
-
this.css = css;
|
680 |
-
this.ch = 0;
|
681 |
-
this.tokens = [];
|
682 |
-
this.tokenIndex = 0;
|
683 |
-
}
|
684 |
-
|
685 |
-
/**
|
686 |
-
* Enumeration of token type constants.
|
687 |
-
* @enum {number}
|
688 |
-
*/
|
689 |
-
var Type = Tokenizer.Type = {
|
690 |
-
ANGLE: 1,
|
691 |
-
CHARACTER: 2,
|
692 |
-
COLOR: 4,
|
693 |
-
DIMEN: 8,
|
694 |
-
FUNCTION: 16,
|
695 |
-
IDENT: 32,
|
696 |
-
LENGTH: 64,
|
697 |
-
NUMBER: 128,
|
698 |
-
OPERATOR: 256,
|
699 |
-
PERCENT: 512,
|
700 |
-
STRING: 1024,
|
701 |
-
URL: 2048
|
702 |
-
};
|
703 |
-
|
704 |
-
/**
|
705 |
-
* A single token
|
706 |
-
* @constructor
|
707 |
-
* @param {number} type The type of the token - see PIE.Tokenizer.Type
|
708 |
-
* @param {string} value The value of the token
|
709 |
-
*/
|
710 |
-
Tokenizer.Token = function( type, value ) {
|
711 |
-
this.tokenType = type;
|
712 |
-
this.tokenValue = value;
|
713 |
-
};
|
714 |
-
Tokenizer.Token.prototype = {
|
715 |
-
isLength: function() {
|
716 |
-
return this.tokenType & Type.LENGTH || ( this.tokenType & Type.NUMBER && this.tokenValue === '0' );
|
717 |
-
},
|
718 |
-
isLengthOrPercent: function() {
|
719 |
-
return this.isLength() || this.tokenType & Type.PERCENT;
|
720 |
-
}
|
721 |
-
};
|
722 |
-
|
723 |
-
Tokenizer.prototype = {
|
724 |
-
whitespace: /\s/,
|
725 |
-
number: /^[\+\-]?(\d*\.)?\d+/,
|
726 |
-
url: /^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,
|
727 |
-
ident: /^\-?[_a-z][\w-]*/i,
|
728 |
-
string: /^("([^"]*)"|'([^']*)')/,
|
729 |
-
operator: /^[\/,]/,
|
730 |
-
hash: /^#[\w]+/,
|
731 |
-
hashColor: /^#([\da-f]{6}|[\da-f]{3})/i,
|
732 |
-
|
733 |
-
unitTypes: {
|
734 |
-
'px': Type.LENGTH, 'em': Type.LENGTH, 'ex': Type.LENGTH,
|
735 |
-
'mm': Type.LENGTH, 'cm': Type.LENGTH, 'in': Type.LENGTH,
|
736 |
-
'pt': Type.LENGTH, 'pc': Type.LENGTH,
|
737 |
-
'deg': Type.ANGLE, 'rad': Type.ANGLE, 'grad': Type.ANGLE
|
738 |
-
},
|
739 |
-
|
740 |
-
colorNames: {
|
741 |
-
'aqua':1, 'black':1, 'blue':1, 'fuchsia':1, 'gray':1, 'green':1, 'lime':1, 'maroon':1,
|
742 |
-
'navy':1, 'olive':1, 'purple':1, 'red':1, 'silver':1, 'teal':1, 'white':1, 'yellow': 1,
|
743 |
-
'currentColor': 1
|
744 |
-
},
|
745 |
-
|
746 |
-
colorFunctions: {
|
747 |
-
'rgb': 1, 'rgba': 1, 'hsl': 1, 'hsla': 1
|
748 |
-
},
|
749 |
-
|
750 |
-
|
751 |
-
/**
|
752 |
-
* Advance to and return the next token in the CSS string. If the end of the CSS string has
|
753 |
-
* been reached, null will be returned.
|
754 |
-
* @param {boolean} forget - if true, the token will not be stored for the purposes of backtracking with prev().
|
755 |
-
* @return {PIE.Tokenizer.Token}
|
756 |
-
*/
|
757 |
-
next: function( forget ) {
|
758 |
-
var css, ch, firstChar, match, val,
|
759 |
-
me = this;
|
760 |
-
|
761 |
-
function newToken( type, value ) {
|
762 |
-
var tok = new Tokenizer.Token( type, value );
|
763 |
-
if( !forget ) {
|
764 |
-
me.tokens.push( tok );
|
765 |
-
me.tokenIndex++;
|
766 |
-
}
|
767 |
-
return tok;
|
768 |
-
}
|
769 |
-
function failure() {
|
770 |
-
me.tokenIndex++;
|
771 |
-
return null;
|
772 |
-
}
|
773 |
-
|
774 |
-
// In case we previously backed up, return the stored token in the next slot
|
775 |
-
if( this.tokenIndex < this.tokens.length ) {
|
776 |
-
return this.tokens[ this.tokenIndex++ ];
|
777 |
-
}
|
778 |
-
|
779 |
-
// Move past leading whitespace characters
|
780 |
-
while( this.whitespace.test( this.css.charAt( this.ch ) ) ) {
|
781 |
-
this.ch++;
|
782 |
-
}
|
783 |
-
if( this.ch >= this.css.length ) {
|
784 |
-
return failure();
|
785 |
-
}
|
786 |
-
|
787 |
-
ch = this.ch;
|
788 |
-
css = this.css.substring( this.ch );
|
789 |
-
firstChar = css.charAt( 0 );
|
790 |
-
switch( firstChar ) {
|
791 |
-
case '#':
|
792 |
-
if( match = css.match( this.hashColor ) ) {
|
793 |
-
this.ch += match[0].length;
|
794 |
-
return newToken( Type.COLOR, match[0] );
|
795 |
-
}
|
796 |
-
break;
|
797 |
-
|
798 |
-
case '"':
|
799 |
-
case "'":
|
800 |
-
if( match = css.match( this.string ) ) {
|
801 |
-
this.ch += match[0].length;
|
802 |
-
return newToken( Type.STRING, match[2] || match[3] || '' );
|
803 |
-
}
|
804 |
-
break;
|
805 |
-
|
806 |
-
case "/":
|
807 |
-
case ",":
|
808 |
-
this.ch++;
|
809 |
-
return newToken( Type.OPERATOR, firstChar );
|
810 |
-
|
811 |
-
case 'u':
|
812 |
-
if( match = css.match( this.url ) ) {
|
813 |
-
this.ch += match[0].length;
|
814 |
-
return newToken( Type.URL, match[2] || match[3] || match[4] || '' );
|
815 |
-
}
|
816 |
-
}
|
817 |
-
|
818 |
-
// Numbers and values starting with numbers
|
819 |
-
if( match = css.match( this.number ) ) {
|
820 |
-
val = match[0];
|
821 |
-
this.ch += val.length;
|
822 |
-
|
823 |
-
// Check if it is followed by a unit
|
824 |
-
if( css.charAt( val.length ) === '%' ) {
|
825 |
-
this.ch++;
|
826 |
-
return newToken( Type.PERCENT, val + '%' );
|
827 |
-
}
|
828 |
-
if( match = css.substring( val.length ).match( this.ident ) ) {
|
829 |
-
val += match[0];
|
830 |
-
this.ch += match[0].length;
|
831 |
-
return newToken( this.unitTypes[ match[0].toLowerCase() ] || Type.DIMEN, val );
|
832 |
-
}
|
833 |
-
|
834 |
-
// Plain ol' number
|
835 |
-
return newToken( Type.NUMBER, val );
|
836 |
-
}
|
837 |
-
|
838 |
-
// Identifiers
|
839 |
-
if( match = css.match( this.ident ) ) {
|
840 |
-
val = match[0];
|
841 |
-
this.ch += val.length;
|
842 |
-
|
843 |
-
// Named colors
|
844 |
-
if( val.toLowerCase() in PIE.Color.names || val === 'currentColor' ) {
|
845 |
-
return newToken( Type.COLOR, val );
|
846 |
-
}
|
847 |
-
|
848 |
-
// Functions
|
849 |
-
if( css.charAt( val.length ) === '(' ) {
|
850 |
-
this.ch++;
|
851 |
-
|
852 |
-
// Color values in function format: rgb, rgba, hsl, hsla
|
853 |
-
if( val.toLowerCase() in this.colorFunctions ) {
|
854 |
-
function isNum( tok ) {
|
855 |
-
return tok && tok.tokenType & Type.NUMBER;
|
856 |
-
}
|
857 |
-
function isNumOrPct( tok ) {
|
858 |
-
return tok && ( tok.tokenType & ( Type.NUMBER | Type.PERCENT ) );
|
859 |
-
}
|
860 |
-
function isValue( tok, val ) {
|
861 |
-
return tok && tok.tokenValue === val;
|
862 |
-
}
|
863 |
-
function next() {
|
864 |
-
return me.next( 1 );
|
865 |
-
}
|
866 |
-
|
867 |
-
if( ( val.charAt(0) === 'r' ? isNumOrPct( next() ) : isNum( next() ) ) &&
|
868 |
-
isValue( next(), ',' ) &&
|
869 |
-
isNumOrPct( next() ) &&
|
870 |
-
isValue( next(), ',' ) &&
|
871 |
-
isNumOrPct( next() ) &&
|
872 |
-
( val === 'rgb' || val === 'hsa' || (
|
873 |
-
isValue( next(), ',' ) &&
|
874 |
-
isNum( next() )
|
875 |
-
) ) &&
|
876 |
-
isValue( next(), ')' ) ) {
|
877 |
-
return newToken( Type.COLOR, this.css.substring( ch, this.ch ) );
|
878 |
-
}
|
879 |
-
return failure();
|
880 |
-
}
|
881 |
-
|
882 |
-
return newToken( Type.FUNCTION, val );
|
883 |
-
}
|
884 |
-
|
885 |
-
// Other identifier
|
886 |
-
return newToken( Type.IDENT, val );
|
887 |
-
}
|
888 |
-
|
889 |
-
// Standalone character
|
890 |
-
this.ch++;
|
891 |
-
return newToken( Type.CHARACTER, firstChar );
|
892 |
-
},
|
893 |
-
|
894 |
-
/**
|
895 |
-
* Determine whether there is another token
|
896 |
-
* @return {boolean}
|
897 |
-
*/
|
898 |
-
hasNext: function() {
|
899 |
-
var next = this.next();
|
900 |
-
this.prev();
|
901 |
-
return !!next;
|
902 |
-
},
|
903 |
-
|
904 |
-
/**
|
905 |
-
* Back up and return the previous token
|
906 |
-
* @return {PIE.Tokenizer.Token}
|
907 |
-
*/
|
908 |
-
prev: function() {
|
909 |
-
return this.tokens[ this.tokenIndex-- - 2 ];
|
910 |
-
},
|
911 |
-
|
912 |
-
/**
|
913 |
-
* Retrieve all the tokens in the CSS string
|
914 |
-
* @return {Array.<PIE.Tokenizer.Token>}
|
915 |
-
*/
|
916 |
-
all: function() {
|
917 |
-
while( this.next() ) {}
|
918 |
-
return this.tokens;
|
919 |
-
},
|
920 |
-
|
921 |
-
/**
|
922 |
-
* Return a list of tokens from the current position until the given function returns
|
923 |
-
* true. The final token will not be included in the list.
|
924 |
-
* @param {function():boolean} func - test function
|
925 |
-
* @param {boolean} require - if true, then if the end of the CSS string is reached
|
926 |
-
* before the test function returns true, null will be returned instead of the
|
927 |
-
* tokens that have been found so far.
|
928 |
-
* @return {Array.<PIE.Tokenizer.Token>}
|
929 |
-
*/
|
930 |
-
until: function( func, require ) {
|
931 |
-
var list = [], t, hit;
|
932 |
-
while( t = this.next() ) {
|
933 |
-
if( func( t ) ) {
|
934 |
-
hit = true;
|
935 |
-
this.prev();
|
936 |
-
break;
|
937 |
-
}
|
938 |
-
list.push( t );
|
939 |
-
}
|
940 |
-
return require && !hit ? null : list;
|
941 |
-
}
|
942 |
-
};
|
943 |
-
|
944 |
-
return Tokenizer;
|
945 |
-
})();/**
|
946 |
-
* Handles calculating, caching, and detecting changes to size and position of the element.
|
947 |
-
* @constructor
|
948 |
-
* @param {Element} el the target element
|
949 |
-
*/
|
950 |
-
PIE.BoundsInfo = function( el ) {
|
951 |
-
this.targetElement = el;
|
952 |
-
};
|
953 |
-
PIE.BoundsInfo.prototype = {
|
954 |
-
|
955 |
-
_locked: 0,
|
956 |
-
|
957 |
-
positionChanged: function() {
|
958 |
-
var last = this._lastBounds,
|
959 |
-
bounds;
|
960 |
-
return !last || ( ( bounds = this.getBounds() ) && ( last.x !== bounds.x || last.y !== bounds.y ) );
|
961 |
-
},
|
962 |
-
|
963 |
-
sizeChanged: function() {
|
964 |
-
var last = this._lastBounds,
|
965 |
-
bounds;
|
966 |
-
return !last || ( ( bounds = this.getBounds() ) && ( last.w !== bounds.w || last.h !== bounds.h ) );
|
967 |
-
},
|
968 |
-
|
969 |
-
getLiveBounds: function() {
|
970 |
-
var rect = this.targetElement.getBoundingClientRect();
|
971 |
-
return {
|
972 |
-
x: rect.left,
|
973 |
-
y: rect.top,
|
974 |
-
w: rect.right - rect.left,
|
975 |
-
h: rect.bottom - rect.top
|
976 |
-
};
|
977 |
-
},
|
978 |
-
|
979 |
-
getBounds: function() {
|
980 |
-
return this._locked ?
|
981 |
-
( this._lockedBounds || ( this._lockedBounds = this.getLiveBounds() ) ) :
|
982 |
-
this.getLiveBounds();
|
983 |
-
},
|
984 |
-
|
985 |
-
hasBeenQueried: function() {
|
986 |
-
return !!this._lastBounds;
|
987 |
-
},
|
988 |
-
|
989 |
-
lock: function() {
|
990 |
-
++this._locked;
|
991 |
-
},
|
992 |
-
|
993 |
-
unlock: function() {
|
994 |
-
if( !--this._locked ) {
|
995 |
-
if( this._lockedBounds ) this._lastBounds = this._lockedBounds;
|
996 |
-
this._lockedBounds = null;
|
997 |
-
}
|
998 |
-
}
|
999 |
-
|
1000 |
-
};
|
1001 |
-
(function() {
|
1002 |
-
|
1003 |
-
function cacheWhenLocked( fn ) {
|
1004 |
-
var uid = PIE.Util.getUID( fn );
|
1005 |
-
return function() {
|
1006 |
-
if( this._locked ) {
|
1007 |
-
var cache = this._lockedValues || ( this._lockedValues = {} );
|
1008 |
-
return ( uid in cache ) ? cache[ uid ] : ( cache[ uid ] = fn.call( this ) );
|
1009 |
-
} else {
|
1010 |
-
return fn.call( this );
|
1011 |
-
}
|
1012 |
-
}
|
1013 |
-
}
|
1014 |
-
|
1015 |
-
|
1016 |
-
PIE.StyleInfoBase = {
|
1017 |
-
|
1018 |
-
_locked: 0,
|
1019 |
-
|
1020 |
-
/**
|
1021 |
-
* Create a new StyleInfo class, with the standard constructor, and augmented by
|
1022 |
-
* the StyleInfoBase's members.
|
1023 |
-
* @param proto
|
1024 |
-
*/
|
1025 |
-
newStyleInfo: function( proto ) {
|
1026 |
-
function StyleInfo( el ) {
|
1027 |
-
this.targetElement = el;
|
1028 |
-
}
|
1029 |
-
PIE.Util.merge( StyleInfo.prototype, PIE.StyleInfoBase, proto );
|
1030 |
-
StyleInfo._propsCache = {};
|
1031 |
-
return StyleInfo;
|
1032 |
-
},
|
1033 |
-
|
1034 |
-
/**
|
1035 |
-
* Get an object representation of the target CSS style, caching it for each unique
|
1036 |
-
* CSS value string.
|
1037 |
-
* @return {Object}
|
1038 |
-
*/
|
1039 |
-
getProps: function() {
|
1040 |
-
var css = this.getCss(),
|
1041 |
-
cache = this.constructor._propsCache;
|
1042 |
-
return css ? ( css in cache ? cache[ css ] : ( cache[ css ] = this.parseCss( css ) ) ) : null;
|
1043 |
-
},
|
1044 |
-
|
1045 |
-
/**
|
1046 |
-
* Get the raw CSS value for the target style
|
1047 |
-
* @return {string}
|
1048 |
-
*/
|
1049 |
-
getCss: cacheWhenLocked( function() {
|
1050 |
-
var el = this.targetElement,
|
1051 |
-
ctor = this.constructor,
|
1052 |
-
s = el.style,
|
1053 |
-
cs = el.currentStyle,
|
1054 |
-
cssProp = this.cssProperty,
|
1055 |
-
styleProp = this.styleProperty,
|
1056 |
-
prefixedCssProp = ctor._prefixedCssProp || ( ctor._prefixedCssProp = PIE.CSS_PREFIX + cssProp ),
|
1057 |
-
prefixedStyleProp = ctor._prefixedStyleProp || ( ctor._prefixedStyleProp = PIE.STYLE_PREFIX + styleProp.charAt(0).toUpperCase() + styleProp.substring(1) );
|
1058 |
-
return s[ prefixedStyleProp ] || cs.getAttribute( prefixedCssProp ) || s[ styleProp ] || cs.getAttribute( cssProp );
|
1059 |
-
} ),
|
1060 |
-
|
1061 |
-
/**
|
1062 |
-
* Determine whether the target CSS style is active.
|
1063 |
-
* @return {boolean}
|
1064 |
-
*/
|
1065 |
-
isActive: cacheWhenLocked( function() {
|
1066 |
-
return !!this.getProps();
|
1067 |
-
} ),
|
1068 |
-
|
1069 |
-
/**
|
1070 |
-
* Determine whether the target CSS style has changed since the last time it was used.
|
1071 |
-
* @return {boolean}
|
1072 |
-
*/
|
1073 |
-
changed: cacheWhenLocked( function() {
|
1074 |
-
var currentCss = this.getCss(),
|
1075 |
-
changed = currentCss !== this._lastCss;
|
1076 |
-
this._lastCss = currentCss;
|
1077 |
-
return changed;
|
1078 |
-
} ),
|
1079 |
-
|
1080 |
-
cacheWhenLocked: cacheWhenLocked,
|
1081 |
-
|
1082 |
-
lock: function() {
|
1083 |
-
++this._locked;
|
1084 |
-
},
|
1085 |
-
|
1086 |
-
unlock: function() {
|
1087 |
-
if( !--this._locked ) {
|
1088 |
-
delete this._lockedValues;
|
1089 |
-
}
|
1090 |
-
}
|
1091 |
-
};
|
1092 |
-
|
1093 |
-
})();/**
|
1094 |
-
* Handles parsing, caching, and detecting changes to background (and -pie-background) CSS
|
1095 |
-
* @constructor
|
1096 |
-
* @param {Element} el the target element
|
1097 |
-
*/
|
1098 |
-
PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1099 |
-
|
1100 |
-
cssProperty: PIE.CSS_PREFIX + 'background',
|
1101 |
-
styleProperty: PIE.STYLE_PREFIX + 'Background',
|
1102 |
-
|
1103 |
-
attachIdents: { 'scroll':1, 'fixed':1, 'local':1 },
|
1104 |
-
repeatIdents: { 'repeat-x':1, 'repeat-y':1, 'repeat':1, 'no-repeat':1 },
|
1105 |
-
originIdents: { 'padding-box':1, 'border-box':1, 'content-box':1 },
|
1106 |
-
clipIdents: { 'padding-box':1, 'border-box':1 },
|
1107 |
-
positionIdents: { 'top':1, 'right':1, 'bottom':1, 'left':1, 'center':1 },
|
1108 |
-
sizeIdents: { 'contain':1, 'cover':1 },
|
1109 |
-
|
1110 |
-
/**
|
1111 |
-
* For background styles, we support the -pie-background property but fall back to the standard
|
1112 |
-
* backround* properties. The reason we have to use the prefixed version is that IE natively
|
1113 |
-
* parses the standard properties and if it sees something it doesn't know how to parse, for example
|
1114 |
-
* multiple values or gradient definitions, it will throw that away and not make it available through
|
1115 |
-
* currentStyle.
|
1116 |
-
*
|
1117 |
-
* Format of return object:
|
1118 |
-
* {
|
1119 |
-
* color: <PIE.Color>,
|
1120 |
-
* bgImages: [
|
1121 |
-
* {
|
1122 |
-
* imgType: 'image',
|
1123 |
-
* imgUrl: 'image.png',
|
1124 |
-
* imgRepeat: <'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'>,
|
1125 |
-
* bgPosition: <PIE.BgPosition>,
|
1126 |
-
* attachment: <'scroll' | 'fixed' | 'local'>,
|
1127 |
-
* bgOrigin: <'border-box' | 'padding-box' | 'content-box'>,
|
1128 |
-
* clip: <'border-box' | 'padding-box'>,
|
1129 |
-
* size: <'contain' | 'cover' | { w: <'auto' | PIE.Length>, h: <'auto' | PIE.Length> }>
|
1130 |
-
* },
|
1131 |
-
* {
|
1132 |
-
* imgType: 'linear-gradient',
|
1133 |
-
* gradientStart: <PIE.BgPosition>,
|
1134 |
-
* angle: <PIE.Angle>,
|
1135 |
-
* stops: [
|
1136 |
-
* { color: <PIE.Color>, offset: <PIE.Length> },
|
1137 |
-
* { color: <PIE.Color>, offset: <PIE.Length> }, ...
|
1138 |
-
* ]
|
1139 |
-
* }
|
1140 |
-
* ]
|
1141 |
-
* }
|
1142 |
-
* @param {String} css
|
1143 |
-
* @override
|
1144 |
-
*/
|
1145 |
-
parseCss: function( css ) {
|
1146 |
-
var el = this.targetElement,
|
1147 |
-
cs = el.currentStyle,
|
1148 |
-
tokenizer, token, image,
|
1149 |
-
tok_type = PIE.Tokenizer.Type,
|
1150 |
-
type_operator = tok_type.OPERATOR,
|
1151 |
-
type_ident = tok_type.IDENT,
|
1152 |
-
type_color = tok_type.COLOR,
|
1153 |
-
tokType, tokVal,
|
1154 |
-
positionIdents = this.positionIdents,
|
1155 |
-
gradient, stop,
|
1156 |
-
props = null;
|
1157 |
-
|
1158 |
-
function isBgPosToken( token ) {
|
1159 |
-
return token.isLengthOrPercent() || ( token.tokenType & type_ident && token.tokenValue in positionIdents );
|
1160 |
-
}
|
1161 |
-
|
1162 |
-
function sizeToken( token ) {
|
1163 |
-
return ( token.isLengthOrPercent() && PIE.getLength( token.tokenValue ) ) || ( token.tokenValue === 'auto' && 'auto' );
|
1164 |
-
}
|
1165 |
-
|
1166 |
-
// If the CSS3-specific -pie-background property is present, parse it
|
1167 |
-
if( this.getCss3() ) {
|
1168 |
-
tokenizer = new PIE.Tokenizer( css );
|
1169 |
-
props = { bgImages: [] };
|
1170 |
-
image = {};
|
1171 |
-
|
1172 |
-
while( token = tokenizer.next() ) {
|
1173 |
-
tokType = token.tokenType;
|
1174 |
-
tokVal = token.tokenValue;
|
1175 |
-
|
1176 |
-
if( !image.imgType && tokType & tok_type.FUNCTION && tokVal === 'linear-gradient' ) {
|
1177 |
-
gradient = { stops: [], imgType: tokVal };
|
1178 |
-
stop = {};
|
1179 |
-
while( token = tokenizer.next() ) {
|
1180 |
-
tokType = token.tokenType;
|
1181 |
-
tokVal = token.tokenValue;
|
1182 |
-
|
1183 |
-
// If we reached the end of the function and had at least 2 stops, flush the info
|
1184 |
-
if( tokType & tok_type.CHARACTER && tokVal === ')' ) {
|
1185 |
-
if( stop.color ) {
|
1186 |
-
gradient.stops.push( stop );
|
1187 |
-
}
|
1188 |
-
if( gradient.stops.length > 1 ) {
|
1189 |
-
PIE.Util.merge( image, gradient );
|
1190 |
-
}
|
1191 |
-
break;
|
1192 |
-
}
|
1193 |
-
|
1194 |
-
// Color stop - must start with color
|
1195 |
-
if( tokType & type_color ) {
|
1196 |
-
// if we already have an angle/position, make sure that the previous token was a comma
|
1197 |
-
if( gradient.angle || gradient.gradientStart ) {
|
1198 |
-
token = tokenizer.prev();
|
1199 |
-
if( token.tokenType !== type_operator ) {
|
1200 |
-
break; //fail
|
1201 |
-
}
|
1202 |
-
tokenizer.next();
|
1203 |
-
}
|
1204 |
-
|
1205 |
-
stop = {
|
1206 |
-
color: PIE.getColor( tokVal )
|
1207 |
-
};
|
1208 |
-
// check for offset following color
|
1209 |
-
token = tokenizer.next();
|
1210 |
-
if( token.isLengthOrPercent() ) {
|
1211 |
-
stop.offset = PIE.getLength( token.tokenValue );
|
1212 |
-
} else {
|
1213 |
-
tokenizer.prev();
|
1214 |
-
}
|
1215 |
-
}
|
1216 |
-
// Angle - can only appear in first spot
|
1217 |
-
else if( tokType & tok_type.ANGLE && !gradient.angle && !stop.color && !gradient.stops.length ) {
|
1218 |
-
gradient.angle = new PIE.Angle( token.tokenValue );
|
1219 |
-
}
|
1220 |
-
else if( isBgPosToken( token ) && !gradient.gradientStart && !stop.color && !gradient.stops.length ) {
|
1221 |
-
tokenizer.prev();
|
1222 |
-
gradient.gradientStart = new PIE.BgPosition(
|
1223 |
-
tokenizer.until( function( t ) {
|
1224 |
-
return !isBgPosToken( t );
|
1225 |
-
}, false )
|
1226 |
-
);
|
1227 |
-
}
|
1228 |
-
else if( tokType & type_operator && tokVal === ',' ) {
|
1229 |
-
if( stop.color ) {
|
1230 |
-
gradient.stops.push( stop );
|
1231 |
-
stop = {};
|
1232 |
-
}
|
1233 |
-
}
|
1234 |
-
else {
|
1235 |
-
// Found something we didn't recognize; fail without adding image
|
1236 |
-
break;
|
1237 |
-
}
|
1238 |
-
}
|
1239 |
-
}
|
1240 |
-
else if( !image.imgType && tokType & tok_type.URL ) {
|
1241 |
-
image.imgUrl = tokVal;
|
1242 |
-
image.imgType = 'image';
|
1243 |
-
}
|
1244 |
-
else if( isBgPosToken( token ) && !image.size ) {
|
1245 |
-
tokenizer.prev();
|
1246 |
-
image.bgPosition = new PIE.BgPosition(
|
1247 |
-
tokenizer.until( function( t ) {
|
1248 |
-
return !isBgPosToken( t );
|
1249 |
-
}, false )
|
1250 |
-
);
|
1251 |
-
}
|
1252 |
-
else if( tokType & type_ident ) {
|
1253 |
-
if( tokVal in this.repeatIdents ) {
|
1254 |
-
image.imgRepeat = tokVal;
|
1255 |
-
}
|
1256 |
-
else if( tokVal in this.originIdents ) {
|
1257 |
-
image.bgOrigin = tokVal;
|
1258 |
-
if( tokVal in this.clipIdents ) {
|
1259 |
-
image.clip = tokVal;
|
1260 |
-
}
|
1261 |
-
}
|
1262 |
-
else if( tokVal in this.attachIdents ) {
|
1263 |
-
image.attachment = tokVal;
|
1264 |
-
}
|
1265 |
-
}
|
1266 |
-
else if( tokType & type_color && !props.color ) {
|
1267 |
-
props.color = PIE.getColor( tokVal );
|
1268 |
-
}
|
1269 |
-
else if( tokType & type_operator ) {
|
1270 |
-
// background size
|
1271 |
-
if( tokVal === '/' ) {
|
1272 |
-
token = tokenizer.next();
|
1273 |
-
tokType = token.tokenType;
|
1274 |
-
tokVal = token.tokenValue;
|
1275 |
-
if( tokType & type_ident && tokVal in this.sizeIdents ) {
|
1276 |
-
image.size = tokVal;
|
1277 |
-
}
|
1278 |
-
else if( tokVal = sizeToken( token ) ) {
|
1279 |
-
image.size = {
|
1280 |
-
w: tokVal,
|
1281 |
-
h: sizeToken( tokenizer.next() ) || ( tokenizer.prev() && tokVal )
|
1282 |
-
};
|
1283 |
-
}
|
1284 |
-
}
|
1285 |
-
// new layer
|
1286 |
-
else if( tokVal === ',' && image.imgType ) {
|
1287 |
-
props.bgImages.push( image );
|
1288 |
-
image = {};
|
1289 |
-
}
|
1290 |
-
}
|
1291 |
-
else {
|
1292 |
-
// Found something unrecognized; chuck everything
|
1293 |
-
return null;
|
1294 |
-
}
|
1295 |
-
}
|
1296 |
-
|
1297 |
-
// leftovers
|
1298 |
-
if( image.imgType ) {
|
1299 |
-
props.bgImages.push( image );
|
1300 |
-
}
|
1301 |
-
}
|
1302 |
-
|
1303 |
-
// Otherwise, use the standard background properties; let IE give us the values rather than parsing them
|
1304 |
-
else {
|
1305 |
-
this.withActualBg( function() {
|
1306 |
-
var posX = cs.backgroundPositionX,
|
1307 |
-
posY = cs.backgroundPositionY,
|
1308 |
-
img = cs.backgroundImage,
|
1309 |
-
color = cs.backgroundColor;
|
1310 |
-
|
1311 |
-
props = {};
|
1312 |
-
if( color !== 'transparent' ) {
|
1313 |
-
props.color = PIE.getColor( color )
|
1314 |
-
}
|
1315 |
-
if( img !== 'none' ) {
|
1316 |
-
props.bgImages = [ {
|
1317 |
-
imgType: 'image',
|
1318 |
-
imgUrl: new PIE.Tokenizer( img ).next().tokenValue,
|
1319 |
-
imgRepeat: cs.backgroundRepeat,
|
1320 |
-
bgPosition: new PIE.BgPosition( new PIE.Tokenizer( posX + ' ' + posY ).all() )
|
1321 |
-
} ];
|
1322 |
-
}
|
1323 |
-
} );
|
1324 |
-
}
|
1325 |
-
|
1326 |
-
return ( props && ( props.color || ( props.bgImages && props.bgImages[0] ) ) ) ? props : null;
|
1327 |
-
},
|
1328 |
-
|
1329 |
-
/**
|
1330 |
-
* Execute a function with the actual background styles (not overridden with runtimeStyle
|
1331 |
-
* properties set by the renderers) available via currentStyle.
|
1332 |
-
* @param fn
|
1333 |
-
*/
|
1334 |
-
withActualBg: function( fn ) {
|
1335 |
-
var rs = this.targetElement.runtimeStyle,
|
1336 |
-
rsImage = rs.backgroundImage,
|
1337 |
-
rsColor = rs.backgroundColor,
|
1338 |
-
ret;
|
1339 |
-
|
1340 |
-
if( rsImage ) rs.backgroundImage = '';
|
1341 |
-
if( rsColor ) rs.backgroundColor = '';
|
1342 |
-
|
1343 |
-
ret = fn.call( this );
|
1344 |
-
|
1345 |
-
if( rsImage ) rs.backgroundImage = rsImage;
|
1346 |
-
if( rsColor ) rs.backgroundColor = rsColor;
|
1347 |
-
|
1348 |
-
return ret;
|
1349 |
-
},
|
1350 |
-
|
1351 |
-
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1352 |
-
return this.getCss3() ||
|
1353 |
-
this.withActualBg( function() {
|
1354 |
-
var cs = this.targetElement.currentStyle;
|
1355 |
-
return cs.backgroundColor + ' ' + cs.backgroundImage + ' ' + cs.backgroundRepeat + ' ' +
|
1356 |
-
cs.backgroundPositionX + ' ' + cs.backgroundPositionY;
|
1357 |
-
} );
|
1358 |
-
} ),
|
1359 |
-
|
1360 |
-
getCss3: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1361 |
-
var el = this.targetElement;
|
1362 |
-
return el.style[ this.styleProperty ] || el.currentStyle.getAttribute( this.cssProperty );
|
1363 |
-
} ),
|
1364 |
-
|
1365 |
-
/**
|
1366 |
-
* Tests if style.PiePngFix or the -pie-png-fix property is set to true in IE6.
|
1367 |
-
*/
|
1368 |
-
isPngFix: function() {
|
1369 |
-
var val = 0, el;
|
1370 |
-
if( PIE.ieVersion < 7 ) {
|
1371 |
-
el = this.targetElement;
|
1372 |
-
val = ( '' + ( el.style[ PIE.STYLE_PREFIX + 'PngFix' ] || el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'png-fix' ) ) === 'true' );
|
1373 |
-
}
|
1374 |
-
return val;
|
1375 |
-
},
|
1376 |
-
|
1377 |
-
/**
|
1378 |
-
* The isActive logic is slightly different, because getProps() always returns an object
|
1379 |
-
* even if it is just falling back to the native background properties. But we only want
|
1380 |
-
* to report is as being "active" if either the -pie-background override property is present
|
1381 |
-
* and parses successfully or '-pie-png-fix' is set to true in IE6.
|
1382 |
-
*/
|
1383 |
-
isActive: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1384 |
-
return (this.getCss3() || this.isPngFix()) && !!this.getProps();
|
1385 |
-
} )
|
1386 |
-
|
1387 |
-
} );/**
|
1388 |
-
* Handles parsing, caching, and detecting changes to border CSS
|
1389 |
-
* @constructor
|
1390 |
-
* @param {Element} el the target element
|
1391 |
-
*/
|
1392 |
-
PIE.BorderStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1393 |
-
|
1394 |
-
sides: [ 'Top', 'Right', 'Bottom', 'Left' ],
|
1395 |
-
namedWidths: {
|
1396 |
-
'thin': '1px',
|
1397 |
-
'medium': '3px',
|
1398 |
-
'thick': '5px'
|
1399 |
-
},
|
1400 |
-
|
1401 |
-
parseCss: function( css ) {
|
1402 |
-
var w = {},
|
1403 |
-
s = {},
|
1404 |
-
c = {},
|
1405 |
-
active = false,
|
1406 |
-
colorsSame = true,
|
1407 |
-
stylesSame = true,
|
1408 |
-
widthsSame = true;
|
1409 |
-
|
1410 |
-
this.withActualBorder( function() {
|
1411 |
-
var el = this.targetElement,
|
1412 |
-
cs = el.currentStyle,
|
1413 |
-
i = 0,
|
1414 |
-
style, color, width, lastStyle, lastColor, lastWidth, side, ltr;
|
1415 |
-
for( ; i < 4; i++ ) {
|
1416 |
-
side = this.sides[ i ];
|
1417 |
-
|
1418 |
-
ltr = side.charAt(0).toLowerCase();
|
1419 |
-
style = s[ ltr ] = cs[ 'border' + side + 'Style' ];
|
1420 |
-
color = cs[ 'border' + side + 'Color' ];
|
1421 |
-
width = cs[ 'border' + side + 'Width' ];
|
1422 |
-
|
1423 |
-
if( i > 0 ) {
|
1424 |
-
if( style !== lastStyle ) { stylesSame = false; }
|
1425 |
-
if( color !== lastColor ) { colorsSame = false; }
|
1426 |
-
if( width !== lastWidth ) { widthsSame = false; }
|
1427 |
-
}
|
1428 |
-
lastStyle = style;
|
1429 |
-
lastColor = color;
|
1430 |
-
lastWidth = width;
|
1431 |
-
|
1432 |
-
c[ ltr ] = PIE.getColor( color );
|
1433 |
-
|
1434 |
-
width = w[ ltr ] = PIE.getLength( s[ ltr ] === 'none' ? '0' : ( this.namedWidths[ width ] || width ) );
|
1435 |
-
if( width.pixels( this.targetElement ) > 0 ) {
|
1436 |
-
active = true;
|
1437 |
-
}
|
1438 |
-
}
|
1439 |
-
} );
|
1440 |
-
|
1441 |
-
return active ? {
|
1442 |
-
widths: w,
|
1443 |
-
styles: s,
|
1444 |
-
colors: c,
|
1445 |
-
widthsSame: widthsSame,
|
1446 |
-
colorsSame: colorsSame,
|
1447 |
-
stylesSame: stylesSame
|
1448 |
-
} : null;
|
1449 |
-
},
|
1450 |
-
|
1451 |
-
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1452 |
-
var el = this.targetElement,
|
1453 |
-
cs = el.currentStyle,
|
1454 |
-
css;
|
1455 |
-
|
1456 |
-
// Don't redraw or hide borders for cells in border-collapse:collapse tables
|
1457 |
-
if( !( el.tagName in PIE.tableCellTags && el.offsetParent.currentStyle.borderCollapse === 'collapse' ) ) {
|
1458 |
-
this.withActualBorder( function() {
|
1459 |
-
css = cs.borderWidth + '|' + cs.borderStyle + '|' + cs.borderColor;
|
1460 |
-
} );
|
1461 |
-
}
|
1462 |
-
return css;
|
1463 |
-
} ),
|
1464 |
-
|
1465 |
-
/**
|
1466 |
-
* Execute a function with the actual border styles (not overridden with runtimeStyle
|
1467 |
-
* properties set by the renderers) available via currentStyle.
|
1468 |
-
* @param fn
|
1469 |
-
*/
|
1470 |
-
withActualBorder: function( fn ) {
|
1471 |
-
var rs = this.targetElement.runtimeStyle,
|
1472 |
-
rsWidth = rs.borderWidth,
|
1473 |
-
rsColor = rs.borderColor,
|
1474 |
-
ret;
|
1475 |
-
|
1476 |
-
if( rsWidth ) rs.borderWidth = '';
|
1477 |
-
if( rsColor ) rs.borderColor = '';
|
1478 |
-
|
1479 |
-
ret = fn.call( this );
|
1480 |
-
|
1481 |
-
if( rsWidth ) rs.borderWidth = rsWidth;
|
1482 |
-
if( rsColor ) rs.borderColor = rsColor;
|
1483 |
-
|
1484 |
-
return ret;
|
1485 |
-
}
|
1486 |
-
|
1487 |
-
} );
|
1488 |
-
/**
|
1489 |
-
* Handles parsing, caching, and detecting changes to border-radius CSS
|
1490 |
-
* @constructor
|
1491 |
-
* @param {Element} el the target element
|
1492 |
-
*/
|
1493 |
-
(function() {
|
1494 |
-
|
1495 |
-
PIE.BorderRadiusStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1496 |
-
|
1497 |
-
cssProperty: 'border-radius',
|
1498 |
-
styleProperty: 'borderRadius',
|
1499 |
-
|
1500 |
-
parseCss: function( css ) {
|
1501 |
-
var p = null, x, y,
|
1502 |
-
tokenizer, token, length,
|
1503 |
-
hasNonZero = false;
|
1504 |
-
|
1505 |
-
if( css ) {
|
1506 |
-
tokenizer = new PIE.Tokenizer( css );
|
1507 |
-
|
1508 |
-
function collectLengths() {
|
1509 |
-
var arr = [], num;
|
1510 |
-
while( ( token = tokenizer.next() ) && token.isLengthOrPercent() ) {
|
1511 |
-
length = PIE.getLength( token.tokenValue );
|
1512 |
-
num = length.getNumber();
|
1513 |
-
if( num < 0 ) {
|
1514 |
-
return null;
|
1515 |
-
}
|
1516 |
-
if( num > 0 ) {
|
1517 |
-
hasNonZero = true;
|
1518 |
-
}
|
1519 |
-
arr.push( length );
|
1520 |
-
}
|
1521 |
-
return arr.length > 0 && arr.length < 5 ? {
|
1522 |
-
'tl': arr[0],
|
1523 |
-
'tr': arr[1] || arr[0],
|
1524 |
-
'br': arr[2] || arr[0],
|
1525 |
-
'bl': arr[3] || arr[1] || arr[0]
|
1526 |
-
} : null;
|
1527 |
-
}
|
1528 |
-
|
1529 |
-
// Grab the initial sequence of lengths
|
1530 |
-
if( x = collectLengths() ) {
|
1531 |
-
// See if there is a slash followed by more lengths, for the y-axis radii
|
1532 |
-
if( token ) {
|
1533 |
-
if( token.tokenType & PIE.Tokenizer.Type.OPERATOR && token.tokenValue === '/' ) {
|
1534 |
-
y = collectLengths();
|
1535 |
-
}
|
1536 |
-
} else {
|
1537 |
-
y = x;
|
1538 |
-
}
|
1539 |
-
|
1540 |
-
// Treat all-zero values the same as no value
|
1541 |
-
if( hasNonZero && x && y ) {
|
1542 |
-
p = { x: x, y : y };
|
1543 |
-
}
|
1544 |
-
}
|
1545 |
-
}
|
1546 |
-
|
1547 |
-
return p;
|
1548 |
-
}
|
1549 |
-
} );
|
1550 |
-
|
1551 |
-
var zero = PIE.getLength( '0' ),
|
1552 |
-
zeros = { 'tl': zero, 'tr': zero, 'br': zero, 'bl': zero };
|
1553 |
-
PIE.BorderRadiusStyleInfo.ALL_ZERO = { x: zeros, y: zeros };
|
1554 |
-
|
1555 |
-
})();/**
|
1556 |
-
* Handles parsing, caching, and detecting changes to border-image CSS
|
1557 |
-
* @constructor
|
1558 |
-
* @param {Element} el the target element
|
1559 |
-
*/
|
1560 |
-
PIE.BorderImageStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1561 |
-
|
1562 |
-
cssProperty: 'border-image',
|
1563 |
-
styleProperty: 'borderImage',
|
1564 |
-
|
1565 |
-
repeatIdents: { 'stretch':1, 'round':1, 'repeat':1, 'space':1 },
|
1566 |
-
|
1567 |
-
parseCss: function( css ) {
|
1568 |
-
var p = null, tokenizer, token, type, value,
|
1569 |
-
slices, widths, outsets,
|
1570 |
-
slashCount = 0, cs,
|
1571 |
-
Type = PIE.Tokenizer.Type,
|
1572 |
-
IDENT = Type.IDENT,
|
1573 |
-
NUMBER = Type.NUMBER,
|
1574 |
-
LENGTH = Type.LENGTH,
|
1575 |
-
PERCENT = Type.PERCENT;
|
1576 |
-
|
1577 |
-
if( css ) {
|
1578 |
-
tokenizer = new PIE.Tokenizer( css );
|
1579 |
-
p = {};
|
1580 |
-
|
1581 |
-
function isSlash( token ) {
|
1582 |
-
return token && ( token.tokenType & Type.OPERATOR ) && ( token.tokenValue === '/' );
|
1583 |
-
}
|
1584 |
-
|
1585 |
-
function isFillIdent( token ) {
|
1586 |
-
return token && ( token.tokenType & IDENT ) && ( token.tokenValue === 'fill' );
|
1587 |
-
}
|
1588 |
-
|
1589 |
-
function collectSlicesEtc() {
|
1590 |
-
slices = tokenizer.until( function( tok ) {
|
1591 |
-
return !( tok.tokenType & ( NUMBER | PERCENT ) );
|
1592 |
-
} );
|
1593 |
-
|
1594 |
-
if( isFillIdent( tokenizer.next() ) && !p.fill ) {
|
1595 |
-
p.fill = true;
|
1596 |
-
} else {
|
1597 |
-
tokenizer.prev();
|
1598 |
-
}
|
1599 |
-
|
1600 |
-
if( isSlash( tokenizer.next() ) ) {
|
1601 |
-
slashCount++;
|
1602 |
-
widths = tokenizer.until( function( tok ) {
|
1603 |
-
return !( token.tokenType & ( NUMBER | PERCENT | LENGTH ) ) && !( ( token.tokenType & IDENT ) && token.tokenValue === 'auto' );
|
1604 |
-
} );
|
1605 |
-
|
1606 |
-
if( isSlash( tokenizer.next() ) ) {
|
1607 |
-
slashCount++;
|
1608 |
-
outsets = tokenizer.until( function( tok ) {
|
1609 |
-
return !( token.tokenType & ( NUMBER | LENGTH ) );
|
1610 |
-
} );
|
1611 |
-
}
|
1612 |
-
} else {
|
1613 |
-
tokenizer.prev();
|
1614 |
-
}
|
1615 |
-
}
|
1616 |
-
|
1617 |
-
while( token = tokenizer.next() ) {
|
1618 |
-
type = token.tokenType;
|
1619 |
-
value = token.tokenValue;
|
1620 |
-
|
1621 |
-
// Numbers and/or 'fill' keyword: slice values. May be followed optionally by width values, followed optionally by outset values
|
1622 |
-
if( type & ( NUMBER | PERCENT ) && !slices ) {
|
1623 |
-
tokenizer.prev();
|
1624 |
-
collectSlicesEtc();
|
1625 |
-
}
|
1626 |
-
else if( isFillIdent( token ) && !p.fill ) {
|
1627 |
-
p.fill = true;
|
1628 |
-
collectSlicesEtc();
|
1629 |
-
}
|
1630 |
-
|
1631 |
-
// Idents: one or values for 'repeat'
|
1632 |
-
else if( ( type & IDENT ) && this.repeatIdents[value] && !p.repeat ) {
|
1633 |
-
p.repeat = { h: value };
|
1634 |
-
if( token = tokenizer.next() ) {
|
1635 |
-
if( ( token.tokenType & IDENT ) && this.repeatIdents[token.tokenValue] ) {
|
1636 |
-
p.repeat.v = token.tokenValue;
|
1637 |
-
} else {
|
1638 |
-
tokenizer.prev();
|
1639 |
-
}
|
1640 |
-
}
|
1641 |
-
}
|
1642 |
-
|
1643 |
-
// URL of the image
|
1644 |
-
else if( ( type & Type.URL ) && !p.src ) {
|
1645 |
-
p.src = value;
|
1646 |
-
}
|
1647 |
-
|
1648 |
-
// Found something unrecognized; exit.
|
1649 |
-
else {
|
1650 |
-
return null;
|
1651 |
-
}
|
1652 |
-
}
|
1653 |
-
|
1654 |
-
// Validate what we collected
|
1655 |
-
if( !p.src || !slices || slices.length < 1 || slices.length > 4 ||
|
1656 |
-
( widths && widths.length > 4 ) || ( slashCount === 1 && widths.length < 1 ) ||
|
1657 |
-
( outsets && outsets.length > 4 ) || ( slashCount === 2 && outsets.length < 1 ) ) {
|
1658 |
-
return null;
|
1659 |
-
}
|
1660 |
-
|
1661 |
-
// Fill in missing values
|
1662 |
-
if( !p.repeat ) {
|
1663 |
-
p.repeat = { h: 'stretch' };
|
1664 |
-
}
|
1665 |
-
if( !p.repeat.v ) {
|
1666 |
-
p.repeat.v = p.repeat.h;
|
1667 |
-
}
|
1668 |
-
|
1669 |
-
function distributeSides( tokens, convertFn ) {
|
1670 |
-
return {
|
1671 |
-
t: convertFn( tokens[0] ),
|
1672 |
-
r: convertFn( tokens[1] || tokens[0] ),
|
1673 |
-
b: convertFn( tokens[2] || tokens[0] ),
|
1674 |
-
l: convertFn( tokens[3] || tokens[1] || tokens[0] )
|
1675 |
-
};
|
1676 |
-
}
|
1677 |
-
|
1678 |
-
p.slice = distributeSides( slices, function( tok ) {
|
1679 |
-
return PIE.getLength( ( tok.tokenType & NUMBER ) ? tok.tokenValue + 'px' : tok.tokenValue );
|
1680 |
-
} );
|
1681 |
-
|
1682 |
-
p.width = widths && widths.length > 0 ?
|
1683 |
-
distributeSides( widths, function( tok ) {
|
1684 |
-
return tok.tokenType & ( LENGTH | PERCENT ) ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
|
1685 |
-
} ) :
|
1686 |
-
( cs = this.targetElement.currentStyle ) && {
|
1687 |
-
t: PIE.getLength( cs.borderTopWidth ),
|
1688 |
-
r: PIE.getLength( cs.borderRightWidth ),
|
1689 |
-
b: PIE.getLength( cs.borderBottomWidth ),
|
1690 |
-
l: PIE.getLength( cs.borderLeftWidth )
|
1691 |
-
};
|
1692 |
-
|
1693 |
-
p.outset = distributeSides( outsets || [ 0 ], function( tok ) {
|
1694 |
-
return tok.tokenType & LENGTH ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
|
1695 |
-
} );
|
1696 |
-
}
|
1697 |
-
|
1698 |
-
return p;
|
1699 |
-
}
|
1700 |
-
} );/**
|
1701 |
-
* Handles parsing, caching, and detecting changes to box-shadow CSS
|
1702 |
-
* @constructor
|
1703 |
-
* @param {Element} el the target element
|
1704 |
-
*/
|
1705 |
-
PIE.BoxShadowStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1706 |
-
|
1707 |
-
cssProperty: 'box-shadow',
|
1708 |
-
styleProperty: 'boxShadow',
|
1709 |
-
|
1710 |
-
parseCss: function( css ) {
|
1711 |
-
var props,
|
1712 |
-
getLength = PIE.getLength,
|
1713 |
-
Type = PIE.Tokenizer.Type,
|
1714 |
-
tokenizer;
|
1715 |
-
|
1716 |
-
if( css ) {
|
1717 |
-
tokenizer = new PIE.Tokenizer( css );
|
1718 |
-
props = { outset: [], inset: [] };
|
1719 |
-
|
1720 |
-
function parseItem() {
|
1721 |
-
var token, type, value, color, lengths, inset, len;
|
1722 |
-
|
1723 |
-
while( token = tokenizer.next() ) {
|
1724 |
-
value = token.tokenValue;
|
1725 |
-
type = token.tokenType;
|
1726 |
-
|
1727 |
-
if( type & Type.OPERATOR && value === ',' ) {
|
1728 |
-
break;
|
1729 |
-
}
|
1730 |
-
else if( token.isLength() && !lengths ) {
|
1731 |
-
tokenizer.prev();
|
1732 |
-
lengths = tokenizer.until( function( token ) {
|
1733 |
-
return !token.isLength();
|
1734 |
-
} );
|
1735 |
-
}
|
1736 |
-
else if( type & Type.COLOR && !color ) {
|
1737 |
-
color = value;
|
1738 |
-
}
|
1739 |
-
else if( type & Type.IDENT && value === 'inset' && !inset ) {
|
1740 |
-
inset = true;
|
1741 |
-
}
|
1742 |
-
else { //encountered an unrecognized token; fail.
|
1743 |
-
return false;
|
1744 |
-
}
|
1745 |
-
}
|
1746 |
-
|
1747 |
-
len = lengths && lengths.length;
|
1748 |
-
if( len > 1 && len < 5 ) {
|
1749 |
-
( inset ? props.inset : props.outset ).push( {
|
1750 |
-
xOffset: getLength( lengths[0].tokenValue ),
|
1751 |
-
yOffset: getLength( lengths[1].tokenValue ),
|
1752 |
-
blur: getLength( lengths[2] ? lengths[2].tokenValue : '0' ),
|
1753 |
-
spread: getLength( lengths[3] ? lengths[3].tokenValue : '0' ),
|
1754 |
-
color: PIE.getColor( color || 'currentColor' )
|
1755 |
-
} );
|
1756 |
-
return true;
|
1757 |
-
}
|
1758 |
-
return false;
|
1759 |
-
}
|
1760 |
-
|
1761 |
-
while( parseItem() ) {}
|
1762 |
-
}
|
1763 |
-
|
1764 |
-
return props && ( props.inset.length || props.outset.length ) ? props : null;
|
1765 |
-
}
|
1766 |
-
} );
|
1767 |
-
/**
|
1768 |
-
* Retrieves the state of the element's visibility and display
|
1769 |
-
* @constructor
|
1770 |
-
* @param {Element} el the target element
|
1771 |
-
*/
|
1772 |
-
PIE.VisibilityStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1773 |
-
|
1774 |
-
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1775 |
-
var cs = this.targetElement.currentStyle;
|
1776 |
-
return cs.visibility + '|' + cs.display;
|
1777 |
-
} ),
|
1778 |
-
|
1779 |
-
parseCss: function() {
|
1780 |
-
var el = this.targetElement,
|
1781 |
-
rs = el.runtimeStyle,
|
1782 |
-
cs = el.currentStyle,
|
1783 |
-
rsVis = rs.visibility,
|
1784 |
-
csVis;
|
1785 |
-
|
1786 |
-
rs.visibility = '';
|
1787 |
-
csVis = cs.visibility;
|
1788 |
-
rs.visibility = rsVis;
|
1789 |
-
|
1790 |
-
return {
|
1791 |
-
visible: csVis !== 'hidden',
|
1792 |
-
displayed: cs.display !== 'none'
|
1793 |
-
}
|
1794 |
-
},
|
1795 |
-
|
1796 |
-
/**
|
1797 |
-
* Always return false for isActive, since this property alone will not trigger
|
1798 |
-
* a renderer to do anything.
|
1799 |
-
*/
|
1800 |
-
isActive: function() {
|
1801 |
-
return false;
|
1802 |
-
}
|
1803 |
-
|
1804 |
-
} );
|
1805 |
-
PIE.RendererBase = {
|
1806 |
-
|
1807 |
-
/**
|
1808 |
-
* Create a new Renderer class, with the standard constructor, and augmented by
|
1809 |
-
* the RendererBase's members.
|
1810 |
-
* @param proto
|
1811 |
-
*/
|
1812 |
-
newRenderer: function( proto ) {
|
1813 |
-
function Renderer( el, boundsInfo, styleInfos, parent ) {
|
1814 |
-
this.targetElement = el;
|
1815 |
-
this.boundsInfo = boundsInfo;
|
1816 |
-
this.styleInfos = styleInfos;
|
1817 |
-
this.parent = parent;
|
1818 |
-
}
|
1819 |
-
PIE.Util.merge( Renderer.prototype, PIE.RendererBase, proto );
|
1820 |
-
return Renderer;
|
1821 |
-
},
|
1822 |
-
|
1823 |
-
/**
|
1824 |
-
* Flag indicating the element has already been positioned at least once.
|
1825 |
-
* @type {boolean}
|
1826 |
-
*/
|
1827 |
-
isPositioned: false,
|
1828 |
-
|
1829 |
-
/**
|
1830 |
-
* Determine if the renderer needs to be updated
|
1831 |
-
* @return {boolean}
|
1832 |
-
*/
|
1833 |
-
needsUpdate: function() {
|
1834 |
-
return false;
|
1835 |
-
},
|
1836 |
-
|
1837 |
-
/**
|
1838 |
-
* Tell the renderer to update based on modified properties
|
1839 |
-
*/
|
1840 |
-
updateProps: function() {
|
1841 |
-
this.destroy();
|
1842 |
-
if( this.isActive() ) {
|
1843 |
-
this.draw();
|
1844 |
-
}
|
1845 |
-
},
|
1846 |
-
|
1847 |
-
/**
|
1848 |
-
* Tell the renderer to update based on modified element position
|
1849 |
-
*/
|
1850 |
-
updatePos: function() {
|
1851 |
-
this.isPositioned = true;
|
1852 |
-
},
|
1853 |
-
|
1854 |
-
/**
|
1855 |
-
* Tell the renderer to update based on modified element dimensions
|
1856 |
-
*/
|
1857 |
-
updateSize: function() {
|
1858 |
-
if( this.isActive() ) {
|
1859 |
-
this.draw();
|
1860 |
-
} else {
|
1861 |
-
this.destroy();
|
1862 |
-
}
|
1863 |
-
},
|
1864 |
-
|
1865 |
-
|
1866 |
-
/**
|
1867 |
-
* Add a layer element, with the given z-order index, to the renderer's main box element. We can't use
|
1868 |
-
* z-index because that breaks when the root rendering box's z-index is 'auto' in IE8+ standards mode.
|
1869 |
-
* So instead we make sure they are inserted into the DOM in the correct order.
|
1870 |
-
* @param {number} index
|
1871 |
-
* @param {Element} el
|
1872 |
-
*/
|
1873 |
-
addLayer: function( index, el ) {
|
1874 |
-
this.removeLayer( index );
|
1875 |
-
for( var layers = this._layers || ( this._layers = [] ), i = index + 1, len = layers.length, layer; i < len; i++ ) {
|
1876 |
-
layer = layers[i];
|
1877 |
-
if( layer ) {
|
1878 |
-
break;
|
1879 |
-
}
|
1880 |
-
}
|
1881 |
-
layers[index] = el;
|
1882 |
-
this.getBox().insertBefore( el, layer || null );
|
1883 |
-
},
|
1884 |
-
|
1885 |
-
/**
|
1886 |
-
* Retrieve a layer element by its index, or null if not present
|
1887 |
-
* @param {number} index
|
1888 |
-
* @return {Element}
|
1889 |
-
*/
|
1890 |
-
getLayer: function( index ) {
|
1891 |
-
var layers = this._layers;
|
1892 |
-
return layers && layers[index] || null;
|
1893 |
-
},
|
1894 |
-
|
1895 |
-
/**
|
1896 |
-
* Remove a layer element by its index
|
1897 |
-
* @param {number} index
|
1898 |
-
*/
|
1899 |
-
removeLayer: function( index ) {
|
1900 |
-
var layer = this.getLayer( index ),
|
1901 |
-
box = this._box;
|
1902 |
-
if( layer && box ) {
|
1903 |
-
box.removeChild( layer );
|
1904 |
-
this._layers[index] = null;
|
1905 |
-
}
|
1906 |
-
},
|
1907 |
-
|
1908 |
-
|
1909 |
-
/**
|
1910 |
-
* Get a VML shape by name, creating it if necessary.
|
1911 |
-
* @param {string} name A name identifying the element
|
1912 |
-
* @param {string=} subElName If specified a subelement of the shape will be created with this tag name
|
1913 |
-
* @param {Element} parent The parent element for the shape; will be ignored if 'group' is specified
|
1914 |
-
* @param {number=} group If specified, an ordinal group for the shape. 1 or greater. Groups are rendered
|
1915 |
-
* using container elements in the correct order, to get correct z stacking without z-index.
|
1916 |
-
*/
|
1917 |
-
getShape: function( name, subElName, parent, group ) {
|
1918 |
-
var shapes = this._shapes || ( this._shapes = {} ),
|
1919 |
-
shape = shapes[ name ],
|
1920 |
-
s;
|
1921 |
-
|
1922 |
-
if( !shape ) {
|
1923 |
-
shape = shapes[ name ] = PIE.Util.createVmlElement( 'shape' );
|
1924 |
-
if( subElName ) {
|
1925 |
-
shape.appendChild( shape[ subElName ] = PIE.Util.createVmlElement( subElName ) );
|
1926 |
-
}
|
1927 |
-
|
1928 |
-
if( group ) {
|
1929 |
-
parent = this.getLayer( group );
|
1930 |
-
if( !parent ) {
|
1931 |
-
this.addLayer( group, doc.createElement( 'group' + group ) );
|
1932 |
-
parent = this.getLayer( group );
|
1933 |
-
}
|
1934 |
-
}
|
1935 |
-
|
1936 |
-
parent.appendChild( shape );
|
1937 |
-
|
1938 |
-
s = shape.style;
|
1939 |
-
s.position = 'absolute';
|
1940 |
-
s.left = s.top = 0;
|
1941 |
-
s['behavior'] = 'url(#default#VML)';
|
1942 |
-
}
|
1943 |
-
return shape;
|
1944 |
-
},
|
1945 |
-
|
1946 |
-
/**
|
1947 |
-
* Delete a named shape which was created by getShape(). Returns true if a shape with the
|
1948 |
-
* given name was found and deleted, or false if there was no shape of that name.
|
1949 |
-
* @param {string} name
|
1950 |
-
* @return {boolean}
|
1951 |
-
*/
|
1952 |
-
deleteShape: function( name ) {
|
1953 |
-
var shapes = this._shapes,
|
1954 |
-
shape = shapes && shapes[ name ];
|
1955 |
-
if( shape ) {
|
1956 |
-
shape.parentNode.removeChild( shape );
|
1957 |
-
delete shapes[ name ];
|
1958 |
-
}
|
1959 |
-
return !!shape;
|
1960 |
-
},
|
1961 |
-
|
1962 |
-
|
1963 |
-
/**
|
1964 |
-
* For a given set of border radius length/percentage values, convert them to concrete pixel
|
1965 |
-
* values based on the current size of the target element.
|
1966 |
-
* @param {Object} radii
|
1967 |
-
* @return {Object}
|
1968 |
-
*/
|
1969 |
-
getRadiiPixels: function( radii ) {
|
1970 |
-
var el = this.targetElement,
|
1971 |
-
bounds = this.boundsInfo.getBounds(),
|
1972 |
-
w = bounds.w,
|
1973 |
-
h = bounds.h,
|
1974 |
-
tlX, tlY, trX, trY, brX, brY, blX, blY, f;
|
1975 |
-
|
1976 |
-
tlX = radii.x['tl'].pixels( el, w );
|
1977 |
-
tlY = radii.y['tl'].pixels( el, h );
|
1978 |
-
trX = radii.x['tr'].pixels( el, w );
|
1979 |
-
trY = radii.y['tr'].pixels( el, h );
|
1980 |
-
brX = radii.x['br'].pixels( el, w );
|
1981 |
-
brY = radii.y['br'].pixels( el, h );
|
1982 |
-
blX = radii.x['bl'].pixels( el, w );
|
1983 |
-
blY = radii.y['bl'].pixels( el, h );
|
1984 |
-
|
1985 |
-
// If any corner ellipses overlap, reduce them all by the appropriate factor. This formula
|
1986 |
-
// is taken straight from the CSS3 Backgrounds and Borders spec.
|
1987 |
-
f = Math.min(
|
1988 |
-
w / ( tlX + trX ),
|
1989 |
-
h / ( trY + brY ),
|
1990 |
-
w / ( blX + brX ),
|
1991 |
-
h / ( tlY + blY )
|
1992 |
-
);
|
1993 |
-
if( f < 1 ) {
|
1994 |
-
tlX *= f;
|
1995 |
-
tlY *= f;
|
1996 |
-
trX *= f;
|
1997 |
-
trY *= f;
|
1998 |
-
brX *= f;
|
1999 |
-
brY *= f;
|
2000 |
-
blX *= f;
|
2001 |
-
blY *= f;
|
2002 |
-
}
|
2003 |
-
|
2004 |
-
return {
|
2005 |
-
x: {
|
2006 |
-
'tl': tlX,
|
2007 |
-
'tr': trX,
|
2008 |
-
'br': brX,
|
2009 |
-
'bl': blX
|
2010 |
-
},
|
2011 |
-
y: {
|
2012 |
-
'tl': tlY,
|
2013 |
-
'tr': trY,
|
2014 |
-
'br': brY,
|
2015 |
-
'bl': blY
|
2016 |
-
}
|
2017 |
-
}
|
2018 |
-
},
|
2019 |
-
|
2020 |
-
/**
|
2021 |
-
* Return the VML path string for the element's background box, with corners rounded.
|
2022 |
-
* @param {Object.<{t:number, r:number, b:number, l:number}>} shrink - if present, specifies number of
|
2023 |
-
* pixels to shrink the box path inward from the element's four sides.
|
2024 |
-
* @param {number=} mult If specified, all coordinates will be multiplied by this number
|
2025 |
-
* @param {Object=} radii If specified, this will be used for the corner radii instead of the properties
|
2026 |
-
* from this renderer's borderRadiusInfo object.
|
2027 |
-
* @return {string} the VML path
|
2028 |
-
*/
|
2029 |
-
getBoxPath: function( shrink, mult, radii ) {
|
2030 |
-
mult = mult || 1;
|
2031 |
-
|
2032 |
-
var r, str,
|
2033 |
-
bounds = this.boundsInfo.getBounds(),
|
2034 |
-
w = bounds.w * mult,
|
2035 |
-
h = bounds.h * mult,
|
2036 |
-
radInfo = this.styleInfos.borderRadiusInfo,
|
2037 |
-
floor = Math.floor, ceil = Math.ceil,
|
2038 |
-
shrinkT = shrink ? shrink.t * mult : 0,
|
2039 |
-
shrinkR = shrink ? shrink.r * mult : 0,
|
2040 |
-
shrinkB = shrink ? shrink.b * mult : 0,
|
2041 |
-
shrinkL = shrink ? shrink.l * mult : 0,
|
2042 |
-
tlX, tlY, trX, trY, brX, brY, blX, blY;
|
2043 |
-
|
2044 |
-
if( radii || radInfo.isActive() ) {
|
2045 |
-
r = this.getRadiiPixels( radii || radInfo.getProps() );
|
2046 |
-
|
2047 |
-
tlX = r.x['tl'] * mult;
|
2048 |
-
tlY = r.y['tl'] * mult;
|
2049 |
-
trX = r.x['tr'] * mult;
|
2050 |
-
trY = r.y['tr'] * mult;
|
2051 |
-
brX = r.x['br'] * mult;
|
2052 |
-
brY = r.y['br'] * mult;
|
2053 |
-
blX = r.x['bl'] * mult;
|
2054 |
-
blY = r.y['bl'] * mult;
|
2055 |
-
|
2056 |
-
str = 'm' + floor( shrinkL ) + ',' + floor( tlY ) +
|
2057 |
-
'qy' + floor( tlX ) + ',' + floor( shrinkT ) +
|
2058 |
-
'l' + ceil( w - trX ) + ',' + floor( shrinkT ) +
|
2059 |
-
'qx' + ceil( w - shrinkR ) + ',' + floor( trY ) +
|
2060 |
-
'l' + ceil( w - shrinkR ) + ',' + ceil( h - brY ) +
|
2061 |
-
'qy' + ceil( w - brX ) + ',' + ceil( h - shrinkB ) +
|
2062 |
-
'l' + floor( blX ) + ',' + ceil( h - shrinkB ) +
|
2063 |
-
'qx' + floor( shrinkL ) + ',' + ceil( h - blY ) + ' x e';
|
2064 |
-
} else {
|
2065 |
-
// simplified path for non-rounded box
|
2066 |
-
str = 'm' + floor( shrinkL ) + ',' + floor( shrinkT ) +
|
2067 |
-
'l' + ceil( w - shrinkR ) + ',' + floor( shrinkT ) +
|
2068 |
-
'l' + ceil( w - shrinkR ) + ',' + ceil( h - shrinkB ) +
|
2069 |
-
'l' + floor( shrinkL ) + ',' + ceil( h - shrinkB ) +
|
2070 |
-
'xe';
|
2071 |
-
}
|
2072 |
-
return str;
|
2073 |
-
},
|
2074 |
-
|
2075 |
-
|
2076 |
-
/**
|
2077 |
-
* Get the container element for the shapes, creating it if necessary.
|
2078 |
-
*/
|
2079 |
-
getBox: function() {
|
2080 |
-
var box = this.parent.getLayer( this.boxZIndex ), s;
|
2081 |
-
|
2082 |
-
if( !box ) {
|
2083 |
-
box = doc.createElement( this.boxName );
|
2084 |
-
s = box.style;
|
2085 |
-
s.position = 'absolute';
|
2086 |
-
s.top = s.left = 0;
|
2087 |
-
this.parent.addLayer( this.boxZIndex, box );
|
2088 |
-
}
|
2089 |
-
|
2090 |
-
return box;
|
2091 |
-
},
|
2092 |
-
|
2093 |
-
|
2094 |
-
/**
|
2095 |
-
* Destroy the rendered objects. This is a base implementation which handles common renderer
|
2096 |
-
* structures, but individual renderers may override as necessary.
|
2097 |
-
*/
|
2098 |
-
destroy: function() {
|
2099 |
-
this.parent.removeLayer( this.boxZIndex );
|
2100 |
-
delete this._shapes;
|
2101 |
-
delete this._layers;
|
2102 |
-
}
|
2103 |
-
};
|
2104 |
-
/**
|
2105 |
-
* Root renderer; creates the outermost container element and handles keeping it aligned
|
2106 |
-
* with the target element's size and position.
|
2107 |
-
* @param {Element} el The target element
|
2108 |
-
* @param {Object} styleInfos The StyleInfo objects
|
2109 |
-
*/
|
2110 |
-
PIE.RootRenderer = PIE.RendererBase.newRenderer( {
|
2111 |
-
|
2112 |
-
isActive: function() {
|
2113 |
-
var children = this.childRenderers;
|
2114 |
-
for( var i in children ) {
|
2115 |
-
if( children.hasOwnProperty( i ) && children[ i ].isActive() ) {
|
2116 |
-
return true;
|
2117 |
-
}
|
2118 |
-
}
|
2119 |
-
return false;
|
2120 |
-
},
|
2121 |
-
|
2122 |
-
needsUpdate: function() {
|
2123 |
-
return this.styleInfos.visibilityInfo.changed();
|
2124 |
-
},
|
2125 |
-
|
2126 |
-
updatePos: function() {
|
2127 |
-
if( this.isActive() ) {
|
2128 |
-
var el = this.getPositioningElement(),
|
2129 |
-
par = el,
|
2130 |
-
docEl,
|
2131 |
-
parRect,
|
2132 |
-
tgtCS = el.currentStyle,
|
2133 |
-
tgtPos = tgtCS.position,
|
2134 |
-
boxPos,
|
2135 |
-
s = this.getBox().style, cs,
|
2136 |
-
x = 0, y = 0,
|
2137 |
-
elBounds = this.boundsInfo.getBounds();
|
2138 |
-
|
2139 |
-
if( tgtPos === 'fixed' && PIE.ieVersion > 6 ) {
|
2140 |
-
x = elBounds.x;
|
2141 |
-
y = elBounds.y;
|
2142 |
-
boxPos = tgtPos;
|
2143 |
-
} else {
|
2144 |
-
// Get the element's offsets from its nearest positioned ancestor. Uses
|
2145 |
-
// getBoundingClientRect for accuracy and speed.
|
2146 |
-
do {
|
2147 |
-
par = par.offsetParent;
|
2148 |
-
} while( par && ( par.currentStyle.position === 'static' ) );
|
2149 |
-
if( par ) {
|
2150 |
-
parRect = par.getBoundingClientRect();
|
2151 |
-
cs = par.currentStyle;
|
2152 |
-
x = elBounds.x - parRect.left - ( parseFloat(cs.borderLeftWidth) || 0 );
|
2153 |
-
y = elBounds.y - parRect.top - ( parseFloat(cs.borderTopWidth) || 0 );
|
2154 |
-
} else {
|
2155 |
-
docEl = doc.documentElement;
|
2156 |
-
x = elBounds.x + docEl.scrollLeft - docEl.clientLeft;
|
2157 |
-
y = elBounds.y + docEl.scrollTop - docEl.clientTop;
|
2158 |
-
}
|
2159 |
-
boxPos = 'absolute';
|
2160 |
-
}
|
2161 |
-
|
2162 |
-
s.position = boxPos;
|
2163 |
-
s.left = x;
|
2164 |
-
s.top = y;
|
2165 |
-
s.zIndex = tgtPos === 'static' ? -1 : tgtCS.zIndex;
|
2166 |
-
this.isPositioned = true;
|
2167 |
-
}
|
2168 |
-
},
|
2169 |
-
|
2170 |
-
updateSize: function() {
|
2171 |
-
// NO-OP
|
2172 |
-
},
|
2173 |
-
|
2174 |
-
updateVisibility: function() {
|
2175 |
-
var vis = this.styleInfos.visibilityInfo.getProps();
|
2176 |
-
this.getBox().style.display = ( vis.visible && vis.displayed ) ? '' : 'none';
|
2177 |
-
},
|
2178 |
-
|
2179 |
-
updateProps: function() {
|
2180 |
-
if( this.isActive() ) {
|
2181 |
-
this.updateVisibility();
|
2182 |
-
} else {
|
2183 |
-
this.destroy();
|
2184 |
-
}
|
2185 |
-
},
|
2186 |
-
|
2187 |
-
getPositioningElement: function() {
|
2188 |
-
var el = this.targetElement;
|
2189 |
-
return el.tagName in PIE.tableCellTags ? el.offsetParent : el;
|
2190 |
-
},
|
2191 |
-
|
2192 |
-
getBox: function() {
|
2193 |
-
var box = this._box, el;
|
2194 |
-
if( !box ) {
|
2195 |
-
el = this.getPositioningElement();
|
2196 |
-
box = this._box = doc.createElement( 'css3-container' );
|
2197 |
-
box.style['direction'] = 'ltr'; //fix positioning bug in rtl environments
|
2198 |
-
|
2199 |
-
this.updateVisibility();
|
2200 |
-
|
2201 |
-
el.parentNode.insertBefore( box, el );
|
2202 |
-
}
|
2203 |
-
return box;
|
2204 |
-
},
|
2205 |
-
|
2206 |
-
destroy: function() {
|
2207 |
-
var box = this._box, par;
|
2208 |
-
if( box && ( par = box.parentNode ) ) {
|
2209 |
-
par.removeChild( box );
|
2210 |
-
}
|
2211 |
-
delete this._box;
|
2212 |
-
delete this._layers;
|
2213 |
-
}
|
2214 |
-
|
2215 |
-
} );
|
2216 |
-
/**
|
2217 |
-
* Renderer for element backgrounds.
|
2218 |
-
* @constructor
|
2219 |
-
* @param {Element} el The target element
|
2220 |
-
* @param {Object} styleInfos The StyleInfo objects
|
2221 |
-
* @param {PIE.RootRenderer} parent
|
2222 |
-
*/
|
2223 |
-
PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
|
2224 |
-
|
2225 |
-
boxZIndex: 2,
|
2226 |
-
boxName: 'background',
|
2227 |
-
|
2228 |
-
needsUpdate: function() {
|
2229 |
-
var si = this.styleInfos;
|
2230 |
-
return si.backgroundInfo.changed() || si.borderRadiusInfo.changed();
|
2231 |
-
},
|
2232 |
-
|
2233 |
-
isActive: function() {
|
2234 |
-
var si = this.styleInfos;
|
2235 |
-
return si.borderImageInfo.isActive() ||
|
2236 |
-
si.borderRadiusInfo.isActive() ||
|
2237 |
-
si.backgroundInfo.isActive() ||
|
2238 |
-
( si.boxShadowInfo.isActive() && si.boxShadowInfo.getProps().inset );
|
2239 |
-
},
|
2240 |
-
|
2241 |
-
/**
|
2242 |
-
* Draw the shapes
|
2243 |
-
*/
|
2244 |
-
draw: function() {
|
2245 |
-
var bounds = this.boundsInfo.getBounds();
|
2246 |
-
if( bounds.w && bounds.h ) {
|
2247 |
-
this.drawBgColor();
|
2248 |
-
this.drawBgImages();
|
2249 |
-
}
|
2250 |
-
},
|
2251 |
-
|
2252 |
-
/**
|
2253 |
-
* Draw the background color shape
|
2254 |
-
*/
|
2255 |
-
drawBgColor: function() {
|
2256 |
-
var props = this.styleInfos.backgroundInfo.getProps(),
|
2257 |
-
bounds = this.boundsInfo.getBounds(),
|
2258 |
-
el = this.targetElement,
|
2259 |
-
color = props && props.color,
|
2260 |
-
shape, w, h, s, alpha;
|
2261 |
-
|
2262 |
-
if( color && color.alpha() > 0 ) {
|
2263 |
-
this.hideBackground();
|
2264 |
-
|
2265 |
-
shape = this.getShape( 'bgColor', 'fill', this.getBox(), 1 );
|
2266 |
-
w = bounds.w;
|
2267 |
-
h = bounds.h;
|
2268 |
-
shape.stroked = false;
|
2269 |
-
shape.coordsize = w * 2 + ',' + h * 2;
|
2270 |
-
shape.coordorigin = '1,1';
|
2271 |
-
shape.path = this.getBoxPath( null, 2 );
|
2272 |
-
s = shape.style;
|
2273 |
-
s.width = w;
|
2274 |
-
s.height = h;
|
2275 |
-
shape.fill.color = color.colorValue( el );
|
2276 |
-
|
2277 |
-
alpha = color.alpha();
|
2278 |
-
if( alpha < 1 ) {
|
2279 |
-
shape.fill.opacity = alpha;
|
2280 |
-
}
|
2281 |
-
} else {
|
2282 |
-
this.deleteShape( 'bgColor' );
|
2283 |
-
}
|
2284 |
-
},
|
2285 |
-
|
2286 |
-
/**
|
2287 |
-
* Draw all the background image layers
|
2288 |
-
*/
|
2289 |
-
drawBgImages: function() {
|
2290 |
-
var props = this.styleInfos.backgroundInfo.getProps(),
|
2291 |
-
bounds = this.boundsInfo.getBounds(),
|
2292 |
-
images = props && props.bgImages,
|
2293 |
-
img, shape, w, h, s, i;
|
2294 |
-
|
2295 |
-
if( images ) {
|
2296 |
-
this.hideBackground();
|
2297 |
-
|
2298 |
-
w = bounds.w;
|
2299 |
-
h = bounds.h;
|
2300 |
-
|
2301 |
-
i = images.length;
|
2302 |
-
while( i-- ) {
|
2303 |
-
img = images[i];
|
2304 |
-
shape = this.getShape( 'bgImage' + i, 'fill', this.getBox(), 2 );
|
2305 |
-
|
2306 |
-
shape.stroked = false;
|
2307 |
-
shape.fill.type = 'tile';
|
2308 |
-
shape.fillcolor = 'none';
|
2309 |
-
shape.coordsize = w * 2 + ',' + h * 2;
|
2310 |
-
shape.coordorigin = '1,1';
|
2311 |
-
shape.path = this.getBoxPath( 0, 2 );
|
2312 |
-
s = shape.style;
|
2313 |
-
s.width = w;
|
2314 |
-
s.height = h;
|
2315 |
-
|
2316 |
-
if( img.imgType === 'linear-gradient' ) {
|
2317 |
-
this.addLinearGradient( shape, img );
|
2318 |
-
}
|
2319 |
-
else {
|
2320 |
-
shape.fill.src = img.imgUrl;
|
2321 |
-
this.positionBgImage( shape, i );
|
2322 |
-
}
|
2323 |
-
}
|
2324 |
-
}
|
2325 |
-
|
2326 |
-
// Delete any bgImage shapes previously created which weren't used above
|
2327 |
-
i = images ? images.length : 0;
|
2328 |
-
while( this.deleteShape( 'bgImage' + i++ ) ) {}
|
2329 |
-
},
|
2330 |
-
|
2331 |
-
|
2332 |
-
/**
|
2333 |
-
* Set the position and clipping of the background image for a layer
|
2334 |
-
* @param {Element} shape
|
2335 |
-
* @param {number} index
|
2336 |
-
*/
|
2337 |
-
positionBgImage: function( shape, index ) {
|
2338 |
-
PIE.Util.withImageSize( shape.fill.src, function( size ) {
|
2339 |
-
var fill = shape.fill,
|
2340 |
-
el = this.targetElement,
|
2341 |
-
bounds = this.boundsInfo.getBounds(),
|
2342 |
-
elW = bounds.w,
|
2343 |
-
elH = bounds.h,
|
2344 |
-
si = this.styleInfos,
|
2345 |
-
border = si.borderInfo.getProps(),
|
2346 |
-
bw = border && border.widths,
|
2347 |
-
bwT = bw ? bw['t'].pixels( el ) : 0,
|
2348 |
-
bwR = bw ? bw['r'].pixels( el ) : 0,
|
2349 |
-
bwB = bw ? bw['b'].pixels( el ) : 0,
|
2350 |
-
bwL = bw ? bw['l'].pixels( el ) : 0,
|
2351 |
-
bg = si.backgroundInfo.getProps().bgImages[ index ],
|
2352 |
-
bgPos = bg.bgPosition ? bg.bgPosition.coords( el, elW - size.w - bwL - bwR, elH - size.h - bwT - bwB ) : { x:0, y:0 },
|
2353 |
-
repeat = bg.imgRepeat,
|
2354 |
-
pxX, pxY,
|
2355 |
-
clipT = 0, clipL = 0,
|
2356 |
-
clipR = elW + 1, clipB = elH + 1, //make sure the default clip region is not inside the box (by a subpixel)
|
2357 |
-
clipAdjust = PIE.ieVersion === 8 ? 0 : 1; //prior to IE8 requires 1 extra pixel in the image clip region
|
2358 |
-
|
2359 |
-
// Positioning - find the pixel offset from the top/left and convert to a ratio
|
2360 |
-
// The position is shifted by half a pixel, to adjust for the half-pixel coordorigin shift which is
|
2361 |
-
// needed to fix antialiasing but makes the bg image fuzzy.
|
2362 |
-
pxX = Math.round( bgPos.x ) + bwL + 0.5;
|
2363 |
-
pxY = Math.round( bgPos.y ) + bwT + 0.5;
|
2364 |
-
fill.position = ( pxX / elW ) + ',' + ( pxY / elH );
|
2365 |
-
|
2366 |
-
// Repeating - clip the image shape
|
2367 |
-
if( repeat && repeat !== 'repeat' ) {
|
2368 |
-
if( repeat === 'repeat-x' || repeat === 'no-repeat' ) {
|
2369 |
-
clipT = pxY + 1;
|
2370 |
-
clipB = pxY + size.h + clipAdjust;
|
2371 |
-
}
|
2372 |
-
if( repeat === 'repeat-y' || repeat === 'no-repeat' ) {
|
2373 |
-
clipL = pxX + 1;
|
2374 |
-
clipR = pxX + size.w + clipAdjust;
|
2375 |
-
}
|
2376 |
-
shape.style.clip = 'rect(' + clipT + 'px,' + clipR + 'px,' + clipB + 'px,' + clipL + 'px)';
|
2377 |
-
}
|
2378 |
-
}, this );
|
2379 |
-
},
|
2380 |
-
|
2381 |
-
|
2382 |
-
/**
|
2383 |
-
* Draw the linear gradient for a gradient layer
|
2384 |
-
* @param {Element} shape
|
2385 |
-
* @param {Object} info The object holding the information about the gradient
|
2386 |
-
*/
|
2387 |
-
addLinearGradient: function( shape, info ) {
|
2388 |
-
var el = this.targetElement,
|
2389 |
-
bounds = this.boundsInfo.getBounds(),
|
2390 |
-
w = bounds.w,
|
2391 |
-
h = bounds.h,
|
2392 |
-
fill = shape.fill,
|
2393 |
-
angle = info.angle,
|
2394 |
-
startPos = info.gradientStart,
|
2395 |
-
stops = info.stops,
|
2396 |
-
stopCount = stops.length,
|
2397 |
-
PI = Math.PI,
|
2398 |
-
UNDEF,
|
2399 |
-
startX, startY,
|
2400 |
-
endX, endY,
|
2401 |
-
startCornerX, startCornerY,
|
2402 |
-
endCornerX, endCornerY,
|
2403 |
-
vmlAngle, vmlGradientLength, vmlColors,
|
2404 |
-
deltaX, deltaY, lineLength,
|
2405 |
-
stopPx, vmlOffsetPct,
|
2406 |
-
p, i, j, before, after;
|
2407 |
-
|
2408 |
-
/**
|
2409 |
-
* Find the point along a given line (defined by a starting point and an angle), at which
|
2410 |
-
* that line is intersected by a perpendicular line extending through another point.
|
2411 |
-
* @param x1 - x coord of the starting point
|
2412 |
-
* @param y1 - y coord of the starting point
|
2413 |
-
* @param angle - angle of the line extending from the starting point (in degrees)
|
2414 |
-
* @param x2 - x coord of point along the perpendicular line
|
2415 |
-
* @param y2 - y coord of point along the perpendicular line
|
2416 |
-
* @return [ x, y ]
|
2417 |
-
*/
|
2418 |
-
function perpendicularIntersect( x1, y1, angle, x2, y2 ) {
|
2419 |
-
// Handle straight vertical and horizontal angles, for performance and to avoid
|
2420 |
-
// divide-by-zero errors.
|
2421 |
-
if( angle === 0 || angle === 180 ) {
|
2422 |
-
return [ x2, y1 ];
|
2423 |
-
}
|
2424 |
-
else if( angle === 90 || angle === 270 ) {
|
2425 |
-
return [ x1, y2 ];
|
2426 |
-
}
|
2427 |
-
else {
|
2428 |
-
// General approach: determine the Ax+By=C formula for each line (the slope of the second
|
2429 |
-
// line is the negative inverse of the first) and then solve for where both formulas have
|
2430 |
-
// the same x/y values.
|
2431 |
-
var a1 = Math.tan( -angle * PI / 180 ),
|
2432 |
-
c1 = a1 * x1 - y1,
|
2433 |
-
a2 = -1 / a1,
|
2434 |
-
c2 = a2 * x2 - y2,
|
2435 |
-
d = a2 - a1,
|
2436 |
-
endX = ( c2 - c1 ) / d,
|
2437 |
-
endY = ( a1 * c2 - a2 * c1 ) / d;
|
2438 |
-
return [ endX, endY ];
|
2439 |
-
}
|
2440 |
-
}
|
2441 |
-
|
2442 |
-
// Find the "start" and "end" corners; these are the corners furthest along the gradient line.
|
2443 |
-
// This is used below to find the start/end positions of the CSS3 gradient-line, and also in finding
|
2444 |
-
// the total length of the VML rendered gradient-line corner to corner.
|
2445 |
-
function findCorners() {
|
2446 |
-
startCornerX = ( angle >= 90 && angle < 270 ) ? w : 0;
|
2447 |
-
startCornerY = angle < 180 ? h : 0;
|
2448 |
-
endCornerX = w - startCornerX;
|
2449 |
-
endCornerY = h - startCornerY;
|
2450 |
-
}
|
2451 |
-
|
2452 |
-
// Normalize the angle to a value between [0, 360)
|
2453 |
-
function normalizeAngle() {
|
2454 |
-
while( angle < 0 ) {
|
2455 |
-
angle += 360;
|
2456 |
-
}
|
2457 |
-
angle = angle % 360;
|
2458 |
-
}
|
2459 |
-
|
2460 |
-
// Find the distance between two points
|
2461 |
-
function distance( p1, p2 ) {
|
2462 |
-
var dx = p2[0] - p1[0],
|
2463 |
-
dy = p2[1] - p1[1];
|
2464 |
-
return Math.abs(
|
2465 |
-
dx === 0 ? dy :
|
2466 |
-
dy === 0 ? dx :
|
2467 |
-
Math.sqrt( dx * dx + dy * dy )
|
2468 |
-
);
|
2469 |
-
}
|
2470 |
-
|
2471 |
-
// Find the start and end points of the gradient
|
2472 |
-
if( startPos ) {
|
2473 |
-
startPos = startPos.coords( el, w, h );
|
2474 |
-
startX = startPos.x;
|
2475 |
-
startY = startPos.y;
|
2476 |
-
}
|
2477 |
-
if( angle ) {
|
2478 |
-
angle = angle.degrees();
|
2479 |
-
|
2480 |
-
normalizeAngle();
|
2481 |
-
findCorners();
|
2482 |
-
|
2483 |
-
// If no start position was specified, then choose a corner as the starting point.
|
2484 |
-
if( !startPos ) {
|
2485 |
-
startX = startCornerX;
|
2486 |
-
startY = startCornerY;
|
2487 |
-
}
|
2488 |
-
|
2489 |
-
// Find the end position by extending a perpendicular line from the gradient-line which
|
2490 |
-
// intersects the corner opposite from the starting corner.
|
2491 |
-
p = perpendicularIntersect( startX, startY, angle, endCornerX, endCornerY );
|
2492 |
-
endX = p[0];
|
2493 |
-
endY = p[1];
|
2494 |
-
}
|
2495 |
-
else if( startPos ) {
|
2496 |
-
// Start position but no angle specified: find the end point by rotating 180deg around the center
|
2497 |
-
endX = w - startX;
|
2498 |
-
endY = h - startY;
|
2499 |
-
}
|
2500 |
-
else {
|
2501 |
-
// Neither position nor angle specified; create vertical gradient from top to bottom
|
2502 |
-
startX = startY = endX = 0;
|
2503 |
-
endY = h;
|
2504 |
-
}
|
2505 |
-
deltaX = endX - startX;
|
2506 |
-
deltaY = endY - startY;
|
2507 |
-
|
2508 |
-
if( angle === UNDEF ) {
|
2509 |
-
// Get the angle based on the change in x/y from start to end point. Checks first for horizontal
|
2510 |
-
// or vertical angles so they get exact whole numbers rather than what atan2 gives.
|
2511 |
-
angle = ( !deltaX ? ( deltaY < 0 ? 90 : 270 ) :
|
2512 |
-
( !deltaY ? ( deltaX < 0 ? 180 : 0 ) :
|
2513 |
-
-Math.atan2( deltaY, deltaX ) / PI * 180
|
2514 |
-
)
|
2515 |
-
);
|
2516 |
-
normalizeAngle();
|
2517 |
-
findCorners();
|
2518 |
-
}
|
2519 |
-
|
2520 |
-
|
2521 |
-
// In VML land, the angle of the rendered gradient depends on the aspect ratio of the shape's
|
2522 |
-
// bounding box; for example specifying a 45 deg angle actually results in a gradient
|
2523 |
-
// drawn diagonally from one corner to its opposite corner, which will only appear to the
|
2524 |
-
// viewer as 45 degrees if the shape is equilateral. We adjust for this by taking the x/y deltas
|
2525 |
-
// between the start and end points, multiply one of them by the shape's aspect ratio,
|
2526 |
-
// and get their arctangent, resulting in an appropriate VML angle. If the angle is perfectly
|
2527 |
-
// horizontal or vertical then we don't need to do this conversion.
|
2528 |
-
vmlAngle = ( angle % 90 ) ? Math.atan2( deltaX * w / h, deltaY ) / PI * 180 : ( angle + 90 );
|
2529 |
-
|
2530 |
-
// VML angles are 180 degrees offset from CSS angles
|
2531 |
-
vmlAngle += 180;
|
2532 |
-
vmlAngle = vmlAngle % 360;
|
2533 |
-
|
2534 |
-
// Add all the stops to the VML 'colors' list, including the first and last stops.
|
2535 |
-
// For each, we find its pixel offset along the gradient-line; if the offset of a stop is less
|
2536 |
-
// than that of its predecessor we increase it to be equal. We then map that pixel offset to a
|
2537 |
-
// percentage along the VML gradient-line, which runs from shape corner to corner.
|
2538 |
-
lineLength = distance( [ startX, startY ], [ endX, endY ] );
|
2539 |
-
vmlGradientLength = distance( [ startCornerX, startCornerY ], perpendicularIntersect( startCornerX, startCornerY, angle, endCornerX, endCornerY ) );
|
2540 |
-
vmlColors = [];
|
2541 |
-
vmlOffsetPct = distance( [ startX, startY ], perpendicularIntersect( startX, startY, angle, startCornerX, startCornerY ) ) / vmlGradientLength * 100;
|
2542 |
-
|
2543 |
-
// Find the pixel offsets along the CSS3 gradient-line for each stop.
|
2544 |
-
stopPx = [];
|
2545 |
-
for( i = 0; i < stopCount; i++ ) {
|
2546 |
-
stopPx.push( stops[i].offset ? stops[i].offset.pixels( el, lineLength ) :
|
2547 |
-
i === 0 ? 0 : i === stopCount - 1 ? lineLength : null );
|
2548 |
-
}
|
2549 |
-
// Fill in gaps with evenly-spaced offsets
|
2550 |
-
for( i = 1; i < stopCount; i++ ) {
|
2551 |
-
if( stopPx[ i ] === null ) {
|
2552 |
-
before = stopPx[ i - 1 ];
|
2553 |
-
j = i;
|
2554 |
-
do {
|
2555 |
-
after = stopPx[ ++j ];
|
2556 |
-
} while( after === null );
|
2557 |
-
stopPx[ i ] = before + ( after - before ) / ( j - i + 1 );
|
2558 |
-
}
|
2559 |
-
// Make sure each stop's offset is no less than the one before it
|
2560 |
-
stopPx[ i ] = Math.max( stopPx[ i ], stopPx[ i - 1 ] );
|
2561 |
-
}
|
2562 |
-
|
2563 |
-
// Convert to percentage along the VML gradient line and add to the VML 'colors' value
|
2564 |
-
for( i = 0; i < stopCount; i++ ) {
|
2565 |
-
vmlColors.push(
|
2566 |
-
( vmlOffsetPct + ( stopPx[ i ] / vmlGradientLength * 100 ) ) + '% ' + stops[i].color.colorValue( el )
|
2567 |
-
);
|
2568 |
-
}
|
2569 |
-
|
2570 |
-
// Now, finally, we're ready to render the gradient fill. Set the start and end colors to
|
2571 |
-
// the first and last stop colors; this just sets outer bounds for the gradient.
|
2572 |
-
fill['angle'] = vmlAngle;
|
2573 |
-
fill['type'] = 'gradient';
|
2574 |
-
fill['method'] = 'sigma';
|
2575 |
-
fill['color'] = stops[0].color.colorValue( el );
|
2576 |
-
fill['color2'] = stops[stopCount - 1].color.colorValue( el );
|
2577 |
-
fill['colors'].value = vmlColors.join( ',' );
|
2578 |
-
},
|
2579 |
-
|
2580 |
-
|
2581 |
-
/**
|
2582 |
-
* Hide the actual background image and color of the element.
|
2583 |
-
*/
|
2584 |
-
hideBackground: function() {
|
2585 |
-
var rs = this.targetElement.runtimeStyle;
|
2586 |
-
rs.backgroundImage = 'url(about:blank)'; //ensures the background area reacts to mouse events
|
2587 |
-
rs.backgroundColor = 'transparent';
|
2588 |
-
},
|
2589 |
-
|
2590 |
-
destroy: function() {
|
2591 |
-
PIE.RendererBase.destroy.call( this );
|
2592 |
-
var rs = this.targetElement.runtimeStyle;
|
2593 |
-
rs.backgroundImage = rs.backgroundColor = '';
|
2594 |
-
}
|
2595 |
-
|
2596 |
-
} );
|
2597 |
-
/**
|
2598 |
-
* Renderer for element borders.
|
2599 |
-
* @constructor
|
2600 |
-
* @param {Element} el The target element
|
2601 |
-
* @param {Object} styleInfos The StyleInfo objects
|
2602 |
-
* @param {PIE.RootRenderer} parent
|
2603 |
-
*/
|
2604 |
-
PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
|
2605 |
-
|
2606 |
-
boxZIndex: 4,
|
2607 |
-
boxName: 'border',
|
2608 |
-
|
2609 |
-
/**
|
2610 |
-
* Lookup table of elements which cannot take custom children.
|
2611 |
-
*/
|
2612 |
-
childlessElements: {
|
2613 |
-
'TABLE':1, //can obviously have children but not custom ones
|
2614 |
-
'INPUT':1,
|
2615 |
-
'TEXTAREA':1,
|
2616 |
-
'SELECT':1,
|
2617 |
-
'OPTION':1,
|
2618 |
-
'IMG':1,
|
2619 |
-
'HR':1,
|
2620 |
-
'FIELDSET':1 //can take children but wrapping its children messes up its <legend>
|
2621 |
-
},
|
2622 |
-
|
2623 |
-
/**
|
2624 |
-
* Values of the type attribute for input elements displayed as buttons
|
2625 |
-
*/
|
2626 |
-
inputButtonTypes: {
|
2627 |
-
'submit':1,
|
2628 |
-
'button':1,
|
2629 |
-
'reset':1
|
2630 |
-
},
|
2631 |
-
|
2632 |
-
needsUpdate: function() {
|
2633 |
-
var si = this.styleInfos;
|
2634 |
-
return si.borderInfo.changed() || si.borderRadiusInfo.changed();
|
2635 |
-
},
|
2636 |
-
|
2637 |
-
isActive: function() {
|
2638 |
-
var si = this.styleInfos;
|
2639 |
-
return ( si.borderImageInfo.isActive() ||
|
2640 |
-
si.borderRadiusInfo.isActive() ||
|
2641 |
-
si.backgroundInfo.isActive() ) &&
|
2642 |
-
si.borderInfo.isActive(); //check BorderStyleInfo last because it's the most expensive
|
2643 |
-
},
|
2644 |
-
|
2645 |
-
/**
|
2646 |
-
* Draw the border shape(s)
|
2647 |
-
*/
|
2648 |
-
draw: function() {
|
2649 |
-
var el = this.targetElement,
|
2650 |
-
cs = el.currentStyle,
|
2651 |
-
props = this.styleInfos.borderInfo.getProps(),
|
2652 |
-
bounds = this.boundsInfo.getBounds(),
|
2653 |
-
w = bounds.w,
|
2654 |
-
h = bounds.h,
|
2655 |
-
side, shape, stroke, s,
|
2656 |
-
segments, seg, i, len;
|
2657 |
-
|
2658 |
-
if( props ) {
|
2659 |
-
this.hideBorder();
|
2660 |
-
|
2661 |
-
segments = this.getBorderSegments( 2 );
|
2662 |
-
for( i = 0, len = segments.length; i < len; i++) {
|
2663 |
-
seg = segments[i];
|
2664 |
-
shape = this.getShape( 'borderPiece' + i, seg.stroke ? 'stroke' : 'fill', this.getBox() );
|
2665 |
-
shape.coordsize = w * 2 + ',' + h * 2;
|
2666 |
-
shape.coordorigin = '1,1';
|
2667 |
-
shape.path = seg.path;
|
2668 |
-
s = shape.style;
|
2669 |
-
s.width = w;
|
2670 |
-
s.height = h;
|
2671 |
-
|
2672 |
-
shape.filled = !!seg.fill;
|
2673 |
-
shape.stroked = !!seg.stroke;
|
2674 |
-
if( seg.stroke ) {
|
2675 |
-
stroke = shape.stroke;
|
2676 |
-
stroke['weight'] = seg.weight + 'px';
|
2677 |
-
stroke.color = seg.color.colorValue( el );
|
2678 |
-
stroke['dashstyle'] = seg.stroke === 'dashed' ? '2 2' : seg.stroke === 'dotted' ? '1 1' : 'solid';
|
2679 |
-
stroke['linestyle'] = seg.stroke === 'double' && seg.weight > 2 ? 'ThinThin' : 'Single';
|
2680 |
-
} else {
|
2681 |
-
shape.fill.color = seg.fill.colorValue( el );
|
2682 |
-
}
|
2683 |
-
}
|
2684 |
-
|
2685 |
-
// remove any previously-created border shapes which didn't get used above
|
2686 |
-
while( this.deleteShape( 'borderPiece' + i++ ) ) {}
|
2687 |
-
}
|
2688 |
-
},
|
2689 |
-
|
2690 |
-
/**
|
2691 |
-
* Hide the actual border of the element. In IE7 and up we can just set its color to transparent;
|
2692 |
-
* however IE6 does not support transparent borders so we have to get tricky with it. Also, some elements
|
2693 |
-
* like form buttons require removing the border width altogether, so for those we increase the padding
|
2694 |
-
* by the border size.
|
2695 |
-
*/
|
2696 |
-
hideBorder: function() {
|
2697 |
-
var el = this.targetElement,
|
2698 |
-
cs = el.currentStyle,
|
2699 |
-
rs = el.runtimeStyle,
|
2700 |
-
tag = el.tagName,
|
2701 |
-
isIE6 = PIE.ieVersion === 6,
|
2702 |
-
sides, side, i;
|
2703 |
-
|
2704 |
-
if( ( isIE6 && tag in this.childlessElements ) || tag === 'BUTTON' ||
|
2705 |
-
( tag === 'INPUT' && el.type in this.inputButtonTypes ) ) {
|
2706 |
-
rs.borderWidth = '';
|
2707 |
-
sides = this.styleInfos.borderInfo.sides;
|
2708 |
-
for( i = sides.length; i--; ) {
|
2709 |
-
side = sides[ i ];
|
2710 |
-
rs[ 'padding' + side ] = '';
|
2711 |
-
rs[ 'padding' + side ] = ( PIE.getLength( cs[ 'padding' + side ] ) ).pixels( el ) +
|
2712 |
-
( PIE.getLength( cs[ 'border' + side + 'Width' ] ) ).pixels( el ) +
|
2713 |
-
( !PIE.ieVersion === 8 && i % 2 ? 1 : 0 ); //needs an extra horizontal pixel to counteract the extra "inner border" going away
|
2714 |
-
}
|
2715 |
-
rs.borderWidth = 0;
|
2716 |
-
}
|
2717 |
-
else if( isIE6 ) {
|
2718 |
-
// Wrap all the element's children in a custom element, set the element to visiblity:hidden,
|
2719 |
-
// and set the wrapper element to visiblity:visible. This hides the outer element's decorations
|
2720 |
-
// (background and border) but displays all the contents.
|
2721 |
-
// TODO find a better way to do this that doesn't mess up the DOM parent-child relationship,
|
2722 |
-
// as this can interfere with other author scripts which add/modify/delete children. Also, this
|
2723 |
-
// won't work for elements which cannot take children, e.g. input/button/textarea/img/etc. Look into
|
2724 |
-
// using a compositor filter or some other filter which masks the border.
|
2725 |
-
if( el.childNodes.length !== 1 || el.firstChild.tagName !== 'ie6-mask' ) {
|
2726 |
-
var cont = doc.createElement( 'ie6-mask' ),
|
2727 |
-
s = cont.style, child;
|
2728 |
-
s.visibility = 'visible';
|
2729 |
-
s.zoom = 1;
|
2730 |
-
while( child = el.firstChild ) {
|
2731 |
-
cont.appendChild( child );
|
2732 |
-
}
|
2733 |
-
el.appendChild( cont );
|
2734 |
-
rs.visibility = 'hidden';
|
2735 |
-
}
|
2736 |
-
}
|
2737 |
-
else {
|
2738 |
-
rs.borderColor = 'transparent';
|
2739 |
-
}
|
2740 |
-
},
|
2741 |
-
|
2742 |
-
|
2743 |
-
/**
|
2744 |
-
* Get the VML path definitions for the border segment(s).
|
2745 |
-
* @param {number=} mult If specified, all coordinates will be multiplied by this number
|
2746 |
-
* @return {Array.<string>}
|
2747 |
-
*/
|
2748 |
-
getBorderSegments: function( mult ) {
|
2749 |
-
var el = this.targetElement,
|
2750 |
-
bounds, elW, elH,
|
2751 |
-
borderInfo = this.styleInfos.borderInfo,
|
2752 |
-
segments = [],
|
2753 |
-
floor, ceil, wT, wR, wB, wL,
|
2754 |
-
round = Math.round,
|
2755 |
-
borderProps, radiusInfo, radii, widths, styles, colors;
|
2756 |
-
|
2757 |
-
if( borderInfo.isActive() ) {
|
2758 |
-
borderProps = borderInfo.getProps();
|
2759 |
-
|
2760 |
-
widths = borderProps.widths;
|
2761 |
-
styles = borderProps.styles;
|
2762 |
-
colors = borderProps.colors;
|
2763 |
-
|
2764 |
-
if( borderProps.widthsSame && borderProps.stylesSame && borderProps.colorsSame ) {
|
2765 |
-
if( colors['t'].alpha() > 0 ) {
|
2766 |
-
// shortcut for identical border on all sides - only need 1 stroked shape
|
2767 |
-
wT = widths['t'].pixels( el ); //thickness
|
2768 |
-
wR = wT / 2; //shrink
|
2769 |
-
segments.push( {
|
2770 |
-
path: this.getBoxPath( { t: wR, r: wR, b: wR, l: wR }, mult ),
|
2771 |
-
stroke: styles['t'],
|
2772 |
-
color: colors['t'],
|
2773 |
-
weight: wT
|
2774 |
-
} );
|
2775 |
-
}
|
2776 |
-
}
|
2777 |
-
else {
|
2778 |
-
mult = mult || 1;
|
2779 |
-
bounds = this.boundsInfo.getBounds();
|
2780 |
-
elW = bounds.w;
|
2781 |
-
elH = bounds.h;
|
2782 |
-
|
2783 |
-
wT = round( widths['t'].pixels( el ) );
|
2784 |
-
wR = round( widths['r'].pixels( el ) );
|
2785 |
-
wB = round( widths['b'].pixels( el ) );
|
2786 |
-
wL = round( widths['l'].pixels( el ) );
|
2787 |
-
var pxWidths = {
|
2788 |
-
't': wT,
|
2789 |
-
'r': wR,
|
2790 |
-
'b': wB,
|
2791 |
-
'l': wL
|
2792 |
-
};
|
2793 |
-
|
2794 |
-
radiusInfo = this.styleInfos.borderRadiusInfo;
|
2795 |
-
if( radiusInfo.isActive() ) {
|
2796 |
-
radii = this.getRadiiPixels( radiusInfo.getProps() );
|
2797 |
-
}
|
2798 |
-
|
2799 |
-
floor = Math.floor;
|
2800 |
-
ceil = Math.ceil;
|
2801 |
-
|
2802 |
-
function radius( xy, corner ) {
|
2803 |
-
return radii ? radii[ xy ][ corner ] : 0;
|
2804 |
-
}
|
2805 |
-
|
2806 |
-
function curve( corner, shrinkX, shrinkY, startAngle, ccw, doMove ) {
|
2807 |
-
var rx = radius( 'x', corner),
|
2808 |
-
ry = radius( 'y', corner),
|
2809 |
-
deg = 65535,
|
2810 |
-
isRight = corner.charAt( 1 ) === 'r',
|
2811 |
-
isBottom = corner.charAt( 0 ) === 'b';
|
2812 |
-
return ( rx > 0 && ry > 0 ) ?
|
2813 |
-
( doMove ? 'al' : 'ae' ) +
|
2814 |
-
( isRight ? ceil( elW - rx ) : floor( rx ) ) * mult + ',' + // center x
|
2815 |
-
( isBottom ? ceil( elH - ry ) : floor( ry ) ) * mult + ',' + // center y
|
2816 |
-
( floor( rx ) - shrinkX ) * mult + ',' + // width
|
2817 |
-
( floor( ry ) - shrinkY ) * mult + ',' + // height
|
2818 |
-
( startAngle * deg ) + ',' + // start angle
|
2819 |
-
( 45 * deg * ( ccw ? 1 : -1 ) // angle change
|
2820 |
-
) : (
|
2821 |
-
( doMove ? 'm' : 'l' ) +
|
2822 |
-
( isRight ? elW - shrinkX : shrinkX ) * mult + ',' +
|
2823 |
-
( isBottom ? elH - shrinkY : shrinkY ) * mult
|
2824 |
-
);
|
2825 |
-
}
|
2826 |
-
|
2827 |
-
function line( side, shrink, ccw, doMove ) {
|
2828 |
-
var
|
2829 |
-
start = (
|
2830 |
-
side === 't' ?
|
2831 |
-
floor( radius( 'x', 'tl') ) * mult + ',' + ceil( shrink ) * mult :
|
2832 |
-
side === 'r' ?
|
2833 |
-
ceil( elW - shrink ) * mult + ',' + floor( radius( 'y', 'tr') ) * mult :
|
2834 |
-
side === 'b' ?
|
2835 |
-
ceil( elW - radius( 'x', 'br') ) * mult + ',' + floor( elH - shrink ) * mult :
|
2836 |
-
// side === 'l' ?
|
2837 |
-
floor( shrink ) * mult + ',' + ceil( elH - radius( 'y', 'bl') ) * mult
|
2838 |
-
),
|
2839 |
-
end = (
|
2840 |
-
side === 't' ?
|
2841 |
-
ceil( elW - radius( 'x', 'tr') ) * mult + ',' + ceil( shrink ) * mult :
|
2842 |
-
side === 'r' ?
|
2843 |
-
ceil( elW - shrink ) * mult + ',' + ceil( elH - radius( 'y', 'br') ) * mult :
|
2844 |
-
side === 'b' ?
|
2845 |
-
floor( radius( 'x', 'bl') ) * mult + ',' + floor( elH - shrink ) * mult :
|
2846 |
-
// side === 'l' ?
|
2847 |
-
floor( shrink ) * mult + ',' + floor( radius( 'y', 'tl') ) * mult
|
2848 |
-
);
|
2849 |
-
return ccw ? ( doMove ? 'm' + end : '' ) + 'l' + start :
|
2850 |
-
( doMove ? 'm' + start : '' ) + 'l' + end;
|
2851 |
-
}
|
2852 |
-
|
2853 |
-
|
2854 |
-
function addSide( side, sideBefore, sideAfter, cornerBefore, cornerAfter, baseAngle ) {
|
2855 |
-
var vert = side === 'l' || side === 'r',
|
2856 |
-
sideW = pxWidths[ side ],
|
2857 |
-
beforeX, beforeY, afterX, afterY;
|
2858 |
-
|
2859 |
-
if( sideW > 0 && styles[ side ] !== 'none' && colors[ side ].alpha() > 0 ) {
|
2860 |
-
beforeX = pxWidths[ vert ? side : sideBefore ];
|
2861 |
-
beforeY = pxWidths[ vert ? sideBefore : side ];
|
2862 |
-
afterX = pxWidths[ vert ? side : sideAfter ];
|
2863 |
-
afterY = pxWidths[ vert ? sideAfter : side ];
|
2864 |
-
|
2865 |
-
if( styles[ side ] === 'dashed' || styles[ side ] === 'dotted' ) {
|
2866 |
-
segments.push( {
|
2867 |
-
path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) +
|
2868 |
-
curve( cornerBefore, 0, 0, baseAngle, 1, 0 ),
|
2869 |
-
fill: colors[ side ]
|
2870 |
-
} );
|
2871 |
-
segments.push( {
|
2872 |
-
path: line( side, sideW / 2, 0, 1 ),
|
2873 |
-
stroke: styles[ side ],
|
2874 |
-
weight: sideW,
|
2875 |
-
color: colors[ side ]
|
2876 |
-
} );
|
2877 |
-
segments.push( {
|
2878 |
-
path: curve( cornerAfter, afterX, afterY, baseAngle, 0, 1 ) +
|
2879 |
-
curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ),
|
2880 |
-
fill: colors[ side ]
|
2881 |
-
} );
|
2882 |
-
}
|
2883 |
-
else {
|
2884 |
-
segments.push( {
|
2885 |
-
path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) +
|
2886 |
-
line( side, sideW, 0, 0 ) +
|
2887 |
-
curve( cornerAfter, afterX, afterY, baseAngle, 0, 0 ) +
|
2888 |
-
|
2889 |
-
( styles[ side ] === 'double' && sideW > 2 ?
|
2890 |
-
curve( cornerAfter, afterX - floor( afterX / 3 ), afterY - floor( afterY / 3 ), baseAngle - 45, 1, 0 ) +
|
2891 |
-
line( side, ceil( sideW / 3 * 2 ), 1, 0 ) +
|
2892 |
-
curve( cornerBefore, beforeX - floor( beforeX / 3 ), beforeY - floor( beforeY / 3 ), baseAngle, 1, 0 ) +
|
2893 |
-
'x ' +
|
2894 |
-
curve( cornerBefore, floor( beforeX / 3 ), floor( beforeY / 3 ), baseAngle + 45, 0, 1 ) +
|
2895 |
-
line( side, floor( sideW / 3 ), 1, 0 ) +
|
2896 |
-
curve( cornerAfter, floor( afterX / 3 ), floor( afterY / 3 ), baseAngle, 0, 0 )
|
2897 |
-
: '' ) +
|
2898 |
-
|
2899 |
-
curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ) +
|
2900 |
-
line( side, 0, 1, 0 ) +
|
2901 |
-
curve( cornerBefore, 0, 0, baseAngle, 1, 0 ),
|
2902 |
-
fill: colors[ side ]
|
2903 |
-
} );
|
2904 |
-
}
|
2905 |
-
}
|
2906 |
-
}
|
2907 |
-
|
2908 |
-
addSide( 't', 'l', 'r', 'tl', 'tr', 90 );
|
2909 |
-
addSide( 'r', 't', 'b', 'tr', 'br', 0 );
|
2910 |
-
addSide( 'b', 'r', 'l', 'br', 'bl', -90 );
|
2911 |
-
addSide( 'l', 'b', 't', 'bl', 'tl', -180 );
|
2912 |
-
}
|
2913 |
-
}
|
2914 |
-
|
2915 |
-
return segments;
|
2916 |
-
},
|
2917 |
-
|
2918 |
-
destroy: function() {
|
2919 |
-
PIE.RendererBase.destroy.call( this );
|
2920 |
-
this.targetElement.runtimeStyle.borderColor = '';
|
2921 |
-
}
|
2922 |
-
|
2923 |
-
|
2924 |
-
} );
|
2925 |
-
/**
|
2926 |
-
* Renderer for border-image
|
2927 |
-
* @constructor
|
2928 |
-
* @param {Element} el The target element
|
2929 |
-
* @param {Object} styleInfos The StyleInfo objects
|
2930 |
-
* @param {PIE.RootRenderer} parent
|
2931 |
-
*/
|
2932 |
-
PIE.BorderImageRenderer = PIE.RendererBase.newRenderer( {
|
2933 |
-
|
2934 |
-
boxZIndex: 5,
|
2935 |
-
pieceNames: [ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl', 'c' ],
|
2936 |
-
|
2937 |
-
needsUpdate: function() {
|
2938 |
-
return this.styleInfos.borderImageInfo.changed();
|
2939 |
-
},
|
2940 |
-
|
2941 |
-
isActive: function() {
|
2942 |
-
return this.styleInfos.borderImageInfo.isActive();
|
2943 |
-
},
|
2944 |
-
|
2945 |
-
draw: function() {
|
2946 |
-
this.getBox(); //make sure pieces are created
|
2947 |
-
|
2948 |
-
var props = this.styleInfos.borderImageInfo.getProps(),
|
2949 |
-
bounds = this.boundsInfo.getBounds(),
|
2950 |
-
el = this.targetElement,
|
2951 |
-
pieces = this.pieces;
|
2952 |
-
|
2953 |
-
PIE.Util.withImageSize( props.src, function( imgSize ) {
|
2954 |
-
var elW = bounds.w,
|
2955 |
-
elH = bounds.h,
|
2956 |
-
|
2957 |
-
widths = props.width,
|
2958 |
-
widthT = widths.t.pixels( el ),
|
2959 |
-
widthR = widths.r.pixels( el ),
|
2960 |
-
widthB = widths.b.pixels( el ),
|
2961 |
-
widthL = widths.l.pixels( el ),
|
2962 |
-
slices = props.slice,
|
2963 |
-
sliceT = slices.t.pixels( el ),
|
2964 |
-
sliceR = slices.r.pixels( el ),
|
2965 |
-
sliceB = slices.b.pixels( el ),
|
2966 |
-
sliceL = slices.l.pixels( el );
|
2967 |
-
|
2968 |
-
// Piece positions and sizes
|
2969 |
-
function setSizeAndPos( piece, w, h, x, y ) {
|
2970 |
-
var s = pieces[piece].style,
|
2971 |
-
max = Math.max;
|
2972 |
-
s.width = max(w, 0);
|
2973 |
-
s.height = max(h, 0);
|
2974 |
-
s.left = x;
|
2975 |
-
s.top = y;
|
2976 |
-
}
|
2977 |
-
setSizeAndPos( 'tl', widthL, widthT, 0, 0 );
|
2978 |
-
setSizeAndPos( 't', elW - widthL - widthR, widthT, widthL, 0 );
|
2979 |
-
setSizeAndPos( 'tr', widthR, widthT, elW - widthR, 0 );
|
2980 |
-
setSizeAndPos( 'r', widthR, elH - widthT - widthB, elW - widthR, widthT );
|
2981 |
-
setSizeAndPos( 'br', widthR, widthB, elW - widthR, elH - widthB );
|
2982 |
-
setSizeAndPos( 'b', elW - widthL - widthR, widthB, widthL, elH - widthB );
|
2983 |
-
setSizeAndPos( 'bl', widthL, widthB, 0, elH - widthB );
|
2984 |
-
setSizeAndPos( 'l', widthL, elH - widthT - widthB, 0, widthT );
|
2985 |
-
setSizeAndPos( 'c', elW - widthL - widthR, elH - widthT - widthB, widthL, widthT );
|
2986 |
-
|
2987 |
-
|
2988 |
-
// image croppings
|
2989 |
-
function setCrops( sides, crop, val ) {
|
2990 |
-
for( var i=0, len=sides.length; i < len; i++ ) {
|
2991 |
-
pieces[ sides[i] ]['imagedata'][ crop ] = val;
|
2992 |
-
}
|
2993 |
-
}
|
2994 |
-
|
2995 |
-
// corners
|
2996 |
-
setCrops( [ 'tl', 't', 'tr' ], 'cropBottom', ( imgSize.h - sliceT ) / imgSize.h );
|
2997 |
-
setCrops( [ 'tl', 'l', 'bl' ], 'cropRight', ( imgSize.w - sliceL ) / imgSize.w );
|
2998 |
-
setCrops( [ 'bl', 'b', 'br' ], 'cropTop', ( imgSize.h - sliceB ) / imgSize.h );
|
2999 |
-
setCrops( [ 'tr', 'r', 'br' ], 'cropLeft', ( imgSize.w - sliceR ) / imgSize.w );
|
3000 |
-
|
3001 |
-
// edges and center
|
3002 |
-
if( props.repeat.v === 'stretch' ) {
|
3003 |
-
setCrops( [ 'l', 'r', 'c' ], 'cropTop', sliceT / imgSize.h );
|
3004 |
-
setCrops( [ 'l', 'r', 'c' ], 'cropBottom', sliceB / imgSize.h );
|
3005 |
-
}
|
3006 |
-
if( props.repeat.h === 'stretch' ) {
|
3007 |
-
setCrops( [ 't', 'b', 'c' ], 'cropLeft', sliceL / imgSize.w );
|
3008 |
-
setCrops( [ 't', 'b', 'c' ], 'cropRight', sliceR / imgSize.w );
|
3009 |
-
}
|
3010 |
-
|
3011 |
-
// center fill
|
3012 |
-
pieces['c'].style.display = props.fill ? '' : 'none';
|
3013 |
-
}, this );
|
3014 |
-
},
|
3015 |
-
|
3016 |
-
getBox: function() {
|
3017 |
-
var box = this.parent.getLayer( this.boxZIndex ),
|
3018 |
-
s, piece, i,
|
3019 |
-
pieceNames = this.pieceNames,
|
3020 |
-
len = pieceNames.length;
|
3021 |
-
|
3022 |
-
if( !box ) {
|
3023 |
-
box = doc.createElement( 'border-image' );
|
3024 |
-
s = box.style;
|
3025 |
-
s.position = 'absolute';
|
3026 |
-
|
3027 |
-
this.pieces = {};
|
3028 |
-
|
3029 |
-
for( i = 0; i < len; i++ ) {
|
3030 |
-
piece = this.pieces[ pieceNames[i] ] = PIE.Util.createVmlElement( 'rect' );
|
3031 |
-
piece.appendChild( PIE.Util.createVmlElement( 'imagedata' ) );
|
3032 |
-
s = piece.style;
|
3033 |
-
s['behavior'] = 'url(#default#VML)';
|
3034 |
-
s.position = "absolute";
|
3035 |
-
s.top = s.left = 0;
|
3036 |
-
piece['imagedata'].src = this.styleInfos.borderImageInfo.getProps().src;
|
3037 |
-
piece.stroked = false;
|
3038 |
-
piece.filled = false;
|
3039 |
-
box.appendChild( piece );
|
3040 |
-
}
|
3041 |
-
|
3042 |
-
this.parent.addLayer( this.boxZIndex, box );
|
3043 |
-
}
|
3044 |
-
|
3045 |
-
return box;
|
3046 |
-
}
|
3047 |
-
|
3048 |
-
} );
|
3049 |
-
/**
|
3050 |
-
* Renderer for outset box-shadows
|
3051 |
-
* @constructor
|
3052 |
-
* @param {Element} el The target element
|
3053 |
-
* @param {Object} styleInfos The StyleInfo objects
|
3054 |
-
* @param {PIE.RootRenderer} parent
|
3055 |
-
*/
|
3056 |
-
PIE.BoxShadowOutsetRenderer = PIE.RendererBase.newRenderer( {
|
3057 |
-
|
3058 |
-
boxZIndex: 1,
|
3059 |
-
boxName: 'outset-box-shadow',
|
3060 |
-
|
3061 |
-
needsUpdate: function() {
|
3062 |
-
var si = this.styleInfos;
|
3063 |
-
return si.boxShadowInfo.changed() || si.borderRadiusInfo.changed();
|
3064 |
-
},
|
3065 |
-
|
3066 |
-
isActive: function() {
|
3067 |
-
var boxShadowInfo = this.styleInfos.boxShadowInfo;
|
3068 |
-
return boxShadowInfo.isActive() && boxShadowInfo.getProps().outset[0];
|
3069 |
-
},
|
3070 |
-
|
3071 |
-
draw: function() {
|
3072 |
-
var me = this,
|
3073 |
-
el = this.targetElement,
|
3074 |
-
box = this.getBox(),
|
3075 |
-
styleInfos = this.styleInfos,
|
3076 |
-
shadowInfos = styleInfos.boxShadowInfo.getProps().outset,
|
3077 |
-
radii = styleInfos.borderRadiusInfo.getProps(),
|
3078 |
-
len = shadowInfos.length,
|
3079 |
-
i = len, j,
|
3080 |
-
bounds = this.boundsInfo.getBounds(),
|
3081 |
-
w = bounds.w,
|
3082 |
-
h = bounds.h,
|
3083 |
-
clipAdjust = PIE.ieVersion === 8 ? 1 : 0, //workaround for IE8 bug where VML leaks out top/left of clip region by 1px
|
3084 |
-
corners = [ 'tl', 'tr', 'br', 'bl' ], corner,
|
3085 |
-
shadowInfo, shape, fill, ss, xOff, yOff, spread, blur, shrink, color, alpha, path,
|
3086 |
-
totalW, totalH, focusX, focusY, isBottom, isRight;
|
3087 |
-
|
3088 |
-
|
3089 |
-
function getShadowShape( index, corner, xOff, yOff, color, blur, path ) {
|
3090 |
-
var shape = me.getShape( 'shadow' + index + corner, 'fill', box, len - index ),
|
3091 |
-
fill = shape.fill;
|
3092 |
-
|
3093 |
-
// Position and size
|
3094 |
-
shape['coordsize'] = w * 2 + ',' + h * 2;
|
3095 |
-
shape['coordorigin'] = '1,1';
|
3096 |
-
|
3097 |
-
// Color and opacity
|
3098 |
-
shape['stroked'] = false;
|
3099 |
-
shape['filled'] = true;
|
3100 |
-
fill.color = color.colorValue( el );
|
3101 |
-
if( blur ) {
|
3102 |
-
fill['type'] = 'gradienttitle'; //makes the VML gradient follow the shape's outline - hooray for undocumented features?!?!
|
3103 |
-
fill['color2'] = fill.color;
|
3104 |
-
fill['opacity'] = 0;
|
3105 |
-
}
|
3106 |
-
|
3107 |
-
// Path
|
3108 |
-
shape.path = path;
|
3109 |
-
|
3110 |
-
// This needs to go last for some reason, to prevent rendering at incorrect size
|
3111 |
-
ss = shape.style;
|
3112 |
-
ss.left = xOff;
|
3113 |
-
ss.top = yOff;
|
3114 |
-
ss.width = w;
|
3115 |
-
ss.height = h;
|
3116 |
-
|
3117 |
-
return shape;
|
3118 |
-
}
|
3119 |
-
|
3120 |
-
|
3121 |
-
while( i-- ) {
|
3122 |
-
shadowInfo = shadowInfos[ i ];
|
3123 |
-
xOff = shadowInfo.xOffset.pixels( el );
|
3124 |
-
yOff = shadowInfo.yOffset.pixels( el );
|
3125 |
-
spread = shadowInfo.spread.pixels( el ),
|
3126 |
-
blur = shadowInfo.blur.pixels( el );
|
3127 |
-
color = shadowInfo.color;
|
3128 |
-
// Shape path
|
3129 |
-
shrink = -spread - blur;
|
3130 |
-
if( !radii && blur ) {
|
3131 |
-
// If blurring, use a non-null border radius info object so that getBoxPath will
|
3132 |
-
// round the corners of the expanded shadow shape rather than squaring them off.
|
3133 |
-
radii = PIE.BorderRadiusStyleInfo.ALL_ZERO;
|
3134 |
-
}
|
3135 |
-
path = this.getBoxPath( { t: shrink, r: shrink, b: shrink, l: shrink }, 2, radii );
|
3136 |
-
|
3137 |
-
if( blur ) {
|
3138 |
-
totalW = ( spread + blur ) * 2 + w;
|
3139 |
-
totalH = ( spread + blur ) * 2 + h;
|
3140 |
-
focusX = blur * 2 / totalW;
|
3141 |
-
focusY = blur * 2 / totalH;
|
3142 |
-
if( blur - spread > w / 2 || blur - spread > h / 2 ) {
|
3143 |
-
// If the blur is larger than half the element's narrowest dimension, we cannot do
|
3144 |
-
// this with a single shape gradient, because its focussize would have to be less than
|
3145 |
-
// zero which results in ugly artifacts. Instead we create four shapes, each with its
|
3146 |
-
// gradient focus past center, and then clip them so each only shows the quadrant
|
3147 |
-
// opposite the focus.
|
3148 |
-
for( j = 4; j--; ) {
|
3149 |
-
corner = corners[j];
|
3150 |
-
isBottom = corner.charAt( 0 ) === 'b';
|
3151 |
-
isRight = corner.charAt( 1 ) === 'r';
|
3152 |
-
shape = getShadowShape( i, corner, xOff, yOff, color, blur, path );
|
3153 |
-
fill = shape.fill;
|
3154 |
-
fill['focusposition'] = ( isRight ? 1 - focusX : focusX ) + ',' +
|
3155 |
-
( isBottom ? 1 - focusY : focusY );
|
3156 |
-
fill['focussize'] = '0,0';
|
3157 |
-
|
3158 |
-
// Clip to show only the appropriate quadrant. Add 1px to the top/left clip values
|
3159 |
-
// in IE8 to prevent a bug where IE8 displays one pixel outside the clip region.
|
3160 |
-
shape.style.clip = 'rect(' + ( ( isBottom ? totalH / 2 : 0 ) + clipAdjust ) + 'px,' +
|
3161 |
-
( isRight ? totalW : totalW / 2 ) + 'px,' +
|
3162 |
-
( isBottom ? totalH : totalH / 2 ) + 'px,' +
|
3163 |
-
( ( isRight ? totalW / 2 : 0 ) + clipAdjust ) + 'px)';
|
3164 |
-
}
|
3165 |
-
} else {
|
3166 |
-
// TODO delete old quadrant shapes if resizing expands past the barrier
|
3167 |
-
shape = getShadowShape( i, '', xOff, yOff, color, blur, path );
|
3168 |
-
fill = shape.fill;
|
3169 |
-
fill['focusposition'] = focusX + ',' + focusY;
|
3170 |
-
fill['focussize'] = ( 1 - focusX * 2 ) + ',' + ( 1 - focusY * 2 );
|
3171 |
-
}
|
3172 |
-
} else {
|
3173 |
-
shape = getShadowShape( i, '', xOff, yOff, color, blur, path );
|
3174 |
-
alpha = color.alpha();
|
3175 |
-
if( alpha < 1 ) {
|
3176 |
-
// shape.style.filter = 'alpha(opacity=' + ( alpha * 100 ) + ')';
|
3177 |
-
// ss.filter = 'progid:DXImageTransform.Microsoft.BasicImage(opacity=' + ( alpha ) + ')';
|
3178 |
-
shape.fill.opacity = alpha;
|
3179 |
-
}
|
3180 |
-
}
|
3181 |
-
}
|
3182 |
-
}
|
3183 |
-
|
3184 |
-
} );
|
3185 |
-
/**
|
3186 |
-
* Renderer for re-rendering img elements using VML. Kicks in if the img has
|
3187 |
-
* a border-radius applied, or if the -pie-png-fix flag is set.
|
3188 |
-
* @constructor
|
3189 |
-
* @param {Element} el The target element
|
3190 |
-
* @param {Object} styleInfos The StyleInfo objects
|
3191 |
-
* @param {PIE.RootRenderer} parent
|
3192 |
-
*/
|
3193 |
-
PIE.ImgRenderer = PIE.RendererBase.newRenderer( {
|
3194 |
-
|
3195 |
-
boxZIndex: 6,
|
3196 |
-
boxName: 'imgEl',
|
3197 |
-
|
3198 |
-
needsUpdate: function() {
|
3199 |
-
var si = this.styleInfos;
|
3200 |
-
return this.targetElement.src !== this._lastSrc || si.borderRadiusInfo.changed();
|
3201 |
-
},
|
3202 |
-
|
3203 |
-
isActive: function() {
|
3204 |
-
var si = this.styleInfos;
|
3205 |
-
return si.borderRadiusInfo.isActive() || si.backgroundInfo.isPngFix();
|
3206 |
-
},
|
3207 |
-
|
3208 |
-
draw: function() {
|
3209 |
-
this._lastSrc = src;
|
3210 |
-
this.hideActualImg();
|
3211 |
-
|
3212 |
-
var shape = this.getShape( 'img', 'fill', this.getBox() ),
|
3213 |
-
fill = shape.fill,
|
3214 |
-
bounds = this.boundsInfo.getBounds(),
|
3215 |
-
w = bounds.w,
|
3216 |
-
h = bounds.h,
|
3217 |
-
borderProps = this.styleInfos.borderInfo.getProps(),
|
3218 |
-
borderWidths = borderProps && borderProps.widths,
|
3219 |
-
el = this.targetElement,
|
3220 |
-
src = el.src,
|
3221 |
-
round = Math.round,
|
3222 |
-
s;
|
3223 |
-
|
3224 |
-
shape.stroked = false;
|
3225 |
-
fill.type = 'frame';
|
3226 |
-
fill.src = src;
|
3227 |
-
fill.position = (w ? 0.5 / w : 0) + ',' + (h ? 0.5 / h : 0);
|
3228 |
-
shape.coordsize = w * 2 + ',' + h * 2;
|
3229 |
-
shape.coordorigin = '1,1';
|
3230 |
-
shape.path = this.getBoxPath( borderWidths ? {
|
3231 |
-
t: round( borderWidths['t'].pixels( el ) ),
|
3232 |
-
r: round( borderWidths['r'].pixels( el ) ),
|
3233 |
-
b: round( borderWidths['b'].pixels( el ) ),
|
3234 |
-
l: round( borderWidths['l'].pixels( el ) )
|
3235 |
-
} : 0, 2 );
|
3236 |
-
s = shape.style;
|
3237 |
-
s.width = w;
|
3238 |
-
s.height = h;
|
3239 |
-
},
|
3240 |
-
|
3241 |
-
hideActualImg: function() {
|
3242 |
-
this.targetElement.runtimeStyle.filter = 'alpha(opacity=0)';
|
3243 |
-
},
|
3244 |
-
|
3245 |
-
destroy: function() {
|
3246 |
-
PIE.RendererBase.destroy.call( this );
|
3247 |
-
this.targetElement.runtimeStyle.filter = '';
|
3248 |
-
}
|
3249 |
-
|
3250 |
-
} );
|
3251 |
-
|
3252 |
-
PIE.Element = (function() {
|
3253 |
-
|
3254 |
-
var wrappers = {},
|
3255 |
-
lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
|
3256 |
-
pollCssProp = PIE.CSS_PREFIX + 'poll',
|
3257 |
-
hoverClass = ' ' + PIE.CLASS_PREFIX + 'hover',
|
3258 |
-
hoverClassRE = new RegExp( '\\b' + PIE.CLASS_PREFIX + 'hover\\b', 'g' ),
|
3259 |
-
ignorePropertyNames = { 'background':1, 'bgColor':1, 'display': 1 };
|
3260 |
-
|
3261 |
-
|
3262 |
-
function addListener( el, type, handler ) {
|
3263 |
-
el.attachEvent( type, handler );
|
3264 |
-
}
|
3265 |
-
|
3266 |
-
function removeListener( el, type, handler ) {
|
3267 |
-
el.detachEvent( type, handler );
|
3268 |
-
}
|
3269 |
-
|
3270 |
-
|
3271 |
-
function Element( el ) {
|
3272 |
-
var renderers,
|
3273 |
-
boundsInfo = new PIE.BoundsInfo( el ),
|
3274 |
-
styleInfos,
|
3275 |
-
styleInfosArr,
|
3276 |
-
ancestors,
|
3277 |
-
initializing,
|
3278 |
-
initialized,
|
3279 |
-
eventsAttached,
|
3280 |
-
delayed,
|
3281 |
-
destroyed,
|
3282 |
-
poll;
|
3283 |
-
|
3284 |
-
/**
|
3285 |
-
* Initialize PIE for this element.
|
3286 |
-
*/
|
3287 |
-
function init() {
|
3288 |
-
if( !initialized ) {
|
3289 |
-
var docEl,
|
3290 |
-
bounds,
|
3291 |
-
cs = el.currentStyle,
|
3292 |
-
lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
|
3293 |
-
rootRenderer;
|
3294 |
-
|
3295 |
-
// Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
|
3296 |
-
poll = cs.getAttribute( pollCssProp );
|
3297 |
-
poll = PIE.ieDocMode === 8 ? poll !== 'false' : poll === 'true';
|
3298 |
-
|
3299 |
-
// Force layout so move/resize events will fire. Set this as soon as possible to avoid layout changes
|
3300 |
-
// after load, but make sure it only gets called the first time through to avoid recursive calls to init().
|
3301 |
-
if( !initializing ) {
|
3302 |
-
initializing = 1;
|
3303 |
-
el.runtimeStyle.zoom = 1;
|
3304 |
-
initFirstChildPseudoClass();
|
3305 |
-
}
|
3306 |
-
|
3307 |
-
boundsInfo.lock();
|
3308 |
-
|
3309 |
-
// If the -pie-lazy-init:true flag is set, check if the element is outside the viewport and if so, delay initialization
|
3310 |
-
if( lazy && ( bounds = boundsInfo.getBounds() ) && ( docEl = doc.documentElement || doc.body ) &&
|
3311 |
-
( bounds.y > docEl.clientHeight || bounds.x > docEl.clientWidth || bounds.y + bounds.h < 0 || bounds.x + bounds.w < 0 ) ) {
|
3312 |
-
if( !delayed ) {
|
3313 |
-
delayed = 1;
|
3314 |
-
PIE.OnScroll.observe( init );
|
3315 |
-
}
|
3316 |
-
} else {
|
3317 |
-
initialized = 1;
|
3318 |
-
delayed = initializing = 0;
|
3319 |
-
PIE.OnScroll.unobserve( init );
|
3320 |
-
|
3321 |
-
// Create the style infos and renderers
|
3322 |
-
styleInfos = {
|
3323 |
-
backgroundInfo: new PIE.BackgroundStyleInfo( el ),
|
3324 |
-
borderInfo: new PIE.BorderStyleInfo( el ),
|
3325 |
-
borderImageInfo: new PIE.BorderImageStyleInfo( el ),
|
3326 |
-
borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
|
3327 |
-
boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
|
3328 |
-
visibilityInfo: new PIE.VisibilityStyleInfo( el )
|
3329 |
-
};
|
3330 |
-
styleInfosArr = [
|
3331 |
-
styleInfos.backgroundInfo,
|
3332 |
-
styleInfos.borderInfo,
|
3333 |
-
styleInfos.borderImageInfo,
|
3334 |
-
styleInfos.borderRadiusInfo,
|
3335 |
-
styleInfos.boxShadowInfo,
|
3336 |
-
styleInfos.visibilityInfo
|
3337 |
-
];
|
3338 |
-
|
3339 |
-
rootRenderer = new PIE.RootRenderer( el, boundsInfo, styleInfos );
|
3340 |
-
var childRenderers = [
|
3341 |
-
new PIE.BoxShadowOutsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3342 |
-
new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3343 |
-
//new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3344 |
-
new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3345 |
-
new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
|
3346 |
-
];
|
3347 |
-
if( el.tagName === 'IMG' ) {
|
3348 |
-
childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
|
3349 |
-
}
|
3350 |
-
rootRenderer.childRenderers = childRenderers; // circular reference, can't pass in constructor; TODO is there a cleaner way?
|
3351 |
-
renderers = [ rootRenderer ].concat( childRenderers );
|
3352 |
-
|
3353 |
-
// Add property change listeners to ancestors if requested
|
3354 |
-
initAncestorPropChangeListeners();
|
3355 |
-
|
3356 |
-
// Add to list of polled elements in IE8
|
3357 |
-
if( poll ) {
|
3358 |
-
PIE.Heartbeat.observe( update );
|
3359 |
-
PIE.Heartbeat.run();
|
3360 |
-
}
|
3361 |
-
|
3362 |
-
// Trigger rendering
|
3363 |
-
update( 1 );
|
3364 |
-
}
|
3365 |
-
|
3366 |
-
if( !eventsAttached ) {
|
3367 |
-
eventsAttached = 1;
|
3368 |
-
addListener( el, 'onmove', handleMoveOrResize );
|
3369 |
-
addListener( el, 'onresize', handleMoveOrResize );
|
3370 |
-
addListener( el, 'onpropertychange', propChanged );
|
3371 |
-
addListener( el, 'onmouseenter', mouseEntered );
|
3372 |
-
addListener( el, 'onmouseleave', mouseLeft );
|
3373 |
-
PIE.OnResize.observe( handleMoveOrResize );
|
3374 |
-
|
3375 |
-
PIE.OnBeforeUnload.observe( removeEventListeners );
|
3376 |
-
}
|
3377 |
-
|
3378 |
-
boundsInfo.unlock();
|
3379 |
-
}
|
3380 |
-
}
|
3381 |
-
|
3382 |
-
|
3383 |
-
|
3384 |
-
|
3385 |
-
/**
|
3386 |
-
* Event handler for onmove and onresize events. Invokes update() only if the element's
|
3387 |
-
* bounds have previously been calculated, to prevent multiple runs during page load when
|
3388 |
-
* the element has no initial CSS3 properties.
|
3389 |
-
*/
|
3390 |
-
function handleMoveOrResize() {
|
3391 |
-
if( boundsInfo && boundsInfo.hasBeenQueried() ) {
|
3392 |
-
update();
|
3393 |
-
}
|
3394 |
-
}
|
3395 |
-
|
3396 |
-
|
3397 |
-
/**
|
3398 |
-
* Update position and/or size as necessary. Both move and resize events call
|
3399 |
-
* this rather than the updatePos/Size functions because sometimes, particularly
|
3400 |
-
* during page load, one will fire but the other won't.
|
3401 |
-
*/
|
3402 |
-
function update( force ) {
|
3403 |
-
if( !destroyed ) {
|
3404 |
-
if( initialized ) {
|
3405 |
-
var i, len;
|
3406 |
-
|
3407 |
-
lockAll();
|
3408 |
-
if( force || boundsInfo.positionChanged() ) {
|
3409 |
-
/* TODO just using getBoundingClientRect (used internally by BoundsInfo) for detecting
|
3410 |
-
position changes may not always be accurate; it's possible that
|
3411 |
-
an element will actually move relative to its positioning parent, but its position
|
3412 |
-
relative to the viewport will stay the same. Need to come up with a better way to
|
3413 |
-
track movement. The most accurate would be the same logic used in RootRenderer.updatePos()
|
3414 |
-
but that is a more expensive operation since it does some DOM walking, and we want this
|
3415 |
-
check to be as fast as possible. */
|
3416 |
-
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3417 |
-
renderers[i].updatePos();
|
3418 |
-
}
|
3419 |
-
}
|
3420 |
-
if( force || boundsInfo.sizeChanged() ) {
|
3421 |
-
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3422 |
-
renderers[i].updateSize();
|
3423 |
-
}
|
3424 |
-
}
|
3425 |
-
unlockAll();
|
3426 |
-
}
|
3427 |
-
else if( !initializing ) {
|
3428 |
-
init();
|
3429 |
-
}
|
3430 |
-
}
|
3431 |
-
}
|
3432 |
-
|
3433 |
-
/**
|
3434 |
-
* Handle property changes to trigger update when appropriate.
|
3435 |
-
*/
|
3436 |
-
function propChanged() {
|
3437 |
-
var i, len, renderer,
|
3438 |
-
e = event;
|
3439 |
-
|
3440 |
-
// Some elements like <table> fire onpropertychange events for old-school background properties
|
3441 |
-
// ('background', 'bgColor') when runtimeStyle background properties are changed, which
|
3442 |
-
// results in an infinite loop; therefore we filter out those property names. Also, 'display'
|
3443 |
-
// is ignored because size calculations don't work correctly immediately when its onpropertychange
|
3444 |
-
// event fires, and because it will trigger an onresize event anyway.
|
3445 |
-
if( !destroyed && !( e && e.propertyName in ignorePropertyNames ) ) {
|
3446 |
-
if( initialized ) {
|
3447 |
-
lockAll();
|
3448 |
-
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3449 |
-
renderer = renderers[i];
|
3450 |
-
// Make sure position is synced if the element hasn't already been rendered.
|
3451 |
-
// TODO this feels sloppy - look into merging propChanged and update functions
|
3452 |
-
if( !renderer.isPositioned ) {
|
3453 |
-
renderer.updatePos();
|
3454 |
-
}
|
3455 |
-
if( renderer.needsUpdate() ) {
|
3456 |
-
renderer.updateProps();
|
3457 |
-
}
|
3458 |
-
}
|
3459 |
-
unlockAll();
|
3460 |
-
}
|
3461 |
-
else if( !initializing ) {
|
3462 |
-
init();
|
3463 |
-
}
|
3464 |
-
}
|
3465 |
-
}
|
3466 |
-
|
3467 |
-
|
3468 |
-
function addHoverClass() {
|
3469 |
-
if( el ) {
|
3470 |
-
el.className += hoverClass;
|
3471 |
-
}
|
3472 |
-
}
|
3473 |
-
|
3474 |
-
function removeHoverClass() {
|
3475 |
-
if( el ) {
|
3476 |
-
el.className = el.className.replace( hoverClassRE, '' );
|
3477 |
-
}
|
3478 |
-
}
|
3479 |
-
|
3480 |
-
/**
|
3481 |
-
* Handle mouseenter events. Adds a custom class to the element to allow IE6 to add
|
3482 |
-
* hover styles to non-link elements, and to trigger a propertychange update.
|
3483 |
-
*/
|
3484 |
-
function mouseEntered() {
|
3485 |
-
//must delay this because the mouseenter event fires before the :hover styles are added.
|
3486 |
-
setTimeout( addHoverClass, 0 );
|
3487 |
-
}
|
3488 |
-
|
3489 |
-
/**
|
3490 |
-
* Handle mouseleave events
|
3491 |
-
*/
|
3492 |
-
function mouseLeft() {
|
3493 |
-
//must delay this because the mouseleave event fires before the :hover styles are removed.
|
3494 |
-
setTimeout( removeHoverClass, 0 );
|
3495 |
-
}
|
3496 |
-
|
3497 |
-
|
3498 |
-
/**
|
3499 |
-
* Handle property changes on ancestors of the element; see initAncestorPropChangeListeners()
|
3500 |
-
* which adds these listeners as requested with the -pie-watch-ancestors CSS property.
|
3501 |
-
*/
|
3502 |
-
function ancestorPropChanged() {
|
3503 |
-
var name = event.propertyName;
|
3504 |
-
if( name === 'className' || name === 'id' ) {
|
3505 |
-
propChanged();
|
3506 |
-
}
|
3507 |
-
}
|
3508 |
-
|
3509 |
-
function lockAll() {
|
3510 |
-
boundsInfo.lock();
|
3511 |
-
for( var i = styleInfosArr.length; i--; ) {
|
3512 |
-
styleInfosArr[i].lock();
|
3513 |
-
}
|
3514 |
-
}
|
3515 |
-
|
3516 |
-
function unlockAll() {
|
3517 |
-
for( var i = styleInfosArr.length; i--; ) {
|
3518 |
-
styleInfosArr[i].unlock();
|
3519 |
-
}
|
3520 |
-
boundsInfo.unlock();
|
3521 |
-
}
|
3522 |
-
|
3523 |
-
|
3524 |
-
/**
|
3525 |
-
* Remove all event listeners from the element and any monitoried ancestors.
|
3526 |
-
*/
|
3527 |
-
function removeEventListeners() {
|
3528 |
-
if (eventsAttached) {
|
3529 |
-
if( ancestors ) {
|
3530 |
-
for( var i = 0, len = ancestors.length, a; i < len; i++ ) {
|
3531 |
-
a = ancestors[i];
|
3532 |
-
removeListener( a, 'onpropertychange', ancestorPropChanged );
|
3533 |
-
removeListener( a, 'onmouseenter', mouseEntered );
|
3534 |
-
removeListener( a, 'onmouseleave', mouseLeft );
|
3535 |
-
}
|
3536 |
-
}
|
3537 |
-
|
3538 |
-
// Remove event listeners
|
3539 |
-
removeListener( el, 'onmove', update );
|
3540 |
-
removeListener( el, 'onresize', update );
|
3541 |
-
removeListener( el, 'onpropertychange', propChanged );
|
3542 |
-
removeListener( el, 'onmouseenter', mouseEntered );
|
3543 |
-
removeListener( el, 'onmouseleave', mouseLeft );
|
3544 |
-
|
3545 |
-
PIE.OnBeforeUnload.unobserve( removeEventListeners );
|
3546 |
-
eventsAttached = 0;
|
3547 |
-
}
|
3548 |
-
}
|
3549 |
-
|
3550 |
-
|
3551 |
-
/**
|
3552 |
-
* Clean everything up when the behavior is removed from the element, or the element
|
3553 |
-
* is manually destroyed.
|
3554 |
-
*/
|
3555 |
-
function destroy() {
|
3556 |
-
if( !destroyed ) {
|
3557 |
-
var i, len;
|
3558 |
-
|
3559 |
-
removeEventListeners();
|
3560 |
-
|
3561 |
-
destroyed = 1;
|
3562 |
-
|
3563 |
-
// destroy any active renderers
|
3564 |
-
if( renderers ) {
|
3565 |
-
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3566 |
-
renderers[i].destroy();
|
3567 |
-
}
|
3568 |
-
}
|
3569 |
-
|
3570 |
-
// Remove from list of polled elements in IE8
|
3571 |
-
if( poll ) {
|
3572 |
-
PIE.Heartbeat.unobserve( update );
|
3573 |
-
}
|
3574 |
-
// Stop onresize listening
|
3575 |
-
PIE.OnResize.unobserve( update );
|
3576 |
-
|
3577 |
-
// Kill references
|
3578 |
-
renderers = boundsInfo = styleInfos = styleInfosArr = ancestors = el = null;
|
3579 |
-
}
|
3580 |
-
}
|
3581 |
-
|
3582 |
-
|
3583 |
-
/**
|
3584 |
-
* If requested via the custom -pie-watch-ancestors CSS property, add onpropertychange listeners
|
3585 |
-
* to ancestor(s) of the element so we can pick up style changes based on CSS rules using
|
3586 |
-
* descendant selectors.
|
3587 |
-
*/
|
3588 |
-
function initAncestorPropChangeListeners() {
|
3589 |
-
var watch = el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'watch-ancestors' ),
|
3590 |
-
i, a;
|
3591 |
-
if( watch ) {
|
3592 |
-
ancestors = [];
|
3593 |
-
watch = parseInt( watch, 10 );
|
3594 |
-
i = 0;
|
3595 |
-
a = el.parentNode;
|
3596 |
-
while( a && ( watch === 'NaN' || i++ < watch ) ) {
|
3597 |
-
ancestors.push( a );
|
3598 |
-
addListener( a, 'onpropertychange', ancestorPropChanged );
|
3599 |
-
addListener( a, 'onmouseenter', mouseEntered );
|
3600 |
-
addListener( a, 'onmouseleave', mouseLeft );
|
3601 |
-
a = a.parentNode;
|
3602 |
-
}
|
3603 |
-
}
|
3604 |
-
}
|
3605 |
-
|
3606 |
-
|
3607 |
-
/**
|
3608 |
-
* If the target element is a first child, add a pie_first-child class to it. This allows using
|
3609 |
-
* the added class as a workaround for the fact that PIE's rendering element breaks the :first-child
|
3610 |
-
* pseudo-class selector.
|
3611 |
-
*/
|
3612 |
-
function initFirstChildPseudoClass() {
|
3613 |
-
var tmpEl = el,
|
3614 |
-
isFirst = 1;
|
3615 |
-
while( tmpEl = tmpEl.previousSibling ) {
|
3616 |
-
if( tmpEl.nodeType === 1 ) {
|
3617 |
-
isFirst = 0;
|
3618 |
-
break;
|
3619 |
-
}
|
3620 |
-
}
|
3621 |
-
if( isFirst ) {
|
3622 |
-
el.className += ' ' + PIE.CLASS_PREFIX + 'first-child';
|
3623 |
-
}
|
3624 |
-
}
|
3625 |
-
|
3626 |
-
|
3627 |
-
// These methods are all already bound to this instance so there's no need to wrap them
|
3628 |
-
// in a closure to maintain the 'this' scope object when calling them.
|
3629 |
-
this.init = init;
|
3630 |
-
this.update = update;
|
3631 |
-
this.destroy = destroy;
|
3632 |
-
this.el = el;
|
3633 |
-
}
|
3634 |
-
|
3635 |
-
Element.getInstance = function( el ) {
|
3636 |
-
var id = PIE.Util.getUID( el );
|
3637 |
-
return wrappers[ id ] || ( wrappers[ id ] = new Element( el ) );
|
3638 |
-
};
|
3639 |
-
|
3640 |
-
Element.destroy = function( el ) {
|
3641 |
-
var id = PIE.Util.getUID( el ),
|
3642 |
-
wrapper = wrappers[ id ];
|
3643 |
-
if( wrapper ) {
|
3644 |
-
wrapper.destroy();
|
3645 |
-
delete wrappers[ id ];
|
3646 |
-
}
|
3647 |
-
};
|
3648 |
-
|
3649 |
-
Element.destroyAll = function() {
|
3650 |
-
var els = [], wrapper;
|
3651 |
-
if( wrappers ) {
|
3652 |
-
for( var w in wrappers ) {
|
3653 |
-
if( wrappers.hasOwnProperty( w ) ) {
|
3654 |
-
wrapper = wrappers[ w ];
|
3655 |
-
els.push( wrapper.el );
|
3656 |
-
wrapper.destroy();
|
3657 |
-
}
|
3658 |
-
}
|
3659 |
-
wrappers = {};
|
3660 |
-
}
|
3661 |
-
return els;
|
3662 |
-
};
|
3663 |
-
|
3664 |
-
return Element;
|
3665 |
-
})();
|
3666 |
-
|
3667 |
-
/*
|
3668 |
-
* This file exposes the public API for invoking PIE.
|
3669 |
-
*/
|
3670 |
-
|
3671 |
-
|
3672 |
-
/**
|
3673 |
-
* Programatically attach PIE to a single element.
|
3674 |
-
* @param {Element} el
|
3675 |
-
*/
|
3676 |
-
PIE[ 'attach' ] = function( el ) {
|
3677 |
-
if (PIE.ieDocMode < 9) {
|
3678 |
-
PIE.Element.getInstance( el ).init();
|
3679 |
-
}
|
3680 |
-
};
|
3681 |
-
|
3682 |
-
|
3683 |
-
/**
|
3684 |
-
* Programatically detach PIE from a single element.
|
3685 |
-
* @param {Element} el
|
3686 |
-
*/
|
3687 |
-
PIE[ 'detach' ] = function( el ) {
|
3688 |
-
PIE.Element.destroy( el );
|
3689 |
-
};
|
3690 |
-
|
3691 |
-
|
3692 |
-
} // if( !PIE )
|
3693 |
-
var p = window['PIE'],
|
3694 |
-
el = element;
|
3695 |
-
|
3696 |
-
function init() {
|
3697 |
-
if( p && doc.media !== 'print' ) { // IE strangely attaches a second copy of the behavior to elements when printing
|
3698 |
-
p['attach']( el );
|
3699 |
-
}
|
3700 |
-
}
|
3701 |
-
|
3702 |
-
function cleanup() {
|
3703 |
-
if (p) {
|
3704 |
-
p['detach']( el );
|
3705 |
-
p = el = 0;
|
3706 |
-
}
|
3707 |
-
}
|
3708 |
-
|
3709 |
-
if( el.readyState === 'complete' ) {
|
3710 |
-
init();
|
3711 |
-
}
|
3712 |
-
</script>
|
3713 |
-
</PUBLIC:COMPONENT>
|
1 |
+
<!--
|
2 |
+
PIE: CSS3 rendering for IE
|
3 |
+
Version 1.0beta4
|
4 |
+
http://css3pie.com
|
5 |
+
Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
|
6 |
+
-->
|
7 |
+
<PUBLIC:COMPONENT lightWeight="true">
|
8 |
+
<PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" />
|
9 |
+
<PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="init()" />
|
10 |
+
<PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />
|
11 |
+
|
12 |
+
<script type="text/javascript">
|
13 |
+
var doc = element.document;var PIE = window['PIE'];
|
14 |
+
|
15 |
+
if( !PIE ) {
|
16 |
+
PIE = window['PIE'] = {
|
17 |
+
CSS_PREFIX: '-pie-',
|
18 |
+
STYLE_PREFIX: 'Pie',
|
19 |
+
CLASS_PREFIX: 'pie_',
|
20 |
+
tableCellTags: {
|
21 |
+
'TD': 1,
|
22 |
+
'TH': 1
|
23 |
+
}
|
24 |
+
};
|
25 |
+
|
26 |
+
// Force the background cache to be used. No reason it shouldn't be.
|
27 |
+
try {
|
28 |
+
doc.execCommand( 'BackgroundImageCache', false, true );
|
29 |
+
} catch(e) {}
|
30 |
+
|
31 |
+
/*
|
32 |
+
* IE version detection approach by James Padolsey, with modifications -- from
|
33 |
+
* http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
|
34 |
+
*/
|
35 |
+
PIE.ieVersion = function(){
|
36 |
+
var v = 4,
|
37 |
+
div = doc.createElement('div'),
|
38 |
+
all = div.getElementsByTagName('i');
|
39 |
+
|
40 |
+
while (
|
41 |
+
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
|
42 |
+
all[0]
|
43 |
+
) {}
|
44 |
+
|
45 |
+
return v;
|
46 |
+
}();
|
47 |
+
|
48 |
+
// Detect IE6
|
49 |
+
if( PIE.ieVersion === 6 ) {
|
50 |
+
// IE6 can't access properties with leading dash, but can without it.
|
51 |
+
PIE.CSS_PREFIX = PIE.CSS_PREFIX.replace( /^-/, '' );
|
52 |
+
}
|
53 |
+
|
54 |
+
// Detect IE8
|
55 |
+
PIE.ieDocMode = doc.documentMode || PIE.ieVersion;
|
56 |
+
/**
|
57 |
+
* Utility functions
|
58 |
+
*/
|
59 |
+
(function() {
|
60 |
+
var vmlCreatorDoc,
|
61 |
+
idNum = 0,
|
62 |
+
imageSizes = {};
|
63 |
+
|
64 |
+
|
65 |
+
PIE.Util = {
|
66 |
+
|
67 |
+
/**
|
68 |
+
* To create a VML element, it must be created by a Document which has the VML
|
69 |
+
* namespace set. Unfortunately, if you try to add the namespace programatically
|
70 |
+
* into the main document, you will get an "Unspecified error" when trying to
|
71 |
+
* access document.namespaces before the document is finished loading. To get
|
72 |
+
* around this, we create a DocumentFragment, which in IE land is apparently a
|
73 |
+
* full-fledged Document. It allows adding namespaces immediately, so we add the
|
74 |
+
* namespace there and then have it create the VML element.
|
75 |
+
* @param {string} tag The tag name for the VML element
|
76 |
+
* @return {Element} The new VML element
|
77 |
+
*/
|
78 |
+
createVmlElement: function( tag ) {
|
79 |
+
var vmlPrefix = 'css3vml';
|
80 |
+
if( !vmlCreatorDoc ) {
|
81 |
+
vmlCreatorDoc = doc.createDocumentFragment();
|
82 |
+
vmlCreatorDoc.namespaces.add( vmlPrefix, 'urn:schemas-microsoft-com:vml' );
|
83 |
+
}
|
84 |
+
return vmlCreatorDoc.createElement( vmlPrefix + ':' + tag );
|
85 |
+
},
|
86 |
+
|
87 |
+
|
88 |
+
/**
|
89 |
+
* Generate and return a unique ID for a given object. The generated ID is stored
|
90 |
+
* as a property of the object for future reuse.
|
91 |
+
* @param {Object} obj
|
92 |
+
*/
|
93 |
+
getUID: function( obj ) {
|
94 |
+
return obj && obj[ '_pieId' ] || ( obj[ '_pieId' ] = ++idNum );
|
95 |
+
},
|
96 |
+
|
97 |
+
|
98 |
+
/**
|
99 |
+
* Simple utility for merging objects
|
100 |
+
* @param {Object} obj1 The main object into which all others will be merged
|
101 |
+
* @param {...Object} var_args Other objects which will be merged into the first, in order
|
102 |
+
*/
|
103 |
+
merge: function( obj1 ) {
|
104 |
+
var i, len, p, objN, args = arguments;
|
105 |
+
for( i = 1, len = args.length; i < len; i++ ) {
|
106 |
+
objN = args[i];
|
107 |
+
for( p in objN ) {
|
108 |
+
if( objN.hasOwnProperty( p ) ) {
|
109 |
+
obj1[ p ] = objN[ p ];
|
110 |
+
}
|
111 |
+
}
|
112 |
+
}
|
113 |
+
return obj1;
|
114 |
+
},
|
115 |
+
|
116 |
+
|
117 |
+
/**
|
118 |
+
* Execute a callback function, passing it the dimensions of a given image once
|
119 |
+
* they are known.
|
120 |
+
* @param {string} src The source URL of the image
|
121 |
+
* @param {function({w:number, h:number})} func The callback function to be called once the image dimensions are known
|
122 |
+
* @param {Object} ctx A context object which will be used as the 'this' value within the executed callback function
|
123 |
+
*/
|
124 |
+
withImageSize: function( src, func, ctx ) {
|
125 |
+
var size = imageSizes[ src ], img, queue;
|
126 |
+
if( size ) {
|
127 |
+
// If we have a queue, add to it
|
128 |
+
if( Object.prototype.toString.call( size ) === '[object Array]' ) {
|
129 |
+
size.push( [ func, ctx ] );
|
130 |
+
}
|
131 |
+
// Already have the size cached, call func right away
|
132 |
+
else {
|
133 |
+
func.call( ctx, size );
|
134 |
+
}
|
135 |
+
} else {
|
136 |
+
queue = imageSizes[ src ] = [ [ func, ctx ] ]; //create queue
|
137 |
+
img = new Image();
|
138 |
+
img.onload = function() {
|
139 |
+
size = imageSizes[ src ] = { w: img.width, h: img.height };
|
140 |
+
for( var i = 0, len = queue.length; i < len; i++ ) {
|
141 |
+
queue[ i ][ 0 ].call( queue[ i ][ 1 ], size );
|
142 |
+
}
|
143 |
+
img.onload = null;
|
144 |
+
};
|
145 |
+
img.src = src;
|
146 |
+
}
|
147 |
+
}
|
148 |
+
};
|
149 |
+
})();/**
|
150 |
+
*
|
151 |
+
*/
|
152 |
+
PIE.Observable = function() {
|
153 |
+
/**
|
154 |
+
* List of registered observer functions
|
155 |
+
*/
|
156 |
+
this.observers = [];
|
157 |
+
|
158 |
+
/**
|
159 |
+
* Hash of function ids to their position in the observers list, for fast lookup
|
160 |
+
*/
|
161 |
+
this.indexes = {};
|
162 |
+
};
|
163 |
+
PIE.Observable.prototype = {
|
164 |
+
|
165 |
+
observe: function( fn ) {
|
166 |
+
var id = PIE.Util.getUID( fn ),
|
167 |
+
indexes = this.indexes,
|
168 |
+
observers = this.observers;
|
169 |
+
if( !( id in indexes ) ) {
|
170 |
+
indexes[ id ] = observers.length;
|
171 |
+
observers.push( fn );
|
172 |
+
}
|
173 |
+
},
|
174 |
+
|
175 |
+
unobserve: function( fn ) {
|
176 |
+
var id = PIE.Util.getUID( fn ),
|
177 |
+
indexes = this.indexes;
|
178 |
+
if( id && id in indexes ) {
|
179 |
+
delete this.observers[ indexes[ id ] ];
|
180 |
+
delete indexes[ id ];
|
181 |
+
}
|
182 |
+
},
|
183 |
+
|
184 |
+
fire: function() {
|
185 |
+
var o = this.observers,
|
186 |
+
i = o.length;
|
187 |
+
while( i-- ) {
|
188 |
+
o[ i ] && o[ i ]();
|
189 |
+
}
|
190 |
+
}
|
191 |
+
|
192 |
+
};/*
|
193 |
+
* Simple heartbeat timer - this is a brute-force workaround for syncing issues caused by IE not
|
194 |
+
* always firing the onmove and onresize events when elements are moved or resized. We check a few
|
195 |
+
* times every second to make sure the elements have the correct position and size. See Element.js
|
196 |
+
* which adds heartbeat listeners based on the custom -pie-poll flag, which defaults to true in IE8
|
197 |
+
* and false elsewhere.
|
198 |
+
*/
|
199 |
+
|
200 |
+
PIE.Heartbeat = new PIE.Observable();
|
201 |
+
PIE.Heartbeat.run = function() {
|
202 |
+
var me = this;
|
203 |
+
if( !me.running ) {
|
204 |
+
setInterval( function() { me.fire() }, 250 );
|
205 |
+
me.running = 1;
|
206 |
+
}
|
207 |
+
};
|
208 |
+
/**
|
209 |
+
* Create an observable listener for the onbeforeunload event
|
210 |
+
*/
|
211 |
+
PIE.OnBeforeUnload = new PIE.Observable();
|
212 |
+
window.attachEvent( 'onbeforeunload', function() { PIE.OnBeforeUnload.fire(); } );
|
213 |
+
|
214 |
+
/**
|
215 |
+
* Attach an event which automatically gets detached onbeforeunload
|
216 |
+
*/
|
217 |
+
PIE.OnBeforeUnload.attachManagedEvent = function( target, name, handler ) {
|
218 |
+
target.attachEvent( name, handler );
|
219 |
+
this.observe( function() {
|
220 |
+
target.detachEvent( name, handler );
|
221 |
+
} );
|
222 |
+
};/**
|
223 |
+
* Create a single observable listener for window resize events.
|
224 |
+
*/
|
225 |
+
(function() {
|
226 |
+
PIE.OnResize = new PIE.Observable();
|
227 |
+
|
228 |
+
function resized() {
|
229 |
+
PIE.OnResize.fire();
|
230 |
+
}
|
231 |
+
|
232 |
+
PIE.OnBeforeUnload.attachManagedEvent( window, 'onresize', resized );
|
233 |
+
})();
|
234 |
+
/**
|
235 |
+
* Create a single observable listener for scroll events. Used for lazy loading based
|
236 |
+
* on the viewport, and for fixed position backgrounds.
|
237 |
+
*/
|
238 |
+
(function() {
|
239 |
+
PIE.OnScroll = new PIE.Observable();
|
240 |
+
|
241 |
+
function scrolled() {
|
242 |
+
PIE.OnScroll.fire();
|
243 |
+
}
|
244 |
+
|
245 |
+
PIE.OnBeforeUnload.attachManagedEvent( window, 'onscroll', scrolled );
|
246 |
+
|
247 |
+
PIE.OnResize.observe( scrolled );
|
248 |
+
})();
|
249 |
+
/**
|
250 |
+
* Listen for printing events, destroy all active PIE instances when printing, and
|
251 |
+
* restore them afterward.
|
252 |
+
*/
|
253 |
+
(function() {
|
254 |
+
|
255 |
+
var elements;
|
256 |
+
|
257 |
+
function beforePrint() {
|
258 |
+
elements = PIE.Element.destroyAll();
|
259 |
+
}
|
260 |
+
|
261 |
+
function afterPrint() {
|
262 |
+
if( elements ) {
|
263 |
+
for( var i = 0, len = elements.length; i < len; i++ ) {
|
264 |
+
PIE[ 'attach' ]( elements[i] );
|
265 |
+
}
|
266 |
+
elements = 0;
|
267 |
+
}
|
268 |
+
}
|
269 |
+
|
270 |
+
PIE.OnBeforeUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint );
|
271 |
+
PIE.OnBeforeUnload.attachManagedEvent( window, 'onafterprint', afterPrint );
|
272 |
+
|
273 |
+
})();/**
|
274 |
+
* Wrapper for length and percentage style values. The value is immutable. A singleton instance per unique
|
275 |
+
* value is returned from PIE.getLength() - always use that instead of instantiating directly.
|
276 |
+
* @constructor
|
277 |
+
* @param {string} val The CSS string representing the length. It is assumed that this will already have
|
278 |
+
* been validated as a valid length or percentage syntax.
|
279 |
+
*/
|
280 |
+
PIE.Length = (function() {
|
281 |
+
var lengthCalcEl = doc.createElement( 'length-calc' ),
|
282 |
+
parent = doc.documentElement,
|
283 |
+
s = lengthCalcEl.style,
|
284 |
+
conversions = {},
|
285 |
+
units = [ 'mm', 'cm', 'in', 'pt', 'pc' ],
|
286 |
+
i = units.length,
|
287 |
+
instances = {};
|
288 |
+
|
289 |
+
s.position = 'absolute';
|
290 |
+
s.top = s.left = '-9999px';
|
291 |
+
|
292 |
+
parent.appendChild( lengthCalcEl );
|
293 |
+
while( i-- ) {
|
294 |
+
lengthCalcEl.style.width = '100' + units[i];
|
295 |
+
conversions[ units[i] ] = lengthCalcEl.offsetWidth / 100;
|
296 |
+
}
|
297 |
+
parent.removeChild( lengthCalcEl );
|
298 |
+
|
299 |
+
|
300 |
+
function Length( val ) {
|
301 |
+
this.val = val;
|
302 |
+
}
|
303 |
+
Length.prototype = {
|
304 |
+
/**
|
305 |
+
* Regular expression for matching the length unit
|
306 |
+
* @private
|
307 |
+
*/
|
308 |
+
unitRE: /(px|em|ex|mm|cm|in|pt|pc|%)$/,
|
309 |
+
|
310 |
+
/**
|
311 |
+
* Get the numeric value of the length
|
312 |
+
* @return {number} The value
|
313 |
+
*/
|
314 |
+
getNumber: function() {
|
315 |
+
var num = this.num,
|
316 |
+
UNDEF;
|
317 |
+
if( num === UNDEF ) {
|
318 |
+
num = this.num = parseFloat( this.val );
|
319 |
+
}
|
320 |
+
return num;
|
321 |
+
},
|
322 |
+
|
323 |
+
/**
|
324 |
+
* Get the unit of the length
|
325 |
+
* @return {string} The unit
|
326 |
+
*/
|
327 |
+
getUnit: function() {
|
328 |
+
var unit = this.unit,
|
329 |
+
m;
|
330 |
+
if( !unit ) {
|
331 |
+
m = this.val.match( this.unitRE );
|
332 |
+
unit = this.unit = ( m && m[0] ) || 'px';
|
333 |
+
}
|
334 |
+
return unit;
|
335 |
+
},
|
336 |
+
|
337 |
+
/**
|
338 |
+
* Determine whether this is a percentage length value
|
339 |
+
* @return {boolean}
|
340 |
+
*/
|
341 |
+
isPercentage: function() {
|
342 |
+
return this.getUnit() === '%';
|
343 |
+
},
|
344 |
+
|
345 |
+
/**
|
346 |
+
* Resolve this length into a number of pixels.
|
347 |
+
* @param {Element} el - the context element, used to resolve font-relative values
|
348 |
+
* @param {(function():number|number)=} pct100 - the number of pixels that equal a 100% percentage. This can be either a number or a
|
349 |
+
* function which will be called to return the number.
|
350 |
+
*/
|
351 |
+
pixels: function( el, pct100 ) {
|
352 |
+
var num = this.getNumber(),
|
353 |
+
unit = this.getUnit();
|
354 |
+
switch( unit ) {
|
355 |
+
case "px":
|
356 |
+
return num;
|
357 |
+
case "%":
|
358 |
+
return num * ( typeof pct100 === 'function' ? pct100() : pct100 ) / 100;
|
359 |
+
case "em":
|
360 |
+
return num * this.getEmPixels( el );
|
361 |
+
case "ex":
|
362 |
+
return num * this.getEmPixels( el ) / 2;
|
363 |
+
default:
|
364 |
+
return num * conversions[ unit ];
|
365 |
+
}
|
366 |
+
},
|
367 |
+
|
368 |
+
/**
|
369 |
+
* The em and ex units are relative to the font-size of the current element,
|
370 |
+
* however if the font-size is set using non-pixel units then we get that value
|
371 |
+
* rather than a pixel conversion. To get around this, we keep a floating element
|
372 |
+
* with width:1em which we insert into the target element and then read its offsetWidth.
|
373 |
+
* But if the font-size *is* specified in pixels, then we use that directly to avoid
|
374 |
+
* the expensive DOM manipulation.
|
375 |
+
* @param el
|
376 |
+
*/
|
377 |
+
getEmPixels: function( el ) {
|
378 |
+
var fs = el.currentStyle.fontSize,
|
379 |
+
px;
|
380 |
+
|
381 |
+
if( fs.indexOf( 'px' ) > 0 ) {
|
382 |
+
return parseFloat( fs );
|
383 |
+
} else {
|
384 |
+
lengthCalcEl.style.width = '1em';
|
385 |
+
el.appendChild( lengthCalcEl );
|
386 |
+
px = lengthCalcEl.offsetWidth;
|
387 |
+
if( lengthCalcEl.parentNode === el ) { //not sure how this could be false but it sometimes is
|
388 |
+
el.removeChild( lengthCalcEl );
|
389 |
+
}
|
390 |
+
return px;
|
391 |
+
}
|
392 |
+
}
|
393 |
+
};
|
394 |
+
|
395 |
+
|
396 |
+
/**
|
397 |
+
* Retrieve a PIE.Length instance for the given value. A shared singleton instance is returned for each unique value.
|
398 |
+
* @param {string} val The CSS string representing the length. It is assumed that this will already have
|
399 |
+
* been validated as a valid length or percentage syntax.
|
400 |
+
*/
|
401 |
+
PIE.getLength = function( val ) {
|
402 |
+
return instances[ val ] || ( instances[ val ] = new Length( val ) );
|
403 |
+
};
|
404 |
+
|
405 |
+
return Length;
|
406 |
+
})();
|
407 |
+
/**
|
408 |
+
* Wrapper for a CSS3 bg-position value. Takes up to 2 position keywords and 2 lengths/percentages.
|
409 |
+
* @constructor
|
410 |
+
* @param {Array.<PIE.Tokenizer.Token>} tokens The tokens making up the background position value.
|
411 |
+
*/
|
412 |
+
PIE.BgPosition = (function() {
|
413 |
+
|
414 |
+
var length_fifty = PIE.getLength( '50%' ),
|
415 |
+
vert_idents = { 'top': 1, 'center': 1, 'bottom': 1 },
|
416 |
+
horiz_idents = { 'left': 1, 'center': 1, 'right': 1 };
|
417 |
+
|
418 |
+
|
419 |
+
function BgPosition( tokens ) {
|
420 |
+
this.tokens = tokens;
|
421 |
+
}
|
422 |
+
BgPosition.prototype = {
|
423 |
+
/**
|
424 |
+
* Normalize the values into the form:
|
425 |
+
* [ xOffsetSide, xOffsetLength, yOffsetSide, yOffsetLength ]
|
426 |
+
* where: xOffsetSide is either 'left' or 'right',
|
427 |
+
* yOffsetSide is either 'top' or 'bottom',
|
428 |
+
* and x/yOffsetLength are both PIE.Length objects.
|
429 |
+
* @return {Array}
|
430 |
+
*/
|
431 |
+
getValues: function() {
|
432 |
+
if( !this._values ) {
|
433 |
+
var tokens = this.tokens,
|
434 |
+
len = tokens.length,
|
435 |
+
Tokenizer = PIE.Tokenizer,
|
436 |
+
identType = Tokenizer.Type,
|
437 |
+
length_zero = PIE.getLength( '0' ),
|
438 |
+
type_ident = identType.IDENT,
|
439 |
+
type_length = identType.LENGTH,
|
440 |
+
type_percent = identType.PERCENT,
|
441 |
+
type, value,
|
442 |
+
vals = [ 'left', length_zero, 'top', length_zero ];
|
443 |
+
|
444 |
+
// If only one value, the second is assumed to be 'center'
|
445 |
+
if( len === 1 ) {
|
446 |
+
tokens.push( new Tokenizer.Token( type_ident, 'center' ) );
|
447 |
+
len++;
|
448 |
+
}
|
449 |
+
|
450 |
+
// Two values - CSS2
|
451 |
+
if( len === 2 ) {
|
452 |
+
// If both idents, they can appear in either order, so switch them if needed
|
453 |
+
if( type_ident & ( tokens[0].tokenType | tokens[1].tokenType ) &&
|
454 |
+
tokens[0].tokenValue in vert_idents && tokens[1].tokenValue in horiz_idents ) {
|
455 |
+
tokens.push( tokens.shift() );
|
456 |
+
}
|
457 |
+
if( tokens[0].tokenType & type_ident ) {
|
458 |
+
if( tokens[0].tokenValue === 'center' ) {
|
459 |
+
vals[1] = length_fifty;
|
460 |
+
} else {
|
461 |
+
vals[0] = tokens[0].tokenValue;
|
462 |
+
}
|
463 |
+
}
|
464 |
+
else if( tokens[0].isLengthOrPercent() ) {
|
465 |
+
vals[1] = PIE.getLength( tokens[0].tokenValue );
|
466 |
+
}
|
467 |
+
if( tokens[1].tokenType & type_ident ) {
|
468 |
+
if( tokens[1].tokenValue === 'center' ) {
|
469 |
+
vals[3] = length_fifty;
|
470 |
+
} else {
|
471 |
+
vals[2] = tokens[1].tokenValue;
|
472 |
+
}
|
473 |
+
}
|
474 |
+
else if( tokens[1].isLengthOrPercent() ) {
|
475 |
+
vals[3] = PIE.getLength( tokens[1].tokenValue );
|
476 |
+
}
|
477 |
+
}
|
478 |
+
|
479 |
+
// Three or four values - CSS3
|
480 |
+
else {
|
481 |
+
// TODO
|
482 |
+
}
|
483 |
+
|
484 |
+
this._values = vals;
|
485 |
+
}
|
486 |
+
return this._values;
|
487 |
+
},
|
488 |
+
|
489 |
+
/**
|
490 |
+
* Find the coordinates of the background image from the upper-left corner of the background area.
|
491 |
+
* Note that these coordinate values are not rounded.
|
492 |
+
* @param {Element} el
|
493 |
+
* @param {number} width - the width for percentages (background area width minus image width)
|
494 |
+
* @param {number} height - the height for percentages (background area height minus image height)
|
495 |
+
* @return {Object} { x: Number, y: Number }
|
496 |
+
*/
|
497 |
+
coords: function( el, width, height ) {
|
498 |
+
var vals = this.getValues(),
|
499 |
+
pxX = vals[1].pixels( el, width ),
|
500 |
+
pxY = vals[3].pixels( el, height );
|
501 |
+
|
502 |
+
return {
|
503 |
+
x: vals[0] === 'right' ? width - pxX : pxX,
|
504 |
+
y: vals[2] === 'bottom' ? height - pxY : pxY
|
505 |
+
};
|
506 |
+
}
|
507 |
+
};
|
508 |
+
|
509 |
+
return BgPosition;
|
510 |
+
})();
|
511 |
+
/**
|
512 |
+
* Wrapper for angle values; handles conversion to degrees from all allowed angle units
|
513 |
+
* @constructor
|
514 |
+
* @param {string} val The raw CSS value for the angle. It is assumed it has been pre-validated.
|
515 |
+
*/
|
516 |
+
PIE.Angle = (function() {
|
517 |
+
function Angle( val ) {
|
518 |
+
this.val = val;
|
519 |
+
}
|
520 |
+
Angle.prototype = {
|
521 |
+
unitRE: /[a-z]+$/i,
|
522 |
+
|
523 |
+
/**
|
524 |
+
* @return {string} The unit of the angle value
|
525 |
+
*/
|
526 |
+
getUnit: function() {
|
527 |
+
return this._unit || ( this._unit = this.val.match( this.unitRE )[0].toLowerCase() );
|
528 |
+
},
|
529 |
+
|
530 |
+
/**
|
531 |
+
* Get the numeric value of the angle in degrees.
|
532 |
+
* @return {number} The degrees value
|
533 |
+
*/
|
534 |
+
degrees: function() {
|
535 |
+
var deg = this._deg, u, n;
|
536 |
+
if( deg === undefined ) {
|
537 |
+
u = this.getUnit();
|
538 |
+
n = parseFloat( this.val, 10 );
|
539 |
+
deg = this._deg = ( u === 'deg' ? n : u === 'rad' ? n / Math.PI * 180 : u === 'grad' ? n / 400 * 360 : u === 'turn' ? n * 360 : 0 );
|
540 |
+
}
|
541 |
+
return deg;
|
542 |
+
}
|
543 |
+
};
|
544 |
+
|
545 |
+
return Angle;
|
546 |
+
})();/**
|
547 |
+
* Abstraction for colors values. Allows detection of rgba values. A singleton instance per unique
|
548 |
+
* value is returned from PIE.getColor() - always use that instead of instantiating directly.
|
549 |
+
* @constructor
|
550 |
+
* @param {string} val The raw CSS string value for the color
|
551 |
+
*/
|
552 |
+
PIE.Color = (function() {
|
553 |
+
var instances = {};
|
554 |
+
|
555 |
+
function Color( val ) {
|
556 |
+
this.val = val;
|
557 |
+
}
|
558 |
+
|
559 |
+
/**
|
560 |
+
* Regular expression for matching rgba colors and extracting their components
|
561 |
+
* @type {RegExp}
|
562 |
+
*/
|
563 |
+
Color.rgbaRE = /\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;
|
564 |
+
|
565 |
+
Color.names = {
|
566 |
+
"aliceblue":"F0F8FF", "antiquewhite":"FAEBD7", "aqua":"0FF",
|
567 |
+
"aquamarine":"7FFFD4", "azure":"F0FFFF", "beige":"F5F5DC",
|
568 |
+
"bisque":"FFE4C4", "black":"000", "blanchedalmond":"FFEBCD",
|
569 |
+
"blue":"00F", "blueviolet":"8A2BE2", "brown":"A52A2A",
|
570 |
+
"burlywood":"DEB887", "cadetblue":"5F9EA0", "chartreuse":"7FFF00",
|
571 |
+
"chocolate":"D2691E", "coral":"FF7F50", "cornflowerblue":"6495ED",
|
572 |
+
"cornsilk":"FFF8DC", "crimson":"DC143C", "cyan":"0FF",
|
573 |
+
"darkblue":"00008B", "darkcyan":"008B8B", "darkgoldenrod":"B8860B",
|
574 |
+
"darkgray":"A9A9A9", "darkgreen":"006400", "darkkhaki":"BDB76B",
|
575 |
+
"darkmagenta":"8B008B", "darkolivegreen":"556B2F", "darkorange":"FF8C00",
|
576 |
+
"darkorchid":"9932CC", "darkred":"8B0000", "darksalmon":"E9967A",
|
577 |
+
"darkseagreen":"8FBC8F", "darkslateblue":"483D8B", "darkslategray":"2F4F4F",
|
578 |
+
"darkturquoise":"00CED1", "darkviolet":"9400D3", "deeppink":"FF1493",
|
579 |
+
"deepskyblue":"00BFFF", "dimgray":"696969", "dodgerblue":"1E90FF",
|
580 |
+
"firebrick":"B22222", "floralwhite":"FFFAF0", "forestgreen":"228B22",
|
581 |
+
"fuchsia":"F0F", "gainsboro":"DCDCDC", "ghostwhite":"F8F8FF",
|
582 |
+
"gold":"FFD700", "goldenrod":"DAA520", "gray":"808080",
|
583 |
+
"green":"008000", "greenyellow":"ADFF2F", "honeydew":"F0FFF0",
|
584 |
+
"hotpink":"FF69B4", "indianred":"CD5C5C", "indigo":"4B0082",
|
585 |
+
"ivory":"FFFFF0", "khaki":"F0E68C", "lavender":"E6E6FA",
|
586 |
+
"lavenderblush":"FFF0F5", "lawngreen":"7CFC00", "lemonchiffon":"FFFACD",
|
587 |
+
"lightblue":"ADD8E6", "lightcoral":"F08080", "lightcyan":"E0FFFF",
|
588 |
+
"lightgoldenrodyellow":"FAFAD2", "lightgreen":"90EE90", "lightgrey":"D3D3D3",
|
589 |
+
"lightpink":"FFB6C1", "lightsalmon":"FFA07A", "lightseagreen":"20B2AA",
|
590 |
+
"lightskyblue":"87CEFA", "lightslategray":"789", "lightsteelblue":"B0C4DE",
|
591 |
+
"lightyellow":"FFFFE0", "lime":"0F0", "limegreen":"32CD32",
|
592 |
+
"linen":"FAF0E6", "magenta":"F0F", "maroon":"800000",
|
593 |
+
"mediumauqamarine":"66CDAA", "mediumblue":"0000CD", "mediumorchid":"BA55D3",
|
594 |
+
"mediumpurple":"9370D8", "mediumseagreen":"3CB371", "mediumslateblue":"7B68EE",
|
595 |
+
"mediumspringgreen":"00FA9A", "mediumturquoise":"48D1CC", "mediumvioletred":"C71585",
|
596 |
+
"midnightblue":"191970", "mintcream":"F5FFFA", "mistyrose":"FFE4E1",
|
597 |
+
"moccasin":"FFE4B5", "navajowhite":"FFDEAD", "navy":"000080",
|
598 |
+
"oldlace":"FDF5E6", "olive":"808000", "olivedrab":"688E23",
|
599 |
+
"orange":"FFA500", "orangered":"FF4500", "orchid":"DA70D6",
|
600 |
+
"palegoldenrod":"EEE8AA", "palegreen":"98FB98", "paleturquoise":"AFEEEE",
|
601 |
+
"palevioletred":"D87093", "papayawhip":"FFEFD5", "peachpuff":"FFDAB9",
|
602 |
+
"peru":"CD853F", "pink":"FFC0CB", "plum":"DDA0DD",
|
603 |
+
"powderblue":"B0E0E6", "purple":"800080", "red":"F00",
|
604 |
+
"rosybrown":"BC8F8F", "royalblue":"4169E1", "saddlebrown":"8B4513",
|
605 |
+
"salmon":"FA8072", "sandybrown":"F4A460", "seagreen":"2E8B57",
|
606 |
+
"seashell":"FFF5EE", "sienna":"A0522D", "silver":"C0C0C0",
|
607 |
+
"skyblue":"87CEEB", "slateblue":"6A5ACD", "slategray":"708090",
|
608 |
+
"snow":"FFFAFA", "springgreen":"00FF7F", "steelblue":"4682B4",
|
609 |
+
"tan":"D2B48C", "teal":"008080", "thistle":"D8BFD8",
|
610 |
+
"tomato":"FF6347", "turquoise":"40E0D0", "violet":"EE82EE",
|
611 |
+
"wheat":"F5DEB3", "white":"FFF", "whitesmoke":"F5F5F5",
|
612 |
+
"yellow":"FF0", "yellowgreen":"9ACD32"
|
613 |
+
};
|
614 |
+
|
615 |
+
Color.prototype = {
|
616 |
+
/**
|
617 |
+
* @private
|
618 |
+
*/
|
619 |
+
parse: function() {
|
620 |
+
if( !this._color ) {
|
621 |
+
var me = this,
|
622 |
+
v = me.val,
|
623 |
+
vLower,
|
624 |
+
m = v.match( Color.rgbaRE );
|
625 |
+
if( m ) {
|
626 |
+
me._color = 'rgb(' + m[1] + ',' + m[2] + ',' + m[3] + ')';
|
627 |
+
me._alpha = parseFloat( m[4] );
|
628 |
+
}
|
629 |
+
else {
|
630 |
+
if( ( vLower = v.toLowerCase() ) in Color.names ) {
|
631 |
+
v = '#' + Color.names[vLower];
|
632 |
+
}
|
633 |
+
me._color = v;
|
634 |
+
me._alpha = ( v === 'transparent' ? 0 : 1 );
|
635 |
+
}
|
636 |
+
}
|
637 |
+
},
|
638 |
+
|
639 |
+
/**
|
640 |
+
* Retrieve the value of the color in a format usable by IE natively. This will be the same as
|
641 |
+
* the raw input value, except for rgba values which will be converted to an rgb value.
|
642 |
+
* @param {Element} el The context element, used to get 'currentColor' keyword value.
|
643 |
+
* @return {string} Color value
|
644 |
+
*/
|
645 |
+
colorValue: function( el ) {
|
646 |
+
this.parse();
|
647 |
+
return this._color === 'currentColor' ? el.currentStyle.color : this._color;
|
648 |
+
},
|
649 |
+
|
650 |
+
/**
|
651 |
+
* Retrieve the alpha value of the color. Will be 1 for all values except for rgba values
|
652 |
+
* with an alpha component.
|
653 |
+
* @return {number} The alpha value, from 0 to 1.
|
654 |
+
*/
|
655 |
+
alpha: function() {
|
656 |
+
this.parse();
|
657 |
+
return this._alpha;
|
658 |
+
}
|
659 |
+
};
|
660 |
+
|
661 |
+
|
662 |
+
/**
|
663 |
+
* Retrieve a PIE.Color instance for the given value. A shared singleton instance is returned for each unique value.
|
664 |
+
* @param {string} val The CSS string representing the color. It is assumed that this will already have
|
665 |
+
* been validated as a valid color syntax.
|
666 |
+
*/
|
667 |
+
PIE.getColor = function(val) {
|
668 |
+
return instances[ val ] || ( instances[ val ] = new Color( val ) );
|
669 |
+
};
|
670 |
+
|
671 |
+
return Color;
|
672 |
+
})();/**
|
673 |
+
* A tokenizer for CSS value strings.
|
674 |
+
* @constructor
|
675 |
+
* @param {string} css The CSS value string
|
676 |
+
*/
|
677 |
+
PIE.Tokenizer = (function() {
|
678 |
+
function Tokenizer( css ) {
|
679 |
+
this.css = css;
|
680 |
+
this.ch = 0;
|
681 |
+
this.tokens = [];
|
682 |
+
this.tokenIndex = 0;
|
683 |
+
}
|
684 |
+
|
685 |
+
/**
|
686 |
+
* Enumeration of token type constants.
|
687 |
+
* @enum {number}
|
688 |
+
*/
|
689 |
+
var Type = Tokenizer.Type = {
|
690 |
+
ANGLE: 1,
|
691 |
+
CHARACTER: 2,
|
692 |
+
COLOR: 4,
|
693 |
+
DIMEN: 8,
|
694 |
+
FUNCTION: 16,
|
695 |
+
IDENT: 32,
|
696 |
+
LENGTH: 64,
|
697 |
+
NUMBER: 128,
|
698 |
+
OPERATOR: 256,
|
699 |
+
PERCENT: 512,
|
700 |
+
STRING: 1024,
|
701 |
+
URL: 2048
|
702 |
+
};
|
703 |
+
|
704 |
+
/**
|
705 |
+
* A single token
|
706 |
+
* @constructor
|
707 |
+
* @param {number} type The type of the token - see PIE.Tokenizer.Type
|
708 |
+
* @param {string} value The value of the token
|
709 |
+
*/
|
710 |
+
Tokenizer.Token = function( type, value ) {
|
711 |
+
this.tokenType = type;
|
712 |
+
this.tokenValue = value;
|
713 |
+
};
|
714 |
+
Tokenizer.Token.prototype = {
|
715 |
+
isLength: function() {
|
716 |
+
return this.tokenType & Type.LENGTH || ( this.tokenType & Type.NUMBER && this.tokenValue === '0' );
|
717 |
+
},
|
718 |
+
isLengthOrPercent: function() {
|
719 |
+
return this.isLength() || this.tokenType & Type.PERCENT;
|
720 |
+
}
|
721 |
+
};
|
722 |
+
|
723 |
+
Tokenizer.prototype = {
|
724 |
+
whitespace: /\s/,
|
725 |
+
number: /^[\+\-]?(\d*\.)?\d+/,
|
726 |
+
url: /^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,
|
727 |
+
ident: /^\-?[_a-z][\w-]*/i,
|
728 |
+
string: /^("([^"]*)"|'([^']*)')/,
|
729 |
+
operator: /^[\/,]/,
|
730 |
+
hash: /^#[\w]+/,
|
731 |
+
hashColor: /^#([\da-f]{6}|[\da-f]{3})/i,
|
732 |
+
|
733 |
+
unitTypes: {
|
734 |
+
'px': Type.LENGTH, 'em': Type.LENGTH, 'ex': Type.LENGTH,
|
735 |
+
'mm': Type.LENGTH, 'cm': Type.LENGTH, 'in': Type.LENGTH,
|
736 |
+
'pt': Type.LENGTH, 'pc': Type.LENGTH,
|
737 |
+
'deg': Type.ANGLE, 'rad': Type.ANGLE, 'grad': Type.ANGLE
|
738 |
+
},
|
739 |
+
|
740 |
+
colorNames: {
|
741 |
+
'aqua':1, 'black':1, 'blue':1, 'fuchsia':1, 'gray':1, 'green':1, 'lime':1, 'maroon':1,
|
742 |
+
'navy':1, 'olive':1, 'purple':1, 'red':1, 'silver':1, 'teal':1, 'white':1, 'yellow': 1,
|
743 |
+
'currentColor': 1
|
744 |
+
},
|
745 |
+
|
746 |
+
colorFunctions: {
|
747 |
+
'rgb': 1, 'rgba': 1, 'hsl': 1, 'hsla': 1
|
748 |
+
},
|
749 |
+
|
750 |
+
|
751 |
+
/**
|
752 |
+
* Advance to and return the next token in the CSS string. If the end of the CSS string has
|
753 |
+
* been reached, null will be returned.
|
754 |
+
* @param {boolean} forget - if true, the token will not be stored for the purposes of backtracking with prev().
|
755 |
+
* @return {PIE.Tokenizer.Token}
|
756 |
+
*/
|
757 |
+
next: function( forget ) {
|
758 |
+
var css, ch, firstChar, match, val,
|
759 |
+
me = this;
|
760 |
+
|
761 |
+
function newToken( type, value ) {
|
762 |
+
var tok = new Tokenizer.Token( type, value );
|
763 |
+
if( !forget ) {
|
764 |
+
me.tokens.push( tok );
|
765 |
+
me.tokenIndex++;
|
766 |
+
}
|
767 |
+
return tok;
|
768 |
+
}
|
769 |
+
function failure() {
|
770 |
+
me.tokenIndex++;
|
771 |
+
return null;
|
772 |
+
}
|
773 |
+
|
774 |
+
// In case we previously backed up, return the stored token in the next slot
|
775 |
+
if( this.tokenIndex < this.tokens.length ) {
|
776 |
+
return this.tokens[ this.tokenIndex++ ];
|
777 |
+
}
|
778 |
+
|
779 |
+
// Move past leading whitespace characters
|
780 |
+
while( this.whitespace.test( this.css.charAt( this.ch ) ) ) {
|
781 |
+
this.ch++;
|
782 |
+
}
|
783 |
+
if( this.ch >= this.css.length ) {
|
784 |
+
return failure();
|
785 |
+
}
|
786 |
+
|
787 |
+
ch = this.ch;
|
788 |
+
css = this.css.substring( this.ch );
|
789 |
+
firstChar = css.charAt( 0 );
|
790 |
+
switch( firstChar ) {
|
791 |
+
case '#':
|
792 |
+
if( match = css.match( this.hashColor ) ) {
|
793 |
+
this.ch += match[0].length;
|
794 |
+
return newToken( Type.COLOR, match[0] );
|
795 |
+
}
|
796 |
+
break;
|
797 |
+
|
798 |
+
case '"':
|
799 |
+
case "'":
|
800 |
+
if( match = css.match( this.string ) ) {
|
801 |
+
this.ch += match[0].length;
|
802 |
+
return newToken( Type.STRING, match[2] || match[3] || '' );
|
803 |
+
}
|
804 |
+
break;
|
805 |
+
|
806 |
+
case "/":
|
807 |
+
case ",":
|
808 |
+
this.ch++;
|
809 |
+
return newToken( Type.OPERATOR, firstChar );
|
810 |
+
|
811 |
+
case 'u':
|
812 |
+
if( match = css.match( this.url ) ) {
|
813 |
+
this.ch += match[0].length;
|
814 |
+
return newToken( Type.URL, match[2] || match[3] || match[4] || '' );
|
815 |
+
}
|
816 |
+
}
|
817 |
+
|
818 |
+
// Numbers and values starting with numbers
|
819 |
+
if( match = css.match( this.number ) ) {
|
820 |
+
val = match[0];
|
821 |
+
this.ch += val.length;
|
822 |
+
|
823 |
+
// Check if it is followed by a unit
|
824 |
+
if( css.charAt( val.length ) === '%' ) {
|
825 |
+
this.ch++;
|
826 |
+
return newToken( Type.PERCENT, val + '%' );
|
827 |
+
}
|
828 |
+
if( match = css.substring( val.length ).match( this.ident ) ) {
|
829 |
+
val += match[0];
|
830 |
+
this.ch += match[0].length;
|
831 |
+
return newToken( this.unitTypes[ match[0].toLowerCase() ] || Type.DIMEN, val );
|
832 |
+
}
|
833 |
+
|
834 |
+
// Plain ol' number
|
835 |
+
return newToken( Type.NUMBER, val );
|
836 |
+
}
|
837 |
+
|
838 |
+
// Identifiers
|
839 |
+
if( match = css.match( this.ident ) ) {
|
840 |
+
val = match[0];
|
841 |
+
this.ch += val.length;
|
842 |
+
|
843 |
+
// Named colors
|
844 |
+
if( val.toLowerCase() in PIE.Color.names || val === 'currentColor' ) {
|
845 |
+
return newToken( Type.COLOR, val );
|
846 |
+
}
|
847 |
+
|
848 |
+
// Functions
|
849 |
+
if( css.charAt( val.length ) === '(' ) {
|
850 |
+
this.ch++;
|
851 |
+
|
852 |
+
// Color values in function format: rgb, rgba, hsl, hsla
|
853 |
+
if( val.toLowerCase() in this.colorFunctions ) {
|
854 |
+
function isNum( tok ) {
|
855 |
+
return tok && tok.tokenType & Type.NUMBER;
|
856 |
+
}
|
857 |
+
function isNumOrPct( tok ) {
|
858 |
+
return tok && ( tok.tokenType & ( Type.NUMBER | Type.PERCENT ) );
|
859 |
+
}
|
860 |
+
function isValue( tok, val ) {
|
861 |
+
return tok && tok.tokenValue === val;
|
862 |
+
}
|
863 |
+
function next() {
|
864 |
+
return me.next( 1 );
|
865 |
+
}
|
866 |
+
|
867 |
+
if( ( val.charAt(0) === 'r' ? isNumOrPct( next() ) : isNum( next() ) ) &&
|
868 |
+
isValue( next(), ',' ) &&
|
869 |
+
isNumOrPct( next() ) &&
|
870 |
+
isValue( next(), ',' ) &&
|
871 |
+
isNumOrPct( next() ) &&
|
872 |
+
( val === 'rgb' || val === 'hsa' || (
|
873 |
+
isValue( next(), ',' ) &&
|
874 |
+
isNum( next() )
|
875 |
+
) ) &&
|
876 |
+
isValue( next(), ')' ) ) {
|
877 |
+
return newToken( Type.COLOR, this.css.substring( ch, this.ch ) );
|
878 |
+
}
|
879 |
+
return failure();
|
880 |
+
}
|
881 |
+
|
882 |
+
return newToken( Type.FUNCTION, val );
|
883 |
+
}
|
884 |
+
|
885 |
+
// Other identifier
|
886 |
+
return newToken( Type.IDENT, val );
|
887 |
+
}
|
888 |
+
|
889 |
+
// Standalone character
|
890 |
+
this.ch++;
|
891 |
+
return newToken( Type.CHARACTER, firstChar );
|
892 |
+
},
|
893 |
+
|
894 |
+
/**
|
895 |
+
* Determine whether there is another token
|
896 |
+
* @return {boolean}
|
897 |
+
*/
|
898 |
+
hasNext: function() {
|
899 |
+
var next = this.next();
|
900 |
+
this.prev();
|
901 |
+
return !!next;
|
902 |
+
},
|
903 |
+
|
904 |
+
/**
|
905 |
+
* Back up and return the previous token
|
906 |
+
* @return {PIE.Tokenizer.Token}
|
907 |
+
*/
|
908 |
+
prev: function() {
|
909 |
+
return this.tokens[ this.tokenIndex-- - 2 ];
|
910 |
+
},
|
911 |
+
|
912 |
+
/**
|
913 |
+
* Retrieve all the tokens in the CSS string
|
914 |
+
* @return {Array.<PIE.Tokenizer.Token>}
|
915 |
+
*/
|
916 |
+
all: function() {
|
917 |
+
while( this.next() ) {}
|
918 |
+
return this.tokens;
|
919 |
+
},
|
920 |
+
|
921 |
+
/**
|
922 |
+
* Return a list of tokens from the current position until the given function returns
|
923 |
+
* true. The final token will not be included in the list.
|
924 |
+
* @param {function():boolean} func - test function
|
925 |
+
* @param {boolean} require - if true, then if the end of the CSS string is reached
|
926 |
+
* before the test function returns true, null will be returned instead of the
|
927 |
+
* tokens that have been found so far.
|
928 |
+
* @return {Array.<PIE.Tokenizer.Token>}
|
929 |
+
*/
|
930 |
+
until: function( func, require ) {
|
931 |
+
var list = [], t, hit;
|
932 |
+
while( t = this.next() ) {
|
933 |
+
if( func( t ) ) {
|
934 |
+
hit = true;
|
935 |
+
this.prev();
|
936 |
+
break;
|
937 |
+
}
|
938 |
+
list.push( t );
|
939 |
+
}
|
940 |
+
return require && !hit ? null : list;
|
941 |
+
}
|
942 |
+
};
|
943 |
+
|
944 |
+
return Tokenizer;
|
945 |
+
})();/**
|
946 |
+
* Handles calculating, caching, and detecting changes to size and position of the element.
|
947 |
+
* @constructor
|
948 |
+
* @param {Element} el the target element
|
949 |
+
*/
|
950 |
+
PIE.BoundsInfo = function( el ) {
|
951 |
+
this.targetElement = el;
|
952 |
+
};
|
953 |
+
PIE.BoundsInfo.prototype = {
|
954 |
+
|
955 |
+
_locked: 0,
|
956 |
+
|
957 |
+
positionChanged: function() {
|
958 |
+
var last = this._lastBounds,
|
959 |
+
bounds;
|
960 |
+
return !last || ( ( bounds = this.getBounds() ) && ( last.x !== bounds.x || last.y !== bounds.y ) );
|
961 |
+
},
|
962 |
+
|
963 |
+
sizeChanged: function() {
|
964 |
+
var last = this._lastBounds,
|
965 |
+
bounds;
|
966 |
+
return !last || ( ( bounds = this.getBounds() ) && ( last.w !== bounds.w || last.h !== bounds.h ) );
|
967 |
+
},
|
968 |
+
|
969 |
+
getLiveBounds: function() {
|
970 |
+
var rect = this.targetElement.getBoundingClientRect();
|
971 |
+
return {
|
972 |
+
x: rect.left,
|
973 |
+
y: rect.top,
|
974 |
+
w: rect.right - rect.left,
|
975 |
+
h: rect.bottom - rect.top
|
976 |
+
};
|
977 |
+
},
|
978 |
+
|
979 |
+
getBounds: function() {
|
980 |
+
return this._locked ?
|
981 |
+
( this._lockedBounds || ( this._lockedBounds = this.getLiveBounds() ) ) :
|
982 |
+
this.getLiveBounds();
|
983 |
+
},
|
984 |
+
|
985 |
+
hasBeenQueried: function() {
|
986 |
+
return !!this._lastBounds;
|
987 |
+
},
|
988 |
+
|
989 |
+
lock: function() {
|
990 |
+
++this._locked;
|
991 |
+
},
|
992 |
+
|
993 |
+
unlock: function() {
|
994 |
+
if( !--this._locked ) {
|
995 |
+
if( this._lockedBounds ) this._lastBounds = this._lockedBounds;
|
996 |
+
this._lockedBounds = null;
|
997 |
+
}
|
998 |
+
}
|
999 |
+
|
1000 |
+
};
|
1001 |
+
(function() {
|
1002 |
+
|
1003 |
+
function cacheWhenLocked( fn ) {
|
1004 |
+
var uid = PIE.Util.getUID( fn );
|
1005 |
+
return function() {
|
1006 |
+
if( this._locked ) {
|
1007 |
+
var cache = this._lockedValues || ( this._lockedValues = {} );
|
1008 |
+
return ( uid in cache ) ? cache[ uid ] : ( cache[ uid ] = fn.call( this ) );
|
1009 |
+
} else {
|
1010 |
+
return fn.call( this );
|
1011 |
+
}
|
1012 |
+
}
|
1013 |
+
}
|
1014 |
+
|
1015 |
+
|
1016 |
+
PIE.StyleInfoBase = {
|
1017 |
+
|
1018 |
+
_locked: 0,
|
1019 |
+
|
1020 |
+
/**
|
1021 |
+
* Create a new StyleInfo class, with the standard constructor, and augmented by
|
1022 |
+
* the StyleInfoBase's members.
|
1023 |
+
* @param proto
|
1024 |
+
*/
|
1025 |
+
newStyleInfo: function( proto ) {
|
1026 |
+
function StyleInfo( el ) {
|
1027 |
+
this.targetElement = el;
|
1028 |
+
}
|
1029 |
+
PIE.Util.merge( StyleInfo.prototype, PIE.StyleInfoBase, proto );
|
1030 |
+
StyleInfo._propsCache = {};
|
1031 |
+
return StyleInfo;
|
1032 |
+
},
|
1033 |
+
|
1034 |
+
/**
|
1035 |
+
* Get an object representation of the target CSS style, caching it for each unique
|
1036 |
+
* CSS value string.
|
1037 |
+
* @return {Object}
|
1038 |
+
*/
|
1039 |
+
getProps: function() {
|
1040 |
+
var css = this.getCss(),
|
1041 |
+
cache = this.constructor._propsCache;
|
1042 |
+
return css ? ( css in cache ? cache[ css ] : ( cache[ css ] = this.parseCss( css ) ) ) : null;
|
1043 |
+
},
|
1044 |
+
|
1045 |
+
/**
|
1046 |
+
* Get the raw CSS value for the target style
|
1047 |
+
* @return {string}
|
1048 |
+
*/
|
1049 |
+
getCss: cacheWhenLocked( function() {
|
1050 |
+
var el = this.targetElement,
|
1051 |
+
ctor = this.constructor,
|
1052 |
+
s = el.style,
|
1053 |
+
cs = el.currentStyle,
|
1054 |
+
cssProp = this.cssProperty,
|
1055 |
+
styleProp = this.styleProperty,
|
1056 |
+
prefixedCssProp = ctor._prefixedCssProp || ( ctor._prefixedCssProp = PIE.CSS_PREFIX + cssProp ),
|
1057 |
+
prefixedStyleProp = ctor._prefixedStyleProp || ( ctor._prefixedStyleProp = PIE.STYLE_PREFIX + styleProp.charAt(0).toUpperCase() + styleProp.substring(1) );
|
1058 |
+
return s[ prefixedStyleProp ] || cs.getAttribute( prefixedCssProp ) || s[ styleProp ] || cs.getAttribute( cssProp );
|
1059 |
+
} ),
|
1060 |
+
|
1061 |
+
/**
|
1062 |
+
* Determine whether the target CSS style is active.
|
1063 |
+
* @return {boolean}
|
1064 |
+
*/
|
1065 |
+
isActive: cacheWhenLocked( function() {
|
1066 |
+
return !!this.getProps();
|
1067 |
+
} ),
|
1068 |
+
|
1069 |
+
/**
|
1070 |
+
* Determine whether the target CSS style has changed since the last time it was used.
|
1071 |
+
* @return {boolean}
|
1072 |
+
*/
|
1073 |
+
changed: cacheWhenLocked( function() {
|
1074 |
+
var currentCss = this.getCss(),
|
1075 |
+
changed = currentCss !== this._lastCss;
|
1076 |
+
this._lastCss = currentCss;
|
1077 |
+
return changed;
|
1078 |
+
} ),
|
1079 |
+
|
1080 |
+
cacheWhenLocked: cacheWhenLocked,
|
1081 |
+
|
1082 |
+
lock: function() {
|
1083 |
+
++this._locked;
|
1084 |
+
},
|
1085 |
+
|
1086 |
+
unlock: function() {
|
1087 |
+
if( !--this._locked ) {
|
1088 |
+
delete this._lockedValues;
|
1089 |
+
}
|
1090 |
+
}
|
1091 |
+
};
|
1092 |
+
|
1093 |
+
})();/**
|
1094 |
+
* Handles parsing, caching, and detecting changes to background (and -pie-background) CSS
|
1095 |
+
* @constructor
|
1096 |
+
* @param {Element} el the target element
|
1097 |
+
*/
|
1098 |
+
PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1099 |
+
|
1100 |
+
cssProperty: PIE.CSS_PREFIX + 'background',
|
1101 |
+
styleProperty: PIE.STYLE_PREFIX + 'Background',
|
1102 |
+
|
1103 |
+
attachIdents: { 'scroll':1, 'fixed':1, 'local':1 },
|
1104 |
+
repeatIdents: { 'repeat-x':1, 'repeat-y':1, 'repeat':1, 'no-repeat':1 },
|
1105 |
+
originIdents: { 'padding-box':1, 'border-box':1, 'content-box':1 },
|
1106 |
+
clipIdents: { 'padding-box':1, 'border-box':1 },
|
1107 |
+
positionIdents: { 'top':1, 'right':1, 'bottom':1, 'left':1, 'center':1 },
|
1108 |
+
sizeIdents: { 'contain':1, 'cover':1 },
|
1109 |
+
|
1110 |
+
/**
|
1111 |
+
* For background styles, we support the -pie-background property but fall back to the standard
|
1112 |
+
* backround* properties. The reason we have to use the prefixed version is that IE natively
|
1113 |
+
* parses the standard properties and if it sees something it doesn't know how to parse, for example
|
1114 |
+
* multiple values or gradient definitions, it will throw that away and not make it available through
|
1115 |
+
* currentStyle.
|
1116 |
+
*
|
1117 |
+
* Format of return object:
|
1118 |
+
* {
|
1119 |
+
* color: <PIE.Color>,
|
1120 |
+
* bgImages: [
|
1121 |
+
* {
|
1122 |
+
* imgType: 'image',
|
1123 |
+
* imgUrl: 'image.png',
|
1124 |
+
* imgRepeat: <'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'>,
|
1125 |
+
* bgPosition: <PIE.BgPosition>,
|
1126 |
+
* attachment: <'scroll' | 'fixed' | 'local'>,
|
1127 |
+
* bgOrigin: <'border-box' | 'padding-box' | 'content-box'>,
|
1128 |
+
* clip: <'border-box' | 'padding-box'>,
|
1129 |
+
* size: <'contain' | 'cover' | { w: <'auto' | PIE.Length>, h: <'auto' | PIE.Length> }>
|
1130 |
+
* },
|
1131 |
+
* {
|
1132 |
+
* imgType: 'linear-gradient',
|
1133 |
+
* gradientStart: <PIE.BgPosition>,
|
1134 |
+
* angle: <PIE.Angle>,
|
1135 |
+
* stops: [
|
1136 |
+
* { color: <PIE.Color>, offset: <PIE.Length> },
|
1137 |
+
* { color: <PIE.Color>, offset: <PIE.Length> }, ...
|
1138 |
+
* ]
|
1139 |
+
* }
|
1140 |
+
* ]
|
1141 |
+
* }
|
1142 |
+
* @param {String} css
|
1143 |
+
* @override
|
1144 |
+
*/
|
1145 |
+
parseCss: function( css ) {
|
1146 |
+
var el = this.targetElement,
|
1147 |
+
cs = el.currentStyle,
|
1148 |
+
tokenizer, token, image,
|
1149 |
+
tok_type = PIE.Tokenizer.Type,
|
1150 |
+
type_operator = tok_type.OPERATOR,
|
1151 |
+
type_ident = tok_type.IDENT,
|
1152 |
+
type_color = tok_type.COLOR,
|
1153 |
+
tokType, tokVal,
|
1154 |
+
positionIdents = this.positionIdents,
|
1155 |
+
gradient, stop,
|
1156 |
+
props = null;
|
1157 |
+
|
1158 |
+
function isBgPosToken( token ) {
|
1159 |
+
return token.isLengthOrPercent() || ( token.tokenType & type_ident && token.tokenValue in positionIdents );
|
1160 |
+
}
|
1161 |
+
|
1162 |
+
function sizeToken( token ) {
|
1163 |
+
return ( token.isLengthOrPercent() && PIE.getLength( token.tokenValue ) ) || ( token.tokenValue === 'auto' && 'auto' );
|
1164 |
+
}
|
1165 |
+
|
1166 |
+
// If the CSS3-specific -pie-background property is present, parse it
|
1167 |
+
if( this.getCss3() ) {
|
1168 |
+
tokenizer = new PIE.Tokenizer( css );
|
1169 |
+
props = { bgImages: [] };
|
1170 |
+
image = {};
|
1171 |
+
|
1172 |
+
while( token = tokenizer.next() ) {
|
1173 |
+
tokType = token.tokenType;
|
1174 |
+
tokVal = token.tokenValue;
|
1175 |
+
|
1176 |
+
if( !image.imgType && tokType & tok_type.FUNCTION && tokVal === 'linear-gradient' ) {
|
1177 |
+
gradient = { stops: [], imgType: tokVal };
|
1178 |
+
stop = {};
|
1179 |
+
while( token = tokenizer.next() ) {
|
1180 |
+
tokType = token.tokenType;
|
1181 |
+
tokVal = token.tokenValue;
|
1182 |
+
|
1183 |
+
// If we reached the end of the function and had at least 2 stops, flush the info
|
1184 |
+
if( tokType & tok_type.CHARACTER && tokVal === ')' ) {
|
1185 |
+
if( stop.color ) {
|
1186 |
+
gradient.stops.push( stop );
|
1187 |
+
}
|
1188 |
+
if( gradient.stops.length > 1 ) {
|
1189 |
+
PIE.Util.merge( image, gradient );
|
1190 |
+
}
|
1191 |
+
break;
|
1192 |
+
}
|
1193 |
+
|
1194 |
+
// Color stop - must start with color
|
1195 |
+
if( tokType & type_color ) {
|
1196 |
+
// if we already have an angle/position, make sure that the previous token was a comma
|
1197 |
+
if( gradient.angle || gradient.gradientStart ) {
|
1198 |
+
token = tokenizer.prev();
|
1199 |
+
if( token.tokenType !== type_operator ) {
|
1200 |
+
break; //fail
|
1201 |
+
}
|
1202 |
+
tokenizer.next();
|
1203 |
+
}
|
1204 |
+
|
1205 |
+
stop = {
|
1206 |
+
color: PIE.getColor( tokVal )
|
1207 |
+
};
|
1208 |
+
// check for offset following color
|
1209 |
+
token = tokenizer.next();
|
1210 |
+
if( token.isLengthOrPercent() ) {
|
1211 |
+
stop.offset = PIE.getLength( token.tokenValue );
|
1212 |
+
} else {
|
1213 |
+
tokenizer.prev();
|
1214 |
+
}
|
1215 |
+
}
|
1216 |
+
// Angle - can only appear in first spot
|
1217 |
+
else if( tokType & tok_type.ANGLE && !gradient.angle && !stop.color && !gradient.stops.length ) {
|
1218 |
+
gradient.angle = new PIE.Angle( token.tokenValue );
|
1219 |
+
}
|
1220 |
+
else if( isBgPosToken( token ) && !gradient.gradientStart && !stop.color && !gradient.stops.length ) {
|
1221 |
+
tokenizer.prev();
|
1222 |
+
gradient.gradientStart = new PIE.BgPosition(
|
1223 |
+
tokenizer.until( function( t ) {
|
1224 |
+
return !isBgPosToken( t );
|
1225 |
+
}, false )
|
1226 |
+
);
|
1227 |
+
}
|
1228 |
+
else if( tokType & type_operator && tokVal === ',' ) {
|
1229 |
+
if( stop.color ) {
|
1230 |
+
gradient.stops.push( stop );
|
1231 |
+
stop = {};
|
1232 |
+
}
|
1233 |
+
}
|
1234 |
+
else {
|
1235 |
+
// Found something we didn't recognize; fail without adding image
|
1236 |
+
break;
|
1237 |
+
}
|
1238 |
+
}
|
1239 |
+
}
|
1240 |
+
else if( !image.imgType && tokType & tok_type.URL ) {
|
1241 |
+
image.imgUrl = tokVal;
|
1242 |
+
image.imgType = 'image';
|
1243 |
+
}
|
1244 |
+
else if( isBgPosToken( token ) && !image.size ) {
|
1245 |
+
tokenizer.prev();
|
1246 |
+
image.bgPosition = new PIE.BgPosition(
|
1247 |
+
tokenizer.until( function( t ) {
|
1248 |
+
return !isBgPosToken( t );
|
1249 |
+
}, false )
|
1250 |
+
);
|
1251 |
+
}
|
1252 |
+
else if( tokType & type_ident ) {
|
1253 |
+
if( tokVal in this.repeatIdents ) {
|
1254 |
+
image.imgRepeat = tokVal;
|
1255 |
+
}
|
1256 |
+
else if( tokVal in this.originIdents ) {
|
1257 |
+
image.bgOrigin = tokVal;
|
1258 |
+
if( tokVal in this.clipIdents ) {
|
1259 |
+
image.clip = tokVal;
|
1260 |
+
}
|
1261 |
+
}
|
1262 |
+
else if( tokVal in this.attachIdents ) {
|
1263 |
+
image.attachment = tokVal;
|
1264 |
+
}
|
1265 |
+
}
|
1266 |
+
else if( tokType & type_color && !props.color ) {
|
1267 |
+
props.color = PIE.getColor( tokVal );
|
1268 |
+
}
|
1269 |
+
else if( tokType & type_operator ) {
|
1270 |
+
// background size
|
1271 |
+
if( tokVal === '/' ) {
|
1272 |
+
token = tokenizer.next();
|
1273 |
+
tokType = token.tokenType;
|
1274 |
+
tokVal = token.tokenValue;
|
1275 |
+
if( tokType & type_ident && tokVal in this.sizeIdents ) {
|
1276 |
+
image.size = tokVal;
|
1277 |
+
}
|
1278 |
+
else if( tokVal = sizeToken( token ) ) {
|
1279 |
+
image.size = {
|
1280 |
+
w: tokVal,
|
1281 |
+
h: sizeToken( tokenizer.next() ) || ( tokenizer.prev() && tokVal )
|
1282 |
+
};
|
1283 |
+
}
|
1284 |
+
}
|
1285 |
+
// new layer
|
1286 |
+
else if( tokVal === ',' && image.imgType ) {
|
1287 |
+
props.bgImages.push( image );
|
1288 |
+
image = {};
|
1289 |
+
}
|
1290 |
+
}
|
1291 |
+
else {
|
1292 |
+
// Found something unrecognized; chuck everything
|
1293 |
+
return null;
|
1294 |
+
}
|
1295 |
+
}
|
1296 |
+
|
1297 |
+
// leftovers
|
1298 |
+
if( image.imgType ) {
|
1299 |
+
props.bgImages.push( image );
|
1300 |
+
}
|
1301 |
+
}
|
1302 |
+
|
1303 |
+
// Otherwise, use the standard background properties; let IE give us the values rather than parsing them
|
1304 |
+
else {
|
1305 |
+
this.withActualBg( function() {
|
1306 |
+
var posX = cs.backgroundPositionX,
|
1307 |
+
posY = cs.backgroundPositionY,
|
1308 |
+
img = cs.backgroundImage,
|
1309 |
+
color = cs.backgroundColor;
|
1310 |
+
|
1311 |
+
props = {};
|
1312 |
+
if( color !== 'transparent' ) {
|
1313 |
+
props.color = PIE.getColor( color )
|
1314 |
+
}
|
1315 |
+
if( img !== 'none' ) {
|
1316 |
+
props.bgImages = [ {
|
1317 |
+
imgType: 'image',
|
1318 |
+
imgUrl: new PIE.Tokenizer( img ).next().tokenValue,
|
1319 |
+
imgRepeat: cs.backgroundRepeat,
|
1320 |
+
bgPosition: new PIE.BgPosition( new PIE.Tokenizer( posX + ' ' + posY ).all() )
|
1321 |
+
} ];
|
1322 |
+
}
|
1323 |
+
} );
|
1324 |
+
}
|
1325 |
+
|
1326 |
+
return ( props && ( props.color || ( props.bgImages && props.bgImages[0] ) ) ) ? props : null;
|
1327 |
+
},
|
1328 |
+
|
1329 |
+
/**
|
1330 |
+
* Execute a function with the actual background styles (not overridden with runtimeStyle
|
1331 |
+
* properties set by the renderers) available via currentStyle.
|
1332 |
+
* @param fn
|
1333 |
+
*/
|
1334 |
+
withActualBg: function( fn ) {
|
1335 |
+
var rs = this.targetElement.runtimeStyle,
|
1336 |
+
rsImage = rs.backgroundImage,
|
1337 |
+
rsColor = rs.backgroundColor,
|
1338 |
+
ret;
|
1339 |
+
|
1340 |
+
if( rsImage ) rs.backgroundImage = '';
|
1341 |
+
if( rsColor ) rs.backgroundColor = '';
|
1342 |
+
|
1343 |
+
ret = fn.call( this );
|
1344 |
+
|
1345 |
+
if( rsImage ) rs.backgroundImage = rsImage;
|
1346 |
+
if( rsColor ) rs.backgroundColor = rsColor;
|
1347 |
+
|
1348 |
+
return ret;
|
1349 |
+
},
|
1350 |
+
|
1351 |
+
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1352 |
+
return this.getCss3() ||
|
1353 |
+
this.withActualBg( function() {
|
1354 |
+
var cs = this.targetElement.currentStyle;
|
1355 |
+
return cs.backgroundColor + ' ' + cs.backgroundImage + ' ' + cs.backgroundRepeat + ' ' +
|
1356 |
+
cs.backgroundPositionX + ' ' + cs.backgroundPositionY;
|
1357 |
+
} );
|
1358 |
+
} ),
|
1359 |
+
|
1360 |
+
getCss3: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1361 |
+
var el = this.targetElement;
|
1362 |
+
return el.style[ this.styleProperty ] || el.currentStyle.getAttribute( this.cssProperty );
|
1363 |
+
} ),
|
1364 |
+
|
1365 |
+
/**
|
1366 |
+
* Tests if style.PiePngFix or the -pie-png-fix property is set to true in IE6.
|
1367 |
+
*/
|
1368 |
+
isPngFix: function() {
|
1369 |
+
var val = 0, el;
|
1370 |
+
if( PIE.ieVersion < 7 ) {
|
1371 |
+
el = this.targetElement;
|
1372 |
+
val = ( '' + ( el.style[ PIE.STYLE_PREFIX + 'PngFix' ] || el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'png-fix' ) ) === 'true' );
|
1373 |
+
}
|
1374 |
+
return val;
|
1375 |
+
},
|
1376 |
+
|
1377 |
+
/**
|
1378 |
+
* The isActive logic is slightly different, because getProps() always returns an object
|
1379 |
+
* even if it is just falling back to the native background properties. But we only want
|
1380 |
+
* to report is as being "active" if either the -pie-background override property is present
|
1381 |
+
* and parses successfully or '-pie-png-fix' is set to true in IE6.
|
1382 |
+
*/
|
1383 |
+
isActive: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1384 |
+
return (this.getCss3() || this.isPngFix()) && !!this.getProps();
|
1385 |
+
} )
|
1386 |
+
|
1387 |
+
} );/**
|
1388 |
+
* Handles parsing, caching, and detecting changes to border CSS
|
1389 |
+
* @constructor
|
1390 |
+
* @param {Element} el the target element
|
1391 |
+
*/
|
1392 |
+
PIE.BorderStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1393 |
+
|
1394 |
+
sides: [ 'Top', 'Right', 'Bottom', 'Left' ],
|
1395 |
+
namedWidths: {
|
1396 |
+
'thin': '1px',
|
1397 |
+
'medium': '3px',
|
1398 |
+
'thick': '5px'
|
1399 |
+
},
|
1400 |
+
|
1401 |
+
parseCss: function( css ) {
|
1402 |
+
var w = {},
|
1403 |
+
s = {},
|
1404 |
+
c = {},
|
1405 |
+
active = false,
|
1406 |
+
colorsSame = true,
|
1407 |
+
stylesSame = true,
|
1408 |
+
widthsSame = true;
|
1409 |
+
|
1410 |
+
this.withActualBorder( function() {
|
1411 |
+
var el = this.targetElement,
|
1412 |
+
cs = el.currentStyle,
|
1413 |
+
i = 0,
|
1414 |
+
style, color, width, lastStyle, lastColor, lastWidth, side, ltr;
|
1415 |
+
for( ; i < 4; i++ ) {
|
1416 |
+
side = this.sides[ i ];
|
1417 |
+
|
1418 |
+
ltr = side.charAt(0).toLowerCase();
|
1419 |
+
style = s[ ltr ] = cs[ 'border' + side + 'Style' ];
|
1420 |
+
color = cs[ 'border' + side + 'Color' ];
|
1421 |
+
width = cs[ 'border' + side + 'Width' ];
|
1422 |
+
|
1423 |
+
if( i > 0 ) {
|
1424 |
+
if( style !== lastStyle ) { stylesSame = false; }
|
1425 |
+
if( color !== lastColor ) { colorsSame = false; }
|
1426 |
+
if( width !== lastWidth ) { widthsSame = false; }
|
1427 |
+
}
|
1428 |
+
lastStyle = style;
|
1429 |
+
lastColor = color;
|
1430 |
+
lastWidth = width;
|
1431 |
+
|
1432 |
+
c[ ltr ] = PIE.getColor( color );
|
1433 |
+
|
1434 |
+
width = w[ ltr ] = PIE.getLength( s[ ltr ] === 'none' ? '0' : ( this.namedWidths[ width ] || width ) );
|
1435 |
+
if( width.pixels( this.targetElement ) > 0 ) {
|
1436 |
+
active = true;
|
1437 |
+
}
|
1438 |
+
}
|
1439 |
+
} );
|
1440 |
+
|
1441 |
+
return active ? {
|
1442 |
+
widths: w,
|
1443 |
+
styles: s,
|
1444 |
+
colors: c,
|
1445 |
+
widthsSame: widthsSame,
|
1446 |
+
colorsSame: colorsSame,
|
1447 |
+
stylesSame: stylesSame
|
1448 |
+
} : null;
|
1449 |
+
},
|
1450 |
+
|
1451 |
+
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1452 |
+
var el = this.targetElement,
|
1453 |
+
cs = el.currentStyle,
|
1454 |
+
css;
|
1455 |
+
|
1456 |
+
// Don't redraw or hide borders for cells in border-collapse:collapse tables
|
1457 |
+
if( !( el.tagName in PIE.tableCellTags && el.offsetParent.currentStyle.borderCollapse === 'collapse' ) ) {
|
1458 |
+
this.withActualBorder( function() {
|
1459 |
+
css = cs.borderWidth + '|' + cs.borderStyle + '|' + cs.borderColor;
|
1460 |
+
} );
|
1461 |
+
}
|
1462 |
+
return css;
|
1463 |
+
} ),
|
1464 |
+
|
1465 |
+
/**
|
1466 |
+
* Execute a function with the actual border styles (not overridden with runtimeStyle
|
1467 |
+
* properties set by the renderers) available via currentStyle.
|
1468 |
+
* @param fn
|
1469 |
+
*/
|
1470 |
+
withActualBorder: function( fn ) {
|
1471 |
+
var rs = this.targetElement.runtimeStyle,
|
1472 |
+
rsWidth = rs.borderWidth,
|
1473 |
+
rsColor = rs.borderColor,
|
1474 |
+
ret;
|
1475 |
+
|
1476 |
+
if( rsWidth ) rs.borderWidth = '';
|
1477 |
+
if( rsColor ) rs.borderColor = '';
|
1478 |
+
|
1479 |
+
ret = fn.call( this );
|
1480 |
+
|
1481 |
+
if( rsWidth ) rs.borderWidth = rsWidth;
|
1482 |
+
if( rsColor ) rs.borderColor = rsColor;
|
1483 |
+
|
1484 |
+
return ret;
|
1485 |
+
}
|
1486 |
+
|
1487 |
+
} );
|
1488 |
+
/**
|
1489 |
+
* Handles parsing, caching, and detecting changes to border-radius CSS
|
1490 |
+
* @constructor
|
1491 |
+
* @param {Element} el the target element
|
1492 |
+
*/
|
1493 |
+
(function() {
|
1494 |
+
|
1495 |
+
PIE.BorderRadiusStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1496 |
+
|
1497 |
+
cssProperty: 'border-radius',
|
1498 |
+
styleProperty: 'borderRadius',
|
1499 |
+
|
1500 |
+
parseCss: function( css ) {
|
1501 |
+
var p = null, x, y,
|
1502 |
+
tokenizer, token, length,
|
1503 |
+
hasNonZero = false;
|
1504 |
+
|
1505 |
+
if( css ) {
|
1506 |
+
tokenizer = new PIE.Tokenizer( css );
|
1507 |
+
|
1508 |
+
function collectLengths() {
|
1509 |
+
var arr = [], num;
|
1510 |
+
while( ( token = tokenizer.next() ) && token.isLengthOrPercent() ) {
|
1511 |
+
length = PIE.getLength( token.tokenValue );
|
1512 |
+
num = length.getNumber();
|
1513 |
+
if( num < 0 ) {
|
1514 |
+
return null;
|
1515 |
+
}
|
1516 |
+
if( num > 0 ) {
|
1517 |
+
hasNonZero = true;
|
1518 |
+
}
|
1519 |
+
arr.push( length );
|
1520 |
+
}
|
1521 |
+
return arr.length > 0 && arr.length < 5 ? {
|
1522 |
+
'tl': arr[0],
|
1523 |
+
'tr': arr[1] || arr[0],
|
1524 |
+
'br': arr[2] || arr[0],
|
1525 |
+
'bl': arr[3] || arr[1] || arr[0]
|
1526 |
+
} : null;
|
1527 |
+
}
|
1528 |
+
|
1529 |
+
// Grab the initial sequence of lengths
|
1530 |
+
if( x = collectLengths() ) {
|
1531 |
+
// See if there is a slash followed by more lengths, for the y-axis radii
|
1532 |
+
if( token ) {
|
1533 |
+
if( token.tokenType & PIE.Tokenizer.Type.OPERATOR && token.tokenValue === '/' ) {
|
1534 |
+
y = collectLengths();
|
1535 |
+
}
|
1536 |
+
} else {
|
1537 |
+
y = x;
|
1538 |
+
}
|
1539 |
+
|
1540 |
+
// Treat all-zero values the same as no value
|
1541 |
+
if( hasNonZero && x && y ) {
|
1542 |
+
p = { x: x, y : y };
|
1543 |
+
}
|
1544 |
+
}
|
1545 |
+
}
|
1546 |
+
|
1547 |
+
return p;
|
1548 |
+
}
|
1549 |
+
} );
|
1550 |
+
|
1551 |
+
var zero = PIE.getLength( '0' ),
|
1552 |
+
zeros = { 'tl': zero, 'tr': zero, 'br': zero, 'bl': zero };
|
1553 |
+
PIE.BorderRadiusStyleInfo.ALL_ZERO = { x: zeros, y: zeros };
|
1554 |
+
|
1555 |
+
})();/**
|
1556 |
+
* Handles parsing, caching, and detecting changes to border-image CSS
|
1557 |
+
* @constructor
|
1558 |
+
* @param {Element} el the target element
|
1559 |
+
*/
|
1560 |
+
PIE.BorderImageStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1561 |
+
|
1562 |
+
cssProperty: 'border-image',
|
1563 |
+
styleProperty: 'borderImage',
|
1564 |
+
|
1565 |
+
repeatIdents: { 'stretch':1, 'round':1, 'repeat':1, 'space':1 },
|
1566 |
+
|
1567 |
+
parseCss: function( css ) {
|
1568 |
+
var p = null, tokenizer, token, type, value,
|
1569 |
+
slices, widths, outsets,
|
1570 |
+
slashCount = 0, cs,
|
1571 |
+
Type = PIE.Tokenizer.Type,
|
1572 |
+
IDENT = Type.IDENT,
|
1573 |
+
NUMBER = Type.NUMBER,
|
1574 |
+
LENGTH = Type.LENGTH,
|
1575 |
+
PERCENT = Type.PERCENT;
|
1576 |
+
|
1577 |
+
if( css ) {
|
1578 |
+
tokenizer = new PIE.Tokenizer( css );
|
1579 |
+
p = {};
|
1580 |
+
|
1581 |
+
function isSlash( token ) {
|
1582 |
+
return token && ( token.tokenType & Type.OPERATOR ) && ( token.tokenValue === '/' );
|
1583 |
+
}
|
1584 |
+
|
1585 |
+
function isFillIdent( token ) {
|
1586 |
+
return token && ( token.tokenType & IDENT ) && ( token.tokenValue === 'fill' );
|
1587 |
+
}
|
1588 |
+
|
1589 |
+
function collectSlicesEtc() {
|
1590 |
+
slices = tokenizer.until( function( tok ) {
|
1591 |
+
return !( tok.tokenType & ( NUMBER | PERCENT ) );
|
1592 |
+
} );
|
1593 |
+
|
1594 |
+
if( isFillIdent( tokenizer.next() ) && !p.fill ) {
|
1595 |
+
p.fill = true;
|
1596 |
+
} else {
|
1597 |
+
tokenizer.prev();
|
1598 |
+
}
|
1599 |
+
|
1600 |
+
if( isSlash( tokenizer.next() ) ) {
|
1601 |
+
slashCount++;
|
1602 |
+
widths = tokenizer.until( function( tok ) {
|
1603 |
+
return !( token.tokenType & ( NUMBER | PERCENT | LENGTH ) ) && !( ( token.tokenType & IDENT ) && token.tokenValue === 'auto' );
|
1604 |
+
} );
|
1605 |
+
|
1606 |
+
if( isSlash( tokenizer.next() ) ) {
|
1607 |
+
slashCount++;
|
1608 |
+
outsets = tokenizer.until( function( tok ) {
|
1609 |
+
return !( token.tokenType & ( NUMBER | LENGTH ) );
|
1610 |
+
} );
|
1611 |
+
}
|
1612 |
+
} else {
|
1613 |
+
tokenizer.prev();
|
1614 |
+
}
|
1615 |
+
}
|
1616 |
+
|
1617 |
+
while( token = tokenizer.next() ) {
|
1618 |
+
type = token.tokenType;
|
1619 |
+
value = token.tokenValue;
|
1620 |
+
|
1621 |
+
// Numbers and/or 'fill' keyword: slice values. May be followed optionally by width values, followed optionally by outset values
|
1622 |
+
if( type & ( NUMBER | PERCENT ) && !slices ) {
|
1623 |
+
tokenizer.prev();
|
1624 |
+
collectSlicesEtc();
|
1625 |
+
}
|
1626 |
+
else if( isFillIdent( token ) && !p.fill ) {
|
1627 |
+
p.fill = true;
|
1628 |
+
collectSlicesEtc();
|
1629 |
+
}
|
1630 |
+
|
1631 |
+
// Idents: one or values for 'repeat'
|
1632 |
+
else if( ( type & IDENT ) && this.repeatIdents[value] && !p.repeat ) {
|
1633 |
+
p.repeat = { h: value };
|
1634 |
+
if( token = tokenizer.next() ) {
|
1635 |
+
if( ( token.tokenType & IDENT ) && this.repeatIdents[token.tokenValue] ) {
|
1636 |
+
p.repeat.v = token.tokenValue;
|
1637 |
+
} else {
|
1638 |
+
tokenizer.prev();
|
1639 |
+
}
|
1640 |
+
}
|
1641 |
+
}
|
1642 |
+
|
1643 |
+
// URL of the image
|
1644 |
+
else if( ( type & Type.URL ) && !p.src ) {
|
1645 |
+
p.src = value;
|
1646 |
+
}
|
1647 |
+
|
1648 |
+
// Found something unrecognized; exit.
|
1649 |
+
else {
|
1650 |
+
return null;
|
1651 |
+
}
|
1652 |
+
}
|
1653 |
+
|
1654 |
+
// Validate what we collected
|
1655 |
+
if( !p.src || !slices || slices.length < 1 || slices.length > 4 ||
|
1656 |
+
( widths && widths.length > 4 ) || ( slashCount === 1 && widths.length < 1 ) ||
|
1657 |
+
( outsets && outsets.length > 4 ) || ( slashCount === 2 && outsets.length < 1 ) ) {
|
1658 |
+
return null;
|
1659 |
+
}
|
1660 |
+
|
1661 |
+
// Fill in missing values
|
1662 |
+
if( !p.repeat ) {
|
1663 |
+
p.repeat = { h: 'stretch' };
|
1664 |
+
}
|
1665 |
+
if( !p.repeat.v ) {
|
1666 |
+
p.repeat.v = p.repeat.h;
|
1667 |
+
}
|
1668 |
+
|
1669 |
+
function distributeSides( tokens, convertFn ) {
|
1670 |
+
return {
|
1671 |
+
t: convertFn( tokens[0] ),
|
1672 |
+
r: convertFn( tokens[1] || tokens[0] ),
|
1673 |
+
b: convertFn( tokens[2] || tokens[0] ),
|
1674 |
+
l: convertFn( tokens[3] || tokens[1] || tokens[0] )
|
1675 |
+
};
|
1676 |
+
}
|
1677 |
+
|
1678 |
+
p.slice = distributeSides( slices, function( tok ) {
|
1679 |
+
return PIE.getLength( ( tok.tokenType & NUMBER ) ? tok.tokenValue + 'px' : tok.tokenValue );
|
1680 |
+
} );
|
1681 |
+
|
1682 |
+
p.width = widths && widths.length > 0 ?
|
1683 |
+
distributeSides( widths, function( tok ) {
|
1684 |
+
return tok.tokenType & ( LENGTH | PERCENT ) ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
|
1685 |
+
} ) :
|
1686 |
+
( cs = this.targetElement.currentStyle ) && {
|
1687 |
+
t: PIE.getLength( cs.borderTopWidth ),
|
1688 |
+
r: PIE.getLength( cs.borderRightWidth ),
|
1689 |
+
b: PIE.getLength( cs.borderBottomWidth ),
|
1690 |
+
l: PIE.getLength( cs.borderLeftWidth )
|
1691 |
+
};
|
1692 |
+
|
1693 |
+
p.outset = distributeSides( outsets || [ 0 ], function( tok ) {
|
1694 |
+
return tok.tokenType & LENGTH ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
|
1695 |
+
} );
|
1696 |
+
}
|
1697 |
+
|
1698 |
+
return p;
|
1699 |
+
}
|
1700 |
+
} );/**
|
1701 |
+
* Handles parsing, caching, and detecting changes to box-shadow CSS
|
1702 |
+
* @constructor
|
1703 |
+
* @param {Element} el the target element
|
1704 |
+
*/
|
1705 |
+
PIE.BoxShadowStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1706 |
+
|
1707 |
+
cssProperty: 'box-shadow',
|
1708 |
+
styleProperty: 'boxShadow',
|
1709 |
+
|
1710 |
+
parseCss: function( css ) {
|
1711 |
+
var props,
|
1712 |
+
getLength = PIE.getLength,
|
1713 |
+
Type = PIE.Tokenizer.Type,
|
1714 |
+
tokenizer;
|
1715 |
+
|
1716 |
+
if( css ) {
|
1717 |
+
tokenizer = new PIE.Tokenizer( css );
|
1718 |
+
props = { outset: [], inset: [] };
|
1719 |
+
|
1720 |
+
function parseItem() {
|
1721 |
+
var token, type, value, color, lengths, inset, len;
|
1722 |
+
|
1723 |
+
while( token = tokenizer.next() ) {
|
1724 |
+
value = token.tokenValue;
|
1725 |
+
type = token.tokenType;
|
1726 |
+
|
1727 |
+
if( type & Type.OPERATOR && value === ',' ) {
|
1728 |
+
break;
|
1729 |
+
}
|
1730 |
+
else if( token.isLength() && !lengths ) {
|
1731 |
+
tokenizer.prev();
|
1732 |
+
lengths = tokenizer.until( function( token ) {
|
1733 |
+
return !token.isLength();
|
1734 |
+
} );
|
1735 |
+
}
|
1736 |
+
else if( type & Type.COLOR && !color ) {
|
1737 |
+
color = value;
|
1738 |
+
}
|
1739 |
+
else if( type & Type.IDENT && value === 'inset' && !inset ) {
|
1740 |
+
inset = true;
|
1741 |
+
}
|
1742 |
+
else { //encountered an unrecognized token; fail.
|
1743 |
+
return false;
|
1744 |
+
}
|
1745 |
+
}
|
1746 |
+
|
1747 |
+
len = lengths && lengths.length;
|
1748 |
+
if( len > 1 && len < 5 ) {
|
1749 |
+
( inset ? props.inset : props.outset ).push( {
|
1750 |
+
xOffset: getLength( lengths[0].tokenValue ),
|
1751 |
+
yOffset: getLength( lengths[1].tokenValue ),
|
1752 |
+
blur: getLength( lengths[2] ? lengths[2].tokenValue : '0' ),
|
1753 |
+
spread: getLength( lengths[3] ? lengths[3].tokenValue : '0' ),
|
1754 |
+
color: PIE.getColor( color || 'currentColor' )
|
1755 |
+
} );
|
1756 |
+
return true;
|
1757 |
+
}
|
1758 |
+
return false;
|
1759 |
+
}
|
1760 |
+
|
1761 |
+
while( parseItem() ) {}
|
1762 |
+
}
|
1763 |
+
|
1764 |
+
return props && ( props.inset.length || props.outset.length ) ? props : null;
|
1765 |
+
}
|
1766 |
+
} );
|
1767 |
+
/**
|
1768 |
+
* Retrieves the state of the element's visibility and display
|
1769 |
+
* @constructor
|
1770 |
+
* @param {Element} el the target element
|
1771 |
+
*/
|
1772 |
+
PIE.VisibilityStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1773 |
+
|
1774 |
+
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1775 |
+
var cs = this.targetElement.currentStyle;
|
1776 |
+
return cs.visibility + '|' + cs.display;
|
1777 |
+
} ),
|
1778 |
+
|
1779 |
+
parseCss: function() {
|
1780 |
+
var el = this.targetElement,
|
1781 |
+
rs = el.runtimeStyle,
|
1782 |
+
cs = el.currentStyle,
|
1783 |
+
rsVis = rs.visibility,
|
1784 |
+
csVis;
|
1785 |
+
|
1786 |
+
rs.visibility = '';
|
1787 |
+
csVis = cs.visibility;
|
1788 |
+
rs.visibility = rsVis;
|
1789 |
+
|
1790 |
+
return {
|
1791 |
+
visible: csVis !== 'hidden',
|
1792 |
+
displayed: cs.display !== 'none'
|
1793 |
+
}
|
1794 |
+
},
|
1795 |
+
|
1796 |
+
/**
|
1797 |
+
* Always return false for isActive, since this property alone will not trigger
|
1798 |
+
* a renderer to do anything.
|
1799 |
+
*/
|
1800 |
+
isActive: function() {
|
1801 |
+
return false;
|
1802 |
+
}
|
1803 |
+
|
1804 |
+
} );
|
1805 |
+
PIE.RendererBase = {
|
1806 |
+
|
1807 |
+
/**
|
1808 |
+
* Create a new Renderer class, with the standard constructor, and augmented by
|
1809 |
+
* the RendererBase's members.
|
1810 |
+
* @param proto
|
1811 |
+
*/
|
1812 |
+
newRenderer: function( proto ) {
|
1813 |
+
function Renderer( el, boundsInfo, styleInfos, parent ) {
|
1814 |
+
this.targetElement = el;
|
1815 |
+
this.boundsInfo = boundsInfo;
|
1816 |
+
this.styleInfos = styleInfos;
|
1817 |
+
this.parent = parent;
|
1818 |
+
}
|
1819 |
+
PIE.Util.merge( Renderer.prototype, PIE.RendererBase, proto );
|
1820 |
+
return Renderer;
|
1821 |
+
},
|
1822 |
+
|
1823 |
+
/**
|
1824 |
+
* Flag indicating the element has already been positioned at least once.
|
1825 |
+
* @type {boolean}
|
1826 |
+
*/
|
1827 |
+
isPositioned: false,
|
1828 |
+
|
1829 |
+
/**
|
1830 |
+
* Determine if the renderer needs to be updated
|
1831 |
+
* @return {boolean}
|
1832 |
+
*/
|
1833 |
+
needsUpdate: function() {
|
1834 |
+
return false;
|
1835 |
+
},
|
1836 |
+
|
1837 |
+
/**
|
1838 |
+
* Tell the renderer to update based on modified properties
|
1839 |
+
*/
|
1840 |
+
updateProps: function() {
|
1841 |
+
this.destroy();
|
1842 |
+
if( this.isActive() ) {
|
1843 |
+
this.draw();
|
1844 |
+
}
|
1845 |
+
},
|
1846 |
+
|
1847 |
+
/**
|
1848 |
+
* Tell the renderer to update based on modified element position
|
1849 |
+
*/
|
1850 |
+
updatePos: function() {
|
1851 |
+
this.isPositioned = true;
|
1852 |
+
},
|
1853 |
+
|
1854 |
+
/**
|
1855 |
+
* Tell the renderer to update based on modified element dimensions
|
1856 |
+
*/
|
1857 |
+
updateSize: function() {
|
1858 |
+
if( this.isActive() ) {
|
1859 |
+
this.draw();
|
1860 |
+
} else {
|
1861 |
+
this.destroy();
|
1862 |
+
}
|
1863 |
+
},
|
1864 |
+
|
1865 |
+
|
1866 |
+
/**
|
1867 |
+
* Add a layer element, with the given z-order index, to the renderer's main box element. We can't use
|
1868 |
+
* z-index because that breaks when the root rendering box's z-index is 'auto' in IE8+ standards mode.
|
1869 |
+
* So instead we make sure they are inserted into the DOM in the correct order.
|
1870 |
+
* @param {number} index
|
1871 |
+
* @param {Element} el
|
1872 |
+
*/
|
1873 |
+
addLayer: function( index, el ) {
|
1874 |
+
this.removeLayer( index );
|
1875 |
+
for( var layers = this._layers || ( this._layers = [] ), i = index + 1, len = layers.length, layer; i < len; i++ ) {
|
1876 |
+
layer = layers[i];
|
1877 |
+
if( layer ) {
|
1878 |
+
break;
|
1879 |
+
}
|
1880 |
+
}
|
1881 |
+
layers[index] = el;
|
1882 |
+
this.getBox().insertBefore( el, layer || null );
|
1883 |
+
},
|
1884 |
+
|
1885 |
+
/**
|
1886 |
+
* Retrieve a layer element by its index, or null if not present
|
1887 |
+
* @param {number} index
|
1888 |
+
* @return {Element}
|
1889 |
+
*/
|
1890 |
+
getLayer: function( index ) {
|
1891 |
+
var layers = this._layers;
|
1892 |
+
return layers && layers[index] || null;
|
1893 |
+
},
|
1894 |
+
|
1895 |
+
/**
|
1896 |
+
* Remove a layer element by its index
|
1897 |
+
* @param {number} index
|
1898 |
+
*/
|
1899 |
+
removeLayer: function( index ) {
|
1900 |
+
var layer = this.getLayer( index ),
|
1901 |
+
box = this._box;
|
1902 |
+
if( layer && box ) {
|
1903 |
+
box.removeChild( layer );
|
1904 |
+
this._layers[index] = null;
|
1905 |
+
}
|
1906 |
+
},
|
1907 |
+
|
1908 |
+
|
1909 |
+
/**
|
1910 |
+
* Get a VML shape by name, creating it if necessary.
|
1911 |
+
* @param {string} name A name identifying the element
|
1912 |
+
* @param {string=} subElName If specified a subelement of the shape will be created with this tag name
|
1913 |
+
* @param {Element} parent The parent element for the shape; will be ignored if 'group' is specified
|
1914 |
+
* @param {number=} group If specified, an ordinal group for the shape. 1 or greater. Groups are rendered
|
1915 |
+
* using container elements in the correct order, to get correct z stacking without z-index.
|
1916 |
+
*/
|
1917 |
+
getShape: function( name, subElName, parent, group ) {
|
1918 |
+
var shapes = this._shapes || ( this._shapes = {} ),
|
1919 |
+
shape = shapes[ name ],
|
1920 |
+
s;
|
1921 |
+
|
1922 |
+
if( !shape ) {
|
1923 |
+
shape = shapes[ name ] = PIE.Util.createVmlElement( 'shape' );
|
1924 |
+
if( subElName ) {
|
1925 |
+
shape.appendChild( shape[ subElName ] = PIE.Util.createVmlElement( subElName ) );
|
1926 |
+
}
|
1927 |
+
|
1928 |
+
if( group ) {
|
1929 |
+
parent = this.getLayer( group );
|
1930 |
+
if( !parent ) {
|
1931 |
+
this.addLayer( group, doc.createElement( 'group' + group ) );
|
1932 |
+
parent = this.getLayer( group );
|
1933 |
+
}
|
1934 |
+
}
|
1935 |
+
|
1936 |
+
parent.appendChild( shape );
|
1937 |
+
|
1938 |
+
s = shape.style;
|
1939 |
+
s.position = 'absolute';
|
1940 |
+
s.left = s.top = 0;
|
1941 |
+
s['behavior'] = 'url(#default#VML)';
|
1942 |
+
}
|
1943 |
+
return shape;
|
1944 |
+
},
|
1945 |
+
|
1946 |
+
/**
|
1947 |
+
* Delete a named shape which was created by getShape(). Returns true if a shape with the
|
1948 |
+
* given name was found and deleted, or false if there was no shape of that name.
|
1949 |
+
* @param {string} name
|
1950 |
+
* @return {boolean}
|
1951 |
+
*/
|
1952 |
+
deleteShape: function( name ) {
|
1953 |
+
var shapes = this._shapes,
|
1954 |
+
shape = shapes && shapes[ name ];
|
1955 |
+
if( shape ) {
|
1956 |
+
shape.parentNode.removeChild( shape );
|
1957 |
+
delete shapes[ name ];
|
1958 |
+
}
|
1959 |
+
return !!shape;
|
1960 |
+
},
|
1961 |
+
|
1962 |
+
|
1963 |
+
/**
|
1964 |
+
* For a given set of border radius length/percentage values, convert them to concrete pixel
|
1965 |
+
* values based on the current size of the target element.
|
1966 |
+
* @param {Object} radii
|
1967 |
+
* @return {Object}
|
1968 |
+
*/
|
1969 |
+
getRadiiPixels: function( radii ) {
|
1970 |
+
var el = this.targetElement,
|
1971 |
+
bounds = this.boundsInfo.getBounds(),
|
1972 |
+
w = bounds.w,
|
1973 |
+
h = bounds.h,
|
1974 |
+
tlX, tlY, trX, trY, brX, brY, blX, blY, f;
|
1975 |
+
|
1976 |
+
tlX = radii.x['tl'].pixels( el, w );
|
1977 |
+
tlY = radii.y['tl'].pixels( el, h );
|
1978 |
+
trX = radii.x['tr'].pixels( el, w );
|
1979 |
+
trY = radii.y['tr'].pixels( el, h );
|
1980 |
+
brX = radii.x['br'].pixels( el, w );
|
1981 |
+
brY = radii.y['br'].pixels( el, h );
|
1982 |
+
blX = radii.x['bl'].pixels( el, w );
|
1983 |
+
blY = radii.y['bl'].pixels( el, h );
|
1984 |
+
|
1985 |
+
// If any corner ellipses overlap, reduce them all by the appropriate factor. This formula
|
1986 |
+
// is taken straight from the CSS3 Backgrounds and Borders spec.
|
1987 |
+
f = Math.min(
|
1988 |
+
w / ( tlX + trX ),
|
1989 |
+
h / ( trY + brY ),
|
1990 |
+
w / ( blX + brX ),
|
1991 |
+
h / ( tlY + blY )
|
1992 |
+
);
|
1993 |
+
if( f < 1 ) {
|
1994 |
+
tlX *= f;
|
1995 |
+
tlY *= f;
|
1996 |
+
trX *= f;
|
1997 |
+
trY *= f;
|
1998 |
+
brX *= f;
|
1999 |
+
brY *= f;
|
2000 |
+
blX *= f;
|
2001 |
+
blY *= f;
|
2002 |
+
}
|
2003 |
+
|
2004 |
+
return {
|
2005 |
+
x: {
|
2006 |
+
'tl': tlX,
|
2007 |
+
'tr': trX,
|
2008 |
+
'br': brX,
|
2009 |
+
'bl': blX
|
2010 |
+
},
|
2011 |
+
y: {
|
2012 |
+
'tl': tlY,
|
2013 |
+
'tr': trY,
|
2014 |
+
'br': brY,
|
2015 |
+
'bl': blY
|
2016 |
+
}
|
2017 |
+
}
|
2018 |
+
},
|
2019 |
+
|
2020 |
+
/**
|
2021 |
+
* Return the VML path string for the element's background box, with corners rounded.
|
2022 |
+
* @param {Object.<{t:number, r:number, b:number, l:number}>} shrink - if present, specifies number of
|
2023 |
+
* pixels to shrink the box path inward from the element's four sides.
|
2024 |
+
* @param {number=} mult If specified, all coordinates will be multiplied by this number
|
2025 |
+
* @param {Object=} radii If specified, this will be used for the corner radii instead of the properties
|
2026 |
+
* from this renderer's borderRadiusInfo object.
|
2027 |
+
* @return {string} the VML path
|
2028 |
+
*/
|
2029 |
+
getBoxPath: function( shrink, mult, radii ) {
|
2030 |
+
mult = mult || 1;
|
2031 |
+
|
2032 |
+
var r, str,
|
2033 |
+
bounds = this.boundsInfo.getBounds(),
|
2034 |
+
w = bounds.w * mult,
|
2035 |
+
h = bounds.h * mult,
|
2036 |
+
radInfo = this.styleInfos.borderRadiusInfo,
|
2037 |
+
floor = Math.floor, ceil = Math.ceil,
|
2038 |
+
shrinkT = shrink ? shrink.t * mult : 0,
|
2039 |
+
shrinkR = shrink ? shrink.r * mult : 0,
|
2040 |
+
shrinkB = shrink ? shrink.b * mult : 0,
|
2041 |
+
shrinkL = shrink ? shrink.l * mult : 0,
|
2042 |
+
tlX, tlY, trX, trY, brX, brY, blX, blY;
|
2043 |
+
|
2044 |
+
if( radii || radInfo.isActive() ) {
|
2045 |
+
r = this.getRadiiPixels( radii || radInfo.getProps() );
|
2046 |
+
|
2047 |
+
tlX = r.x['tl'] * mult;
|
2048 |
+
tlY = r.y['tl'] * mult;
|
2049 |
+
trX = r.x['tr'] * mult;
|
2050 |
+
trY = r.y['tr'] * mult;
|
2051 |
+
brX = r.x['br'] * mult;
|
2052 |
+
brY = r.y['br'] * mult;
|
2053 |
+
blX = r.x['bl'] * mult;
|
2054 |
+
blY = r.y['bl'] * mult;
|
2055 |
+
|
2056 |
+
str = 'm' + floor( shrinkL ) + ',' + floor( tlY ) +
|
2057 |
+
'qy' + floor( tlX ) + ',' + floor( shrinkT ) +
|
2058 |
+
'l' + ceil( w - trX ) + ',' + floor( shrinkT ) +
|
2059 |
+
'qx' + ceil( w - shrinkR ) + ',' + floor( trY ) +
|
2060 |
+
'l' + ceil( w - shrinkR ) + ',' + ceil( h - brY ) +
|
2061 |
+
'qy' + ceil( w - brX ) + ',' + ceil( h - shrinkB ) +
|
2062 |
+
'l' + floor( blX ) + ',' + ceil( h - shrinkB ) +
|
2063 |
+
'qx' + floor( shrinkL ) + ',' + ceil( h - blY ) + ' x e';
|
2064 |
+
} else {
|
2065 |
+
// simplified path for non-rounded box
|
2066 |
+
str = 'm' + floor( shrinkL ) + ',' + floor( shrinkT ) +
|
2067 |
+
'l' + ceil( w - shrinkR ) + ',' + floor( shrinkT ) +
|
2068 |
+
'l' + ceil( w - shrinkR ) + ',' + ceil( h - shrinkB ) +
|
2069 |
+
'l' + floor( shrinkL ) + ',' + ceil( h - shrinkB ) +
|
2070 |
+
'xe';
|
2071 |
+
}
|
2072 |
+
return str;
|
2073 |
+
},
|
2074 |
+
|
2075 |
+
|
2076 |
+
/**
|
2077 |
+
* Get the container element for the shapes, creating it if necessary.
|
2078 |
+
*/
|
2079 |
+
getBox: function() {
|
2080 |
+
var box = this.parent.getLayer( this.boxZIndex ), s;
|
2081 |
+
|
2082 |
+
if( !box ) {
|
2083 |
+
box = doc.createElement( this.boxName );
|
2084 |
+
s = box.style;
|
2085 |
+
s.position = 'absolute';
|
2086 |
+
s.top = s.left = 0;
|
2087 |
+
this.parent.addLayer( this.boxZIndex, box );
|
2088 |
+
}
|
2089 |
+
|
2090 |
+
return box;
|
2091 |
+
},
|
2092 |
+
|
2093 |
+
|
2094 |
+
/**
|
2095 |
+
* Destroy the rendered objects. This is a base implementation which handles common renderer
|
2096 |
+
* structures, but individual renderers may override as necessary.
|
2097 |
+
*/
|
2098 |
+
destroy: function() {
|
2099 |
+
this.parent.removeLayer( this.boxZIndex );
|
2100 |
+
delete this._shapes;
|
2101 |
+
delete this._layers;
|
2102 |
+
}
|
2103 |
+
};
|
2104 |
+
/**
|
2105 |
+
* Root renderer; creates the outermost container element and handles keeping it aligned
|
2106 |
+
* with the target element's size and position.
|
2107 |
+
* @param {Element} el The target element
|
2108 |
+
* @param {Object} styleInfos The StyleInfo objects
|
2109 |
+
*/
|
2110 |
+
PIE.RootRenderer = PIE.RendererBase.newRenderer( {
|
2111 |
+
|
2112 |
+
isActive: function() {
|
2113 |
+
var children = this.childRenderers;
|
2114 |
+
for( var i in children ) {
|
2115 |
+
if( children.hasOwnProperty( i ) && children[ i ].isActive() ) {
|
2116 |
+
return true;
|
2117 |
+
}
|
2118 |
+
}
|
2119 |
+
return false;
|
2120 |
+
},
|
2121 |
+
|
2122 |
+
needsUpdate: function() {
|
2123 |
+
return this.styleInfos.visibilityInfo.changed();
|
2124 |
+
},
|
2125 |
+
|
2126 |
+
updatePos: function() {
|
2127 |
+
if( this.isActive() ) {
|
2128 |
+
var el = this.getPositioningElement(),
|
2129 |
+
par = el,
|
2130 |
+
docEl,
|
2131 |
+
parRect,
|
2132 |
+
tgtCS = el.currentStyle,
|
2133 |
+
tgtPos = tgtCS.position,
|
2134 |
+
boxPos,
|
2135 |
+
s = this.getBox().style, cs,
|
2136 |
+
x = 0, y = 0,
|
2137 |
+
elBounds = this.boundsInfo.getBounds();
|
2138 |
+
|
2139 |
+
if( tgtPos === 'fixed' && PIE.ieVersion > 6 ) {
|
2140 |
+
x = elBounds.x;
|
2141 |
+
y = elBounds.y;
|
2142 |
+
boxPos = tgtPos;
|
2143 |
+
} else {
|
2144 |
+
// Get the element's offsets from its nearest positioned ancestor. Uses
|
2145 |
+
// getBoundingClientRect for accuracy and speed.
|
2146 |
+
do {
|
2147 |
+
par = par.offsetParent;
|
2148 |
+
} while( par && ( par.currentStyle.position === 'static' ) );
|
2149 |
+
if( par ) {
|
2150 |
+
parRect = par.getBoundingClientRect();
|
2151 |
+
cs = par.currentStyle;
|
2152 |
+
x = elBounds.x - parRect.left - ( parseFloat(cs.borderLeftWidth) || 0 );
|
2153 |
+
y = elBounds.y - parRect.top - ( parseFloat(cs.borderTopWidth) || 0 );
|
2154 |
+
} else {
|
2155 |
+
docEl = doc.documentElement;
|
2156 |
+
x = elBounds.x + docEl.scrollLeft - docEl.clientLeft;
|
2157 |
+
y = elBounds.y + docEl.scrollTop - docEl.clientTop;
|
2158 |
+
}
|
2159 |
+
boxPos = 'absolute';
|
2160 |
+
}
|
2161 |
+
|
2162 |
+
s.position = boxPos;
|
2163 |
+
s.left = x;
|
2164 |
+
s.top = y;
|
2165 |
+
s.zIndex = tgtPos === 'static' ? -1 : tgtCS.zIndex;
|
2166 |
+
this.isPositioned = true;
|
2167 |
+
}
|
2168 |
+
},
|
2169 |
+
|
2170 |
+
updateSize: function() {
|
2171 |
+
// NO-OP
|
2172 |
+
},
|
2173 |
+
|
2174 |
+
updateVisibility: function() {
|
2175 |
+
var vis = this.styleInfos.visibilityInfo.getProps();
|
2176 |
+
this.getBox().style.display = ( vis.visible && vis.displayed ) ? '' : 'none';
|
2177 |
+
},
|
2178 |
+
|
2179 |
+
updateProps: function() {
|
2180 |
+
if( this.isActive() ) {
|
2181 |
+
this.updateVisibility();
|
2182 |
+
} else {
|
2183 |
+
this.destroy();
|
2184 |
+
}
|
2185 |
+
},
|
2186 |
+
|
2187 |
+
getPositioningElement: function() {
|
2188 |
+
var el = this.targetElement;
|
2189 |
+
return el.tagName in PIE.tableCellTags ? el.offsetParent : el;
|
2190 |
+
},
|
2191 |
+
|
2192 |
+
getBox: function() {
|
2193 |
+
var box = this._box, el;
|
2194 |
+
if( !box ) {
|
2195 |
+
el = this.getPositioningElement();
|
2196 |
+
box = this._box = doc.createElement( 'css3-container' );
|
2197 |
+
box.style['direction'] = 'ltr'; //fix positioning bug in rtl environments
|
2198 |
+
|
2199 |
+
this.updateVisibility();
|
2200 |
+
|
2201 |
+
el.parentNode.insertBefore( box, el );
|
2202 |
+
}
|
2203 |
+
return box;
|
2204 |
+
},
|
2205 |
+
|
2206 |
+
destroy: function() {
|
2207 |
+
var box = this._box, par;
|
2208 |
+
if( box && ( par = box.parentNode ) ) {
|
2209 |
+
par.removeChild( box );
|
2210 |
+
}
|
2211 |
+
delete this._box;
|
2212 |
+
delete this._layers;
|
2213 |
+
}
|
2214 |
+
|
2215 |
+
} );
|
2216 |
+
/**
|
2217 |
+
* Renderer for element backgrounds.
|
2218 |
+
* @constructor
|
2219 |
+
* @param {Element} el The target element
|
2220 |
+
* @param {Object} styleInfos The StyleInfo objects
|
2221 |
+
* @param {PIE.RootRenderer} parent
|
2222 |
+
*/
|
2223 |
+
PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
|
2224 |
+
|
2225 |
+
boxZIndex: 2,
|
2226 |
+
boxName: 'background',
|
2227 |
+
|
2228 |
+
needsUpdate: function() {
|
2229 |
+
var si = this.styleInfos;
|
2230 |
+
return si.backgroundInfo.changed() || si.borderRadiusInfo.changed();
|
2231 |
+
},
|
2232 |
+
|
2233 |
+
isActive: function() {
|
2234 |
+
var si = this.styleInfos;
|
2235 |
+
return si.borderImageInfo.isActive() ||
|
2236 |
+
si.borderRadiusInfo.isActive() ||
|
2237 |
+
si.backgroundInfo.isActive() ||
|
2238 |
+
( si.boxShadowInfo.isActive() && si.boxShadowInfo.getProps().inset );
|
2239 |
+
},
|
2240 |
+
|
2241 |
+
/**
|
2242 |
+
* Draw the shapes
|
2243 |
+
*/
|
2244 |
+
draw: function() {
|
2245 |
+
var bounds = this.boundsInfo.getBounds();
|
2246 |
+
if( bounds.w && bounds.h ) {
|
2247 |
+
this.drawBgColor();
|
2248 |
+
this.drawBgImages();
|
2249 |
+
}
|
2250 |
+
},
|
2251 |
+
|
2252 |
+
/**
|
2253 |
+
* Draw the background color shape
|
2254 |
+
*/
|
2255 |
+
drawBgColor: function() {
|
2256 |
+
var props = this.styleInfos.backgroundInfo.getProps(),
|
2257 |
+
bounds = this.boundsInfo.getBounds(),
|
2258 |
+
el = this.targetElement,
|
2259 |
+
color = props && props.color,
|
2260 |
+
shape, w, h, s, alpha;
|
2261 |
+
|
2262 |
+
if( color && color.alpha() > 0 ) {
|
2263 |
+
this.hideBackground();
|
2264 |
+
|
2265 |
+
shape = this.getShape( 'bgColor', 'fill', this.getBox(), 1 );
|
2266 |
+
w = bounds.w;
|
2267 |
+
h = bounds.h;
|
2268 |
+
shape.stroked = false;
|
2269 |
+
shape.coordsize = w * 2 + ',' + h * 2;
|
2270 |
+
shape.coordorigin = '1,1';
|
2271 |
+
shape.path = this.getBoxPath( null, 2 );
|
2272 |
+
s = shape.style;
|
2273 |
+
s.width = w;
|
2274 |
+
s.height = h;
|
2275 |
+
shape.fill.color = color.colorValue( el );
|
2276 |
+
|
2277 |
+
alpha = color.alpha();
|
2278 |
+
if( alpha < 1 ) {
|
2279 |
+
shape.fill.opacity = alpha;
|
2280 |
+
}
|
2281 |
+
} else {
|
2282 |
+
this.deleteShape( 'bgColor' );
|
2283 |
+
}
|
2284 |
+
},
|
2285 |
+
|
2286 |
+
/**
|
2287 |
+
* Draw all the background image layers
|
2288 |
+
*/
|
2289 |
+
drawBgImages: function() {
|
2290 |
+
var props = this.styleInfos.backgroundInfo.getProps(),
|
2291 |
+
bounds = this.boundsInfo.getBounds(),
|
2292 |
+
images = props && props.bgImages,
|
2293 |
+
img, shape, w, h, s, i;
|
2294 |
+
|
2295 |
+
if( images ) {
|
2296 |
+
this.hideBackground();
|
2297 |
+
|
2298 |
+
w = bounds.w;
|
2299 |
+
h = bounds.h;
|
2300 |
+
|
2301 |
+
i = images.length;
|
2302 |
+
while( i-- ) {
|
2303 |
+
img = images[i];
|
2304 |
+
shape = this.getShape( 'bgImage' + i, 'fill', this.getBox(), 2 );
|
2305 |
+
|
2306 |
+
shape.stroked = false;
|
2307 |
+
shape.fill.type = 'tile';
|
2308 |
+
shape.fillcolor = 'none';
|
2309 |
+
shape.coordsize = w * 2 + ',' + h * 2;
|
2310 |
+
shape.coordorigin = '1,1';
|
2311 |
+
shape.path = this.getBoxPath( 0, 2 );
|
2312 |
+
s = shape.style;
|
2313 |
+
s.width = w;
|
2314 |
+
s.height = h;
|
2315 |
+
|
2316 |
+
if( img.imgType === 'linear-gradient' ) {
|
2317 |
+
this.addLinearGradient( shape, img );
|
2318 |
+
}
|
2319 |
+
else {
|
2320 |
+
shape.fill.src = img.imgUrl;
|
2321 |
+
this.positionBgImage( shape, i );
|
2322 |
+
}
|
2323 |
+
}
|
2324 |
+
}
|
2325 |
+
|
2326 |
+
// Delete any bgImage shapes previously created which weren't used above
|
2327 |
+
i = images ? images.length : 0;
|
2328 |
+
while( this.deleteShape( 'bgImage' + i++ ) ) {}
|
2329 |
+
},
|
2330 |
+
|
2331 |
+
|
2332 |
+
/**
|
2333 |
+
* Set the position and clipping of the background image for a layer
|
2334 |
+
* @param {Element} shape
|
2335 |
+
* @param {number} index
|
2336 |
+
*/
|
2337 |
+
positionBgImage: function( shape, index ) {
|
2338 |
+
PIE.Util.withImageSize( shape.fill.src, function( size ) {
|
2339 |
+
var fill = shape.fill,
|
2340 |
+
el = this.targetElement,
|
2341 |
+
bounds = this.boundsInfo.getBounds(),
|
2342 |
+
elW = bounds.w,
|
2343 |
+
elH = bounds.h,
|
2344 |
+
si = this.styleInfos,
|
2345 |
+
border = si.borderInfo.getProps(),
|
2346 |
+
bw = border && border.widths,
|
2347 |
+
bwT = bw ? bw['t'].pixels( el ) : 0,
|
2348 |
+
bwR = bw ? bw['r'].pixels( el ) : 0,
|
2349 |
+
bwB = bw ? bw['b'].pixels( el ) : 0,
|
2350 |
+
bwL = bw ? bw['l'].pixels( el ) : 0,
|
2351 |
+
bg = si.backgroundInfo.getProps().bgImages[ index ],
|
2352 |
+
bgPos = bg.bgPosition ? bg.bgPosition.coords( el, elW - size.w - bwL - bwR, elH - size.h - bwT - bwB ) : { x:0, y:0 },
|
2353 |
+
repeat = bg.imgRepeat,
|
2354 |
+
pxX, pxY,
|
2355 |
+
clipT = 0, clipL = 0,
|
2356 |
+
clipR = elW + 1, clipB = elH + 1, //make sure the default clip region is not inside the box (by a subpixel)
|
2357 |
+
clipAdjust = PIE.ieVersion === 8 ? 0 : 1; //prior to IE8 requires 1 extra pixel in the image clip region
|
2358 |
+
|
2359 |
+
// Positioning - find the pixel offset from the top/left and convert to a ratio
|
2360 |
+
// The position is shifted by half a pixel, to adjust for the half-pixel coordorigin shift which is
|
2361 |
+
// needed to fix antialiasing but makes the bg image fuzzy.
|
2362 |
+
pxX = Math.round( bgPos.x ) + bwL + 0.5;
|
2363 |
+
pxY = Math.round( bgPos.y ) + bwT + 0.5;
|
2364 |
+
fill.position = ( pxX / elW ) + ',' + ( pxY / elH );
|
2365 |
+
|
2366 |
+
// Repeating - clip the image shape
|
2367 |
+
if( repeat && repeat !== 'repeat' ) {
|
2368 |
+
if( repeat === 'repeat-x' || repeat === 'no-repeat' ) {
|
2369 |
+
clipT = pxY + 1;
|
2370 |
+
clipB = pxY + size.h + clipAdjust;
|
2371 |
+
}
|
2372 |
+
if( repeat === 'repeat-y' || repeat === 'no-repeat' ) {
|
2373 |
+
clipL = pxX + 1;
|
2374 |
+
clipR = pxX + size.w + clipAdjust;
|
2375 |
+
}
|
2376 |
+
shape.style.clip = 'rect(' + clipT + 'px,' + clipR + 'px,' + clipB + 'px,' + clipL + 'px)';
|
2377 |
+
}
|
2378 |
+
}, this );
|
2379 |
+
},
|
2380 |
+
|
2381 |
+
|
2382 |
+
/**
|
2383 |
+
* Draw the linear gradient for a gradient layer
|
2384 |
+
* @param {Element} shape
|
2385 |
+
* @param {Object} info The object holding the information about the gradient
|
2386 |
+
*/
|
2387 |
+
addLinearGradient: function( shape, info ) {
|
2388 |
+
var el = this.targetElement,
|
2389 |
+
bounds = this.boundsInfo.getBounds(),
|
2390 |
+
w = bounds.w,
|
2391 |
+
h = bounds.h,
|
2392 |
+
fill = shape.fill,
|
2393 |
+
angle = info.angle,
|
2394 |
+
startPos = info.gradientStart,
|
2395 |
+
stops = info.stops,
|
2396 |
+
stopCount = stops.length,
|
2397 |
+
PI = Math.PI,
|
2398 |
+
UNDEF,
|
2399 |
+
startX, startY,
|
2400 |
+
endX, endY,
|
2401 |
+
startCornerX, startCornerY,
|
2402 |
+
endCornerX, endCornerY,
|
2403 |
+
vmlAngle, vmlGradientLength, vmlColors,
|
2404 |
+
deltaX, deltaY, lineLength,
|
2405 |
+
stopPx, vmlOffsetPct,
|
2406 |
+
p, i, j, before, after;
|
2407 |
+
|
2408 |
+
/**
|
2409 |
+
* Find the point along a given line (defined by a starting point and an angle), at which
|
2410 |
+
* that line is intersected by a perpendicular line extending through another point.
|
2411 |
+
* @param x1 - x coord of the starting point
|
2412 |
+
* @param y1 - y coord of the starting point
|
2413 |
+
* @param angle - angle of the line extending from the starting point (in degrees)
|
2414 |
+
* @param x2 - x coord of point along the perpendicular line
|
2415 |
+
* @param y2 - y coord of point along the perpendicular line
|
2416 |
+
* @return [ x, y ]
|
2417 |
+
*/
|
2418 |
+
function perpendicularIntersect( x1, y1, angle, x2, y2 ) {
|
2419 |
+
// Handle straight vertical and horizontal angles, for performance and to avoid
|
2420 |
+
// divide-by-zero errors.
|
2421 |
+
if( angle === 0 || angle === 180 ) {
|
2422 |
+
return [ x2, y1 ];
|
2423 |
+
}
|
2424 |
+
else if( angle === 90 || angle === 270 ) {
|
2425 |
+
return [ x1, y2 ];
|
2426 |
+
}
|
2427 |
+
else {
|
2428 |
+
// General approach: determine the Ax+By=C formula for each line (the slope of the second
|
2429 |
+
// line is the negative inverse of the first) and then solve for where both formulas have
|
2430 |
+
// the same x/y values.
|
2431 |
+
var a1 = Math.tan( -angle * PI / 180 ),
|
2432 |
+
c1 = a1 * x1 - y1,
|
2433 |
+
a2 = -1 / a1,
|
2434 |
+
c2 = a2 * x2 - y2,
|
2435 |
+
d = a2 - a1,
|
2436 |
+
endX = ( c2 - c1 ) / d,
|
2437 |
+
endY = ( a1 * c2 - a2 * c1 ) / d;
|
2438 |
+
return [ endX, endY ];
|
2439 |
+
}
|
2440 |
+
}
|
2441 |
+
|
2442 |
+
// Find the "start" and "end" corners; these are the corners furthest along the gradient line.
|
2443 |
+
// This is used below to find the start/end positions of the CSS3 gradient-line, and also in finding
|
2444 |
+
// the total length of the VML rendered gradient-line corner to corner.
|
2445 |
+
function findCorners() {
|
2446 |
+
startCornerX = ( angle >= 90 && angle < 270 ) ? w : 0;
|
2447 |
+
startCornerY = angle < 180 ? h : 0;
|
2448 |
+
endCornerX = w - startCornerX;
|
2449 |
+
endCornerY = h - startCornerY;
|
2450 |
+
}
|
2451 |
+
|
2452 |
+
// Normalize the angle to a value between [0, 360)
|
2453 |
+
function normalizeAngle() {
|
2454 |
+
while( angle < 0 ) {
|
2455 |
+
angle += 360;
|
2456 |
+
}
|
2457 |
+
angle = angle % 360;
|
2458 |
+
}
|
2459 |
+
|
2460 |
+
// Find the distance between two points
|
2461 |
+
function distance( p1, p2 ) {
|
2462 |
+
var dx = p2[0] - p1[0],
|
2463 |
+
dy = p2[1] - p1[1];
|
2464 |
+
return Math.abs(
|
2465 |
+
dx === 0 ? dy :
|
2466 |
+
dy === 0 ? dx :
|
2467 |
+
Math.sqrt( dx * dx + dy * dy )
|
2468 |
+
);
|
2469 |
+
}
|
2470 |
+
|
2471 |
+
// Find the start and end points of the gradient
|
2472 |
+
if( startPos ) {
|
2473 |
+
startPos = startPos.coords( el, w, h );
|
2474 |
+
startX = startPos.x;
|
2475 |
+
startY = startPos.y;
|
2476 |
+
}
|
2477 |
+
if( angle ) {
|
2478 |
+
angle = angle.degrees();
|
2479 |
+
|
2480 |
+
normalizeAngle();
|
2481 |
+
findCorners();
|
2482 |
+
|
2483 |
+
// If no start position was specified, then choose a corner as the starting point.
|
2484 |
+
if( !startPos ) {
|
2485 |
+
startX = startCornerX;
|
2486 |
+
startY = startCornerY;
|
2487 |
+
}
|
2488 |
+
|
2489 |
+
// Find the end position by extending a perpendicular line from the gradient-line which
|
2490 |
+
// intersects the corner opposite from the starting corner.
|
2491 |
+
p = perpendicularIntersect( startX, startY, angle, endCornerX, endCornerY );
|
2492 |
+
endX = p[0];
|
2493 |
+
endY = p[1];
|
2494 |
+
}
|
2495 |
+
else if( startPos ) {
|
2496 |
+
// Start position but no angle specified: find the end point by rotating 180deg around the center
|
2497 |
+
endX = w - startX;
|
2498 |
+
endY = h - startY;
|
2499 |
+
}
|
2500 |
+
else {
|
2501 |
+
// Neither position nor angle specified; create vertical gradient from top to bottom
|
2502 |
+
startX = startY = endX = 0;
|
2503 |
+
endY = h;
|
2504 |
+
}
|
2505 |
+
deltaX = endX - startX;
|
2506 |
+
deltaY = endY - startY;
|
2507 |
+
|
2508 |
+
if( angle === UNDEF ) {
|
2509 |
+
// Get the angle based on the change in x/y from start to end point. Checks first for horizontal
|
2510 |
+
// or vertical angles so they get exact whole numbers rather than what atan2 gives.
|
2511 |
+
angle = ( !deltaX ? ( deltaY < 0 ? 90 : 270 ) :
|
2512 |
+
( !deltaY ? ( deltaX < 0 ? 180 : 0 ) :
|
2513 |
+
-Math.atan2( deltaY, deltaX ) / PI * 180
|
2514 |
+
)
|
2515 |
+
);
|
2516 |
+
normalizeAngle();
|
2517 |
+
findCorners();
|
2518 |
+
}
|
2519 |
+
|
2520 |
+
|
2521 |
+
// In VML land, the angle of the rendered gradient depends on the aspect ratio of the shape's
|
2522 |
+
// bounding box; for example specifying a 45 deg angle actually results in a gradient
|
2523 |
+
// drawn diagonally from one corner to its opposite corner, which will only appear to the
|
2524 |
+
// viewer as 45 degrees if the shape is equilateral. We adjust for this by taking the x/y deltas
|
2525 |
+
// between the start and end points, multiply one of them by the shape's aspect ratio,
|
2526 |
+
// and get their arctangent, resulting in an appropriate VML angle. If the angle is perfectly
|
2527 |
+
// horizontal or vertical then we don't need to do this conversion.
|
2528 |
+
vmlAngle = ( angle % 90 ) ? Math.atan2( deltaX * w / h, deltaY ) / PI * 180 : ( angle + 90 );
|
2529 |
+
|
2530 |
+
// VML angles are 180 degrees offset from CSS angles
|
2531 |
+
vmlAngle += 180;
|
2532 |
+
vmlAngle = vmlAngle % 360;
|
2533 |
+
|
2534 |
+
// Add all the stops to the VML 'colors' list, including the first and last stops.
|
2535 |
+
// For each, we find its pixel offset along the gradient-line; if the offset of a stop is less
|
2536 |
+
// than that of its predecessor we increase it to be equal. We then map that pixel offset to a
|
2537 |
+
// percentage along the VML gradient-line, which runs from shape corner to corner.
|
2538 |
+
lineLength = distance( [ startX, startY ], [ endX, endY ] );
|
2539 |
+
vmlGradientLength = distance( [ startCornerX, startCornerY ], perpendicularIntersect( startCornerX, startCornerY, angle, endCornerX, endCornerY ) );
|
2540 |
+
vmlColors = [];
|
2541 |
+
vmlOffsetPct = distance( [ startX, startY ], perpendicularIntersect( startX, startY, angle, startCornerX, startCornerY ) ) / vmlGradientLength * 100;
|
2542 |
+
|
2543 |
+
// Find the pixel offsets along the CSS3 gradient-line for each stop.
|
2544 |
+
stopPx = [];
|
2545 |
+
for( i = 0; i < stopCount; i++ ) {
|
2546 |
+
stopPx.push( stops[i].offset ? stops[i].offset.pixels( el, lineLength ) :
|
2547 |
+
i === 0 ? 0 : i === stopCount - 1 ? lineLength : null );
|
2548 |
+
}
|
2549 |
+
// Fill in gaps with evenly-spaced offsets
|
2550 |
+
for( i = 1; i < stopCount; i++ ) {
|
2551 |
+
if( stopPx[ i ] === null ) {
|
2552 |
+
before = stopPx[ i - 1 ];
|
2553 |
+
j = i;
|
2554 |
+
do {
|
2555 |
+
after = stopPx[ ++j ];
|
2556 |
+
} while( after === null );
|
2557 |
+
stopPx[ i ] = before + ( after - before ) / ( j - i + 1 );
|
2558 |
+
}
|
2559 |
+
// Make sure each stop's offset is no less than the one before it
|
2560 |
+
stopPx[ i ] = Math.max( stopPx[ i ], stopPx[ i - 1 ] );
|
2561 |
+
}
|
2562 |
+
|
2563 |
+
// Convert to percentage along the VML gradient line and add to the VML 'colors' value
|
2564 |
+
for( i = 0; i < stopCount; i++ ) {
|
2565 |
+
vmlColors.push(
|
2566 |
+
( vmlOffsetPct + ( stopPx[ i ] / vmlGradientLength * 100 ) ) + '% ' + stops[i].color.colorValue( el )
|
2567 |
+
);
|
2568 |
+
}
|
2569 |
+
|
2570 |
+
// Now, finally, we're ready to render the gradient fill. Set the start and end colors to
|
2571 |
+
// the first and last stop colors; this just sets outer bounds for the gradient.
|
2572 |
+
fill['angle'] = vmlAngle;
|
2573 |
+
fill['type'] = 'gradient';
|
2574 |
+
fill['method'] = 'sigma';
|
2575 |
+
fill['color'] = stops[0].color.colorValue( el );
|
2576 |
+
fill['color2'] = stops[stopCount - 1].color.colorValue( el );
|
2577 |
+
fill['colors'].value = vmlColors.join( ',' );
|
2578 |
+
},
|
2579 |
+
|
2580 |
+
|
2581 |
+
/**
|
2582 |
+
* Hide the actual background image and color of the element.
|
2583 |
+
*/
|
2584 |
+
hideBackground: function() {
|
2585 |
+
var rs = this.targetElement.runtimeStyle;
|
2586 |
+
rs.backgroundImage = 'url(about:blank)'; //ensures the background area reacts to mouse events
|
2587 |
+
rs.backgroundColor = 'transparent';
|
2588 |
+
},
|
2589 |
+
|
2590 |
+
destroy: function() {
|
2591 |
+
PIE.RendererBase.destroy.call( this );
|
2592 |
+
var rs = this.targetElement.runtimeStyle;
|
2593 |
+
rs.backgroundImage = rs.backgroundColor = '';
|
2594 |
+
}
|
2595 |
+
|
2596 |
+
} );
|
2597 |
+
/**
|
2598 |
+
* Renderer for element borders.
|
2599 |
+
* @constructor
|
2600 |
+
* @param {Element} el The target element
|
2601 |
+
* @param {Object} styleInfos The StyleInfo objects
|
2602 |
+
* @param {PIE.RootRenderer} parent
|
2603 |
+
*/
|
2604 |
+
PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
|
2605 |
+
|
2606 |
+
boxZIndex: 4,
|
2607 |
+
boxName: 'border',
|
2608 |
+
|
2609 |
+
/**
|
2610 |
+
* Lookup table of elements which cannot take custom children.
|
2611 |
+
*/
|
2612 |
+
childlessElements: {
|
2613 |
+
'TABLE':1, //can obviously have children but not custom ones
|
2614 |
+
'INPUT':1,
|
2615 |
+
'TEXTAREA':1,
|
2616 |
+
'SELECT':1,
|
2617 |
+
'OPTION':1,
|
2618 |
+
'IMG':1,
|
2619 |
+
'HR':1,
|
2620 |
+
'FIELDSET':1 //can take children but wrapping its children messes up its <legend>
|
2621 |
+
},
|
2622 |
+
|
2623 |
+
/**
|
2624 |
+
* Values of the type attribute for input elements displayed as buttons
|
2625 |
+
*/
|
2626 |
+
inputButtonTypes: {
|
2627 |
+
'submit':1,
|
2628 |
+
'button':1,
|
2629 |
+
'reset':1
|
2630 |
+
},
|
2631 |
+
|
2632 |
+
needsUpdate: function() {
|
2633 |
+
var si = this.styleInfos;
|
2634 |
+
return si.borderInfo.changed() || si.borderRadiusInfo.changed();
|
2635 |
+
},
|
2636 |
+
|
2637 |
+
isActive: function() {
|
2638 |
+
var si = this.styleInfos;
|
2639 |
+
return ( si.borderImageInfo.isActive() ||
|
2640 |
+
si.borderRadiusInfo.isActive() ||
|
2641 |
+
si.backgroundInfo.isActive() ) &&
|
2642 |
+
si.borderInfo.isActive(); //check BorderStyleInfo last because it's the most expensive
|
2643 |
+
},
|
2644 |
+
|
2645 |
+
/**
|
2646 |
+
* Draw the border shape(s)
|
2647 |
+
*/
|
2648 |
+
draw: function() {
|
2649 |
+
var el = this.targetElement,
|
2650 |
+
cs = el.currentStyle,
|
2651 |
+
props = this.styleInfos.borderInfo.getProps(),
|
2652 |
+
bounds = this.boundsInfo.getBounds(),
|
2653 |
+
w = bounds.w,
|
2654 |
+
h = bounds.h,
|
2655 |
+
side, shape, stroke, s,
|
2656 |
+
segments, seg, i, len;
|
2657 |
+
|
2658 |
+
if( props ) {
|
2659 |
+
this.hideBorder();
|
2660 |
+
|
2661 |
+
segments = this.getBorderSegments( 2 );
|
2662 |
+
for( i = 0, len = segments.length; i < len; i++) {
|
2663 |
+
seg = segments[i];
|
2664 |
+
shape = this.getShape( 'borderPiece' + i, seg.stroke ? 'stroke' : 'fill', this.getBox() );
|
2665 |
+
shape.coordsize = w * 2 + ',' + h * 2;
|
2666 |
+
shape.coordorigin = '1,1';
|
2667 |
+
shape.path = seg.path;
|
2668 |
+
s = shape.style;
|
2669 |
+
s.width = w;
|
2670 |
+
s.height = h;
|
2671 |
+
|
2672 |
+
shape.filled = !!seg.fill;
|
2673 |
+
shape.stroked = !!seg.stroke;
|
2674 |
+
if( seg.stroke ) {
|
2675 |
+
stroke = shape.stroke;
|
2676 |
+
stroke['weight'] = seg.weight + 'px';
|
2677 |
+
stroke.color = seg.color.colorValue( el );
|
2678 |
+
stroke['dashstyle'] = seg.stroke === 'dashed' ? '2 2' : seg.stroke === 'dotted' ? '1 1' : 'solid';
|
2679 |
+
stroke['linestyle'] = seg.stroke === 'double' && seg.weight > 2 ? 'ThinThin' : 'Single';
|
2680 |
+
} else {
|
2681 |
+
shape.fill.color = seg.fill.colorValue( el );
|
2682 |
+
}
|
2683 |
+
}
|
2684 |
+
|
2685 |
+
// remove any previously-created border shapes which didn't get used above
|
2686 |
+
while( this.deleteShape( 'borderPiece' + i++ ) ) {}
|
2687 |
+
}
|
2688 |
+
},
|
2689 |
+
|
2690 |
+
/**
|
2691 |
+
* Hide the actual border of the element. In IE7 and up we can just set its color to transparent;
|
2692 |
+
* however IE6 does not support transparent borders so we have to get tricky with it. Also, some elements
|
2693 |
+
* like form buttons require removing the border width altogether, so for those we increase the padding
|
2694 |
+
* by the border size.
|
2695 |
+
*/
|
2696 |
+
hideBorder: function() {
|
2697 |
+
var el = this.targetElement,
|
2698 |
+
cs = el.currentStyle,
|
2699 |
+
rs = el.runtimeStyle,
|
2700 |
+
tag = el.tagName,
|
2701 |
+
isIE6 = PIE.ieVersion === 6,
|
2702 |
+
sides, side, i;
|
2703 |
+
|
2704 |
+
if( ( isIE6 && tag in this.childlessElements ) || tag === 'BUTTON' ||
|
2705 |
+
( tag === 'INPUT' && el.type in this.inputButtonTypes ) ) {
|
2706 |
+
rs.borderWidth = '';
|
2707 |
+
sides = this.styleInfos.borderInfo.sides;
|
2708 |
+
for( i = sides.length; i--; ) {
|
2709 |
+
side = sides[ i ];
|
2710 |
+
rs[ 'padding' + side ] = '';
|
2711 |
+
rs[ 'padding' + side ] = ( PIE.getLength( cs[ 'padding' + side ] ) ).pixels( el ) +
|
2712 |
+
( PIE.getLength( cs[ 'border' + side + 'Width' ] ) ).pixels( el ) +
|
2713 |
+
( !PIE.ieVersion === 8 && i % 2 ? 1 : 0 ); //needs an extra horizontal pixel to counteract the extra "inner border" going away
|
2714 |
+
}
|
2715 |
+
rs.borderWidth = 0;
|
2716 |
+
}
|
2717 |
+
else if( isIE6 ) {
|
2718 |
+
// Wrap all the element's children in a custom element, set the element to visiblity:hidden,
|
2719 |
+
// and set the wrapper element to visiblity:visible. This hides the outer element's decorations
|
2720 |
+
// (background and border) but displays all the contents.
|
2721 |
+
// TODO find a better way to do this that doesn't mess up the DOM parent-child relationship,
|
2722 |
+
// as this can interfere with other author scripts which add/modify/delete children. Also, this
|
2723 |
+
// won't work for elements which cannot take children, e.g. input/button/textarea/img/etc. Look into
|
2724 |
+
// using a compositor filter or some other filter which masks the border.
|
2725 |
+
if( el.childNodes.length !== 1 || el.firstChild.tagName !== 'ie6-mask' ) {
|
2726 |
+
var cont = doc.createElement( 'ie6-mask' ),
|
2727 |
+
s = cont.style, child;
|
2728 |
+
s.visibility = 'visible';
|
2729 |
+
s.zoom = 1;
|
2730 |
+
while( child = el.firstChild ) {
|
2731 |
+
cont.appendChild( child );
|
2732 |
+
}
|
2733 |
+
el.appendChild( cont );
|
2734 |
+
rs.visibility = 'hidden';
|
2735 |
+
}
|
2736 |
+
}
|
2737 |
+
else {
|
2738 |
+
rs.borderColor = 'transparent';
|
2739 |
+
}
|
2740 |
+
},
|
2741 |
+
|
2742 |
+
|
2743 |
+
/**
|
2744 |
+
* Get the VML path definitions for the border segment(s).
|
2745 |
+
* @param {number=} mult If specified, all coordinates will be multiplied by this number
|
2746 |
+
* @return {Array.<string>}
|
2747 |
+
*/
|
2748 |
+
getBorderSegments: function( mult ) {
|
2749 |
+
var el = this.targetElement,
|
2750 |
+
bounds, elW, elH,
|
2751 |
+
borderInfo = this.styleInfos.borderInfo,
|
2752 |
+
segments = [],
|
2753 |
+
floor, ceil, wT, wR, wB, wL,
|
2754 |
+
round = Math.round,
|
2755 |
+
borderProps, radiusInfo, radii, widths, styles, colors;
|
2756 |
+
|
2757 |
+
if( borderInfo.isActive() ) {
|
2758 |
+
borderProps = borderInfo.getProps();
|
2759 |
+
|
2760 |
+
widths = borderProps.widths;
|
2761 |
+
styles = borderProps.styles;
|
2762 |
+
colors = borderProps.colors;
|
2763 |
+
|
2764 |
+
if( borderProps.widthsSame && borderProps.stylesSame && borderProps.colorsSame ) {
|
2765 |
+
if( colors['t'].alpha() > 0 ) {
|
2766 |
+
// shortcut for identical border on all sides - only need 1 stroked shape
|
2767 |
+
wT = widths['t'].pixels( el ); //thickness
|
2768 |
+
wR = wT / 2; //shrink
|
2769 |
+
segments.push( {
|
2770 |
+
path: this.getBoxPath( { t: wR, r: wR, b: wR, l: wR }, mult ),
|
2771 |
+
stroke: styles['t'],
|
2772 |
+
color: colors['t'],
|
2773 |
+
weight: wT
|
2774 |
+
} );
|
2775 |
+
}
|
2776 |
+
}
|
2777 |
+
else {
|
2778 |
+
mult = mult || 1;
|
2779 |
+
bounds = this.boundsInfo.getBounds();
|
2780 |
+
elW = bounds.w;
|
2781 |
+
elH = bounds.h;
|
2782 |
+
|
2783 |
+
wT = round( widths['t'].pixels( el ) );
|
2784 |
+
wR = round( widths['r'].pixels( el ) );
|
2785 |
+
wB = round( widths['b'].pixels( el ) );
|
2786 |
+
wL = round( widths['l'].pixels( el ) );
|
2787 |
+
var pxWidths = {
|
2788 |
+
't': wT,
|
2789 |
+
'r': wR,
|
2790 |
+
'b': wB,
|
2791 |
+
'l': wL
|
2792 |
+
};
|
2793 |
+
|
2794 |
+
radiusInfo = this.styleInfos.borderRadiusInfo;
|
2795 |
+
if( radiusInfo.isActive() ) {
|
2796 |
+
radii = this.getRadiiPixels( radiusInfo.getProps() );
|
2797 |
+
}
|
2798 |
+
|
2799 |
+
floor = Math.floor;
|
2800 |
+
ceil = Math.ceil;
|
2801 |
+
|
2802 |
+
function radius( xy, corner ) {
|
2803 |
+
return radii ? radii[ xy ][ corner ] : 0;
|
2804 |
+
}
|
2805 |
+
|
2806 |
+
function curve( corner, shrinkX, shrinkY, startAngle, ccw, doMove ) {
|
2807 |
+
var rx = radius( 'x', corner),
|
2808 |
+
ry = radius( 'y', corner),
|
2809 |
+
deg = 65535,
|
2810 |
+
isRight = corner.charAt( 1 ) === 'r',
|
2811 |
+
isBottom = corner.charAt( 0 ) === 'b';
|
2812 |
+
return ( rx > 0 && ry > 0 ) ?
|
2813 |
+
( doMove ? 'al' : 'ae' ) +
|
2814 |
+
( isRight ? ceil( elW - rx ) : floor( rx ) ) * mult + ',' + // center x
|
2815 |
+
( isBottom ? ceil( elH - ry ) : floor( ry ) ) * mult + ',' + // center y
|
2816 |
+
( floor( rx ) - shrinkX ) * mult + ',' + // width
|
2817 |
+
( floor( ry ) - shrinkY ) * mult + ',' + // height
|
2818 |
+
( startAngle * deg ) + ',' + // start angle
|
2819 |
+
( 45 * deg * ( ccw ? 1 : -1 ) // angle change
|
2820 |
+
) : (
|
2821 |
+
( doMove ? 'm' : 'l' ) +
|
2822 |
+
( isRight ? elW - shrinkX : shrinkX ) * mult + ',' +
|
2823 |
+
( isBottom ? elH - shrinkY : shrinkY ) * mult
|
2824 |
+
);
|
2825 |
+
}
|
2826 |
+
|
2827 |
+
function line( side, shrink, ccw, doMove ) {
|
2828 |
+
var
|
2829 |
+
start = (
|
2830 |
+
side === 't' ?
|
2831 |
+
floor( radius( 'x', 'tl') ) * mult + ',' + ceil( shrink ) * mult :
|
2832 |
+
side === 'r' ?
|
2833 |
+
ceil( elW - shrink ) * mult + ',' + floor( radius( 'y', 'tr') ) * mult :
|
2834 |
+
side === 'b' ?
|
2835 |
+
ceil( elW - radius( 'x', 'br') ) * mult + ',' + floor( elH - shrink ) * mult :
|
2836 |
+
// side === 'l' ?
|
2837 |
+
floor( shrink ) * mult + ',' + ceil( elH - radius( 'y', 'bl') ) * mult
|
2838 |
+
),
|
2839 |
+
end = (
|
2840 |
+
side === 't' ?
|
2841 |
+
ceil( elW - radius( 'x', 'tr') ) * mult + ',' + ceil( shrink ) * mult :
|
2842 |
+
side === 'r' ?
|
2843 |
+
ceil( elW - shrink ) * mult + ',' + ceil( elH - radius( 'y', 'br') ) * mult :
|
2844 |
+
side === 'b' ?
|
2845 |
+
floor( radius( 'x', 'bl') ) * mult + ',' + floor( elH - shrink ) * mult :
|
2846 |
+
// side === 'l' ?
|
2847 |
+
floor( shrink ) * mult + ',' + floor( radius( 'y', 'tl') ) * mult
|
2848 |
+
);
|
2849 |
+
return ccw ? ( doMove ? 'm' + end : '' ) + 'l' + start :
|
2850 |
+
( doMove ? 'm' + start : '' ) + 'l' + end;
|
2851 |
+
}
|
2852 |
+
|
2853 |
+
|
2854 |
+
function addSide( side, sideBefore, sideAfter, cornerBefore, cornerAfter, baseAngle ) {
|
2855 |
+
var vert = side === 'l' || side === 'r',
|
2856 |
+
sideW = pxWidths[ side ],
|
2857 |
+
beforeX, beforeY, afterX, afterY;
|
2858 |
+
|
2859 |
+
if( sideW > 0 && styles[ side ] !== 'none' && colors[ side ].alpha() > 0 ) {
|
2860 |
+
beforeX = pxWidths[ vert ? side : sideBefore ];
|
2861 |
+
beforeY = pxWidths[ vert ? sideBefore : side ];
|
2862 |
+
afterX = pxWidths[ vert ? side : sideAfter ];
|
2863 |
+
afterY = pxWidths[ vert ? sideAfter : side ];
|
2864 |
+
|
2865 |
+
if( styles[ side ] === 'dashed' || styles[ side ] === 'dotted' ) {
|
2866 |
+
segments.push( {
|
2867 |
+
path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) +
|
2868 |
+
curve( cornerBefore, 0, 0, baseAngle, 1, 0 ),
|
2869 |
+
fill: colors[ side ]
|
2870 |
+
} );
|
2871 |
+
segments.push( {
|
2872 |
+
path: line( side, sideW / 2, 0, 1 ),
|
2873 |
+
stroke: styles[ side ],
|
2874 |
+
weight: sideW,
|
2875 |
+
color: colors[ side ]
|
2876 |
+
} );
|
2877 |
+
segments.push( {
|
2878 |
+
path: curve( cornerAfter, afterX, afterY, baseAngle, 0, 1 ) +
|
2879 |
+
curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ),
|
2880 |
+
fill: colors[ side ]
|
2881 |
+
} );
|
2882 |
+
}
|
2883 |
+
else {
|
2884 |
+
segments.push( {
|
2885 |
+
path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) +
|
2886 |
+
line( side, sideW, 0, 0 ) +
|
2887 |
+
curve( cornerAfter, afterX, afterY, baseAngle, 0, 0 ) +
|
2888 |
+
|
2889 |
+
( styles[ side ] === 'double' && sideW > 2 ?
|
2890 |
+
curve( cornerAfter, afterX - floor( afterX / 3 ), afterY - floor( afterY / 3 ), baseAngle - 45, 1, 0 ) +
|
2891 |
+
line( side, ceil( sideW / 3 * 2 ), 1, 0 ) +
|
2892 |
+
curve( cornerBefore, beforeX - floor( beforeX / 3 ), beforeY - floor( beforeY / 3 ), baseAngle, 1, 0 ) +
|
2893 |
+
'x ' +
|
2894 |
+
curve( cornerBefore, floor( beforeX / 3 ), floor( beforeY / 3 ), baseAngle + 45, 0, 1 ) +
|
2895 |
+
line( side, floor( sideW / 3 ), 1, 0 ) +
|
2896 |
+
curve( cornerAfter, floor( afterX / 3 ), floor( afterY / 3 ), baseAngle, 0, 0 )
|
2897 |
+
: '' ) +
|
2898 |
+
|
2899 |
+
curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ) +
|
2900 |
+
line( side, 0, 1, 0 ) +
|
2901 |
+
curve( cornerBefore, 0, 0, baseAngle, 1, 0 ),
|
2902 |
+
fill: colors[ side ]
|
2903 |
+
} );
|
2904 |
+
}
|
2905 |
+
}
|
2906 |
+
}
|
2907 |
+
|
2908 |
+
addSide( 't', 'l', 'r', 'tl', 'tr', 90 );
|
2909 |
+
addSide( 'r', 't', 'b', 'tr', 'br', 0 );
|
2910 |
+
addSide( 'b', 'r', 'l', 'br', 'bl', -90 );
|
2911 |
+
addSide( 'l', 'b', 't', 'bl', 'tl', -180 );
|
2912 |
+
}
|
2913 |
+
}
|
2914 |
+
|
2915 |
+
return segments;
|
2916 |
+
},
|
2917 |
+
|
2918 |
+
destroy: function() {
|
2919 |
+
PIE.RendererBase.destroy.call( this );
|
2920 |
+
this.targetElement.runtimeStyle.borderColor = '';
|
2921 |
+
}
|
2922 |
+
|
2923 |
+
|
2924 |
+
} );
|
2925 |
+
/**
|
2926 |
+
* Renderer for border-image
|
2927 |
+
* @constructor
|
2928 |
+
* @param {Element} el The target element
|
2929 |
+
* @param {Object} styleInfos The StyleInfo objects
|
2930 |
+
* @param {PIE.RootRenderer} parent
|
2931 |
+
*/
|
2932 |
+
PIE.BorderImageRenderer = PIE.RendererBase.newRenderer( {
|
2933 |
+
|
2934 |
+
boxZIndex: 5,
|
2935 |
+
pieceNames: [ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl', 'c' ],
|
2936 |
+
|
2937 |
+
needsUpdate: function() {
|
2938 |
+
return this.styleInfos.borderImageInfo.changed();
|
2939 |
+
},
|
2940 |
+
|
2941 |
+
isActive: function() {
|
2942 |
+
return this.styleInfos.borderImageInfo.isActive();
|
2943 |
+
},
|
2944 |
+
|
2945 |
+
draw: function() {
|
2946 |
+
this.getBox(); //make sure pieces are created
|
2947 |
+
|
2948 |
+
var props = this.styleInfos.borderImageInfo.getProps(),
|
2949 |
+
bounds = this.boundsInfo.getBounds(),
|
2950 |
+
el = this.targetElement,
|
2951 |
+
pieces = this.pieces;
|
2952 |
+
|
2953 |
+
PIE.Util.withImageSize( props.src, function( imgSize ) {
|
2954 |
+
var elW = bounds.w,
|
2955 |
+
elH = bounds.h,
|
2956 |
+
|
2957 |
+
widths = props.width,
|
2958 |
+
widthT = widths.t.pixels( el ),
|
2959 |
+
widthR = widths.r.pixels( el ),
|
2960 |
+
widthB = widths.b.pixels( el ),
|
2961 |
+
widthL = widths.l.pixels( el ),
|
2962 |
+
slices = props.slice,
|
2963 |
+
sliceT = slices.t.pixels( el ),
|
2964 |
+
sliceR = slices.r.pixels( el ),
|
2965 |
+
sliceB = slices.b.pixels( el ),
|
2966 |
+
sliceL = slices.l.pixels( el );
|
2967 |
+
|
2968 |
+
// Piece positions and sizes
|
2969 |
+
function setSizeAndPos( piece, w, h, x, y ) {
|
2970 |
+
var s = pieces[piece].style,
|
2971 |
+
max = Math.max;
|
2972 |
+
s.width = max(w, 0);
|
2973 |
+
s.height = max(h, 0);
|
2974 |
+
s.left = x;
|
2975 |
+
s.top = y;
|
2976 |
+
}
|
2977 |
+
setSizeAndPos( 'tl', widthL, widthT, 0, 0 );
|
2978 |
+
setSizeAndPos( 't', elW - widthL - widthR, widthT, widthL, 0 );
|
2979 |
+
setSizeAndPos( 'tr', widthR, widthT, elW - widthR, 0 );
|
2980 |
+
setSizeAndPos( 'r', widthR, elH - widthT - widthB, elW - widthR, widthT );
|
2981 |
+
setSizeAndPos( 'br', widthR, widthB, elW - widthR, elH - widthB );
|
2982 |
+
setSizeAndPos( 'b', elW - widthL - widthR, widthB, widthL, elH - widthB );
|
2983 |
+
setSizeAndPos( 'bl', widthL, widthB, 0, elH - widthB );
|
2984 |
+
setSizeAndPos( 'l', widthL, elH - widthT - widthB, 0, widthT );
|
2985 |
+
setSizeAndPos( 'c', elW - widthL - widthR, elH - widthT - widthB, widthL, widthT );
|
2986 |
+
|
2987 |
+
|
2988 |
+
// image croppings
|
2989 |
+
function setCrops( sides, crop, val ) {
|
2990 |
+
for( var i=0, len=sides.length; i < len; i++ ) {
|
2991 |
+
pieces[ sides[i] ]['imagedata'][ crop ] = val;
|
2992 |
+
}
|
2993 |
+
}
|
2994 |
+
|
2995 |
+
// corners
|
2996 |
+
setCrops( [ 'tl', 't', 'tr' ], 'cropBottom', ( imgSize.h - sliceT ) / imgSize.h );
|
2997 |
+
setCrops( [ 'tl', 'l', 'bl' ], 'cropRight', ( imgSize.w - sliceL ) / imgSize.w );
|
2998 |
+
setCrops( [ 'bl', 'b', 'br' ], 'cropTop', ( imgSize.h - sliceB ) / imgSize.h );
|
2999 |
+
setCrops( [ 'tr', 'r', 'br' ], 'cropLeft', ( imgSize.w - sliceR ) / imgSize.w );
|
3000 |
+
|
3001 |
+
// edges and center
|
3002 |
+
if( props.repeat.v === 'stretch' ) {
|
3003 |
+
setCrops( [ 'l', 'r', 'c' ], 'cropTop', sliceT / imgSize.h );
|
3004 |
+
setCrops( [ 'l', 'r', 'c' ], 'cropBottom', sliceB / imgSize.h );
|
3005 |
+
}
|
3006 |
+
if( props.repeat.h === 'stretch' ) {
|
3007 |
+
setCrops( [ 't', 'b', 'c' ], 'cropLeft', sliceL / imgSize.w );
|
3008 |
+
setCrops( [ 't', 'b', 'c' ], 'cropRight', sliceR / imgSize.w );
|
3009 |
+
}
|
3010 |
+
|
3011 |
+
// center fill
|
3012 |
+
pieces['c'].style.display = props.fill ? '' : 'none';
|
3013 |
+
}, this );
|
3014 |
+
},
|
3015 |
+
|
3016 |
+
getBox: function() {
|
3017 |
+
var box = this.parent.getLayer( this.boxZIndex ),
|
3018 |
+
s, piece, i,
|
3019 |
+
pieceNames = this.pieceNames,
|
3020 |
+
len = pieceNames.length;
|
3021 |
+
|
3022 |
+
if( !box ) {
|
3023 |
+
box = doc.createElement( 'border-image' );
|
3024 |
+
s = box.style;
|
3025 |
+
s.position = 'absolute';
|
3026 |
+
|
3027 |
+
this.pieces = {};
|
3028 |
+
|
3029 |
+
for( i = 0; i < len; i++ ) {
|
3030 |
+
piece = this.pieces[ pieceNames[i] ] = PIE.Util.createVmlElement( 'rect' );
|
3031 |
+
piece.appendChild( PIE.Util.createVmlElement( 'imagedata' ) );
|
3032 |
+
s = piece.style;
|
3033 |
+
s['behavior'] = 'url(#default#VML)';
|
3034 |
+
s.position = "absolute";
|
3035 |
+
s.top = s.left = 0;
|
3036 |
+
piece['imagedata'].src = this.styleInfos.borderImageInfo.getProps().src;
|
3037 |
+
piece.stroked = false;
|
3038 |
+
piece.filled = false;
|
3039 |
+
box.appendChild( piece );
|
3040 |
+
}
|
3041 |
+
|
3042 |
+
this.parent.addLayer( this.boxZIndex, box );
|
3043 |
+
}
|
3044 |
+
|
3045 |
+
return box;
|
3046 |
+
}
|
3047 |
+
|
3048 |
+
} );
|
3049 |
+
/**
|
3050 |
+
* Renderer for outset box-shadows
|
3051 |
+
* @constructor
|
3052 |
+
* @param {Element} el The target element
|
3053 |
+
* @param {Object} styleInfos The StyleInfo objects
|
3054 |
+
* @param {PIE.RootRenderer} parent
|
3055 |
+
*/
|
3056 |
+
PIE.BoxShadowOutsetRenderer = PIE.RendererBase.newRenderer( {
|
3057 |
+
|
3058 |
+
boxZIndex: 1,
|
3059 |
+
boxName: 'outset-box-shadow',
|
3060 |
+
|
3061 |
+
needsUpdate: function() {
|
3062 |
+
var si = this.styleInfos;
|
3063 |
+
return si.boxShadowInfo.changed() || si.borderRadiusInfo.changed();
|
3064 |
+
},
|
3065 |
+
|
3066 |
+
isActive: function() {
|
3067 |
+
var boxShadowInfo = this.styleInfos.boxShadowInfo;
|
3068 |
+
return boxShadowInfo.isActive() && boxShadowInfo.getProps().outset[0];
|
3069 |
+
},
|
3070 |
+
|
3071 |
+
draw: function() {
|
3072 |
+
var me = this,
|
3073 |
+
el = this.targetElement,
|
3074 |
+
box = this.getBox(),
|
3075 |
+
styleInfos = this.styleInfos,
|
3076 |
+
shadowInfos = styleInfos.boxShadowInfo.getProps().outset,
|
3077 |
+
radii = styleInfos.borderRadiusInfo.getProps(),
|
3078 |
+
len = shadowInfos.length,
|
3079 |
+
i = len, j,
|
3080 |
+
bounds = this.boundsInfo.getBounds(),
|
3081 |
+
w = bounds.w,
|
3082 |
+
h = bounds.h,
|
3083 |
+
clipAdjust = PIE.ieVersion === 8 ? 1 : 0, //workaround for IE8 bug where VML leaks out top/left of clip region by 1px
|
3084 |
+
corners = [ 'tl', 'tr', 'br', 'bl' ], corner,
|
3085 |
+
shadowInfo, shape, fill, ss, xOff, yOff, spread, blur, shrink, color, alpha, path,
|
3086 |
+
totalW, totalH, focusX, focusY, isBottom, isRight;
|
3087 |
+
|
3088 |
+
|
3089 |
+
function getShadowShape( index, corner, xOff, yOff, color, blur, path ) {
|
3090 |
+
var shape = me.getShape( 'shadow' + index + corner, 'fill', box, len - index ),
|
3091 |
+
fill = shape.fill;
|
3092 |
+
|
3093 |
+
// Position and size
|
3094 |
+
shape['coordsize'] = w * 2 + ',' + h * 2;
|
3095 |
+
shape['coordorigin'] = '1,1';
|
3096 |
+
|
3097 |
+
// Color and opacity
|
3098 |
+
shape['stroked'] = false;
|
3099 |
+
shape['filled'] = true;
|
3100 |
+
fill.color = color.colorValue( el );
|
3101 |
+
if( blur ) {
|
3102 |
+
fill['type'] = 'gradienttitle'; //makes the VML gradient follow the shape's outline - hooray for undocumented features?!?!
|
3103 |
+
fill['color2'] = fill.color;
|
3104 |
+
fill['opacity'] = 0;
|
3105 |
+
}
|
3106 |
+
|
3107 |
+
// Path
|
3108 |
+
shape.path = path;
|
3109 |
+
|
3110 |
+
// This needs to go last for some reason, to prevent rendering at incorrect size
|
3111 |
+
ss = shape.style;
|
3112 |
+
ss.left = xOff;
|
3113 |
+
ss.top = yOff;
|
3114 |
+
ss.width = w;
|
3115 |
+
ss.height = h;
|
3116 |
+
|
3117 |
+
return shape;
|
3118 |
+
}
|
3119 |
+
|
3120 |
+
|
3121 |
+
while( i-- ) {
|
3122 |
+
shadowInfo = shadowInfos[ i ];
|
3123 |
+
xOff = shadowInfo.xOffset.pixels( el );
|
3124 |
+
yOff = shadowInfo.yOffset.pixels( el );
|
3125 |
+
spread = shadowInfo.spread.pixels( el ),
|
3126 |
+
blur = shadowInfo.blur.pixels( el );
|
3127 |
+
color = shadowInfo.color;
|
3128 |
+
// Shape path
|
3129 |
+
shrink = -spread - blur;
|
3130 |
+
if( !radii && blur ) {
|
3131 |
+
// If blurring, use a non-null border radius info object so that getBoxPath will
|
3132 |
+
// round the corners of the expanded shadow shape rather than squaring them off.
|
3133 |
+
radii = PIE.BorderRadiusStyleInfo.ALL_ZERO;
|
3134 |
+
}
|
3135 |
+
path = this.getBoxPath( { t: shrink, r: shrink, b: shrink, l: shrink }, 2, radii );
|
3136 |
+
|
3137 |
+
if( blur ) {
|
3138 |
+
totalW = ( spread + blur ) * 2 + w;
|
3139 |
+
totalH = ( spread + blur ) * 2 + h;
|
3140 |
+
focusX = blur * 2 / totalW;
|
3141 |
+
focusY = blur * 2 / totalH;
|
3142 |
+
if( blur - spread > w / 2 || blur - spread > h / 2 ) {
|
3143 |
+
// If the blur is larger than half the element's narrowest dimension, we cannot do
|
3144 |
+
// this with a single shape gradient, because its focussize would have to be less than
|
3145 |
+
// zero which results in ugly artifacts. Instead we create four shapes, each with its
|
3146 |
+
// gradient focus past center, and then clip them so each only shows the quadrant
|
3147 |
+
// opposite the focus.
|
3148 |
+
for( j = 4; j--; ) {
|
3149 |
+
corner = corners[j];
|
3150 |
+
isBottom = corner.charAt( 0 ) === 'b';
|
3151 |
+
isRight = corner.charAt( 1 ) === 'r';
|
3152 |
+
shape = getShadowShape( i, corner, xOff, yOff, color, blur, path );
|
3153 |
+
fill = shape.fill;
|
3154 |
+
fill['focusposition'] = ( isRight ? 1 - focusX : focusX ) + ',' +
|
3155 |
+
( isBottom ? 1 - focusY : focusY );
|
3156 |
+
fill['focussize'] = '0,0';
|
3157 |
+
|
3158 |
+
// Clip to show only the appropriate quadrant. Add 1px to the top/left clip values
|
3159 |
+
// in IE8 to prevent a bug where IE8 displays one pixel outside the clip region.
|
3160 |
+
shape.style.clip = 'rect(' + ( ( isBottom ? totalH / 2 : 0 ) + clipAdjust ) + 'px,' +
|
3161 |
+
( isRight ? totalW : totalW / 2 ) + 'px,' +
|
3162 |
+
( isBottom ? totalH : totalH / 2 ) + 'px,' +
|
3163 |
+
( ( isRight ? totalW / 2 : 0 ) + clipAdjust ) + 'px)';
|
3164 |
+
}
|
3165 |
+
} else {
|
3166 |
+
// TODO delete old quadrant shapes if resizing expands past the barrier
|
3167 |
+
shape = getShadowShape( i, '', xOff, yOff, color, blur, path );
|
3168 |
+
fill = shape.fill;
|
3169 |
+
fill['focusposition'] = focusX + ',' + focusY;
|
3170 |
+
fill['focussize'] = ( 1 - focusX * 2 ) + ',' + ( 1 - focusY * 2 );
|
3171 |
+
}
|
3172 |
+
} else {
|
3173 |
+
shape = getShadowShape( i, '', xOff, yOff, color, blur, path );
|
3174 |
+
alpha = color.alpha();
|
3175 |
+
if( alpha < 1 ) {
|
3176 |
+
// shape.style.filter = 'alpha(opacity=' + ( alpha * 100 ) + ')';
|
3177 |
+
// ss.filter = 'progid:DXImageTransform.Microsoft.BasicImage(opacity=' + ( alpha ) + ')';
|
3178 |
+
shape.fill.opacity = alpha;
|
3179 |
+
}
|
3180 |
+
}
|
3181 |
+
}
|
3182 |
+
}
|
3183 |
+
|
3184 |
+
} );
|
3185 |
+
/**
|
3186 |
+
* Renderer for re-rendering img elements using VML. Kicks in if the img has
|
3187 |
+
* a border-radius applied, or if the -pie-png-fix flag is set.
|
3188 |
+
* @constructor
|
3189 |
+
* @param {Element} el The target element
|
3190 |
+
* @param {Object} styleInfos The StyleInfo objects
|
3191 |
+
* @param {PIE.RootRenderer} parent
|
3192 |
+
*/
|
3193 |
+
PIE.ImgRenderer = PIE.RendererBase.newRenderer( {
|
3194 |
+
|
3195 |
+
boxZIndex: 6,
|
3196 |
+
boxName: 'imgEl',
|
3197 |
+
|
3198 |
+
needsUpdate: function() {
|
3199 |
+
var si = this.styleInfos;
|
3200 |
+
return this.targetElement.src !== this._lastSrc || si.borderRadiusInfo.changed();
|
3201 |
+
},
|
3202 |
+
|
3203 |
+
isActive: function() {
|
3204 |
+
var si = this.styleInfos;
|
3205 |
+
return si.borderRadiusInfo.isActive() || si.backgroundInfo.isPngFix();
|
3206 |
+
},
|
3207 |
+
|
3208 |
+
draw: function() {
|
3209 |
+
this._lastSrc = src;
|
3210 |
+
this.hideActualImg();
|
3211 |
+
|
3212 |
+
var shape = this.getShape( 'img', 'fill', this.getBox() ),
|
3213 |
+
fill = shape.fill,
|
3214 |
+
bounds = this.boundsInfo.getBounds(),
|
3215 |
+
w = bounds.w,
|
3216 |
+
h = bounds.h,
|
3217 |
+
borderProps = this.styleInfos.borderInfo.getProps(),
|
3218 |
+
borderWidths = borderProps && borderProps.widths,
|
3219 |
+
el = this.targetElement,
|
3220 |
+
src = el.src,
|
3221 |
+
round = Math.round,
|
3222 |
+
s;
|
3223 |
+
|
3224 |
+
shape.stroked = false;
|
3225 |
+
fill.type = 'frame';
|
3226 |
+
fill.src = src;
|
3227 |
+
fill.position = (w ? 0.5 / w : 0) + ',' + (h ? 0.5 / h : 0);
|
3228 |
+
shape.coordsize = w * 2 + ',' + h * 2;
|
3229 |
+
shape.coordorigin = '1,1';
|
3230 |
+
shape.path = this.getBoxPath( borderWidths ? {
|
3231 |
+
t: round( borderWidths['t'].pixels( el ) ),
|
3232 |
+
r: round( borderWidths['r'].pixels( el ) ),
|
3233 |
+
b: round( borderWidths['b'].pixels( el ) ),
|
3234 |
+
l: round( borderWidths['l'].pixels( el ) )
|
3235 |
+
} : 0, 2 );
|
3236 |
+
s = shape.style;
|
3237 |
+
s.width = w;
|
3238 |
+
s.height = h;
|
3239 |
+
},
|
3240 |
+
|
3241 |
+
hideActualImg: function() {
|
3242 |
+
this.targetElement.runtimeStyle.filter = 'alpha(opacity=0)';
|
3243 |
+
},
|
3244 |
+
|
3245 |
+
destroy: function() {
|
3246 |
+
PIE.RendererBase.destroy.call( this );
|
3247 |
+
this.targetElement.runtimeStyle.filter = '';
|
3248 |
+
}
|
3249 |
+
|
3250 |
+
} );
|
3251 |
+
|
3252 |
+
PIE.Element = (function() {
|
3253 |
+
|
3254 |
+
var wrappers = {},
|
3255 |
+
lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
|
3256 |
+
pollCssProp = PIE.CSS_PREFIX + 'poll',
|
3257 |
+
hoverClass = ' ' + PIE.CLASS_PREFIX + 'hover',
|
3258 |
+
hoverClassRE = new RegExp( '\\b' + PIE.CLASS_PREFIX + 'hover\\b', 'g' ),
|
3259 |
+
ignorePropertyNames = { 'background':1, 'bgColor':1, 'display': 1 };
|
3260 |
+
|
3261 |
+
|
3262 |
+
function addListener( el, type, handler ) {
|
3263 |
+
el.attachEvent( type, handler );
|
3264 |
+
}
|
3265 |
+
|
3266 |
+
function removeListener( el, type, handler ) {
|
3267 |
+
el.detachEvent( type, handler );
|
3268 |
+
}
|
3269 |
+
|
3270 |
+
|
3271 |
+
function Element( el ) {
|
3272 |
+
var renderers,
|
3273 |
+
boundsInfo = new PIE.BoundsInfo( el ),
|
3274 |
+
styleInfos,
|
3275 |
+
styleInfosArr,
|
3276 |
+
ancestors,
|
3277 |
+
initializing,
|
3278 |
+
initialized,
|
3279 |
+
eventsAttached,
|
3280 |
+
delayed,
|
3281 |
+
destroyed,
|
3282 |
+
poll;
|
3283 |
+
|
3284 |
+
/**
|
3285 |
+
* Initialize PIE for this element.
|
3286 |
+
*/
|
3287 |
+
function init() {
|
3288 |
+
if( !initialized ) {
|
3289 |
+
var docEl,
|
3290 |
+
bounds,
|
3291 |
+
cs = el.currentStyle,
|
3292 |
+
lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
|
3293 |
+
rootRenderer;
|
3294 |
+
|
3295 |
+
// Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
|
3296 |
+
poll = cs.getAttribute( pollCssProp );
|
3297 |
+
poll = PIE.ieDocMode === 8 ? poll !== 'false' : poll === 'true';
|
3298 |
+
|
3299 |
+
// Force layout so move/resize events will fire. Set this as soon as possible to avoid layout changes
|
3300 |
+
// after load, but make sure it only gets called the first time through to avoid recursive calls to init().
|
3301 |
+
if( !initializing ) {
|
3302 |
+
initializing = 1;
|
3303 |
+
el.runtimeStyle.zoom = 1;
|
3304 |
+
initFirstChildPseudoClass();
|
3305 |
+
}
|
3306 |
+
|
3307 |
+
boundsInfo.lock();
|
3308 |
+
|
3309 |
+
// If the -pie-lazy-init:true flag is set, check if the element is outside the viewport and if so, delay initialization
|
3310 |
+
if( lazy && ( bounds = boundsInfo.getBounds() ) && ( docEl = doc.documentElement || doc.body ) &&
|
3311 |
+
( bounds.y > docEl.clientHeight || bounds.x > docEl.clientWidth || bounds.y + bounds.h < 0 || bounds.x + bounds.w < 0 ) ) {
|
3312 |
+
if( !delayed ) {
|
3313 |
+
delayed = 1;
|
3314 |
+
PIE.OnScroll.observe( init );
|
3315 |
+
}
|
3316 |
+
} else {
|
3317 |
+
initialized = 1;
|
3318 |
+
delayed = initializing = 0;
|
3319 |
+
PIE.OnScroll.unobserve( init );
|
3320 |
+
|
3321 |
+
// Create the style infos and renderers
|
3322 |
+
styleInfos = {
|
3323 |
+
backgroundInfo: new PIE.BackgroundStyleInfo( el ),
|
3324 |
+
borderInfo: new PIE.BorderStyleInfo( el ),
|
3325 |
+
borderImageInfo: new PIE.BorderImageStyleInfo( el ),
|
3326 |
+
borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
|
3327 |
+
boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
|
3328 |
+
visibilityInfo: new PIE.VisibilityStyleInfo( el )
|
3329 |
+
};
|
3330 |
+
styleInfosArr = [
|
3331 |
+
styleInfos.backgroundInfo,
|
3332 |
+
styleInfos.borderInfo,
|
3333 |
+
styleInfos.borderImageInfo,
|
3334 |
+
styleInfos.borderRadiusInfo,
|
3335 |
+
styleInfos.boxShadowInfo,
|
3336 |
+
styleInfos.visibilityInfo
|
3337 |
+
];
|
3338 |
+
|
3339 |
+
rootRenderer = new PIE.RootRenderer( el, boundsInfo, styleInfos );
|
3340 |
+
var childRenderers = [
|
3341 |
+
new PIE.BoxShadowOutsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3342 |
+
new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3343 |
+
//new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3344 |
+
new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3345 |
+
new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
|
3346 |
+
];
|
3347 |
+
if( el.tagName === 'IMG' ) {
|
3348 |
+
childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
|
3349 |
+
}
|
3350 |
+
rootRenderer.childRenderers = childRenderers; // circular reference, can't pass in constructor; TODO is there a cleaner way?
|
3351 |
+
renderers = [ rootRenderer ].concat( childRenderers );
|
3352 |
+
|
3353 |
+
// Add property change listeners to ancestors if requested
|
3354 |
+
initAncestorPropChangeListeners();
|
3355 |
+
|
3356 |
+
// Add to list of polled elements in IE8
|
3357 |
+
if( poll ) {
|
3358 |
+
PIE.Heartbeat.observe( update );
|
3359 |
+
PIE.Heartbeat.run();
|
3360 |
+
}
|
3361 |
+
|
3362 |
+
// Trigger rendering
|
3363 |
+
update( 1 );
|
3364 |
+
}
|
3365 |
+
|
3366 |
+
if( !eventsAttached ) {
|
3367 |
+
eventsAttached = 1;
|
3368 |
+
addListener( el, 'onmove', handleMoveOrResize );
|
3369 |
+
addListener( el, 'onresize', handleMoveOrResize );
|
3370 |
+
addListener( el, 'onpropertychange', propChanged );
|
3371 |
+
addListener( el, 'onmouseenter', mouseEntered );
|
3372 |
+
addListener( el, 'onmouseleave', mouseLeft );
|
3373 |
+
PIE.OnResize.observe( handleMoveOrResize );
|
3374 |
+
|
3375 |
+
PIE.OnBeforeUnload.observe( removeEventListeners );
|
3376 |
+
}
|
3377 |
+
|
3378 |
+
boundsInfo.unlock();
|
3379 |
+
}
|
3380 |
+
}
|
3381 |
+
|
3382 |
+
|
3383 |
+
|
3384 |
+
|
3385 |
+
/**
|
3386 |
+
* Event handler for onmove and onresize events. Invokes update() only if the element's
|
3387 |
+
* bounds have previously been calculated, to prevent multiple runs during page load when
|
3388 |
+
* the element has no initial CSS3 properties.
|
3389 |
+
*/
|
3390 |
+
function handleMoveOrResize() {
|
3391 |
+
if( boundsInfo && boundsInfo.hasBeenQueried() ) {
|
3392 |
+
update();
|
3393 |
+
}
|
3394 |
+
}
|
3395 |
+
|
3396 |
+
|
3397 |
+
/**
|
3398 |
+
* Update position and/or size as necessary. Both move and resize events call
|
3399 |
+
* this rather than the updatePos/Size functions because sometimes, particularly
|
3400 |
+
* during page load, one will fire but the other won't.
|
3401 |
+
*/
|
3402 |
+
function update( force ) {
|
3403 |
+
if( !destroyed ) {
|
3404 |
+
if( initialized ) {
|
3405 |
+
var i, len;
|
3406 |
+
|
3407 |
+
lockAll();
|
3408 |
+
if( force || boundsInfo.positionChanged() ) {
|
3409 |
+
/* TODO just using getBoundingClientRect (used internally by BoundsInfo) for detecting
|
3410 |
+
position changes may not always be accurate; it's possible that
|
3411 |
+
an element will actually move relative to its positioning parent, but its position
|
3412 |
+
relative to the viewport will stay the same. Need to come up with a better way to
|
3413 |
+
track movement. The most accurate would be the same logic used in RootRenderer.updatePos()
|
3414 |
+
but that is a more expensive operation since it does some DOM walking, and we want this
|
3415 |
+
check to be as fast as possible. */
|
3416 |
+
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3417 |
+
renderers[i].updatePos();
|
3418 |
+
}
|
3419 |
+
}
|
3420 |
+
if( force || boundsInfo.sizeChanged() ) {
|
3421 |
+
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3422 |
+
renderers[i].updateSize();
|
3423 |
+
}
|
3424 |
+
}
|
3425 |
+
unlockAll();
|
3426 |
+
}
|
3427 |
+
else if( !initializing ) {
|
3428 |
+
init();
|
3429 |
+
}
|
3430 |
+
}
|
3431 |
+
}
|
3432 |
+
|
3433 |
+
/**
|
3434 |
+
* Handle property changes to trigger update when appropriate.
|
3435 |
+
*/
|
3436 |
+
function propChanged() {
|
3437 |
+
var i, len, renderer,
|
3438 |
+
e = event;
|
3439 |
+
|
3440 |
+
// Some elements like <table> fire onpropertychange events for old-school background properties
|
3441 |
+
// ('background', 'bgColor') when runtimeStyle background properties are changed, which
|
3442 |
+
// results in an infinite loop; therefore we filter out those property names. Also, 'display'
|
3443 |
+
// is ignored because size calculations don't work correctly immediately when its onpropertychange
|
3444 |
+
// event fires, and because it will trigger an onresize event anyway.
|
3445 |
+
if( !destroyed && !( e && e.propertyName in ignorePropertyNames ) ) {
|
3446 |
+
if( initialized ) {
|
3447 |
+
lockAll();
|
3448 |
+
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3449 |
+
renderer = renderers[i];
|
3450 |
+
// Make sure position is synced if the element hasn't already been rendered.
|
3451 |
+
// TODO this feels sloppy - look into merging propChanged and update functions
|
3452 |
+
if( !renderer.isPositioned ) {
|
3453 |
+
renderer.updatePos();
|
3454 |
+
}
|
3455 |
+
if( renderer.needsUpdate() ) {
|
3456 |
+
renderer.updateProps();
|
3457 |
+
}
|
3458 |
+
}
|
3459 |
+
unlockAll();
|
3460 |
+
}
|
3461 |
+
else if( !initializing ) {
|
3462 |
+
init();
|
3463 |
+
}
|
3464 |
+
}
|
3465 |
+
}
|
3466 |
+
|
3467 |
+
|
3468 |
+
function addHoverClass() {
|
3469 |
+
if( el ) {
|
3470 |
+
el.className += hoverClass;
|
3471 |
+
}
|
3472 |
+
}
|
3473 |
+
|
3474 |
+
function removeHoverClass() {
|
3475 |
+
if( el ) {
|
3476 |
+
el.className = el.className.replace( hoverClassRE, '' );
|
3477 |
+
}
|
3478 |
+
}
|
3479 |
+
|
3480 |
+
/**
|
3481 |
+
* Handle mouseenter events. Adds a custom class to the element to allow IE6 to add
|
3482 |
+
* hover styles to non-link elements, and to trigger a propertychange update.
|
3483 |
+
*/
|
3484 |
+
function mouseEntered() {
|
3485 |
+
//must delay this because the mouseenter event fires before the :hover styles are added.
|
3486 |
+
setTimeout( addHoverClass, 0 );
|
3487 |
+
}
|
3488 |
+
|
3489 |
+
/**
|
3490 |
+
* Handle mouseleave events
|
3491 |
+
*/
|
3492 |
+
function mouseLeft() {
|
3493 |
+
//must delay this because the mouseleave event fires before the :hover styles are removed.
|
3494 |
+
setTimeout( removeHoverClass, 0 );
|
3495 |
+
}
|
3496 |
+
|
3497 |
+
|
3498 |
+
/**
|
3499 |
+
* Handle property changes on ancestors of the element; see initAncestorPropChangeListeners()
|
3500 |
+
* which adds these listeners as requested with the -pie-watch-ancestors CSS property.
|
3501 |
+
*/
|
3502 |
+
function ancestorPropChanged() {
|
3503 |
+
var name = event.propertyName;
|
3504 |
+
if( name === 'className' || name === 'id' ) {
|
3505 |
+
propChanged();
|
3506 |
+
}
|
3507 |
+
}
|
3508 |
+
|
3509 |
+
function lockAll() {
|
3510 |
+
boundsInfo.lock();
|
3511 |
+
for( var i = styleInfosArr.length; i--; ) {
|
3512 |
+
styleInfosArr[i].lock();
|
3513 |
+
}
|
3514 |
+
}
|
3515 |
+
|
3516 |
+
function unlockAll() {
|
3517 |
+
for( var i = styleInfosArr.length; i--; ) {
|
3518 |
+
styleInfosArr[i].unlock();
|
3519 |
+
}
|
3520 |
+
boundsInfo.unlock();
|
3521 |
+
}
|
3522 |
+
|
3523 |
+
|
3524 |
+
/**
|
3525 |
+
* Remove all event listeners from the element and any monitoried ancestors.
|
3526 |
+
*/
|
3527 |
+
function removeEventListeners() {
|
3528 |
+
if (eventsAttached) {
|
3529 |
+
if( ancestors ) {
|
3530 |
+
for( var i = 0, len = ancestors.length, a; i < len; i++ ) {
|
3531 |
+
a = ancestors[i];
|
3532 |
+
removeListener( a, 'onpropertychange', ancestorPropChanged );
|
3533 |
+
removeListener( a, 'onmouseenter', mouseEntered );
|
3534 |
+
removeListener( a, 'onmouseleave', mouseLeft );
|
3535 |
+
}
|
3536 |
+
}
|
3537 |
+
|
3538 |
+
// Remove event listeners
|
3539 |
+
removeListener( el, 'onmove', update );
|
3540 |
+
removeListener( el, 'onresize', update );
|
3541 |
+
removeListener( el, 'onpropertychange', propChanged );
|
3542 |
+
removeListener( el, 'onmouseenter', mouseEntered );
|
3543 |
+
removeListener( el, 'onmouseleave', mouseLeft );
|
3544 |
+
|
3545 |
+
PIE.OnBeforeUnload.unobserve( removeEventListeners );
|
3546 |
+
eventsAttached = 0;
|
3547 |
+
}
|
3548 |
+
}
|
3549 |
+
|
3550 |
+
|
3551 |
+
/**
|
3552 |
+
* Clean everything up when the behavior is removed from the element, or the element
|
3553 |
+
* is manually destroyed.
|
3554 |
+
*/
|
3555 |
+
function destroy() {
|
3556 |
+
if( !destroyed ) {
|
3557 |
+
var i, len;
|
3558 |
+
|
3559 |
+
removeEventListeners();
|
3560 |
+
|
3561 |
+
destroyed = 1;
|
3562 |
+
|
3563 |
+
// destroy any active renderers
|
3564 |
+
if( renderers ) {
|
3565 |
+
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3566 |
+
renderers[i].destroy();
|
3567 |
+
}
|
3568 |
+
}
|
3569 |
+
|
3570 |
+
// Remove from list of polled elements in IE8
|
3571 |
+
if( poll ) {
|
3572 |
+
PIE.Heartbeat.unobserve( update );
|
3573 |
+
}
|
3574 |
+
// Stop onresize listening
|
3575 |
+
PIE.OnResize.unobserve( update );
|
3576 |
+
|
3577 |
+
// Kill references
|
3578 |
+
renderers = boundsInfo = styleInfos = styleInfosArr = ancestors = el = null;
|
3579 |
+
}
|
3580 |
+
}
|
3581 |
+
|
3582 |
+
|
3583 |
+
/**
|
3584 |
+
* If requested via the custom -pie-watch-ancestors CSS property, add onpropertychange listeners
|
3585 |
+
* to ancestor(s) of the element so we can pick up style changes based on CSS rules using
|
3586 |
+
* descendant selectors.
|
3587 |
+
*/
|
3588 |
+
function initAncestorPropChangeListeners() {
|
3589 |
+
var watch = el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'watch-ancestors' ),
|
3590 |
+
i, a;
|
3591 |
+
if( watch ) {
|
3592 |
+
ancestors = [];
|
3593 |
+
watch = parseInt( watch, 10 );
|
3594 |
+
i = 0;
|
3595 |
+
a = el.parentNode;
|
3596 |
+
while( a && ( watch === 'NaN' || i++ < watch ) ) {
|
3597 |
+
ancestors.push( a );
|
3598 |
+
addListener( a, 'onpropertychange', ancestorPropChanged );
|
3599 |
+
addListener( a, 'onmouseenter', mouseEntered );
|
3600 |
+
addListener( a, 'onmouseleave', mouseLeft );
|
3601 |
+
a = a.parentNode;
|
3602 |
+
}
|
3603 |
+
}
|
3604 |
+
}
|
3605 |
+
|
3606 |
+
|
3607 |
+
/**
|
3608 |
+
* If the target element is a first child, add a pie_first-child class to it. This allows using
|
3609 |
+
* the added class as a workaround for the fact that PIE's rendering element breaks the :first-child
|
3610 |
+
* pseudo-class selector.
|
3611 |
+
*/
|
3612 |
+
function initFirstChildPseudoClass() {
|
3613 |
+
var tmpEl = el,
|
3614 |
+
isFirst = 1;
|
3615 |
+
while( tmpEl = tmpEl.previousSibling ) {
|
3616 |
+
if( tmpEl.nodeType === 1 ) {
|
3617 |
+
isFirst = 0;
|
3618 |
+
break;
|
3619 |
+
}
|
3620 |
+
}
|
3621 |
+
if( isFirst ) {
|
3622 |
+
el.className += ' ' + PIE.CLASS_PREFIX + 'first-child';
|
3623 |
+
}
|
3624 |
+
}
|
3625 |
+
|
3626 |
+
|
3627 |
+
// These methods are all already bound to this instance so there's no need to wrap them
|
3628 |
+
// in a closure to maintain the 'this' scope object when calling them.
|
3629 |
+
this.init = init;
|
3630 |
+
this.update = update;
|
3631 |
+
this.destroy = destroy;
|
3632 |
+
this.el = el;
|
3633 |
+
}
|
3634 |
+
|
3635 |
+
Element.getInstance = function( el ) {
|
3636 |
+
var id = PIE.Util.getUID( el );
|
3637 |
+
return wrappers[ id ] || ( wrappers[ id ] = new Element( el ) );
|
3638 |
+
};
|
3639 |
+
|
3640 |
+
Element.destroy = function( el ) {
|
3641 |
+
var id = PIE.Util.getUID( el ),
|
3642 |
+
wrapper = wrappers[ id ];
|
3643 |
+
if( wrapper ) {
|
3644 |
+
wrapper.destroy();
|
3645 |
+
delete wrappers[ id ];
|
3646 |
+
}
|
3647 |
+
};
|
3648 |
+
|
3649 |
+
Element.destroyAll = function() {
|
3650 |
+
var els = [], wrapper;
|
3651 |
+
if( wrappers ) {
|
3652 |
+
for( var w in wrappers ) {
|
3653 |
+
if( wrappers.hasOwnProperty( w ) ) {
|
3654 |
+
wrapper = wrappers[ w ];
|
3655 |
+
els.push( wrapper.el );
|
3656 |
+
wrapper.destroy();
|
3657 |
+
}
|
3658 |
+
}
|
3659 |
+
wrappers = {};
|
3660 |
+
}
|
3661 |
+
return els;
|
3662 |
+
};
|
3663 |
+
|
3664 |
+
return Element;
|
3665 |
+
})();
|
3666 |
+
|
3667 |
+
/*
|
3668 |
+
* This file exposes the public API for invoking PIE.
|
3669 |
+
*/
|
3670 |
+
|
3671 |
+
|
3672 |
+
/**
|
3673 |
+
* Programatically attach PIE to a single element.
|
3674 |
+
* @param {Element} el
|
3675 |
+
*/
|
3676 |
+
PIE[ 'attach' ] = function( el ) {
|
3677 |
+
if (PIE.ieDocMode < 9) {
|
3678 |
+
PIE.Element.getInstance( el ).init();
|
3679 |
+
}
|
3680 |
+
};
|
3681 |
+
|
3682 |
+
|
3683 |
+
/**
|
3684 |
+
* Programatically detach PIE from a single element.
|
3685 |
+
* @param {Element} el
|
3686 |
+
*/
|
3687 |
+
PIE[ 'detach' ] = function( el ) {
|
3688 |
+
PIE.Element.destroy( el );
|
3689 |
+
};
|
3690 |
+
|
3691 |
+
|
3692 |
+
} // if( !PIE )
|
3693 |
+
var p = window['PIE'],
|
3694 |
+
el = element;
|
3695 |
+
|
3696 |
+
function init() {
|
3697 |
+
if( p && doc.media !== 'print' ) { // IE strangely attaches a second copy of the behavior to elements when printing
|
3698 |
+
p['attach']( el );
|
3699 |
+
}
|
3700 |
+
}
|
3701 |
+
|
3702 |
+
function cleanup() {
|
3703 |
+
if (p) {
|
3704 |
+
p['detach']( el );
|
3705 |
+
p = el = 0;
|
3706 |
+
}
|
3707 |
+
}
|
3708 |
+
|
3709 |
+
if( el.readyState === 'complete' ) {
|
3710 |
+
init();
|
3711 |
+
}
|
3712 |
+
</script>
|
3713 |
+
</PUBLIC:COMPONENT>
|
js/PIE/PIE_uncompressed.js
CHANGED
@@ -1,3688 +1,3688 @@
|
|
1 |
-
/*
|
2 |
-
PIE: CSS3 rendering for IE
|
3 |
-
Version 1.0beta4
|
4 |
-
http://css3pie.com
|
5 |
-
Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
|
6 |
-
*/
|
7 |
-
(function(){
|
8 |
-
var doc = document;var PIE = window['PIE'];
|
9 |
-
|
10 |
-
if( !PIE ) {
|
11 |
-
PIE = window['PIE'] = {
|
12 |
-
CSS_PREFIX: '-pie-',
|
13 |
-
STYLE_PREFIX: 'Pie',
|
14 |
-
CLASS_PREFIX: 'pie_',
|
15 |
-
tableCellTags: {
|
16 |
-
'TD': 1,
|
17 |
-
'TH': 1
|
18 |
-
}
|
19 |
-
};
|
20 |
-
|
21 |
-
// Force the background cache to be used. No reason it shouldn't be.
|
22 |
-
try {
|
23 |
-
doc.execCommand( 'BackgroundImageCache', false, true );
|
24 |
-
} catch(e) {}
|
25 |
-
|
26 |
-
/*
|
27 |
-
* IE version detection approach by James Padolsey, with modifications -- from
|
28 |
-
* http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
|
29 |
-
*/
|
30 |
-
PIE.ieVersion = function(){
|
31 |
-
var v = 4,
|
32 |
-
div = doc.createElement('div'),
|
33 |
-
all = div.getElementsByTagName('i');
|
34 |
-
|
35 |
-
while (
|
36 |
-
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
|
37 |
-
all[0]
|
38 |
-
) {}
|
39 |
-
|
40 |
-
return v;
|
41 |
-
}();
|
42 |
-
|
43 |
-
// Detect IE6
|
44 |
-
if( PIE.ieVersion === 6 ) {
|
45 |
-
// IE6 can't access properties with leading dash, but can without it.
|
46 |
-
PIE.CSS_PREFIX = PIE.CSS_PREFIX.replace( /^-/, '' );
|
47 |
-
}
|
48 |
-
|
49 |
-
// Detect IE8
|
50 |
-
PIE.ieDocMode = doc.documentMode || PIE.ieVersion;
|
51 |
-
/**
|
52 |
-
* Utility functions
|
53 |
-
*/
|
54 |
-
(function() {
|
55 |
-
var vmlCreatorDoc,
|
56 |
-
idNum = 0,
|
57 |
-
imageSizes = {};
|
58 |
-
|
59 |
-
|
60 |
-
PIE.Util = {
|
61 |
-
|
62 |
-
/**
|
63 |
-
* To create a VML element, it must be created by a Document which has the VML
|
64 |
-
* namespace set. Unfortunately, if you try to add the namespace programatically
|
65 |
-
* into the main document, you will get an "Unspecified error" when trying to
|
66 |
-
* access document.namespaces before the document is finished loading. To get
|
67 |
-
* around this, we create a DocumentFragment, which in IE land is apparently a
|
68 |
-
* full-fledged Document. It allows adding namespaces immediately, so we add the
|
69 |
-
* namespace there and then have it create the VML element.
|
70 |
-
* @param {string} tag The tag name for the VML element
|
71 |
-
* @return {Element} The new VML element
|
72 |
-
*/
|
73 |
-
createVmlElement: function( tag ) {
|
74 |
-
var vmlPrefix = 'css3vml';
|
75 |
-
if( !vmlCreatorDoc ) {
|
76 |
-
vmlCreatorDoc = doc.createDocumentFragment();
|
77 |
-
vmlCreatorDoc.namespaces.add( vmlPrefix, 'urn:schemas-microsoft-com:vml' );
|
78 |
-
}
|
79 |
-
return vmlCreatorDoc.createElement( vmlPrefix + ':' + tag );
|
80 |
-
},
|
81 |
-
|
82 |
-
|
83 |
-
/**
|
84 |
-
* Generate and return a unique ID for a given object. The generated ID is stored
|
85 |
-
* as a property of the object for future reuse.
|
86 |
-
* @param {Object} obj
|
87 |
-
*/
|
88 |
-
getUID: function( obj ) {
|
89 |
-
return obj && obj[ '_pieId' ] || ( obj[ '_pieId' ] = ++idNum );
|
90 |
-
},
|
91 |
-
|
92 |
-
|
93 |
-
/**
|
94 |
-
* Simple utility for merging objects
|
95 |
-
* @param {Object} obj1 The main object into which all others will be merged
|
96 |
-
* @param {...Object} var_args Other objects which will be merged into the first, in order
|
97 |
-
*/
|
98 |
-
merge: function( obj1 ) {
|
99 |
-
var i, len, p, objN, args = arguments;
|
100 |
-
for( i = 1, len = args.length; i < len; i++ ) {
|
101 |
-
objN = args[i];
|
102 |
-
for( p in objN ) {
|
103 |
-
if( objN.hasOwnProperty( p ) ) {
|
104 |
-
obj1[ p ] = objN[ p ];
|
105 |
-
}
|
106 |
-
}
|
107 |
-
}
|
108 |
-
return obj1;
|
109 |
-
},
|
110 |
-
|
111 |
-
|
112 |
-
/**
|
113 |
-
* Execute a callback function, passing it the dimensions of a given image once
|
114 |
-
* they are known.
|
115 |
-
* @param {string} src The source URL of the image
|
116 |
-
* @param {function({w:number, h:number})} func The callback function to be called once the image dimensions are known
|
117 |
-
* @param {Object} ctx A context object which will be used as the 'this' value within the executed callback function
|
118 |
-
*/
|
119 |
-
withImageSize: function( src, func, ctx ) {
|
120 |
-
var size = imageSizes[ src ], img, queue;
|
121 |
-
if( size ) {
|
122 |
-
// If we have a queue, add to it
|
123 |
-
if( Object.prototype.toString.call( size ) === '[object Array]' ) {
|
124 |
-
size.push( [ func, ctx ] );
|
125 |
-
}
|
126 |
-
// Already have the size cached, call func right away
|
127 |
-
else {
|
128 |
-
func.call( ctx, size );
|
129 |
-
}
|
130 |
-
} else {
|
131 |
-
queue = imageSizes[ src ] = [ [ func, ctx ] ]; //create queue
|
132 |
-
img = new Image();
|
133 |
-
img.onload = function() {
|
134 |
-
size = imageSizes[ src ] = { w: img.width, h: img.height };
|
135 |
-
for( var i = 0, len = queue.length; i < len; i++ ) {
|
136 |
-
queue[ i ][ 0 ].call( queue[ i ][ 1 ], size );
|
137 |
-
}
|
138 |
-
img.onload = null;
|
139 |
-
};
|
140 |
-
img.src = src;
|
141 |
-
}
|
142 |
-
}
|
143 |
-
};
|
144 |
-
})();/**
|
145 |
-
*
|
146 |
-
*/
|
147 |
-
PIE.Observable = function() {
|
148 |
-
/**
|
149 |
-
* List of registered observer functions
|
150 |
-
*/
|
151 |
-
this.observers = [];
|
152 |
-
|
153 |
-
/**
|
154 |
-
* Hash of function ids to their position in the observers list, for fast lookup
|
155 |
-
*/
|
156 |
-
this.indexes = {};
|
157 |
-
};
|
158 |
-
PIE.Observable.prototype = {
|
159 |
-
|
160 |
-
observe: function( fn ) {
|
161 |
-
var id = PIE.Util.getUID( fn ),
|
162 |
-
indexes = this.indexes,
|
163 |
-
observers = this.observers;
|
164 |
-
if( !( id in indexes ) ) {
|
165 |
-
indexes[ id ] = observers.length;
|
166 |
-
observers.push( fn );
|
167 |
-
}
|
168 |
-
},
|
169 |
-
|
170 |
-
unobserve: function( fn ) {
|
171 |
-
var id = PIE.Util.getUID( fn ),
|
172 |
-
indexes = this.indexes;
|
173 |
-
if( id && id in indexes ) {
|
174 |
-
delete this.observers[ indexes[ id ] ];
|
175 |
-
delete indexes[ id ];
|
176 |
-
}
|
177 |
-
},
|
178 |
-
|
179 |
-
fire: function() {
|
180 |
-
var o = this.observers,
|
181 |
-
i = o.length;
|
182 |
-
while( i-- ) {
|
183 |
-
o[ i ] && o[ i ]();
|
184 |
-
}
|
185 |
-
}
|
186 |
-
|
187 |
-
};/*
|
188 |
-
* Simple heartbeat timer - this is a brute-force workaround for syncing issues caused by IE not
|
189 |
-
* always firing the onmove and onresize events when elements are moved or resized. We check a few
|
190 |
-
* times every second to make sure the elements have the correct position and size. See Element.js
|
191 |
-
* which adds heartbeat listeners based on the custom -pie-poll flag, which defaults to true in IE8
|
192 |
-
* and false elsewhere.
|
193 |
-
*/
|
194 |
-
|
195 |
-
PIE.Heartbeat = new PIE.Observable();
|
196 |
-
PIE.Heartbeat.run = function() {
|
197 |
-
var me = this;
|
198 |
-
if( !me.running ) {
|
199 |
-
setInterval( function() { me.fire() }, 250 );
|
200 |
-
me.running = 1;
|
201 |
-
}
|
202 |
-
};
|
203 |
-
/**
|
204 |
-
* Create an observable listener for the onbeforeunload event
|
205 |
-
*/
|
206 |
-
PIE.OnBeforeUnload = new PIE.Observable();
|
207 |
-
window.attachEvent( 'onbeforeunload', function() { PIE.OnBeforeUnload.fire(); } );
|
208 |
-
|
209 |
-
/**
|
210 |
-
* Attach an event which automatically gets detached onbeforeunload
|
211 |
-
*/
|
212 |
-
PIE.OnBeforeUnload.attachManagedEvent = function( target, name, handler ) {
|
213 |
-
target.attachEvent( name, handler );
|
214 |
-
this.observe( function() {
|
215 |
-
target.detachEvent( name, handler );
|
216 |
-
} );
|
217 |
-
};/**
|
218 |
-
* Create a single observable listener for window resize events.
|
219 |
-
*/
|
220 |
-
(function() {
|
221 |
-
PIE.OnResize = new PIE.Observable();
|
222 |
-
|
223 |
-
function resized() {
|
224 |
-
PIE.OnResize.fire();
|
225 |
-
}
|
226 |
-
|
227 |
-
PIE.OnBeforeUnload.attachManagedEvent( window, 'onresize', resized );
|
228 |
-
})();
|
229 |
-
/**
|
230 |
-
* Create a single observable listener for scroll events. Used for lazy loading based
|
231 |
-
* on the viewport, and for fixed position backgrounds.
|
232 |
-
*/
|
233 |
-
(function() {
|
234 |
-
PIE.OnScroll = new PIE.Observable();
|
235 |
-
|
236 |
-
function scrolled() {
|
237 |
-
PIE.OnScroll.fire();
|
238 |
-
}
|
239 |
-
|
240 |
-
PIE.OnBeforeUnload.attachManagedEvent( window, 'onscroll', scrolled );
|
241 |
-
|
242 |
-
PIE.OnResize.observe( scrolled );
|
243 |
-
})();
|
244 |
-
/**
|
245 |
-
* Listen for printing events, destroy all active PIE instances when printing, and
|
246 |
-
* restore them afterward.
|
247 |
-
*/
|
248 |
-
(function() {
|
249 |
-
|
250 |
-
var elements;
|
251 |
-
|
252 |
-
function beforePrint() {
|
253 |
-
elements = PIE.Element.destroyAll();
|
254 |
-
}
|
255 |
-
|
256 |
-
function afterPrint() {
|
257 |
-
if( elements ) {
|
258 |
-
for( var i = 0, len = elements.length; i < len; i++ ) {
|
259 |
-
PIE[ 'attach' ]( elements[i] );
|
260 |
-
}
|
261 |
-
elements = 0;
|
262 |
-
}
|
263 |
-
}
|
264 |
-
|
265 |
-
PIE.OnBeforeUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint );
|
266 |
-
PIE.OnBeforeUnload.attachManagedEvent( window, 'onafterprint', afterPrint );
|
267 |
-
|
268 |
-
})();/**
|
269 |
-
* Wrapper for length and percentage style values. The value is immutable. A singleton instance per unique
|
270 |
-
* value is returned from PIE.getLength() - always use that instead of instantiating directly.
|
271 |
-
* @constructor
|
272 |
-
* @param {string} val The CSS string representing the length. It is assumed that this will already have
|
273 |
-
* been validated as a valid length or percentage syntax.
|
274 |
-
*/
|
275 |
-
PIE.Length = (function() {
|
276 |
-
var lengthCalcEl = doc.createElement( 'length-calc' ),
|
277 |
-
parent = doc.documentElement,
|
278 |
-
s = lengthCalcEl.style,
|
279 |
-
conversions = {},
|
280 |
-
units = [ 'mm', 'cm', 'in', 'pt', 'pc' ],
|
281 |
-
i = units.length,
|
282 |
-
instances = {};
|
283 |
-
|
284 |
-
s.position = 'absolute';
|
285 |
-
s.top = s.left = '-9999px';
|
286 |
-
|
287 |
-
parent.appendChild( lengthCalcEl );
|
288 |
-
while( i-- ) {
|
289 |
-
lengthCalcEl.style.width = '100' + units[i];
|
290 |
-
conversions[ units[i] ] = lengthCalcEl.offsetWidth / 100;
|
291 |
-
}
|
292 |
-
parent.removeChild( lengthCalcEl );
|
293 |
-
|
294 |
-
|
295 |
-
function Length( val ) {
|
296 |
-
this.val = val;
|
297 |
-
}
|
298 |
-
Length.prototype = {
|
299 |
-
/**
|
300 |
-
* Regular expression for matching the length unit
|
301 |
-
* @private
|
302 |
-
*/
|
303 |
-
unitRE: /(px|em|ex|mm|cm|in|pt|pc|%)$/,
|
304 |
-
|
305 |
-
/**
|
306 |
-
* Get the numeric value of the length
|
307 |
-
* @return {number} The value
|
308 |
-
*/
|
309 |
-
getNumber: function() {
|
310 |
-
var num = this.num,
|
311 |
-
UNDEF;
|
312 |
-
if( num === UNDEF ) {
|
313 |
-
num = this.num = parseFloat( this.val );
|
314 |
-
}
|
315 |
-
return num;
|
316 |
-
},
|
317 |
-
|
318 |
-
/**
|
319 |
-
* Get the unit of the length
|
320 |
-
* @return {string} The unit
|
321 |
-
*/
|
322 |
-
getUnit: function() {
|
323 |
-
var unit = this.unit,
|
324 |
-
m;
|
325 |
-
if( !unit ) {
|
326 |
-
m = this.val.match( this.unitRE );
|
327 |
-
unit = this.unit = ( m && m[0] ) || 'px';
|
328 |
-
}
|
329 |
-
return unit;
|
330 |
-
},
|
331 |
-
|
332 |
-
/**
|
333 |
-
* Determine whether this is a percentage length value
|
334 |
-
* @return {boolean}
|
335 |
-
*/
|
336 |
-
isPercentage: function() {
|
337 |
-
return this.getUnit() === '%';
|
338 |
-
},
|
339 |
-
|
340 |
-
/**
|
341 |
-
* Resolve this length into a number of pixels.
|
342 |
-
* @param {Element} el - the context element, used to resolve font-relative values
|
343 |
-
* @param {(function():number|number)=} pct100 - the number of pixels that equal a 100% percentage. This can be either a number or a
|
344 |
-
* function which will be called to return the number.
|
345 |
-
*/
|
346 |
-
pixels: function( el, pct100 ) {
|
347 |
-
var num = this.getNumber(),
|
348 |
-
unit = this.getUnit();
|
349 |
-
switch( unit ) {
|
350 |
-
case "px":
|
351 |
-
return num;
|
352 |
-
case "%":
|
353 |
-
return num * ( typeof pct100 === 'function' ? pct100() : pct100 ) / 100;
|
354 |
-
case "em":
|
355 |
-
return num * this.getEmPixels( el );
|
356 |
-
case "ex":
|
357 |
-
return num * this.getEmPixels( el ) / 2;
|
358 |
-
default:
|
359 |
-
return num * conversions[ unit ];
|
360 |
-
}
|
361 |
-
},
|
362 |
-
|
363 |
-
/**
|
364 |
-
* The em and ex units are relative to the font-size of the current element,
|
365 |
-
* however if the font-size is set using non-pixel units then we get that value
|
366 |
-
* rather than a pixel conversion. To get around this, we keep a floating element
|
367 |
-
* with width:1em which we insert into the target element and then read its offsetWidth.
|
368 |
-
* But if the font-size *is* specified in pixels, then we use that directly to avoid
|
369 |
-
* the expensive DOM manipulation.
|
370 |
-
* @param el
|
371 |
-
*/
|
372 |
-
getEmPixels: function( el ) {
|
373 |
-
var fs = el.currentStyle.fontSize,
|
374 |
-
px;
|
375 |
-
|
376 |
-
if( fs.indexOf( 'px' ) > 0 ) {
|
377 |
-
return parseFloat( fs );
|
378 |
-
} else {
|
379 |
-
lengthCalcEl.style.width = '1em';
|
380 |
-
el.appendChild( lengthCalcEl );
|
381 |
-
px = lengthCalcEl.offsetWidth;
|
382 |
-
if( lengthCalcEl.parentNode === el ) { //not sure how this could be false but it sometimes is
|
383 |
-
el.removeChild( lengthCalcEl );
|
384 |
-
}
|
385 |
-
return px;
|
386 |
-
}
|
387 |
-
}
|
388 |
-
};
|
389 |
-
|
390 |
-
|
391 |
-
/**
|
392 |
-
* Retrieve a PIE.Length instance for the given value. A shared singleton instance is returned for each unique value.
|
393 |
-
* @param {string} val The CSS string representing the length. It is assumed that this will already have
|
394 |
-
* been validated as a valid length or percentage syntax.
|
395 |
-
*/
|
396 |
-
PIE.getLength = function( val ) {
|
397 |
-
return instances[ val ] || ( instances[ val ] = new Length( val ) );
|
398 |
-
};
|
399 |
-
|
400 |
-
return Length;
|
401 |
-
})();
|
402 |
-
/**
|
403 |
-
* Wrapper for a CSS3 bg-position value. Takes up to 2 position keywords and 2 lengths/percentages.
|
404 |
-
* @constructor
|
405 |
-
* @param {Array.<PIE.Tokenizer.Token>} tokens The tokens making up the background position value.
|
406 |
-
*/
|
407 |
-
PIE.BgPosition = (function() {
|
408 |
-
|
409 |
-
var length_fifty = PIE.getLength( '50%' ),
|
410 |
-
vert_idents = { 'top': 1, 'center': 1, 'bottom': 1 },
|
411 |
-
horiz_idents = { 'left': 1, 'center': 1, 'right': 1 };
|
412 |
-
|
413 |
-
|
414 |
-
function BgPosition( tokens ) {
|
415 |
-
this.tokens = tokens;
|
416 |
-
}
|
417 |
-
BgPosition.prototype = {
|
418 |
-
/**
|
419 |
-
* Normalize the values into the form:
|
420 |
-
* [ xOffsetSide, xOffsetLength, yOffsetSide, yOffsetLength ]
|
421 |
-
* where: xOffsetSide is either 'left' or 'right',
|
422 |
-
* yOffsetSide is either 'top' or 'bottom',
|
423 |
-
* and x/yOffsetLength are both PIE.Length objects.
|
424 |
-
* @return {Array}
|
425 |
-
*/
|
426 |
-
getValues: function() {
|
427 |
-
if( !this._values ) {
|
428 |
-
var tokens = this.tokens,
|
429 |
-
len = tokens.length,
|
430 |
-
Tokenizer = PIE.Tokenizer,
|
431 |
-
identType = Tokenizer.Type,
|
432 |
-
length_zero = PIE.getLength( '0' ),
|
433 |
-
type_ident = identType.IDENT,
|
434 |
-
type_length = identType.LENGTH,
|
435 |
-
type_percent = identType.PERCENT,
|
436 |
-
type, value,
|
437 |
-
vals = [ 'left', length_zero, 'top', length_zero ];
|
438 |
-
|
439 |
-
// If only one value, the second is assumed to be 'center'
|
440 |
-
if( len === 1 ) {
|
441 |
-
tokens.push( new Tokenizer.Token( type_ident, 'center' ) );
|
442 |
-
len++;
|
443 |
-
}
|
444 |
-
|
445 |
-
// Two values - CSS2
|
446 |
-
if( len === 2 ) {
|
447 |
-
// If both idents, they can appear in either order, so switch them if needed
|
448 |
-
if( type_ident & ( tokens[0].tokenType | tokens[1].tokenType ) &&
|
449 |
-
tokens[0].tokenValue in vert_idents && tokens[1].tokenValue in horiz_idents ) {
|
450 |
-
tokens.push( tokens.shift() );
|
451 |
-
}
|
452 |
-
if( tokens[0].tokenType & type_ident ) {
|
453 |
-
if( tokens[0].tokenValue === 'center' ) {
|
454 |
-
vals[1] = length_fifty;
|
455 |
-
} else {
|
456 |
-
vals[0] = tokens[0].tokenValue;
|
457 |
-
}
|
458 |
-
}
|
459 |
-
else if( tokens[0].isLengthOrPercent() ) {
|
460 |
-
vals[1] = PIE.getLength( tokens[0].tokenValue );
|
461 |
-
}
|
462 |
-
if( tokens[1].tokenType & type_ident ) {
|
463 |
-
if( tokens[1].tokenValue === 'center' ) {
|
464 |
-
vals[3] = length_fifty;
|
465 |
-
} else {
|
466 |
-
vals[2] = tokens[1].tokenValue;
|
467 |
-
}
|
468 |
-
}
|
469 |
-
else if( tokens[1].isLengthOrPercent() ) {
|
470 |
-
vals[3] = PIE.getLength( tokens[1].tokenValue );
|
471 |
-
}
|
472 |
-
}
|
473 |
-
|
474 |
-
// Three or four values - CSS3
|
475 |
-
else {
|
476 |
-
// TODO
|
477 |
-
}
|
478 |
-
|
479 |
-
this._values = vals;
|
480 |
-
}
|
481 |
-
return this._values;
|
482 |
-
},
|
483 |
-
|
484 |
-
/**
|
485 |
-
* Find the coordinates of the background image from the upper-left corner of the background area.
|
486 |
-
* Note that these coordinate values are not rounded.
|
487 |
-
* @param {Element} el
|
488 |
-
* @param {number} width - the width for percentages (background area width minus image width)
|
489 |
-
* @param {number} height - the height for percentages (background area height minus image height)
|
490 |
-
* @return {Object} { x: Number, y: Number }
|
491 |
-
*/
|
492 |
-
coords: function( el, width, height ) {
|
493 |
-
var vals = this.getValues(),
|
494 |
-
pxX = vals[1].pixels( el, width ),
|
495 |
-
pxY = vals[3].pixels( el, height );
|
496 |
-
|
497 |
-
return {
|
498 |
-
x: vals[0] === 'right' ? width - pxX : pxX,
|
499 |
-
y: vals[2] === 'bottom' ? height - pxY : pxY
|
500 |
-
};
|
501 |
-
}
|
502 |
-
};
|
503 |
-
|
504 |
-
return BgPosition;
|
505 |
-
})();
|
506 |
-
/**
|
507 |
-
* Wrapper for angle values; handles conversion to degrees from all allowed angle units
|
508 |
-
* @constructor
|
509 |
-
* @param {string} val The raw CSS value for the angle. It is assumed it has been pre-validated.
|
510 |
-
*/
|
511 |
-
PIE.Angle = (function() {
|
512 |
-
function Angle( val ) {
|
513 |
-
this.val = val;
|
514 |
-
}
|
515 |
-
Angle.prototype = {
|
516 |
-
unitRE: /[a-z]+$/i,
|
517 |
-
|
518 |
-
/**
|
519 |
-
* @return {string} The unit of the angle value
|
520 |
-
*/
|
521 |
-
getUnit: function() {
|
522 |
-
return this._unit || ( this._unit = this.val.match( this.unitRE )[0].toLowerCase() );
|
523 |
-
},
|
524 |
-
|
525 |
-
/**
|
526 |
-
* Get the numeric value of the angle in degrees.
|
527 |
-
* @return {number} The degrees value
|
528 |
-
*/
|
529 |
-
degrees: function() {
|
530 |
-
var deg = this._deg, u, n;
|
531 |
-
if( deg === undefined ) {
|
532 |
-
u = this.getUnit();
|
533 |
-
n = parseFloat( this.val, 10 );
|
534 |
-
deg = this._deg = ( u === 'deg' ? n : u === 'rad' ? n / Math.PI * 180 : u === 'grad' ? n / 400 * 360 : u === 'turn' ? n * 360 : 0 );
|
535 |
-
}
|
536 |
-
return deg;
|
537 |
-
}
|
538 |
-
};
|
539 |
-
|
540 |
-
return Angle;
|
541 |
-
})();/**
|
542 |
-
* Abstraction for colors values. Allows detection of rgba values. A singleton instance per unique
|
543 |
-
* value is returned from PIE.getColor() - always use that instead of instantiating directly.
|
544 |
-
* @constructor
|
545 |
-
* @param {string} val The raw CSS string value for the color
|
546 |
-
*/
|
547 |
-
PIE.Color = (function() {
|
548 |
-
var instances = {};
|
549 |
-
|
550 |
-
function Color( val ) {
|
551 |
-
this.val = val;
|
552 |
-
}
|
553 |
-
|
554 |
-
/**
|
555 |
-
* Regular expression for matching rgba colors and extracting their components
|
556 |
-
* @type {RegExp}
|
557 |
-
*/
|
558 |
-
Color.rgbaRE = /\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;
|
559 |
-
|
560 |
-
Color.names = {
|
561 |
-
"aliceblue":"F0F8FF", "antiquewhite":"FAEBD7", "aqua":"0FF",
|
562 |
-
"aquamarine":"7FFFD4", "azure":"F0FFFF", "beige":"F5F5DC",
|
563 |
-
"bisque":"FFE4C4", "black":"000", "blanchedalmond":"FFEBCD",
|
564 |
-
"blue":"00F", "blueviolet":"8A2BE2", "brown":"A52A2A",
|
565 |
-
"burlywood":"DEB887", "cadetblue":"5F9EA0", "chartreuse":"7FFF00",
|
566 |
-
"chocolate":"D2691E", "coral":"FF7F50", "cornflowerblue":"6495ED",
|
567 |
-
"cornsilk":"FFF8DC", "crimson":"DC143C", "cyan":"0FF",
|
568 |
-
"darkblue":"00008B", "darkcyan":"008B8B", "darkgoldenrod":"B8860B",
|
569 |
-
"darkgray":"A9A9A9", "darkgreen":"006400", "darkkhaki":"BDB76B",
|
570 |
-
"darkmagenta":"8B008B", "darkolivegreen":"556B2F", "darkorange":"FF8C00",
|
571 |
-
"darkorchid":"9932CC", "darkred":"8B0000", "darksalmon":"E9967A",
|
572 |
-
"darkseagreen":"8FBC8F", "darkslateblue":"483D8B", "darkslategray":"2F4F4F",
|
573 |
-
"darkturquoise":"00CED1", "darkviolet":"9400D3", "deeppink":"FF1493",
|
574 |
-
"deepskyblue":"00BFFF", "dimgray":"696969", "dodgerblue":"1E90FF",
|
575 |
-
"firebrick":"B22222", "floralwhite":"FFFAF0", "forestgreen":"228B22",
|
576 |
-
"fuchsia":"F0F", "gainsboro":"DCDCDC", "ghostwhite":"F8F8FF",
|
577 |
-
"gold":"FFD700", "goldenrod":"DAA520", "gray":"808080",
|
578 |
-
"green":"008000", "greenyellow":"ADFF2F", "honeydew":"F0FFF0",
|
579 |
-
"hotpink":"FF69B4", "indianred":"CD5C5C", "indigo":"4B0082",
|
580 |
-
"ivory":"FFFFF0", "khaki":"F0E68C", "lavender":"E6E6FA",
|
581 |
-
"lavenderblush":"FFF0F5", "lawngreen":"7CFC00", "lemonchiffon":"FFFACD",
|
582 |
-
"lightblue":"ADD8E6", "lightcoral":"F08080", "lightcyan":"E0FFFF",
|
583 |
-
"lightgoldenrodyellow":"FAFAD2", "lightgreen":"90EE90", "lightgrey":"D3D3D3",
|
584 |
-
"lightpink":"FFB6C1", "lightsalmon":"FFA07A", "lightseagreen":"20B2AA",
|
585 |
-
"lightskyblue":"87CEFA", "lightslategray":"789", "lightsteelblue":"B0C4DE",
|
586 |
-
"lightyellow":"FFFFE0", "lime":"0F0", "limegreen":"32CD32",
|
587 |
-
"linen":"FAF0E6", "magenta":"F0F", "maroon":"800000",
|
588 |
-
"mediumauqamarine":"66CDAA", "mediumblue":"0000CD", "mediumorchid":"BA55D3",
|
589 |
-
"mediumpurple":"9370D8", "mediumseagreen":"3CB371", "mediumslateblue":"7B68EE",
|
590 |
-
"mediumspringgreen":"00FA9A", "mediumturquoise":"48D1CC", "mediumvioletred":"C71585",
|
591 |
-
"midnightblue":"191970", "mintcream":"F5FFFA", "mistyrose":"FFE4E1",
|
592 |
-
"moccasin":"FFE4B5", "navajowhite":"FFDEAD", "navy":"000080",
|
593 |
-
"oldlace":"FDF5E6", "olive":"808000", "olivedrab":"688E23",
|
594 |
-
"orange":"FFA500", "orangered":"FF4500", "orchid":"DA70D6",
|
595 |
-
"palegoldenrod":"EEE8AA", "palegreen":"98FB98", "paleturquoise":"AFEEEE",
|
596 |
-
"palevioletred":"D87093", "papayawhip":"FFEFD5", "peachpuff":"FFDAB9",
|
597 |
-
"peru":"CD853F", "pink":"FFC0CB", "plum":"DDA0DD",
|
598 |
-
"powderblue":"B0E0E6", "purple":"800080", "red":"F00",
|
599 |
-
"rosybrown":"BC8F8F", "royalblue":"4169E1", "saddlebrown":"8B4513",
|
600 |
-
"salmon":"FA8072", "sandybrown":"F4A460", "seagreen":"2E8B57",
|
601 |
-
"seashell":"FFF5EE", "sienna":"A0522D", "silver":"C0C0C0",
|
602 |
-
"skyblue":"87CEEB", "slateblue":"6A5ACD", "slategray":"708090",
|
603 |
-
"snow":"FFFAFA", "springgreen":"00FF7F", "steelblue":"4682B4",
|
604 |
-
"tan":"D2B48C", "teal":"008080", "thistle":"D8BFD8",
|
605 |
-
"tomato":"FF6347", "turquoise":"40E0D0", "violet":"EE82EE",
|
606 |
-
"wheat":"F5DEB3", "white":"FFF", "whitesmoke":"F5F5F5",
|
607 |
-
"yellow":"FF0", "yellowgreen":"9ACD32"
|
608 |
-
};
|
609 |
-
|
610 |
-
Color.prototype = {
|
611 |
-
/**
|
612 |
-
* @private
|
613 |
-
*/
|
614 |
-
parse: function() {
|
615 |
-
if( !this._color ) {
|
616 |
-
var me = this,
|
617 |
-
v = me.val,
|
618 |
-
vLower,
|
619 |
-
m = v.match( Color.rgbaRE );
|
620 |
-
if( m ) {
|
621 |
-
me._color = 'rgb(' + m[1] + ',' + m[2] + ',' + m[3] + ')';
|
622 |
-
me._alpha = parseFloat( m[4] );
|
623 |
-
}
|
624 |
-
else {
|
625 |
-
if( ( vLower = v.toLowerCase() ) in Color.names ) {
|
626 |
-
v = '#' + Color.names[vLower];
|
627 |
-
}
|
628 |
-
me._color = v;
|
629 |
-
me._alpha = ( v === 'transparent' ? 0 : 1 );
|
630 |
-
}
|
631 |
-
}
|
632 |
-
},
|
633 |
-
|
634 |
-
/**
|
635 |
-
* Retrieve the value of the color in a format usable by IE natively. This will be the same as
|
636 |
-
* the raw input value, except for rgba values which will be converted to an rgb value.
|
637 |
-
* @param {Element} el The context element, used to get 'currentColor' keyword value.
|
638 |
-
* @return {string} Color value
|
639 |
-
*/
|
640 |
-
colorValue: function( el ) {
|
641 |
-
this.parse();
|
642 |
-
return this._color === 'currentColor' ? el.currentStyle.color : this._color;
|
643 |
-
},
|
644 |
-
|
645 |
-
/**
|
646 |
-
* Retrieve the alpha value of the color. Will be 1 for all values except for rgba values
|
647 |
-
* with an alpha component.
|
648 |
-
* @return {number} The alpha value, from 0 to 1.
|
649 |
-
*/
|
650 |
-
alpha: function() {
|
651 |
-
this.parse();
|
652 |
-
return this._alpha;
|
653 |
-
}
|
654 |
-
};
|
655 |
-
|
656 |
-
|
657 |
-
/**
|
658 |
-
* Retrieve a PIE.Color instance for the given value. A shared singleton instance is returned for each unique value.
|
659 |
-
* @param {string} val The CSS string representing the color. It is assumed that this will already have
|
660 |
-
* been validated as a valid color syntax.
|
661 |
-
*/
|
662 |
-
PIE.getColor = function(val) {
|
663 |
-
return instances[ val ] || ( instances[ val ] = new Color( val ) );
|
664 |
-
};
|
665 |
-
|
666 |
-
return Color;
|
667 |
-
})();/**
|
668 |
-
* A tokenizer for CSS value strings.
|
669 |
-
* @constructor
|
670 |
-
* @param {string} css The CSS value string
|
671 |
-
*/
|
672 |
-
PIE.Tokenizer = (function() {
|
673 |
-
function Tokenizer( css ) {
|
674 |
-
this.css = css;
|
675 |
-
this.ch = 0;
|
676 |
-
this.tokens = [];
|
677 |
-
this.tokenIndex = 0;
|
678 |
-
}
|
679 |
-
|
680 |
-
/**
|
681 |
-
* Enumeration of token type constants.
|
682 |
-
* @enum {number}
|
683 |
-
*/
|
684 |
-
var Type = Tokenizer.Type = {
|
685 |
-
ANGLE: 1,
|
686 |
-
CHARACTER: 2,
|
687 |
-
COLOR: 4,
|
688 |
-
DIMEN: 8,
|
689 |
-
FUNCTION: 16,
|
690 |
-
IDENT: 32,
|
691 |
-
LENGTH: 64,
|
692 |
-
NUMBER: 128,
|
693 |
-
OPERATOR: 256,
|
694 |
-
PERCENT: 512,
|
695 |
-
STRING: 1024,
|
696 |
-
URL: 2048
|
697 |
-
};
|
698 |
-
|
699 |
-
/**
|
700 |
-
* A single token
|
701 |
-
* @constructor
|
702 |
-
* @param {number} type The type of the token - see PIE.Tokenizer.Type
|
703 |
-
* @param {string} value The value of the token
|
704 |
-
*/
|
705 |
-
Tokenizer.Token = function( type, value ) {
|
706 |
-
this.tokenType = type;
|
707 |
-
this.tokenValue = value;
|
708 |
-
};
|
709 |
-
Tokenizer.Token.prototype = {
|
710 |
-
isLength: function() {
|
711 |
-
return this.tokenType & Type.LENGTH || ( this.tokenType & Type.NUMBER && this.tokenValue === '0' );
|
712 |
-
},
|
713 |
-
isLengthOrPercent: function() {
|
714 |
-
return this.isLength() || this.tokenType & Type.PERCENT;
|
715 |
-
}
|
716 |
-
};
|
717 |
-
|
718 |
-
Tokenizer.prototype = {
|
719 |
-
whitespace: /\s/,
|
720 |
-
number: /^[\+\-]?(\d*\.)?\d+/,
|
721 |
-
url: /^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,
|
722 |
-
ident: /^\-?[_a-z][\w-]*/i,
|
723 |
-
string: /^("([^"]*)"|'([^']*)')/,
|
724 |
-
operator: /^[\/,]/,
|
725 |
-
hash: /^#[\w]+/,
|
726 |
-
hashColor: /^#([\da-f]{6}|[\da-f]{3})/i,
|
727 |
-
|
728 |
-
unitTypes: {
|
729 |
-
'px': Type.LENGTH, 'em': Type.LENGTH, 'ex': Type.LENGTH,
|
730 |
-
'mm': Type.LENGTH, 'cm': Type.LENGTH, 'in': Type.LENGTH,
|
731 |
-
'pt': Type.LENGTH, 'pc': Type.LENGTH,
|
732 |
-
'deg': Type.ANGLE, 'rad': Type.ANGLE, 'grad': Type.ANGLE
|
733 |
-
},
|
734 |
-
|
735 |
-
colorNames: {
|
736 |
-
'aqua':1, 'black':1, 'blue':1, 'fuchsia':1, 'gray':1, 'green':1, 'lime':1, 'maroon':1,
|
737 |
-
'navy':1, 'olive':1, 'purple':1, 'red':1, 'silver':1, 'teal':1, 'white':1, 'yellow': 1,
|
738 |
-
'currentColor': 1
|
739 |
-
},
|
740 |
-
|
741 |
-
colorFunctions: {
|
742 |
-
'rgb': 1, 'rgba': 1, 'hsl': 1, 'hsla': 1
|
743 |
-
},
|
744 |
-
|
745 |
-
|
746 |
-
/**
|
747 |
-
* Advance to and return the next token in the CSS string. If the end of the CSS string has
|
748 |
-
* been reached, null will be returned.
|
749 |
-
* @param {boolean} forget - if true, the token will not be stored for the purposes of backtracking with prev().
|
750 |
-
* @return {PIE.Tokenizer.Token}
|
751 |
-
*/
|
752 |
-
next: function( forget ) {
|
753 |
-
var css, ch, firstChar, match, val,
|
754 |
-
me = this;
|
755 |
-
|
756 |
-
function newToken( type, value ) {
|
757 |
-
var tok = new Tokenizer.Token( type, value );
|
758 |
-
if( !forget ) {
|
759 |
-
me.tokens.push( tok );
|
760 |
-
me.tokenIndex++;
|
761 |
-
}
|
762 |
-
return tok;
|
763 |
-
}
|
764 |
-
function failure() {
|
765 |
-
me.tokenIndex++;
|
766 |
-
return null;
|
767 |
-
}
|
768 |
-
|
769 |
-
// In case we previously backed up, return the stored token in the next slot
|
770 |
-
if( this.tokenIndex < this.tokens.length ) {
|
771 |
-
return this.tokens[ this.tokenIndex++ ];
|
772 |
-
}
|
773 |
-
|
774 |
-
// Move past leading whitespace characters
|
775 |
-
while( this.whitespace.test( this.css.charAt( this.ch ) ) ) {
|
776 |
-
this.ch++;
|
777 |
-
}
|
778 |
-
if( this.ch >= this.css.length ) {
|
779 |
-
return failure();
|
780 |
-
}
|
781 |
-
|
782 |
-
ch = this.ch;
|
783 |
-
css = this.css.substring( this.ch );
|
784 |
-
firstChar = css.charAt( 0 );
|
785 |
-
switch( firstChar ) {
|
786 |
-
case '#':
|
787 |
-
if( match = css.match( this.hashColor ) ) {
|
788 |
-
this.ch += match[0].length;
|
789 |
-
return newToken( Type.COLOR, match[0] );
|
790 |
-
}
|
791 |
-
break;
|
792 |
-
|
793 |
-
case '"':
|
794 |
-
case "'":
|
795 |
-
if( match = css.match( this.string ) ) {
|
796 |
-
this.ch += match[0].length;
|
797 |
-
return newToken( Type.STRING, match[2] || match[3] || '' );
|
798 |
-
}
|
799 |
-
break;
|
800 |
-
|
801 |
-
case "/":
|
802 |
-
case ",":
|
803 |
-
this.ch++;
|
804 |
-
return newToken( Type.OPERATOR, firstChar );
|
805 |
-
|
806 |
-
case 'u':
|
807 |
-
if( match = css.match( this.url ) ) {
|
808 |
-
this.ch += match[0].length;
|
809 |
-
return newToken( Type.URL, match[2] || match[3] || match[4] || '' );
|
810 |
-
}
|
811 |
-
}
|
812 |
-
|
813 |
-
// Numbers and values starting with numbers
|
814 |
-
if( match = css.match( this.number ) ) {
|
815 |
-
val = match[0];
|
816 |
-
this.ch += val.length;
|
817 |
-
|
818 |
-
// Check if it is followed by a unit
|
819 |
-
if( css.charAt( val.length ) === '%' ) {
|
820 |
-
this.ch++;
|
821 |
-
return newToken( Type.PERCENT, val + '%' );
|
822 |
-
}
|
823 |
-
if( match = css.substring( val.length ).match( this.ident ) ) {
|
824 |
-
val += match[0];
|
825 |
-
this.ch += match[0].length;
|
826 |
-
return newToken( this.unitTypes[ match[0].toLowerCase() ] || Type.DIMEN, val );
|
827 |
-
}
|
828 |
-
|
829 |
-
// Plain ol' number
|
830 |
-
return newToken( Type.NUMBER, val );
|
831 |
-
}
|
832 |
-
|
833 |
-
// Identifiers
|
834 |
-
if( match = css.match( this.ident ) ) {
|
835 |
-
val = match[0];
|
836 |
-
this.ch += val.length;
|
837 |
-
|
838 |
-
// Named colors
|
839 |
-
if( val.toLowerCase() in PIE.Color.names || val === 'currentColor' ) {
|
840 |
-
return newToken( Type.COLOR, val );
|
841 |
-
}
|
842 |
-
|
843 |
-
// Functions
|
844 |
-
if( css.charAt( val.length ) === '(' ) {
|
845 |
-
this.ch++;
|
846 |
-
|
847 |
-
// Color values in function format: rgb, rgba, hsl, hsla
|
848 |
-
if( val.toLowerCase() in this.colorFunctions ) {
|
849 |
-
function isNum( tok ) {
|
850 |
-
return tok && tok.tokenType & Type.NUMBER;
|
851 |
-
}
|
852 |
-
function isNumOrPct( tok ) {
|
853 |
-
return tok && ( tok.tokenType & ( Type.NUMBER | Type.PERCENT ) );
|
854 |
-
}
|
855 |
-
function isValue( tok, val ) {
|
856 |
-
return tok && tok.tokenValue === val;
|
857 |
-
}
|
858 |
-
function next() {
|
859 |
-
return me.next( 1 );
|
860 |
-
}
|
861 |
-
|
862 |
-
if( ( val.charAt(0) === 'r' ? isNumOrPct( next() ) : isNum( next() ) ) &&
|
863 |
-
isValue( next(), ',' ) &&
|
864 |
-
isNumOrPct( next() ) &&
|
865 |
-
isValue( next(), ',' ) &&
|
866 |
-
isNumOrPct( next() ) &&
|
867 |
-
( val === 'rgb' || val === 'hsa' || (
|
868 |
-
isValue( next(), ',' ) &&
|
869 |
-
isNum( next() )
|
870 |
-
) ) &&
|
871 |
-
isValue( next(), ')' ) ) {
|
872 |
-
return newToken( Type.COLOR, this.css.substring( ch, this.ch ) );
|
873 |
-
}
|
874 |
-
return failure();
|
875 |
-
}
|
876 |
-
|
877 |
-
return newToken( Type.FUNCTION, val );
|
878 |
-
}
|
879 |
-
|
880 |
-
// Other identifier
|
881 |
-
return newToken( Type.IDENT, val );
|
882 |
-
}
|
883 |
-
|
884 |
-
// Standalone character
|
885 |
-
this.ch++;
|
886 |
-
return newToken( Type.CHARACTER, firstChar );
|
887 |
-
},
|
888 |
-
|
889 |
-
/**
|
890 |
-
* Determine whether there is another token
|
891 |
-
* @return {boolean}
|
892 |
-
*/
|
893 |
-
hasNext: function() {
|
894 |
-
var next = this.next();
|
895 |
-
this.prev();
|
896 |
-
return !!next;
|
897 |
-
},
|
898 |
-
|
899 |
-
/**
|
900 |
-
* Back up and return the previous token
|
901 |
-
* @return {PIE.Tokenizer.Token}
|
902 |
-
*/
|
903 |
-
prev: function() {
|
904 |
-
return this.tokens[ this.tokenIndex-- - 2 ];
|
905 |
-
},
|
906 |
-
|
907 |
-
/**
|
908 |
-
* Retrieve all the tokens in the CSS string
|
909 |
-
* @return {Array.<PIE.Tokenizer.Token>}
|
910 |
-
*/
|
911 |
-
all: function() {
|
912 |
-
while( this.next() ) {}
|
913 |
-
return this.tokens;
|
914 |
-
},
|
915 |
-
|
916 |
-
/**
|
917 |
-
* Return a list of tokens from the current position until the given function returns
|
918 |
-
* true. The final token will not be included in the list.
|
919 |
-
* @param {function():boolean} func - test function
|
920 |
-
* @param {boolean} require - if true, then if the end of the CSS string is reached
|
921 |
-
* before the test function returns true, null will be returned instead of the
|
922 |
-
* tokens that have been found so far.
|
923 |
-
* @return {Array.<PIE.Tokenizer.Token>}
|
924 |
-
*/
|
925 |
-
until: function( func, require ) {
|
926 |
-
var list = [], t, hit;
|
927 |
-
while( t = this.next() ) {
|
928 |
-
if( func( t ) ) {
|
929 |
-
hit = true;
|
930 |
-
this.prev();
|
931 |
-
break;
|
932 |
-
}
|
933 |
-
list.push( t );
|
934 |
-
}
|
935 |
-
return require && !hit ? null : list;
|
936 |
-
}
|
937 |
-
};
|
938 |
-
|
939 |
-
return Tokenizer;
|
940 |
-
})();/**
|
941 |
-
* Handles calculating, caching, and detecting changes to size and position of the element.
|
942 |
-
* @constructor
|
943 |
-
* @param {Element} el the target element
|
944 |
-
*/
|
945 |
-
PIE.BoundsInfo = function( el ) {
|
946 |
-
this.targetElement = el;
|
947 |
-
};
|
948 |
-
PIE.BoundsInfo.prototype = {
|
949 |
-
|
950 |
-
_locked: 0,
|
951 |
-
|
952 |
-
positionChanged: function() {
|
953 |
-
var last = this._lastBounds,
|
954 |
-
bounds;
|
955 |
-
return !last || ( ( bounds = this.getBounds() ) && ( last.x !== bounds.x || last.y !== bounds.y ) );
|
956 |
-
},
|
957 |
-
|
958 |
-
sizeChanged: function() {
|
959 |
-
var last = this._lastBounds,
|
960 |
-
bounds;
|
961 |
-
return !last || ( ( bounds = this.getBounds() ) && ( last.w !== bounds.w || last.h !== bounds.h ) );
|
962 |
-
},
|
963 |
-
|
964 |
-
getLiveBounds: function() {
|
965 |
-
var rect = this.targetElement.getBoundingClientRect();
|
966 |
-
return {
|
967 |
-
x: rect.left,
|
968 |
-
y: rect.top,
|
969 |
-
w: rect.right - rect.left,
|
970 |
-
h: rect.bottom - rect.top
|
971 |
-
};
|
972 |
-
},
|
973 |
-
|
974 |
-
getBounds: function() {
|
975 |
-
return this._locked ?
|
976 |
-
( this._lockedBounds || ( this._lockedBounds = this.getLiveBounds() ) ) :
|
977 |
-
this.getLiveBounds();
|
978 |
-
},
|
979 |
-
|
980 |
-
hasBeenQueried: function() {
|
981 |
-
return !!this._lastBounds;
|
982 |
-
},
|
983 |
-
|
984 |
-
lock: function() {
|
985 |
-
++this._locked;
|
986 |
-
},
|
987 |
-
|
988 |
-
unlock: function() {
|
989 |
-
if( !--this._locked ) {
|
990 |
-
if( this._lockedBounds ) this._lastBounds = this._lockedBounds;
|
991 |
-
this._lockedBounds = null;
|
992 |
-
}
|
993 |
-
}
|
994 |
-
|
995 |
-
};
|
996 |
-
(function() {
|
997 |
-
|
998 |
-
function cacheWhenLocked( fn ) {
|
999 |
-
var uid = PIE.Util.getUID( fn );
|
1000 |
-
return function() {
|
1001 |
-
if( this._locked ) {
|
1002 |
-
var cache = this._lockedValues || ( this._lockedValues = {} );
|
1003 |
-
return ( uid in cache ) ? cache[ uid ] : ( cache[ uid ] = fn.call( this ) );
|
1004 |
-
} else {
|
1005 |
-
return fn.call( this );
|
1006 |
-
}
|
1007 |
-
}
|
1008 |
-
}
|
1009 |
-
|
1010 |
-
|
1011 |
-
PIE.StyleInfoBase = {
|
1012 |
-
|
1013 |
-
_locked: 0,
|
1014 |
-
|
1015 |
-
/**
|
1016 |
-
* Create a new StyleInfo class, with the standard constructor, and augmented by
|
1017 |
-
* the StyleInfoBase's members.
|
1018 |
-
* @param proto
|
1019 |
-
*/
|
1020 |
-
newStyleInfo: function( proto ) {
|
1021 |
-
function StyleInfo( el ) {
|
1022 |
-
this.targetElement = el;
|
1023 |
-
}
|
1024 |
-
PIE.Util.merge( StyleInfo.prototype, PIE.StyleInfoBase, proto );
|
1025 |
-
StyleInfo._propsCache = {};
|
1026 |
-
return StyleInfo;
|
1027 |
-
},
|
1028 |
-
|
1029 |
-
/**
|
1030 |
-
* Get an object representation of the target CSS style, caching it for each unique
|
1031 |
-
* CSS value string.
|
1032 |
-
* @return {Object}
|
1033 |
-
*/
|
1034 |
-
getProps: function() {
|
1035 |
-
var css = this.getCss(),
|
1036 |
-
cache = this.constructor._propsCache;
|
1037 |
-
return css ? ( css in cache ? cache[ css ] : ( cache[ css ] = this.parseCss( css ) ) ) : null;
|
1038 |
-
},
|
1039 |
-
|
1040 |
-
/**
|
1041 |
-
* Get the raw CSS value for the target style
|
1042 |
-
* @return {string}
|
1043 |
-
*/
|
1044 |
-
getCss: cacheWhenLocked( function() {
|
1045 |
-
var el = this.targetElement,
|
1046 |
-
ctor = this.constructor,
|
1047 |
-
s = el.style,
|
1048 |
-
cs = el.currentStyle,
|
1049 |
-
cssProp = this.cssProperty,
|
1050 |
-
styleProp = this.styleProperty,
|
1051 |
-
prefixedCssProp = ctor._prefixedCssProp || ( ctor._prefixedCssProp = PIE.CSS_PREFIX + cssProp ),
|
1052 |
-
prefixedStyleProp = ctor._prefixedStyleProp || ( ctor._prefixedStyleProp = PIE.STYLE_PREFIX + styleProp.charAt(0).toUpperCase() + styleProp.substring(1) );
|
1053 |
-
return s[ prefixedStyleProp ] || cs.getAttribute( prefixedCssProp ) || s[ styleProp ] || cs.getAttribute( cssProp );
|
1054 |
-
} ),
|
1055 |
-
|
1056 |
-
/**
|
1057 |
-
* Determine whether the target CSS style is active.
|
1058 |
-
* @return {boolean}
|
1059 |
-
*/
|
1060 |
-
isActive: cacheWhenLocked( function() {
|
1061 |
-
return !!this.getProps();
|
1062 |
-
} ),
|
1063 |
-
|
1064 |
-
/**
|
1065 |
-
* Determine whether the target CSS style has changed since the last time it was used.
|
1066 |
-
* @return {boolean}
|
1067 |
-
*/
|
1068 |
-
changed: cacheWhenLocked( function() {
|
1069 |
-
var currentCss = this.getCss(),
|
1070 |
-
changed = currentCss !== this._lastCss;
|
1071 |
-
this._lastCss = currentCss;
|
1072 |
-
return changed;
|
1073 |
-
} ),
|
1074 |
-
|
1075 |
-
cacheWhenLocked: cacheWhenLocked,
|
1076 |
-
|
1077 |
-
lock: function() {
|
1078 |
-
++this._locked;
|
1079 |
-
},
|
1080 |
-
|
1081 |
-
unlock: function() {
|
1082 |
-
if( !--this._locked ) {
|
1083 |
-
delete this._lockedValues;
|
1084 |
-
}
|
1085 |
-
}
|
1086 |
-
};
|
1087 |
-
|
1088 |
-
})();/**
|
1089 |
-
* Handles parsing, caching, and detecting changes to background (and -pie-background) CSS
|
1090 |
-
* @constructor
|
1091 |
-
* @param {Element} el the target element
|
1092 |
-
*/
|
1093 |
-
PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1094 |
-
|
1095 |
-
cssProperty: PIE.CSS_PREFIX + 'background',
|
1096 |
-
styleProperty: PIE.STYLE_PREFIX + 'Background',
|
1097 |
-
|
1098 |
-
attachIdents: { 'scroll':1, 'fixed':1, 'local':1 },
|
1099 |
-
repeatIdents: { 'repeat-x':1, 'repeat-y':1, 'repeat':1, 'no-repeat':1 },
|
1100 |
-
originIdents: { 'padding-box':1, 'border-box':1, 'content-box':1 },
|
1101 |
-
clipIdents: { 'padding-box':1, 'border-box':1 },
|
1102 |
-
positionIdents: { 'top':1, 'right':1, 'bottom':1, 'left':1, 'center':1 },
|
1103 |
-
sizeIdents: { 'contain':1, 'cover':1 },
|
1104 |
-
|
1105 |
-
/**
|
1106 |
-
* For background styles, we support the -pie-background property but fall back to the standard
|
1107 |
-
* backround* properties. The reason we have to use the prefixed version is that IE natively
|
1108 |
-
* parses the standard properties and if it sees something it doesn't know how to parse, for example
|
1109 |
-
* multiple values or gradient definitions, it will throw that away and not make it available through
|
1110 |
-
* currentStyle.
|
1111 |
-
*
|
1112 |
-
* Format of return object:
|
1113 |
-
* {
|
1114 |
-
* color: <PIE.Color>,
|
1115 |
-
* bgImages: [
|
1116 |
-
* {
|
1117 |
-
* imgType: 'image',
|
1118 |
-
* imgUrl: 'image.png',
|
1119 |
-
* imgRepeat: <'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'>,
|
1120 |
-
* bgPosition: <PIE.BgPosition>,
|
1121 |
-
* attachment: <'scroll' | 'fixed' | 'local'>,
|
1122 |
-
* bgOrigin: <'border-box' | 'padding-box' | 'content-box'>,
|
1123 |
-
* clip: <'border-box' | 'padding-box'>,
|
1124 |
-
* size: <'contain' | 'cover' | { w: <'auto' | PIE.Length>, h: <'auto' | PIE.Length> }>
|
1125 |
-
* },
|
1126 |
-
* {
|
1127 |
-
* imgType: 'linear-gradient',
|
1128 |
-
* gradientStart: <PIE.BgPosition>,
|
1129 |
-
* angle: <PIE.Angle>,
|
1130 |
-
* stops: [
|
1131 |
-
* { color: <PIE.Color>, offset: <PIE.Length> },
|
1132 |
-
* { color: <PIE.Color>, offset: <PIE.Length> }, ...
|
1133 |
-
* ]
|
1134 |
-
* }
|
1135 |
-
* ]
|
1136 |
-
* }
|
1137 |
-
* @param {String} css
|
1138 |
-
* @override
|
1139 |
-
*/
|
1140 |
-
parseCss: function( css ) {
|
1141 |
-
var el = this.targetElement,
|
1142 |
-
cs = el.currentStyle,
|
1143 |
-
tokenizer, token, image,
|
1144 |
-
tok_type = PIE.Tokenizer.Type,
|
1145 |
-
type_operator = tok_type.OPERATOR,
|
1146 |
-
type_ident = tok_type.IDENT,
|
1147 |
-
type_color = tok_type.COLOR,
|
1148 |
-
tokType, tokVal,
|
1149 |
-
positionIdents = this.positionIdents,
|
1150 |
-
gradient, stop,
|
1151 |
-
props = null;
|
1152 |
-
|
1153 |
-
function isBgPosToken( token ) {
|
1154 |
-
return token.isLengthOrPercent() || ( token.tokenType & type_ident && token.tokenValue in positionIdents );
|
1155 |
-
}
|
1156 |
-
|
1157 |
-
function sizeToken( token ) {
|
1158 |
-
return ( token.isLengthOrPercent() && PIE.getLength( token.tokenValue ) ) || ( token.tokenValue === 'auto' && 'auto' );
|
1159 |
-
}
|
1160 |
-
|
1161 |
-
// If the CSS3-specific -pie-background property is present, parse it
|
1162 |
-
if( this.getCss3() ) {
|
1163 |
-
tokenizer = new PIE.Tokenizer( css );
|
1164 |
-
props = { bgImages: [] };
|
1165 |
-
image = {};
|
1166 |
-
|
1167 |
-
while( token = tokenizer.next() ) {
|
1168 |
-
tokType = token.tokenType;
|
1169 |
-
tokVal = token.tokenValue;
|
1170 |
-
|
1171 |
-
if( !image.imgType && tokType & tok_type.FUNCTION && tokVal === 'linear-gradient' ) {
|
1172 |
-
gradient = { stops: [], imgType: tokVal };
|
1173 |
-
stop = {};
|
1174 |
-
while( token = tokenizer.next() ) {
|
1175 |
-
tokType = token.tokenType;
|
1176 |
-
tokVal = token.tokenValue;
|
1177 |
-
|
1178 |
-
// If we reached the end of the function and had at least 2 stops, flush the info
|
1179 |
-
if( tokType & tok_type.CHARACTER && tokVal === ')' ) {
|
1180 |
-
if( stop.color ) {
|
1181 |
-
gradient.stops.push( stop );
|
1182 |
-
}
|
1183 |
-
if( gradient.stops.length > 1 ) {
|
1184 |
-
PIE.Util.merge( image, gradient );
|
1185 |
-
}
|
1186 |
-
break;
|
1187 |
-
}
|
1188 |
-
|
1189 |
-
// Color stop - must start with color
|
1190 |
-
if( tokType & type_color ) {
|
1191 |
-
// if we already have an angle/position, make sure that the previous token was a comma
|
1192 |
-
if( gradient.angle || gradient.gradientStart ) {
|
1193 |
-
token = tokenizer.prev();
|
1194 |
-
if( token.tokenType !== type_operator ) {
|
1195 |
-
break; //fail
|
1196 |
-
}
|
1197 |
-
tokenizer.next();
|
1198 |
-
}
|
1199 |
-
|
1200 |
-
stop = {
|
1201 |
-
color: PIE.getColor( tokVal )
|
1202 |
-
};
|
1203 |
-
// check for offset following color
|
1204 |
-
token = tokenizer.next();
|
1205 |
-
if( token.isLengthOrPercent() ) {
|
1206 |
-
stop.offset = PIE.getLength( token.tokenValue );
|
1207 |
-
} else {
|
1208 |
-
tokenizer.prev();
|
1209 |
-
}
|
1210 |
-
}
|
1211 |
-
// Angle - can only appear in first spot
|
1212 |
-
else if( tokType & tok_type.ANGLE && !gradient.angle && !stop.color && !gradient.stops.length ) {
|
1213 |
-
gradient.angle = new PIE.Angle( token.tokenValue );
|
1214 |
-
}
|
1215 |
-
else if( isBgPosToken( token ) && !gradient.gradientStart && !stop.color && !gradient.stops.length ) {
|
1216 |
-
tokenizer.prev();
|
1217 |
-
gradient.gradientStart = new PIE.BgPosition(
|
1218 |
-
tokenizer.until( function( t ) {
|
1219 |
-
return !isBgPosToken( t );
|
1220 |
-
}, false )
|
1221 |
-
);
|
1222 |
-
}
|
1223 |
-
else if( tokType & type_operator && tokVal === ',' ) {
|
1224 |
-
if( stop.color ) {
|
1225 |
-
gradient.stops.push( stop );
|
1226 |
-
stop = {};
|
1227 |
-
}
|
1228 |
-
}
|
1229 |
-
else {
|
1230 |
-
// Found something we didn't recognize; fail without adding image
|
1231 |
-
break;
|
1232 |
-
}
|
1233 |
-
}
|
1234 |
-
}
|
1235 |
-
else if( !image.imgType && tokType & tok_type.URL ) {
|
1236 |
-
image.imgUrl = tokVal;
|
1237 |
-
image.imgType = 'image';
|
1238 |
-
}
|
1239 |
-
else if( isBgPosToken( token ) && !image.size ) {
|
1240 |
-
tokenizer.prev();
|
1241 |
-
image.bgPosition = new PIE.BgPosition(
|
1242 |
-
tokenizer.until( function( t ) {
|
1243 |
-
return !isBgPosToken( t );
|
1244 |
-
}, false )
|
1245 |
-
);
|
1246 |
-
}
|
1247 |
-
else if( tokType & type_ident ) {
|
1248 |
-
if( tokVal in this.repeatIdents ) {
|
1249 |
-
image.imgRepeat = tokVal;
|
1250 |
-
}
|
1251 |
-
else if( tokVal in this.originIdents ) {
|
1252 |
-
image.bgOrigin = tokVal;
|
1253 |
-
if( tokVal in this.clipIdents ) {
|
1254 |
-
image.clip = tokVal;
|
1255 |
-
}
|
1256 |
-
}
|
1257 |
-
else if( tokVal in this.attachIdents ) {
|
1258 |
-
image.attachment = tokVal;
|
1259 |
-
}
|
1260 |
-
}
|
1261 |
-
else if( tokType & type_color && !props.color ) {
|
1262 |
-
props.color = PIE.getColor( tokVal );
|
1263 |
-
}
|
1264 |
-
else if( tokType & type_operator ) {
|
1265 |
-
// background size
|
1266 |
-
if( tokVal === '/' ) {
|
1267 |
-
token = tokenizer.next();
|
1268 |
-
tokType = token.tokenType;
|
1269 |
-
tokVal = token.tokenValue;
|
1270 |
-
if( tokType & type_ident && tokVal in this.sizeIdents ) {
|
1271 |
-
image.size = tokVal;
|
1272 |
-
}
|
1273 |
-
else if( tokVal = sizeToken( token ) ) {
|
1274 |
-
image.size = {
|
1275 |
-
w: tokVal,
|
1276 |
-
h: sizeToken( tokenizer.next() ) || ( tokenizer.prev() && tokVal )
|
1277 |
-
};
|
1278 |
-
}
|
1279 |
-
}
|
1280 |
-
// new layer
|
1281 |
-
else if( tokVal === ',' && image.imgType ) {
|
1282 |
-
props.bgImages.push( image );
|
1283 |
-
image = {};
|
1284 |
-
}
|
1285 |
-
}
|
1286 |
-
else {
|
1287 |
-
// Found something unrecognized; chuck everything
|
1288 |
-
return null;
|
1289 |
-
}
|
1290 |
-
}
|
1291 |
-
|
1292 |
-
// leftovers
|
1293 |
-
if( image.imgType ) {
|
1294 |
-
props.bgImages.push( image );
|
1295 |
-
}
|
1296 |
-
}
|
1297 |
-
|
1298 |
-
// Otherwise, use the standard background properties; let IE give us the values rather than parsing them
|
1299 |
-
else {
|
1300 |
-
this.withActualBg( function() {
|
1301 |
-
var posX = cs.backgroundPositionX,
|
1302 |
-
posY = cs.backgroundPositionY,
|
1303 |
-
img = cs.backgroundImage,
|
1304 |
-
color = cs.backgroundColor;
|
1305 |
-
|
1306 |
-
props = {};
|
1307 |
-
if( color !== 'transparent' ) {
|
1308 |
-
props.color = PIE.getColor( color )
|
1309 |
-
}
|
1310 |
-
if( img !== 'none' ) {
|
1311 |
-
props.bgImages = [ {
|
1312 |
-
imgType: 'image',
|
1313 |
-
imgUrl: new PIE.Tokenizer( img ).next().tokenValue,
|
1314 |
-
imgRepeat: cs.backgroundRepeat,
|
1315 |
-
bgPosition: new PIE.BgPosition( new PIE.Tokenizer( posX + ' ' + posY ).all() )
|
1316 |
-
} ];
|
1317 |
-
}
|
1318 |
-
} );
|
1319 |
-
}
|
1320 |
-
|
1321 |
-
return ( props && ( props.color || ( props.bgImages && props.bgImages[0] ) ) ) ? props : null;
|
1322 |
-
},
|
1323 |
-
|
1324 |
-
/**
|
1325 |
-
* Execute a function with the actual background styles (not overridden with runtimeStyle
|
1326 |
-
* properties set by the renderers) available via currentStyle.
|
1327 |
-
* @param fn
|
1328 |
-
*/
|
1329 |
-
withActualBg: function( fn ) {
|
1330 |
-
var rs = this.targetElement.runtimeStyle,
|
1331 |
-
rsImage = rs.backgroundImage,
|
1332 |
-
rsColor = rs.backgroundColor,
|
1333 |
-
ret;
|
1334 |
-
|
1335 |
-
if( rsImage ) rs.backgroundImage = '';
|
1336 |
-
if( rsColor ) rs.backgroundColor = '';
|
1337 |
-
|
1338 |
-
ret = fn.call( this );
|
1339 |
-
|
1340 |
-
if( rsImage ) rs.backgroundImage = rsImage;
|
1341 |
-
if( rsColor ) rs.backgroundColor = rsColor;
|
1342 |
-
|
1343 |
-
return ret;
|
1344 |
-
},
|
1345 |
-
|
1346 |
-
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1347 |
-
return this.getCss3() ||
|
1348 |
-
this.withActualBg( function() {
|
1349 |
-
var cs = this.targetElement.currentStyle;
|
1350 |
-
return cs.backgroundColor + ' ' + cs.backgroundImage + ' ' + cs.backgroundRepeat + ' ' +
|
1351 |
-
cs.backgroundPositionX + ' ' + cs.backgroundPositionY;
|
1352 |
-
} );
|
1353 |
-
} ),
|
1354 |
-
|
1355 |
-
getCss3: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1356 |
-
var el = this.targetElement;
|
1357 |
-
return el.style[ this.styleProperty ] || el.currentStyle.getAttribute( this.cssProperty );
|
1358 |
-
} ),
|
1359 |
-
|
1360 |
-
/**
|
1361 |
-
* Tests if style.PiePngFix or the -pie-png-fix property is set to true in IE6.
|
1362 |
-
*/
|
1363 |
-
isPngFix: function() {
|
1364 |
-
var val = 0, el;
|
1365 |
-
if( PIE.ieVersion < 7 ) {
|
1366 |
-
el = this.targetElement;
|
1367 |
-
val = ( '' + ( el.style[ PIE.STYLE_PREFIX + 'PngFix' ] || el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'png-fix' ) ) === 'true' );
|
1368 |
-
}
|
1369 |
-
return val;
|
1370 |
-
},
|
1371 |
-
|
1372 |
-
/**
|
1373 |
-
* The isActive logic is slightly different, because getProps() always returns an object
|
1374 |
-
* even if it is just falling back to the native background properties. But we only want
|
1375 |
-
* to report is as being "active" if either the -pie-background override property is present
|
1376 |
-
* and parses successfully or '-pie-png-fix' is set to true in IE6.
|
1377 |
-
*/
|
1378 |
-
isActive: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1379 |
-
return (this.getCss3() || this.isPngFix()) && !!this.getProps();
|
1380 |
-
} )
|
1381 |
-
|
1382 |
-
} );/**
|
1383 |
-
* Handles parsing, caching, and detecting changes to border CSS
|
1384 |
-
* @constructor
|
1385 |
-
* @param {Element} el the target element
|
1386 |
-
*/
|
1387 |
-
PIE.BorderStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1388 |
-
|
1389 |
-
sides: [ 'Top', 'Right', 'Bottom', 'Left' ],
|
1390 |
-
namedWidths: {
|
1391 |
-
'thin': '1px',
|
1392 |
-
'medium': '3px',
|
1393 |
-
'thick': '5px'
|
1394 |
-
},
|
1395 |
-
|
1396 |
-
parseCss: function( css ) {
|
1397 |
-
var w = {},
|
1398 |
-
s = {},
|
1399 |
-
c = {},
|
1400 |
-
active = false,
|
1401 |
-
colorsSame = true,
|
1402 |
-
stylesSame = true,
|
1403 |
-
widthsSame = true;
|
1404 |
-
|
1405 |
-
this.withActualBorder( function() {
|
1406 |
-
var el = this.targetElement,
|
1407 |
-
cs = el.currentStyle,
|
1408 |
-
i = 0,
|
1409 |
-
style, color, width, lastStyle, lastColor, lastWidth, side, ltr;
|
1410 |
-
for( ; i < 4; i++ ) {
|
1411 |
-
side = this.sides[ i ];
|
1412 |
-
|
1413 |
-
ltr = side.charAt(0).toLowerCase();
|
1414 |
-
style = s[ ltr ] = cs[ 'border' + side + 'Style' ];
|
1415 |
-
color = cs[ 'border' + side + 'Color' ];
|
1416 |
-
width = cs[ 'border' + side + 'Width' ];
|
1417 |
-
|
1418 |
-
if( i > 0 ) {
|
1419 |
-
if( style !== lastStyle ) { stylesSame = false; }
|
1420 |
-
if( color !== lastColor ) { colorsSame = false; }
|
1421 |
-
if( width !== lastWidth ) { widthsSame = false; }
|
1422 |
-
}
|
1423 |
-
lastStyle = style;
|
1424 |
-
lastColor = color;
|
1425 |
-
lastWidth = width;
|
1426 |
-
|
1427 |
-
c[ ltr ] = PIE.getColor( color );
|
1428 |
-
|
1429 |
-
width = w[ ltr ] = PIE.getLength( s[ ltr ] === 'none' ? '0' : ( this.namedWidths[ width ] || width ) );
|
1430 |
-
if( width.pixels( this.targetElement ) > 0 ) {
|
1431 |
-
active = true;
|
1432 |
-
}
|
1433 |
-
}
|
1434 |
-
} );
|
1435 |
-
|
1436 |
-
return active ? {
|
1437 |
-
widths: w,
|
1438 |
-
styles: s,
|
1439 |
-
colors: c,
|
1440 |
-
widthsSame: widthsSame,
|
1441 |
-
colorsSame: colorsSame,
|
1442 |
-
stylesSame: stylesSame
|
1443 |
-
} : null;
|
1444 |
-
},
|
1445 |
-
|
1446 |
-
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1447 |
-
var el = this.targetElement,
|
1448 |
-
cs = el.currentStyle,
|
1449 |
-
css;
|
1450 |
-
|
1451 |
-
// Don't redraw or hide borders for cells in border-collapse:collapse tables
|
1452 |
-
if( !( el.tagName in PIE.tableCellTags && el.offsetParent.currentStyle.borderCollapse === 'collapse' ) ) {
|
1453 |
-
this.withActualBorder( function() {
|
1454 |
-
css = cs.borderWidth + '|' + cs.borderStyle + '|' + cs.borderColor;
|
1455 |
-
} );
|
1456 |
-
}
|
1457 |
-
return css;
|
1458 |
-
} ),
|
1459 |
-
|
1460 |
-
/**
|
1461 |
-
* Execute a function with the actual border styles (not overridden with runtimeStyle
|
1462 |
-
* properties set by the renderers) available via currentStyle.
|
1463 |
-
* @param fn
|
1464 |
-
*/
|
1465 |
-
withActualBorder: function( fn ) {
|
1466 |
-
var rs = this.targetElement.runtimeStyle,
|
1467 |
-
rsWidth = rs.borderWidth,
|
1468 |
-
rsColor = rs.borderColor,
|
1469 |
-
ret;
|
1470 |
-
|
1471 |
-
if( rsWidth ) rs.borderWidth = '';
|
1472 |
-
if( rsColor ) rs.borderColor = '';
|
1473 |
-
|
1474 |
-
ret = fn.call( this );
|
1475 |
-
|
1476 |
-
if( rsWidth ) rs.borderWidth = rsWidth;
|
1477 |
-
if( rsColor ) rs.borderColor = rsColor;
|
1478 |
-
|
1479 |
-
return ret;
|
1480 |
-
}
|
1481 |
-
|
1482 |
-
} );
|
1483 |
-
/**
|
1484 |
-
* Handles parsing, caching, and detecting changes to border-radius CSS
|
1485 |
-
* @constructor
|
1486 |
-
* @param {Element} el the target element
|
1487 |
-
*/
|
1488 |
-
(function() {
|
1489 |
-
|
1490 |
-
PIE.BorderRadiusStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1491 |
-
|
1492 |
-
cssProperty: 'border-radius',
|
1493 |
-
styleProperty: 'borderRadius',
|
1494 |
-
|
1495 |
-
parseCss: function( css ) {
|
1496 |
-
var p = null, x, y,
|
1497 |
-
tokenizer, token, length,
|
1498 |
-
hasNonZero = false;
|
1499 |
-
|
1500 |
-
if( css ) {
|
1501 |
-
tokenizer = new PIE.Tokenizer( css );
|
1502 |
-
|
1503 |
-
function collectLengths() {
|
1504 |
-
var arr = [], num;
|
1505 |
-
while( ( token = tokenizer.next() ) && token.isLengthOrPercent() ) {
|
1506 |
-
length = PIE.getLength( token.tokenValue );
|
1507 |
-
num = length.getNumber();
|
1508 |
-
if( num < 0 ) {
|
1509 |
-
return null;
|
1510 |
-
}
|
1511 |
-
if( num > 0 ) {
|
1512 |
-
hasNonZero = true;
|
1513 |
-
}
|
1514 |
-
arr.push( length );
|
1515 |
-
}
|
1516 |
-
return arr.length > 0 && arr.length < 5 ? {
|
1517 |
-
'tl': arr[0],
|
1518 |
-
'tr': arr[1] || arr[0],
|
1519 |
-
'br': arr[2] || arr[0],
|
1520 |
-
'bl': arr[3] || arr[1] || arr[0]
|
1521 |
-
} : null;
|
1522 |
-
}
|
1523 |
-
|
1524 |
-
// Grab the initial sequence of lengths
|
1525 |
-
if( x = collectLengths() ) {
|
1526 |
-
// See if there is a slash followed by more lengths, for the y-axis radii
|
1527 |
-
if( token ) {
|
1528 |
-
if( token.tokenType & PIE.Tokenizer.Type.OPERATOR && token.tokenValue === '/' ) {
|
1529 |
-
y = collectLengths();
|
1530 |
-
}
|
1531 |
-
} else {
|
1532 |
-
y = x;
|
1533 |
-
}
|
1534 |
-
|
1535 |
-
// Treat all-zero values the same as no value
|
1536 |
-
if( hasNonZero && x && y ) {
|
1537 |
-
p = { x: x, y : y };
|
1538 |
-
}
|
1539 |
-
}
|
1540 |
-
}
|
1541 |
-
|
1542 |
-
return p;
|
1543 |
-
}
|
1544 |
-
} );
|
1545 |
-
|
1546 |
-
var zero = PIE.getLength( '0' ),
|
1547 |
-
zeros = { 'tl': zero, 'tr': zero, 'br': zero, 'bl': zero };
|
1548 |
-
PIE.BorderRadiusStyleInfo.ALL_ZERO = { x: zeros, y: zeros };
|
1549 |
-
|
1550 |
-
})();/**
|
1551 |
-
* Handles parsing, caching, and detecting changes to border-image CSS
|
1552 |
-
* @constructor
|
1553 |
-
* @param {Element} el the target element
|
1554 |
-
*/
|
1555 |
-
PIE.BorderImageStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1556 |
-
|
1557 |
-
cssProperty: 'border-image',
|
1558 |
-
styleProperty: 'borderImage',
|
1559 |
-
|
1560 |
-
repeatIdents: { 'stretch':1, 'round':1, 'repeat':1, 'space':1 },
|
1561 |
-
|
1562 |
-
parseCss: function( css ) {
|
1563 |
-
var p = null, tokenizer, token, type, value,
|
1564 |
-
slices, widths, outsets,
|
1565 |
-
slashCount = 0, cs,
|
1566 |
-
Type = PIE.Tokenizer.Type,
|
1567 |
-
IDENT = Type.IDENT,
|
1568 |
-
NUMBER = Type.NUMBER,
|
1569 |
-
LENGTH = Type.LENGTH,
|
1570 |
-
PERCENT = Type.PERCENT;
|
1571 |
-
|
1572 |
-
if( css ) {
|
1573 |
-
tokenizer = new PIE.Tokenizer( css );
|
1574 |
-
p = {};
|
1575 |
-
|
1576 |
-
function isSlash( token ) {
|
1577 |
-
return token && ( token.tokenType & Type.OPERATOR ) && ( token.tokenValue === '/' );
|
1578 |
-
}
|
1579 |
-
|
1580 |
-
function isFillIdent( token ) {
|
1581 |
-
return token && ( token.tokenType & IDENT ) && ( token.tokenValue === 'fill' );
|
1582 |
-
}
|
1583 |
-
|
1584 |
-
function collectSlicesEtc() {
|
1585 |
-
slices = tokenizer.until( function( tok ) {
|
1586 |
-
return !( tok.tokenType & ( NUMBER | PERCENT ) );
|
1587 |
-
} );
|
1588 |
-
|
1589 |
-
if( isFillIdent( tokenizer.next() ) && !p.fill ) {
|
1590 |
-
p.fill = true;
|
1591 |
-
} else {
|
1592 |
-
tokenizer.prev();
|
1593 |
-
}
|
1594 |
-
|
1595 |
-
if( isSlash( tokenizer.next() ) ) {
|
1596 |
-
slashCount++;
|
1597 |
-
widths = tokenizer.until( function( tok ) {
|
1598 |
-
return !( token.tokenType & ( NUMBER | PERCENT | LENGTH ) ) && !( ( token.tokenType & IDENT ) && token.tokenValue === 'auto' );
|
1599 |
-
} );
|
1600 |
-
|
1601 |
-
if( isSlash( tokenizer.next() ) ) {
|
1602 |
-
slashCount++;
|
1603 |
-
outsets = tokenizer.until( function( tok ) {
|
1604 |
-
return !( token.tokenType & ( NUMBER | LENGTH ) );
|
1605 |
-
} );
|
1606 |
-
}
|
1607 |
-
} else {
|
1608 |
-
tokenizer.prev();
|
1609 |
-
}
|
1610 |
-
}
|
1611 |
-
|
1612 |
-
while( token = tokenizer.next() ) {
|
1613 |
-
type = token.tokenType;
|
1614 |
-
value = token.tokenValue;
|
1615 |
-
|
1616 |
-
// Numbers and/or 'fill' keyword: slice values. May be followed optionally by width values, followed optionally by outset values
|
1617 |
-
if( type & ( NUMBER | PERCENT ) && !slices ) {
|
1618 |
-
tokenizer.prev();
|
1619 |
-
collectSlicesEtc();
|
1620 |
-
}
|
1621 |
-
else if( isFillIdent( token ) && !p.fill ) {
|
1622 |
-
p.fill = true;
|
1623 |
-
collectSlicesEtc();
|
1624 |
-
}
|
1625 |
-
|
1626 |
-
// Idents: one or values for 'repeat'
|
1627 |
-
else if( ( type & IDENT ) && this.repeatIdents[value] && !p.repeat ) {
|
1628 |
-
p.repeat = { h: value };
|
1629 |
-
if( token = tokenizer.next() ) {
|
1630 |
-
if( ( token.tokenType & IDENT ) && this.repeatIdents[token.tokenValue] ) {
|
1631 |
-
p.repeat.v = token.tokenValue;
|
1632 |
-
} else {
|
1633 |
-
tokenizer.prev();
|
1634 |
-
}
|
1635 |
-
}
|
1636 |
-
}
|
1637 |
-
|
1638 |
-
// URL of the image
|
1639 |
-
else if( ( type & Type.URL ) && !p.src ) {
|
1640 |
-
p.src = value;
|
1641 |
-
}
|
1642 |
-
|
1643 |
-
// Found something unrecognized; exit.
|
1644 |
-
else {
|
1645 |
-
return null;
|
1646 |
-
}
|
1647 |
-
}
|
1648 |
-
|
1649 |
-
// Validate what we collected
|
1650 |
-
if( !p.src || !slices || slices.length < 1 || slices.length > 4 ||
|
1651 |
-
( widths && widths.length > 4 ) || ( slashCount === 1 && widths.length < 1 ) ||
|
1652 |
-
( outsets && outsets.length > 4 ) || ( slashCount === 2 && outsets.length < 1 ) ) {
|
1653 |
-
return null;
|
1654 |
-
}
|
1655 |
-
|
1656 |
-
// Fill in missing values
|
1657 |
-
if( !p.repeat ) {
|
1658 |
-
p.repeat = { h: 'stretch' };
|
1659 |
-
}
|
1660 |
-
if( !p.repeat.v ) {
|
1661 |
-
p.repeat.v = p.repeat.h;
|
1662 |
-
}
|
1663 |
-
|
1664 |
-
function distributeSides( tokens, convertFn ) {
|
1665 |
-
return {
|
1666 |
-
t: convertFn( tokens[0] ),
|
1667 |
-
r: convertFn( tokens[1] || tokens[0] ),
|
1668 |
-
b: convertFn( tokens[2] || tokens[0] ),
|
1669 |
-
l: convertFn( tokens[3] || tokens[1] || tokens[0] )
|
1670 |
-
};
|
1671 |
-
}
|
1672 |
-
|
1673 |
-
p.slice = distributeSides( slices, function( tok ) {
|
1674 |
-
return PIE.getLength( ( tok.tokenType & NUMBER ) ? tok.tokenValue + 'px' : tok.tokenValue );
|
1675 |
-
} );
|
1676 |
-
|
1677 |
-
p.width = widths && widths.length > 0 ?
|
1678 |
-
distributeSides( widths, function( tok ) {
|
1679 |
-
return tok.tokenType & ( LENGTH | PERCENT ) ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
|
1680 |
-
} ) :
|
1681 |
-
( cs = this.targetElement.currentStyle ) && {
|
1682 |
-
t: PIE.getLength( cs.borderTopWidth ),
|
1683 |
-
r: PIE.getLength( cs.borderRightWidth ),
|
1684 |
-
b: PIE.getLength( cs.borderBottomWidth ),
|
1685 |
-
l: PIE.getLength( cs.borderLeftWidth )
|
1686 |
-
};
|
1687 |
-
|
1688 |
-
p.outset = distributeSides( outsets || [ 0 ], function( tok ) {
|
1689 |
-
return tok.tokenType & LENGTH ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
|
1690 |
-
} );
|
1691 |
-
}
|
1692 |
-
|
1693 |
-
return p;
|
1694 |
-
}
|
1695 |
-
} );/**
|
1696 |
-
* Handles parsing, caching, and detecting changes to box-shadow CSS
|
1697 |
-
* @constructor
|
1698 |
-
* @param {Element} el the target element
|
1699 |
-
*/
|
1700 |
-
PIE.BoxShadowStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1701 |
-
|
1702 |
-
cssProperty: 'box-shadow',
|
1703 |
-
styleProperty: 'boxShadow',
|
1704 |
-
|
1705 |
-
parseCss: function( css ) {
|
1706 |
-
var props,
|
1707 |
-
getLength = PIE.getLength,
|
1708 |
-
Type = PIE.Tokenizer.Type,
|
1709 |
-
tokenizer;
|
1710 |
-
|
1711 |
-
if( css ) {
|
1712 |
-
tokenizer = new PIE.Tokenizer( css );
|
1713 |
-
props = { outset: [], inset: [] };
|
1714 |
-
|
1715 |
-
function parseItem() {
|
1716 |
-
var token, type, value, color, lengths, inset, len;
|
1717 |
-
|
1718 |
-
while( token = tokenizer.next() ) {
|
1719 |
-
value = token.tokenValue;
|
1720 |
-
type = token.tokenType;
|
1721 |
-
|
1722 |
-
if( type & Type.OPERATOR && value === ',' ) {
|
1723 |
-
break;
|
1724 |
-
}
|
1725 |
-
else if( token.isLength() && !lengths ) {
|
1726 |
-
tokenizer.prev();
|
1727 |
-
lengths = tokenizer.until( function( token ) {
|
1728 |
-
return !token.isLength();
|
1729 |
-
} );
|
1730 |
-
}
|
1731 |
-
else if( type & Type.COLOR && !color ) {
|
1732 |
-
color = value;
|
1733 |
-
}
|
1734 |
-
else if( type & Type.IDENT && value === 'inset' && !inset ) {
|
1735 |
-
inset = true;
|
1736 |
-
}
|
1737 |
-
else { //encountered an unrecognized token; fail.
|
1738 |
-
return false;
|
1739 |
-
}
|
1740 |
-
}
|
1741 |
-
|
1742 |
-
len = lengths && lengths.length;
|
1743 |
-
if( len > 1 && len < 5 ) {
|
1744 |
-
( inset ? props.inset : props.outset ).push( {
|
1745 |
-
xOffset: getLength( lengths[0].tokenValue ),
|
1746 |
-
yOffset: getLength( lengths[1].tokenValue ),
|
1747 |
-
blur: getLength( lengths[2] ? lengths[2].tokenValue : '0' ),
|
1748 |
-
spread: getLength( lengths[3] ? lengths[3].tokenValue : '0' ),
|
1749 |
-
color: PIE.getColor( color || 'currentColor' )
|
1750 |
-
} );
|
1751 |
-
return true;
|
1752 |
-
}
|
1753 |
-
return false;
|
1754 |
-
}
|
1755 |
-
|
1756 |
-
while( parseItem() ) {}
|
1757 |
-
}
|
1758 |
-
|
1759 |
-
return props && ( props.inset.length || props.outset.length ) ? props : null;
|
1760 |
-
}
|
1761 |
-
} );
|
1762 |
-
/**
|
1763 |
-
* Retrieves the state of the element's visibility and display
|
1764 |
-
* @constructor
|
1765 |
-
* @param {Element} el the target element
|
1766 |
-
*/
|
1767 |
-
PIE.VisibilityStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1768 |
-
|
1769 |
-
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1770 |
-
var cs = this.targetElement.currentStyle;
|
1771 |
-
return cs.visibility + '|' + cs.display;
|
1772 |
-
} ),
|
1773 |
-
|
1774 |
-
parseCss: function() {
|
1775 |
-
var el = this.targetElement,
|
1776 |
-
rs = el.runtimeStyle,
|
1777 |
-
cs = el.currentStyle,
|
1778 |
-
rsVis = rs.visibility,
|
1779 |
-
csVis;
|
1780 |
-
|
1781 |
-
rs.visibility = '';
|
1782 |
-
csVis = cs.visibility;
|
1783 |
-
rs.visibility = rsVis;
|
1784 |
-
|
1785 |
-
return {
|
1786 |
-
visible: csVis !== 'hidden',
|
1787 |
-
displayed: cs.display !== 'none'
|
1788 |
-
}
|
1789 |
-
},
|
1790 |
-
|
1791 |
-
/**
|
1792 |
-
* Always return false for isActive, since this property alone will not trigger
|
1793 |
-
* a renderer to do anything.
|
1794 |
-
*/
|
1795 |
-
isActive: function() {
|
1796 |
-
return false;
|
1797 |
-
}
|
1798 |
-
|
1799 |
-
} );
|
1800 |
-
PIE.RendererBase = {
|
1801 |
-
|
1802 |
-
/**
|
1803 |
-
* Create a new Renderer class, with the standard constructor, and augmented by
|
1804 |
-
* the RendererBase's members.
|
1805 |
-
* @param proto
|
1806 |
-
*/
|
1807 |
-
newRenderer: function( proto ) {
|
1808 |
-
function Renderer( el, boundsInfo, styleInfos, parent ) {
|
1809 |
-
this.targetElement = el;
|
1810 |
-
this.boundsInfo = boundsInfo;
|
1811 |
-
this.styleInfos = styleInfos;
|
1812 |
-
this.parent = parent;
|
1813 |
-
}
|
1814 |
-
PIE.Util.merge( Renderer.prototype, PIE.RendererBase, proto );
|
1815 |
-
return Renderer;
|
1816 |
-
},
|
1817 |
-
|
1818 |
-
/**
|
1819 |
-
* Flag indicating the element has already been positioned at least once.
|
1820 |
-
* @type {boolean}
|
1821 |
-
*/
|
1822 |
-
isPositioned: false,
|
1823 |
-
|
1824 |
-
/**
|
1825 |
-
* Determine if the renderer needs to be updated
|
1826 |
-
* @return {boolean}
|
1827 |
-
*/
|
1828 |
-
needsUpdate: function() {
|
1829 |
-
return false;
|
1830 |
-
},
|
1831 |
-
|
1832 |
-
/**
|
1833 |
-
* Tell the renderer to update based on modified properties
|
1834 |
-
*/
|
1835 |
-
updateProps: function() {
|
1836 |
-
this.destroy();
|
1837 |
-
if( this.isActive() ) {
|
1838 |
-
this.draw();
|
1839 |
-
}
|
1840 |
-
},
|
1841 |
-
|
1842 |
-
/**
|
1843 |
-
* Tell the renderer to update based on modified element position
|
1844 |
-
*/
|
1845 |
-
updatePos: function() {
|
1846 |
-
this.isPositioned = true;
|
1847 |
-
},
|
1848 |
-
|
1849 |
-
/**
|
1850 |
-
* Tell the renderer to update based on modified element dimensions
|
1851 |
-
*/
|
1852 |
-
updateSize: function() {
|
1853 |
-
if( this.isActive() ) {
|
1854 |
-
this.draw();
|
1855 |
-
} else {
|
1856 |
-
this.destroy();
|
1857 |
-
}
|
1858 |
-
},
|
1859 |
-
|
1860 |
-
|
1861 |
-
/**
|
1862 |
-
* Add a layer element, with the given z-order index, to the renderer's main box element. We can't use
|
1863 |
-
* z-index because that breaks when the root rendering box's z-index is 'auto' in IE8+ standards mode.
|
1864 |
-
* So instead we make sure they are inserted into the DOM in the correct order.
|
1865 |
-
* @param {number} index
|
1866 |
-
* @param {Element} el
|
1867 |
-
*/
|
1868 |
-
addLayer: function( index, el ) {
|
1869 |
-
this.removeLayer( index );
|
1870 |
-
for( var layers = this._layers || ( this._layers = [] ), i = index + 1, len = layers.length, layer; i < len; i++ ) {
|
1871 |
-
layer = layers[i];
|
1872 |
-
if( layer ) {
|
1873 |
-
break;
|
1874 |
-
}
|
1875 |
-
}
|
1876 |
-
layers[index] = el;
|
1877 |
-
this.getBox().insertBefore( el, layer || null );
|
1878 |
-
},
|
1879 |
-
|
1880 |
-
/**
|
1881 |
-
* Retrieve a layer element by its index, or null if not present
|
1882 |
-
* @param {number} index
|
1883 |
-
* @return {Element}
|
1884 |
-
*/
|
1885 |
-
getLayer: function( index ) {
|
1886 |
-
var layers = this._layers;
|
1887 |
-
return layers && layers[index] || null;
|
1888 |
-
},
|
1889 |
-
|
1890 |
-
/**
|
1891 |
-
* Remove a layer element by its index
|
1892 |
-
* @param {number} index
|
1893 |
-
*/
|
1894 |
-
removeLayer: function( index ) {
|
1895 |
-
var layer = this.getLayer( index ),
|
1896 |
-
box = this._box;
|
1897 |
-
if( layer && box ) {
|
1898 |
-
box.removeChild( layer );
|
1899 |
-
this._layers[index] = null;
|
1900 |
-
}
|
1901 |
-
},
|
1902 |
-
|
1903 |
-
|
1904 |
-
/**
|
1905 |
-
* Get a VML shape by name, creating it if necessary.
|
1906 |
-
* @param {string} name A name identifying the element
|
1907 |
-
* @param {string=} subElName If specified a subelement of the shape will be created with this tag name
|
1908 |
-
* @param {Element} parent The parent element for the shape; will be ignored if 'group' is specified
|
1909 |
-
* @param {number=} group If specified, an ordinal group for the shape. 1 or greater. Groups are rendered
|
1910 |
-
* using container elements in the correct order, to get correct z stacking without z-index.
|
1911 |
-
*/
|
1912 |
-
getShape: function( name, subElName, parent, group ) {
|
1913 |
-
var shapes = this._shapes || ( this._shapes = {} ),
|
1914 |
-
shape = shapes[ name ],
|
1915 |
-
s;
|
1916 |
-
|
1917 |
-
if( !shape ) {
|
1918 |
-
shape = shapes[ name ] = PIE.Util.createVmlElement( 'shape' );
|
1919 |
-
if( subElName ) {
|
1920 |
-
shape.appendChild( shape[ subElName ] = PIE.Util.createVmlElement( subElName ) );
|
1921 |
-
}
|
1922 |
-
|
1923 |
-
if( group ) {
|
1924 |
-
parent = this.getLayer( group );
|
1925 |
-
if( !parent ) {
|
1926 |
-
this.addLayer( group, doc.createElement( 'group' + group ) );
|
1927 |
-
parent = this.getLayer( group );
|
1928 |
-
}
|
1929 |
-
}
|
1930 |
-
|
1931 |
-
parent.appendChild( shape );
|
1932 |
-
|
1933 |
-
s = shape.style;
|
1934 |
-
s.position = 'absolute';
|
1935 |
-
s.left = s.top = 0;
|
1936 |
-
s['behavior'] = 'url(#default#VML)';
|
1937 |
-
}
|
1938 |
-
return shape;
|
1939 |
-
},
|
1940 |
-
|
1941 |
-
/**
|
1942 |
-
* Delete a named shape which was created by getShape(). Returns true if a shape with the
|
1943 |
-
* given name was found and deleted, or false if there was no shape of that name.
|
1944 |
-
* @param {string} name
|
1945 |
-
* @return {boolean}
|
1946 |
-
*/
|
1947 |
-
deleteShape: function( name ) {
|
1948 |
-
var shapes = this._shapes,
|
1949 |
-
shape = shapes && shapes[ name ];
|
1950 |
-
if( shape ) {
|
1951 |
-
shape.parentNode.removeChild( shape );
|
1952 |
-
delete shapes[ name ];
|
1953 |
-
}
|
1954 |
-
return !!shape;
|
1955 |
-
},
|
1956 |
-
|
1957 |
-
|
1958 |
-
/**
|
1959 |
-
* For a given set of border radius length/percentage values, convert them to concrete pixel
|
1960 |
-
* values based on the current size of the target element.
|
1961 |
-
* @param {Object} radii
|
1962 |
-
* @return {Object}
|
1963 |
-
*/
|
1964 |
-
getRadiiPixels: function( radii ) {
|
1965 |
-
var el = this.targetElement,
|
1966 |
-
bounds = this.boundsInfo.getBounds(),
|
1967 |
-
w = bounds.w,
|
1968 |
-
h = bounds.h,
|
1969 |
-
tlX, tlY, trX, trY, brX, brY, blX, blY, f;
|
1970 |
-
|
1971 |
-
tlX = radii.x['tl'].pixels( el, w );
|
1972 |
-
tlY = radii.y['tl'].pixels( el, h );
|
1973 |
-
trX = radii.x['tr'].pixels( el, w );
|
1974 |
-
trY = radii.y['tr'].pixels( el, h );
|
1975 |
-
brX = radii.x['br'].pixels( el, w );
|
1976 |
-
brY = radii.y['br'].pixels( el, h );
|
1977 |
-
blX = radii.x['bl'].pixels( el, w );
|
1978 |
-
blY = radii.y['bl'].pixels( el, h );
|
1979 |
-
|
1980 |
-
// If any corner ellipses overlap, reduce them all by the appropriate factor. This formula
|
1981 |
-
// is taken straight from the CSS3 Backgrounds and Borders spec.
|
1982 |
-
f = Math.min(
|
1983 |
-
w / ( tlX + trX ),
|
1984 |
-
h / ( trY + brY ),
|
1985 |
-
w / ( blX + brX ),
|
1986 |
-
h / ( tlY + blY )
|
1987 |
-
);
|
1988 |
-
if( f < 1 ) {
|
1989 |
-
tlX *= f;
|
1990 |
-
tlY *= f;
|
1991 |
-
trX *= f;
|
1992 |
-
trY *= f;
|
1993 |
-
brX *= f;
|
1994 |
-
brY *= f;
|
1995 |
-
blX *= f;
|
1996 |
-
blY *= f;
|
1997 |
-
}
|
1998 |
-
|
1999 |
-
return {
|
2000 |
-
x: {
|
2001 |
-
'tl': tlX,
|
2002 |
-
'tr': trX,
|
2003 |
-
'br': brX,
|
2004 |
-
'bl': blX
|
2005 |
-
},
|
2006 |
-
y: {
|
2007 |
-
'tl': tlY,
|
2008 |
-
'tr': trY,
|
2009 |
-
'br': brY,
|
2010 |
-
'bl': blY
|
2011 |
-
}
|
2012 |
-
}
|
2013 |
-
},
|
2014 |
-
|
2015 |
-
/**
|
2016 |
-
* Return the VML path string for the element's background box, with corners rounded.
|
2017 |
-
* @param {Object.<{t:number, r:number, b:number, l:number}>} shrink - if present, specifies number of
|
2018 |
-
* pixels to shrink the box path inward from the element's four sides.
|
2019 |
-
* @param {number=} mult If specified, all coordinates will be multiplied by this number
|
2020 |
-
* @param {Object=} radii If specified, this will be used for the corner radii instead of the properties
|
2021 |
-
* from this renderer's borderRadiusInfo object.
|
2022 |
-
* @return {string} the VML path
|
2023 |
-
*/
|
2024 |
-
getBoxPath: function( shrink, mult, radii ) {
|
2025 |
-
mult = mult || 1;
|
2026 |
-
|
2027 |
-
var r, str,
|
2028 |
-
bounds = this.boundsInfo.getBounds(),
|
2029 |
-
w = bounds.w * mult,
|
2030 |
-
h = bounds.h * mult,
|
2031 |
-
radInfo = this.styleInfos.borderRadiusInfo,
|
2032 |
-
floor = Math.floor, ceil = Math.ceil,
|
2033 |
-
shrinkT = shrink ? shrink.t * mult : 0,
|
2034 |
-
shrinkR = shrink ? shrink.r * mult : 0,
|
2035 |
-
shrinkB = shrink ? shrink.b * mult : 0,
|
2036 |
-
shrinkL = shrink ? shrink.l * mult : 0,
|
2037 |
-
tlX, tlY, trX, trY, brX, brY, blX, blY;
|
2038 |
-
|
2039 |
-
if( radii || radInfo.isActive() ) {
|
2040 |
-
r = this.getRadiiPixels( radii || radInfo.getProps() );
|
2041 |
-
|
2042 |
-
tlX = r.x['tl'] * mult;
|
2043 |
-
tlY = r.y['tl'] * mult;
|
2044 |
-
trX = r.x['tr'] * mult;
|
2045 |
-
trY = r.y['tr'] * mult;
|
2046 |
-
brX = r.x['br'] * mult;
|
2047 |
-
brY = r.y['br'] * mult;
|
2048 |
-
blX = r.x['bl'] * mult;
|
2049 |
-
blY = r.y['bl'] * mult;
|
2050 |
-
|
2051 |
-
str = 'm' + floor( shrinkL ) + ',' + floor( tlY ) +
|
2052 |
-
'qy' + floor( tlX ) + ',' + floor( shrinkT ) +
|
2053 |
-
'l' + ceil( w - trX ) + ',' + floor( shrinkT ) +
|
2054 |
-
'qx' + ceil( w - shrinkR ) + ',' + floor( trY ) +
|
2055 |
-
'l' + ceil( w - shrinkR ) + ',' + ceil( h - brY ) +
|
2056 |
-
'qy' + ceil( w - brX ) + ',' + ceil( h - shrinkB ) +
|
2057 |
-
'l' + floor( blX ) + ',' + ceil( h - shrinkB ) +
|
2058 |
-
'qx' + floor( shrinkL ) + ',' + ceil( h - blY ) + ' x e';
|
2059 |
-
} else {
|
2060 |
-
// simplified path for non-rounded box
|
2061 |
-
str = 'm' + floor( shrinkL ) + ',' + floor( shrinkT ) +
|
2062 |
-
'l' + ceil( w - shrinkR ) + ',' + floor( shrinkT ) +
|
2063 |
-
'l' + ceil( w - shrinkR ) + ',' + ceil( h - shrinkB ) +
|
2064 |
-
'l' + floor( shrinkL ) + ',' + ceil( h - shrinkB ) +
|
2065 |
-
'xe';
|
2066 |
-
}
|
2067 |
-
return str;
|
2068 |
-
},
|
2069 |
-
|
2070 |
-
|
2071 |
-
/**
|
2072 |
-
* Get the container element for the shapes, creating it if necessary.
|
2073 |
-
*/
|
2074 |
-
getBox: function() {
|
2075 |
-
var box = this.parent.getLayer( this.boxZIndex ), s;
|
2076 |
-
|
2077 |
-
if( !box ) {
|
2078 |
-
box = doc.createElement( this.boxName );
|
2079 |
-
s = box.style;
|
2080 |
-
s.position = 'absolute';
|
2081 |
-
s.top = s.left = 0;
|
2082 |
-
this.parent.addLayer( this.boxZIndex, box );
|
2083 |
-
}
|
2084 |
-
|
2085 |
-
return box;
|
2086 |
-
},
|
2087 |
-
|
2088 |
-
|
2089 |
-
/**
|
2090 |
-
* Destroy the rendered objects. This is a base implementation which handles common renderer
|
2091 |
-
* structures, but individual renderers may override as necessary.
|
2092 |
-
*/
|
2093 |
-
destroy: function() {
|
2094 |
-
this.parent.removeLayer( this.boxZIndex );
|
2095 |
-
delete this._shapes;
|
2096 |
-
delete this._layers;
|
2097 |
-
}
|
2098 |
-
};
|
2099 |
-
/**
|
2100 |
-
* Root renderer; creates the outermost container element and handles keeping it aligned
|
2101 |
-
* with the target element's size and position.
|
2102 |
-
* @param {Element} el The target element
|
2103 |
-
* @param {Object} styleInfos The StyleInfo objects
|
2104 |
-
*/
|
2105 |
-
PIE.RootRenderer = PIE.RendererBase.newRenderer( {
|
2106 |
-
|
2107 |
-
isActive: function() {
|
2108 |
-
var children = this.childRenderers;
|
2109 |
-
for( var i in children ) {
|
2110 |
-
if( children.hasOwnProperty( i ) && children[ i ].isActive() ) {
|
2111 |
-
return true;
|
2112 |
-
}
|
2113 |
-
}
|
2114 |
-
return false;
|
2115 |
-
},
|
2116 |
-
|
2117 |
-
needsUpdate: function() {
|
2118 |
-
return this.styleInfos.visibilityInfo.changed();
|
2119 |
-
},
|
2120 |
-
|
2121 |
-
updatePos: function() {
|
2122 |
-
if( this.isActive() ) {
|
2123 |
-
var el = this.getPositioningElement(),
|
2124 |
-
par = el,
|
2125 |
-
docEl,
|
2126 |
-
parRect,
|
2127 |
-
tgtCS = el.currentStyle,
|
2128 |
-
tgtPos = tgtCS.position,
|
2129 |
-
boxPos,
|
2130 |
-
s = this.getBox().style, cs,
|
2131 |
-
x = 0, y = 0,
|
2132 |
-
elBounds = this.boundsInfo.getBounds();
|
2133 |
-
|
2134 |
-
if( tgtPos === 'fixed' && PIE.ieVersion > 6 ) {
|
2135 |
-
x = elBounds.x;
|
2136 |
-
y = elBounds.y;
|
2137 |
-
boxPos = tgtPos;
|
2138 |
-
} else {
|
2139 |
-
// Get the element's offsets from its nearest positioned ancestor. Uses
|
2140 |
-
// getBoundingClientRect for accuracy and speed.
|
2141 |
-
do {
|
2142 |
-
par = par.offsetParent;
|
2143 |
-
} while( par && ( par.currentStyle.position === 'static' ) );
|
2144 |
-
if( par ) {
|
2145 |
-
parRect = par.getBoundingClientRect();
|
2146 |
-
cs = par.currentStyle;
|
2147 |
-
x = elBounds.x - parRect.left - ( parseFloat(cs.borderLeftWidth) || 0 );
|
2148 |
-
y = elBounds.y - parRect.top - ( parseFloat(cs.borderTopWidth) || 0 );
|
2149 |
-
} else {
|
2150 |
-
docEl = doc.documentElement;
|
2151 |
-
x = elBounds.x + docEl.scrollLeft - docEl.clientLeft;
|
2152 |
-
y = elBounds.y + docEl.scrollTop - docEl.clientTop;
|
2153 |
-
}
|
2154 |
-
boxPos = 'absolute';
|
2155 |
-
}
|
2156 |
-
|
2157 |
-
s.position = boxPos;
|
2158 |
-
s.left = x;
|
2159 |
-
s.top = y;
|
2160 |
-
s.zIndex = tgtPos === 'static' ? -1 : tgtCS.zIndex;
|
2161 |
-
this.isPositioned = true;
|
2162 |
-
}
|
2163 |
-
},
|
2164 |
-
|
2165 |
-
updateSize: function() {
|
2166 |
-
// NO-OP
|
2167 |
-
},
|
2168 |
-
|
2169 |
-
updateVisibility: function() {
|
2170 |
-
var vis = this.styleInfos.visibilityInfo.getProps();
|
2171 |
-
this.getBox().style.display = ( vis.visible && vis.displayed ) ? '' : 'none';
|
2172 |
-
},
|
2173 |
-
|
2174 |
-
updateProps: function() {
|
2175 |
-
if( this.isActive() ) {
|
2176 |
-
this.updateVisibility();
|
2177 |
-
} else {
|
2178 |
-
this.destroy();
|
2179 |
-
}
|
2180 |
-
},
|
2181 |
-
|
2182 |
-
getPositioningElement: function() {
|
2183 |
-
var el = this.targetElement;
|
2184 |
-
return el.tagName in PIE.tableCellTags ? el.offsetParent : el;
|
2185 |
-
},
|
2186 |
-
|
2187 |
-
getBox: function() {
|
2188 |
-
var box = this._box, el;
|
2189 |
-
if( !box ) {
|
2190 |
-
el = this.getPositioningElement();
|
2191 |
-
box = this._box = doc.createElement( 'css3-container' );
|
2192 |
-
box.style['direction'] = 'ltr'; //fix positioning bug in rtl environments
|
2193 |
-
|
2194 |
-
this.updateVisibility();
|
2195 |
-
|
2196 |
-
el.parentNode.insertBefore( box, el );
|
2197 |
-
}
|
2198 |
-
return box;
|
2199 |
-
},
|
2200 |
-
|
2201 |
-
destroy: function() {
|
2202 |
-
var box = this._box, par;
|
2203 |
-
if( box && ( par = box.parentNode ) ) {
|
2204 |
-
par.removeChild( box );
|
2205 |
-
}
|
2206 |
-
delete this._box;
|
2207 |
-
delete this._layers;
|
2208 |
-
}
|
2209 |
-
|
2210 |
-
} );
|
2211 |
-
/**
|
2212 |
-
* Renderer for element backgrounds.
|
2213 |
-
* @constructor
|
2214 |
-
* @param {Element} el The target element
|
2215 |
-
* @param {Object} styleInfos The StyleInfo objects
|
2216 |
-
* @param {PIE.RootRenderer} parent
|
2217 |
-
*/
|
2218 |
-
PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
|
2219 |
-
|
2220 |
-
boxZIndex: 2,
|
2221 |
-
boxName: 'background',
|
2222 |
-
|
2223 |
-
needsUpdate: function() {
|
2224 |
-
var si = this.styleInfos;
|
2225 |
-
return si.backgroundInfo.changed() || si.borderRadiusInfo.changed();
|
2226 |
-
},
|
2227 |
-
|
2228 |
-
isActive: function() {
|
2229 |
-
var si = this.styleInfos;
|
2230 |
-
return si.borderImageInfo.isActive() ||
|
2231 |
-
si.borderRadiusInfo.isActive() ||
|
2232 |
-
si.backgroundInfo.isActive() ||
|
2233 |
-
( si.boxShadowInfo.isActive() && si.boxShadowInfo.getProps().inset );
|
2234 |
-
},
|
2235 |
-
|
2236 |
-
/**
|
2237 |
-
* Draw the shapes
|
2238 |
-
*/
|
2239 |
-
draw: function() {
|
2240 |
-
var bounds = this.boundsInfo.getBounds();
|
2241 |
-
if( bounds.w && bounds.h ) {
|
2242 |
-
this.drawBgColor();
|
2243 |
-
this.drawBgImages();
|
2244 |
-
}
|
2245 |
-
},
|
2246 |
-
|
2247 |
-
/**
|
2248 |
-
* Draw the background color shape
|
2249 |
-
*/
|
2250 |
-
drawBgColor: function() {
|
2251 |
-
var props = this.styleInfos.backgroundInfo.getProps(),
|
2252 |
-
bounds = this.boundsInfo.getBounds(),
|
2253 |
-
el = this.targetElement,
|
2254 |
-
color = props && props.color,
|
2255 |
-
shape, w, h, s, alpha;
|
2256 |
-
|
2257 |
-
if( color && color.alpha() > 0 ) {
|
2258 |
-
this.hideBackground();
|
2259 |
-
|
2260 |
-
shape = this.getShape( 'bgColor', 'fill', this.getBox(), 1 );
|
2261 |
-
w = bounds.w;
|
2262 |
-
h = bounds.h;
|
2263 |
-
shape.stroked = false;
|
2264 |
-
shape.coordsize = w * 2 + ',' + h * 2;
|
2265 |
-
shape.coordorigin = '1,1';
|
2266 |
-
shape.path = this.getBoxPath( null, 2 );
|
2267 |
-
s = shape.style;
|
2268 |
-
s.width = w;
|
2269 |
-
s.height = h;
|
2270 |
-
shape.fill.color = color.colorValue( el );
|
2271 |
-
|
2272 |
-
alpha = color.alpha();
|
2273 |
-
if( alpha < 1 ) {
|
2274 |
-
shape.fill.opacity = alpha;
|
2275 |
-
}
|
2276 |
-
} else {
|
2277 |
-
this.deleteShape( 'bgColor' );
|
2278 |
-
}
|
2279 |
-
},
|
2280 |
-
|
2281 |
-
/**
|
2282 |
-
* Draw all the background image layers
|
2283 |
-
*/
|
2284 |
-
drawBgImages: function() {
|
2285 |
-
var props = this.styleInfos.backgroundInfo.getProps(),
|
2286 |
-
bounds = this.boundsInfo.getBounds(),
|
2287 |
-
images = props && props.bgImages,
|
2288 |
-
img, shape, w, h, s, i;
|
2289 |
-
|
2290 |
-
if( images ) {
|
2291 |
-
this.hideBackground();
|
2292 |
-
|
2293 |
-
w = bounds.w;
|
2294 |
-
h = bounds.h;
|
2295 |
-
|
2296 |
-
i = images.length;
|
2297 |
-
while( i-- ) {
|
2298 |
-
img = images[i];
|
2299 |
-
shape = this.getShape( 'bgImage' + i, 'fill', this.getBox(), 2 );
|
2300 |
-
|
2301 |
-
shape.stroked = false;
|
2302 |
-
shape.fill.type = 'tile';
|
2303 |
-
shape.fillcolor = 'none';
|
2304 |
-
shape.coordsize = w * 2 + ',' + h * 2;
|
2305 |
-
shape.coordorigin = '1,1';
|
2306 |
-
shape.path = this.getBoxPath( 0, 2 );
|
2307 |
-
s = shape.style;
|
2308 |
-
s.width = w;
|
2309 |
-
s.height = h;
|
2310 |
-
|
2311 |
-
if( img.imgType === 'linear-gradient' ) {
|
2312 |
-
this.addLinearGradient( shape, img );
|
2313 |
-
}
|
2314 |
-
else {
|
2315 |
-
shape.fill.src = img.imgUrl;
|
2316 |
-
this.positionBgImage( shape, i );
|
2317 |
-
}
|
2318 |
-
}
|
2319 |
-
}
|
2320 |
-
|
2321 |
-
// Delete any bgImage shapes previously created which weren't used above
|
2322 |
-
i = images ? images.length : 0;
|
2323 |
-
while( this.deleteShape( 'bgImage' + i++ ) ) {}
|
2324 |
-
},
|
2325 |
-
|
2326 |
-
|
2327 |
-
/**
|
2328 |
-
* Set the position and clipping of the background image for a layer
|
2329 |
-
* @param {Element} shape
|
2330 |
-
* @param {number} index
|
2331 |
-
*/
|
2332 |
-
positionBgImage: function( shape, index ) {
|
2333 |
-
PIE.Util.withImageSize( shape.fill.src, function( size ) {
|
2334 |
-
var fill = shape.fill,
|
2335 |
-
el = this.targetElement,
|
2336 |
-
bounds = this.boundsInfo.getBounds(),
|
2337 |
-
elW = bounds.w,
|
2338 |
-
elH = bounds.h,
|
2339 |
-
si = this.styleInfos,
|
2340 |
-
border = si.borderInfo.getProps(),
|
2341 |
-
bw = border && border.widths,
|
2342 |
-
bwT = bw ? bw['t'].pixels( el ) : 0,
|
2343 |
-
bwR = bw ? bw['r'].pixels( el ) : 0,
|
2344 |
-
bwB = bw ? bw['b'].pixels( el ) : 0,
|
2345 |
-
bwL = bw ? bw['l'].pixels( el ) : 0,
|
2346 |
-
bg = si.backgroundInfo.getProps().bgImages[ index ],
|
2347 |
-
bgPos = bg.bgPosition ? bg.bgPosition.coords( el, elW - size.w - bwL - bwR, elH - size.h - bwT - bwB ) : { x:0, y:0 },
|
2348 |
-
repeat = bg.imgRepeat,
|
2349 |
-
pxX, pxY,
|
2350 |
-
clipT = 0, clipL = 0,
|
2351 |
-
clipR = elW + 1, clipB = elH + 1, //make sure the default clip region is not inside the box (by a subpixel)
|
2352 |
-
clipAdjust = PIE.ieVersion === 8 ? 0 : 1; //prior to IE8 requires 1 extra pixel in the image clip region
|
2353 |
-
|
2354 |
-
// Positioning - find the pixel offset from the top/left and convert to a ratio
|
2355 |
-
// The position is shifted by half a pixel, to adjust for the half-pixel coordorigin shift which is
|
2356 |
-
// needed to fix antialiasing but makes the bg image fuzzy.
|
2357 |
-
pxX = Math.round( bgPos.x ) + bwL + 0.5;
|
2358 |
-
pxY = Math.round( bgPos.y ) + bwT + 0.5;
|
2359 |
-
fill.position = ( pxX / elW ) + ',' + ( pxY / elH );
|
2360 |
-
|
2361 |
-
// Repeating - clip the image shape
|
2362 |
-
if( repeat && repeat !== 'repeat' ) {
|
2363 |
-
if( repeat === 'repeat-x' || repeat === 'no-repeat' ) {
|
2364 |
-
clipT = pxY + 1;
|
2365 |
-
clipB = pxY + size.h + clipAdjust;
|
2366 |
-
}
|
2367 |
-
if( repeat === 'repeat-y' || repeat === 'no-repeat' ) {
|
2368 |
-
clipL = pxX + 1;
|
2369 |
-
clipR = pxX + size.w + clipAdjust;
|
2370 |
-
}
|
2371 |
-
shape.style.clip = 'rect(' + clipT + 'px,' + clipR + 'px,' + clipB + 'px,' + clipL + 'px)';
|
2372 |
-
}
|
2373 |
-
}, this );
|
2374 |
-
},
|
2375 |
-
|
2376 |
-
|
2377 |
-
/**
|
2378 |
-
* Draw the linear gradient for a gradient layer
|
2379 |
-
* @param {Element} shape
|
2380 |
-
* @param {Object} info The object holding the information about the gradient
|
2381 |
-
*/
|
2382 |
-
addLinearGradient: function( shape, info ) {
|
2383 |
-
var el = this.targetElement,
|
2384 |
-
bounds = this.boundsInfo.getBounds(),
|
2385 |
-
w = bounds.w,
|
2386 |
-
h = bounds.h,
|
2387 |
-
fill = shape.fill,
|
2388 |
-
angle = info.angle,
|
2389 |
-
startPos = info.gradientStart,
|
2390 |
-
stops = info.stops,
|
2391 |
-
stopCount = stops.length,
|
2392 |
-
PI = Math.PI,
|
2393 |
-
UNDEF,
|
2394 |
-
startX, startY,
|
2395 |
-
endX, endY,
|
2396 |
-
startCornerX, startCornerY,
|
2397 |
-
endCornerX, endCornerY,
|
2398 |
-
vmlAngle, vmlGradientLength, vmlColors,
|
2399 |
-
deltaX, deltaY, lineLength,
|
2400 |
-
stopPx, vmlOffsetPct,
|
2401 |
-
p, i, j, before, after;
|
2402 |
-
|
2403 |
-
/**
|
2404 |
-
* Find the point along a given line (defined by a starting point and an angle), at which
|
2405 |
-
* that line is intersected by a perpendicular line extending through another point.
|
2406 |
-
* @param x1 - x coord of the starting point
|
2407 |
-
* @param y1 - y coord of the starting point
|
2408 |
-
* @param angle - angle of the line extending from the starting point (in degrees)
|
2409 |
-
* @param x2 - x coord of point along the perpendicular line
|
2410 |
-
* @param y2 - y coord of point along the perpendicular line
|
2411 |
-
* @return [ x, y ]
|
2412 |
-
*/
|
2413 |
-
function perpendicularIntersect( x1, y1, angle, x2, y2 ) {
|
2414 |
-
// Handle straight vertical and horizontal angles, for performance and to avoid
|
2415 |
-
// divide-by-zero errors.
|
2416 |
-
if( angle === 0 || angle === 180 ) {
|
2417 |
-
return [ x2, y1 ];
|
2418 |
-
}
|
2419 |
-
else if( angle === 90 || angle === 270 ) {
|
2420 |
-
return [ x1, y2 ];
|
2421 |
-
}
|
2422 |
-
else {
|
2423 |
-
// General approach: determine the Ax+By=C formula for each line (the slope of the second
|
2424 |
-
// line is the negative inverse of the first) and then solve for where both formulas have
|
2425 |
-
// the same x/y values.
|
2426 |
-
var a1 = Math.tan( -angle * PI / 180 ),
|
2427 |
-
c1 = a1 * x1 - y1,
|
2428 |
-
a2 = -1 / a1,
|
2429 |
-
c2 = a2 * x2 - y2,
|
2430 |
-
d = a2 - a1,
|
2431 |
-
endX = ( c2 - c1 ) / d,
|
2432 |
-
endY = ( a1 * c2 - a2 * c1 ) / d;
|
2433 |
-
return [ endX, endY ];
|
2434 |
-
}
|
2435 |
-
}
|
2436 |
-
|
2437 |
-
// Find the "start" and "end" corners; these are the corners furthest along the gradient line.
|
2438 |
-
// This is used below to find the start/end positions of the CSS3 gradient-line, and also in finding
|
2439 |
-
// the total length of the VML rendered gradient-line corner to corner.
|
2440 |
-
function findCorners() {
|
2441 |
-
startCornerX = ( angle >= 90 && angle < 270 ) ? w : 0;
|
2442 |
-
startCornerY = angle < 180 ? h : 0;
|
2443 |
-
endCornerX = w - startCornerX;
|
2444 |
-
endCornerY = h - startCornerY;
|
2445 |
-
}
|
2446 |
-
|
2447 |
-
// Normalize the angle to a value between [0, 360)
|
2448 |
-
function normalizeAngle() {
|
2449 |
-
while( angle < 0 ) {
|
2450 |
-
angle += 360;
|
2451 |
-
}
|
2452 |
-
angle = angle % 360;
|
2453 |
-
}
|
2454 |
-
|
2455 |
-
// Find the distance between two points
|
2456 |
-
function distance( p1, p2 ) {
|
2457 |
-
var dx = p2[0] - p1[0],
|
2458 |
-
dy = p2[1] - p1[1];
|
2459 |
-
return Math.abs(
|
2460 |
-
dx === 0 ? dy :
|
2461 |
-
dy === 0 ? dx :
|
2462 |
-
Math.sqrt( dx * dx + dy * dy )
|
2463 |
-
);
|
2464 |
-
}
|
2465 |
-
|
2466 |
-
// Find the start and end points of the gradient
|
2467 |
-
if( startPos ) {
|
2468 |
-
startPos = startPos.coords( el, w, h );
|
2469 |
-
startX = startPos.x;
|
2470 |
-
startY = startPos.y;
|
2471 |
-
}
|
2472 |
-
if( angle ) {
|
2473 |
-
angle = angle.degrees();
|
2474 |
-
|
2475 |
-
normalizeAngle();
|
2476 |
-
findCorners();
|
2477 |
-
|
2478 |
-
// If no start position was specified, then choose a corner as the starting point.
|
2479 |
-
if( !startPos ) {
|
2480 |
-
startX = startCornerX;
|
2481 |
-
startY = startCornerY;
|
2482 |
-
}
|
2483 |
-
|
2484 |
-
// Find the end position by extending a perpendicular line from the gradient-line which
|
2485 |
-
// intersects the corner opposite from the starting corner.
|
2486 |
-
p = perpendicularIntersect( startX, startY, angle, endCornerX, endCornerY );
|
2487 |
-
endX = p[0];
|
2488 |
-
endY = p[1];
|
2489 |
-
}
|
2490 |
-
else if( startPos ) {
|
2491 |
-
// Start position but no angle specified: find the end point by rotating 180deg around the center
|
2492 |
-
endX = w - startX;
|
2493 |
-
endY = h - startY;
|
2494 |
-
}
|
2495 |
-
else {
|
2496 |
-
// Neither position nor angle specified; create vertical gradient from top to bottom
|
2497 |
-
startX = startY = endX = 0;
|
2498 |
-
endY = h;
|
2499 |
-
}
|
2500 |
-
deltaX = endX - startX;
|
2501 |
-
deltaY = endY - startY;
|
2502 |
-
|
2503 |
-
if( angle === UNDEF ) {
|
2504 |
-
// Get the angle based on the change in x/y from start to end point. Checks first for horizontal
|
2505 |
-
// or vertical angles so they get exact whole numbers rather than what atan2 gives.
|
2506 |
-
angle = ( !deltaX ? ( deltaY < 0 ? 90 : 270 ) :
|
2507 |
-
( !deltaY ? ( deltaX < 0 ? 180 : 0 ) :
|
2508 |
-
-Math.atan2( deltaY, deltaX ) / PI * 180
|
2509 |
-
)
|
2510 |
-
);
|
2511 |
-
normalizeAngle();
|
2512 |
-
findCorners();
|
2513 |
-
}
|
2514 |
-
|
2515 |
-
|
2516 |
-
// In VML land, the angle of the rendered gradient depends on the aspect ratio of the shape's
|
2517 |
-
// bounding box; for example specifying a 45 deg angle actually results in a gradient
|
2518 |
-
// drawn diagonally from one corner to its opposite corner, which will only appear to the
|
2519 |
-
// viewer as 45 degrees if the shape is equilateral. We adjust for this by taking the x/y deltas
|
2520 |
-
// between the start and end points, multiply one of them by the shape's aspect ratio,
|
2521 |
-
// and get their arctangent, resulting in an appropriate VML angle. If the angle is perfectly
|
2522 |
-
// horizontal or vertical then we don't need to do this conversion.
|
2523 |
-
vmlAngle = ( angle % 90 ) ? Math.atan2( deltaX * w / h, deltaY ) / PI * 180 : ( angle + 90 );
|
2524 |
-
|
2525 |
-
// VML angles are 180 degrees offset from CSS angles
|
2526 |
-
vmlAngle += 180;
|
2527 |
-
vmlAngle = vmlAngle % 360;
|
2528 |
-
|
2529 |
-
// Add all the stops to the VML 'colors' list, including the first and last stops.
|
2530 |
-
// For each, we find its pixel offset along the gradient-line; if the offset of a stop is less
|
2531 |
-
// than that of its predecessor we increase it to be equal. We then map that pixel offset to a
|
2532 |
-
// percentage along the VML gradient-line, which runs from shape corner to corner.
|
2533 |
-
lineLength = distance( [ startX, startY ], [ endX, endY ] );
|
2534 |
-
vmlGradientLength = distance( [ startCornerX, startCornerY ], perpendicularIntersect( startCornerX, startCornerY, angle, endCornerX, endCornerY ) );
|
2535 |
-
vmlColors = [];
|
2536 |
-
vmlOffsetPct = distance( [ startX, startY ], perpendicularIntersect( startX, startY, angle, startCornerX, startCornerY ) ) / vmlGradientLength * 100;
|
2537 |
-
|
2538 |
-
// Find the pixel offsets along the CSS3 gradient-line for each stop.
|
2539 |
-
stopPx = [];
|
2540 |
-
for( i = 0; i < stopCount; i++ ) {
|
2541 |
-
stopPx.push( stops[i].offset ? stops[i].offset.pixels( el, lineLength ) :
|
2542 |
-
i === 0 ? 0 : i === stopCount - 1 ? lineLength : null );
|
2543 |
-
}
|
2544 |
-
// Fill in gaps with evenly-spaced offsets
|
2545 |
-
for( i = 1; i < stopCount; i++ ) {
|
2546 |
-
if( stopPx[ i ] === null ) {
|
2547 |
-
before = stopPx[ i - 1 ];
|
2548 |
-
j = i;
|
2549 |
-
do {
|
2550 |
-
after = stopPx[ ++j ];
|
2551 |
-
} while( after === null );
|
2552 |
-
stopPx[ i ] = before + ( after - before ) / ( j - i + 1 );
|
2553 |
-
}
|
2554 |
-
// Make sure each stop's offset is no less than the one before it
|
2555 |
-
stopPx[ i ] = Math.max( stopPx[ i ], stopPx[ i - 1 ] );
|
2556 |
-
}
|
2557 |
-
|
2558 |
-
// Convert to percentage along the VML gradient line and add to the VML 'colors' value
|
2559 |
-
for( i = 0; i < stopCount; i++ ) {
|
2560 |
-
vmlColors.push(
|
2561 |
-
( vmlOffsetPct + ( stopPx[ i ] / vmlGradientLength * 100 ) ) + '% ' + stops[i].color.colorValue( el )
|
2562 |
-
);
|
2563 |
-
}
|
2564 |
-
|
2565 |
-
// Now, finally, we're ready to render the gradient fill. Set the start and end colors to
|
2566 |
-
// the first and last stop colors; this just sets outer bounds for the gradient.
|
2567 |
-
fill['angle'] = vmlAngle;
|
2568 |
-
fill['type'] = 'gradient';
|
2569 |
-
fill['method'] = 'sigma';
|
2570 |
-
fill['color'] = stops[0].color.colorValue( el );
|
2571 |
-
fill['color2'] = stops[stopCount - 1].color.colorValue( el );
|
2572 |
-
fill['colors'].value = vmlColors.join( ',' );
|
2573 |
-
},
|
2574 |
-
|
2575 |
-
|
2576 |
-
/**
|
2577 |
-
* Hide the actual background image and color of the element.
|
2578 |
-
*/
|
2579 |
-
hideBackground: function() {
|
2580 |
-
var rs = this.targetElement.runtimeStyle;
|
2581 |
-
rs.backgroundImage = 'url(about:blank)'; //ensures the background area reacts to mouse events
|
2582 |
-
rs.backgroundColor = 'transparent';
|
2583 |
-
},
|
2584 |
-
|
2585 |
-
destroy: function() {
|
2586 |
-
PIE.RendererBase.destroy.call( this );
|
2587 |
-
var rs = this.targetElement.runtimeStyle;
|
2588 |
-
rs.backgroundImage = rs.backgroundColor = '';
|
2589 |
-
}
|
2590 |
-
|
2591 |
-
} );
|
2592 |
-
/**
|
2593 |
-
* Renderer for element borders.
|
2594 |
-
* @constructor
|
2595 |
-
* @param {Element} el The target element
|
2596 |
-
* @param {Object} styleInfos The StyleInfo objects
|
2597 |
-
* @param {PIE.RootRenderer} parent
|
2598 |
-
*/
|
2599 |
-
PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
|
2600 |
-
|
2601 |
-
boxZIndex: 4,
|
2602 |
-
boxName: 'border',
|
2603 |
-
|
2604 |
-
/**
|
2605 |
-
* Lookup table of elements which cannot take custom children.
|
2606 |
-
*/
|
2607 |
-
childlessElements: {
|
2608 |
-
'TABLE':1, //can obviously have children but not custom ones
|
2609 |
-
'INPUT':1,
|
2610 |
-
'TEXTAREA':1,
|
2611 |
-
'SELECT':1,
|
2612 |
-
'OPTION':1,
|
2613 |
-
'IMG':1,
|
2614 |
-
'HR':1,
|
2615 |
-
'FIELDSET':1 //can take children but wrapping its children messes up its <legend>
|
2616 |
-
},
|
2617 |
-
|
2618 |
-
/**
|
2619 |
-
* Values of the type attribute for input elements displayed as buttons
|
2620 |
-
*/
|
2621 |
-
inputButtonTypes: {
|
2622 |
-
'submit':1,
|
2623 |
-
'button':1,
|
2624 |
-
'reset':1
|
2625 |
-
},
|
2626 |
-
|
2627 |
-
needsUpdate: function() {
|
2628 |
-
var si = this.styleInfos;
|
2629 |
-
return si.borderInfo.changed() || si.borderRadiusInfo.changed();
|
2630 |
-
},
|
2631 |
-
|
2632 |
-
isActive: function() {
|
2633 |
-
var si = this.styleInfos;
|
2634 |
-
return ( si.borderImageInfo.isActive() ||
|
2635 |
-
si.borderRadiusInfo.isActive() ||
|
2636 |
-
si.backgroundInfo.isActive() ) &&
|
2637 |
-
si.borderInfo.isActive(); //check BorderStyleInfo last because it's the most expensive
|
2638 |
-
},
|
2639 |
-
|
2640 |
-
/**
|
2641 |
-
* Draw the border shape(s)
|
2642 |
-
*/
|
2643 |
-
draw: function() {
|
2644 |
-
var el = this.targetElement,
|
2645 |
-
cs = el.currentStyle,
|
2646 |
-
props = this.styleInfos.borderInfo.getProps(),
|
2647 |
-
bounds = this.boundsInfo.getBounds(),
|
2648 |
-
w = bounds.w,
|
2649 |
-
h = bounds.h,
|
2650 |
-
side, shape, stroke, s,
|
2651 |
-
segments, seg, i, len;
|
2652 |
-
|
2653 |
-
if( props ) {
|
2654 |
-
this.hideBorder();
|
2655 |
-
|
2656 |
-
segments = this.getBorderSegments( 2 );
|
2657 |
-
for( i = 0, len = segments.length; i < len; i++) {
|
2658 |
-
seg = segments[i];
|
2659 |
-
shape = this.getShape( 'borderPiece' + i, seg.stroke ? 'stroke' : 'fill', this.getBox() );
|
2660 |
-
shape.coordsize = w * 2 + ',' + h * 2;
|
2661 |
-
shape.coordorigin = '1,1';
|
2662 |
-
shape.path = seg.path;
|
2663 |
-
s = shape.style;
|
2664 |
-
s.width = w;
|
2665 |
-
s.height = h;
|
2666 |
-
|
2667 |
-
shape.filled = !!seg.fill;
|
2668 |
-
shape.stroked = !!seg.stroke;
|
2669 |
-
if( seg.stroke ) {
|
2670 |
-
stroke = shape.stroke;
|
2671 |
-
stroke['weight'] = seg.weight + 'px';
|
2672 |
-
stroke.color = seg.color.colorValue( el );
|
2673 |
-
stroke['dashstyle'] = seg.stroke === 'dashed' ? '2 2' : seg.stroke === 'dotted' ? '1 1' : 'solid';
|
2674 |
-
stroke['linestyle'] = seg.stroke === 'double' && seg.weight > 2 ? 'ThinThin' : 'Single';
|
2675 |
-
} else {
|
2676 |
-
shape.fill.color = seg.fill.colorValue( el );
|
2677 |
-
}
|
2678 |
-
}
|
2679 |
-
|
2680 |
-
// remove any previously-created border shapes which didn't get used above
|
2681 |
-
while( this.deleteShape( 'borderPiece' + i++ ) ) {}
|
2682 |
-
}
|
2683 |
-
},
|
2684 |
-
|
2685 |
-
/**
|
2686 |
-
* Hide the actual border of the element. In IE7 and up we can just set its color to transparent;
|
2687 |
-
* however IE6 does not support transparent borders so we have to get tricky with it. Also, some elements
|
2688 |
-
* like form buttons require removing the border width altogether, so for those we increase the padding
|
2689 |
-
* by the border size.
|
2690 |
-
*/
|
2691 |
-
hideBorder: function() {
|
2692 |
-
var el = this.targetElement,
|
2693 |
-
cs = el.currentStyle,
|
2694 |
-
rs = el.runtimeStyle,
|
2695 |
-
tag = el.tagName,
|
2696 |
-
isIE6 = PIE.ieVersion === 6,
|
2697 |
-
sides, side, i;
|
2698 |
-
|
2699 |
-
if( ( isIE6 && tag in this.childlessElements ) || tag === 'BUTTON' ||
|
2700 |
-
( tag === 'INPUT' && el.type in this.inputButtonTypes ) ) {
|
2701 |
-
rs.borderWidth = '';
|
2702 |
-
sides = this.styleInfos.borderInfo.sides;
|
2703 |
-
for( i = sides.length; i--; ) {
|
2704 |
-
side = sides[ i ];
|
2705 |
-
rs[ 'padding' + side ] = '';
|
2706 |
-
rs[ 'padding' + side ] = ( PIE.getLength( cs[ 'padding' + side ] ) ).pixels( el ) +
|
2707 |
-
( PIE.getLength( cs[ 'border' + side + 'Width' ] ) ).pixels( el ) +
|
2708 |
-
( !PIE.ieVersion === 8 && i % 2 ? 1 : 0 ); //needs an extra horizontal pixel to counteract the extra "inner border" going away
|
2709 |
-
}
|
2710 |
-
rs.borderWidth = 0;
|
2711 |
-
}
|
2712 |
-
else if( isIE6 ) {
|
2713 |
-
// Wrap all the element's children in a custom element, set the element to visiblity:hidden,
|
2714 |
-
// and set the wrapper element to visiblity:visible. This hides the outer element's decorations
|
2715 |
-
// (background and border) but displays all the contents.
|
2716 |
-
// TODO find a better way to do this that doesn't mess up the DOM parent-child relationship,
|
2717 |
-
// as this can interfere with other author scripts which add/modify/delete children. Also, this
|
2718 |
-
// won't work for elements which cannot take children, e.g. input/button/textarea/img/etc. Look into
|
2719 |
-
// using a compositor filter or some other filter which masks the border.
|
2720 |
-
if( el.childNodes.length !== 1 || el.firstChild.tagName !== 'ie6-mask' ) {
|
2721 |
-
var cont = doc.createElement( 'ie6-mask' ),
|
2722 |
-
s = cont.style, child;
|
2723 |
-
s.visibility = 'visible';
|
2724 |
-
s.zoom = 1;
|
2725 |
-
while( child = el.firstChild ) {
|
2726 |
-
cont.appendChild( child );
|
2727 |
-
}
|
2728 |
-
el.appendChild( cont );
|
2729 |
-
rs.visibility = 'hidden';
|
2730 |
-
}
|
2731 |
-
}
|
2732 |
-
else {
|
2733 |
-
rs.borderColor = 'transparent';
|
2734 |
-
}
|
2735 |
-
},
|
2736 |
-
|
2737 |
-
|
2738 |
-
/**
|
2739 |
-
* Get the VML path definitions for the border segment(s).
|
2740 |
-
* @param {number=} mult If specified, all coordinates will be multiplied by this number
|
2741 |
-
* @return {Array.<string>}
|
2742 |
-
*/
|
2743 |
-
getBorderSegments: function( mult ) {
|
2744 |
-
var el = this.targetElement,
|
2745 |
-
bounds, elW, elH,
|
2746 |
-
borderInfo = this.styleInfos.borderInfo,
|
2747 |
-
segments = [],
|
2748 |
-
floor, ceil, wT, wR, wB, wL,
|
2749 |
-
round = Math.round,
|
2750 |
-
borderProps, radiusInfo, radii, widths, styles, colors;
|
2751 |
-
|
2752 |
-
if( borderInfo.isActive() ) {
|
2753 |
-
borderProps = borderInfo.getProps();
|
2754 |
-
|
2755 |
-
widths = borderProps.widths;
|
2756 |
-
styles = borderProps.styles;
|
2757 |
-
colors = borderProps.colors;
|
2758 |
-
|
2759 |
-
if( borderProps.widthsSame && borderProps.stylesSame && borderProps.colorsSame ) {
|
2760 |
-
if( colors['t'].alpha() > 0 ) {
|
2761 |
-
// shortcut for identical border on all sides - only need 1 stroked shape
|
2762 |
-
wT = widths['t'].pixels( el ); //thickness
|
2763 |
-
wR = wT / 2; //shrink
|
2764 |
-
segments.push( {
|
2765 |
-
path: this.getBoxPath( { t: wR, r: wR, b: wR, l: wR }, mult ),
|
2766 |
-
stroke: styles['t'],
|
2767 |
-
color: colors['t'],
|
2768 |
-
weight: wT
|
2769 |
-
} );
|
2770 |
-
}
|
2771 |
-
}
|
2772 |
-
else {
|
2773 |
-
mult = mult || 1;
|
2774 |
-
bounds = this.boundsInfo.getBounds();
|
2775 |
-
elW = bounds.w;
|
2776 |
-
elH = bounds.h;
|
2777 |
-
|
2778 |
-
wT = round( widths['t'].pixels( el ) );
|
2779 |
-
wR = round( widths['r'].pixels( el ) );
|
2780 |
-
wB = round( widths['b'].pixels( el ) );
|
2781 |
-
wL = round( widths['l'].pixels( el ) );
|
2782 |
-
var pxWidths = {
|
2783 |
-
't': wT,
|
2784 |
-
'r': wR,
|
2785 |
-
'b': wB,
|
2786 |
-
'l': wL
|
2787 |
-
};
|
2788 |
-
|
2789 |
-
radiusInfo = this.styleInfos.borderRadiusInfo;
|
2790 |
-
if( radiusInfo.isActive() ) {
|
2791 |
-
radii = this.getRadiiPixels( radiusInfo.getProps() );
|
2792 |
-
}
|
2793 |
-
|
2794 |
-
floor = Math.floor;
|
2795 |
-
ceil = Math.ceil;
|
2796 |
-
|
2797 |
-
function radius( xy, corner ) {
|
2798 |
-
return radii ? radii[ xy ][ corner ] : 0;
|
2799 |
-
}
|
2800 |
-
|
2801 |
-
function curve( corner, shrinkX, shrinkY, startAngle, ccw, doMove ) {
|
2802 |
-
var rx = radius( 'x', corner),
|
2803 |
-
ry = radius( 'y', corner),
|
2804 |
-
deg = 65535,
|
2805 |
-
isRight = corner.charAt( 1 ) === 'r',
|
2806 |
-
isBottom = corner.charAt( 0 ) === 'b';
|
2807 |
-
return ( rx > 0 && ry > 0 ) ?
|
2808 |
-
( doMove ? 'al' : 'ae' ) +
|
2809 |
-
( isRight ? ceil( elW - rx ) : floor( rx ) ) * mult + ',' + // center x
|
2810 |
-
( isBottom ? ceil( elH - ry ) : floor( ry ) ) * mult + ',' + // center y
|
2811 |
-
( floor( rx ) - shrinkX ) * mult + ',' + // width
|
2812 |
-
( floor( ry ) - shrinkY ) * mult + ',' + // height
|
2813 |
-
( startAngle * deg ) + ',' + // start angle
|
2814 |
-
( 45 * deg * ( ccw ? 1 : -1 ) // angle change
|
2815 |
-
) : (
|
2816 |
-
( doMove ? 'm' : 'l' ) +
|
2817 |
-
( isRight ? elW - shrinkX : shrinkX ) * mult + ',' +
|
2818 |
-
( isBottom ? elH - shrinkY : shrinkY ) * mult
|
2819 |
-
);
|
2820 |
-
}
|
2821 |
-
|
2822 |
-
function line( side, shrink, ccw, doMove ) {
|
2823 |
-
var
|
2824 |
-
start = (
|
2825 |
-
side === 't' ?
|
2826 |
-
floor( radius( 'x', 'tl') ) * mult + ',' + ceil( shrink ) * mult :
|
2827 |
-
side === 'r' ?
|
2828 |
-
ceil( elW - shrink ) * mult + ',' + floor( radius( 'y', 'tr') ) * mult :
|
2829 |
-
side === 'b' ?
|
2830 |
-
ceil( elW - radius( 'x', 'br') ) * mult + ',' + floor( elH - shrink ) * mult :
|
2831 |
-
// side === 'l' ?
|
2832 |
-
floor( shrink ) * mult + ',' + ceil( elH - radius( 'y', 'bl') ) * mult
|
2833 |
-
),
|
2834 |
-
end = (
|
2835 |
-
side === 't' ?
|
2836 |
-
ceil( elW - radius( 'x', 'tr') ) * mult + ',' + ceil( shrink ) * mult :
|
2837 |
-
side === 'r' ?
|
2838 |
-
ceil( elW - shrink ) * mult + ',' + ceil( elH - radius( 'y', 'br') ) * mult :
|
2839 |
-
side === 'b' ?
|
2840 |
-
floor( radius( 'x', 'bl') ) * mult + ',' + floor( elH - shrink ) * mult :
|
2841 |
-
// side === 'l' ?
|
2842 |
-
floor( shrink ) * mult + ',' + floor( radius( 'y', 'tl') ) * mult
|
2843 |
-
);
|
2844 |
-
return ccw ? ( doMove ? 'm' + end : '' ) + 'l' + start :
|
2845 |
-
( doMove ? 'm' + start : '' ) + 'l' + end;
|
2846 |
-
}
|
2847 |
-
|
2848 |
-
|
2849 |
-
function addSide( side, sideBefore, sideAfter, cornerBefore, cornerAfter, baseAngle ) {
|
2850 |
-
var vert = side === 'l' || side === 'r',
|
2851 |
-
sideW = pxWidths[ side ],
|
2852 |
-
beforeX, beforeY, afterX, afterY;
|
2853 |
-
|
2854 |
-
if( sideW > 0 && styles[ side ] !== 'none' && colors[ side ].alpha() > 0 ) {
|
2855 |
-
beforeX = pxWidths[ vert ? side : sideBefore ];
|
2856 |
-
beforeY = pxWidths[ vert ? sideBefore : side ];
|
2857 |
-
afterX = pxWidths[ vert ? side : sideAfter ];
|
2858 |
-
afterY = pxWidths[ vert ? sideAfter : side ];
|
2859 |
-
|
2860 |
-
if( styles[ side ] === 'dashed' || styles[ side ] === 'dotted' ) {
|
2861 |
-
segments.push( {
|
2862 |
-
path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) +
|
2863 |
-
curve( cornerBefore, 0, 0, baseAngle, 1, 0 ),
|
2864 |
-
fill: colors[ side ]
|
2865 |
-
} );
|
2866 |
-
segments.push( {
|
2867 |
-
path: line( side, sideW / 2, 0, 1 ),
|
2868 |
-
stroke: styles[ side ],
|
2869 |
-
weight: sideW,
|
2870 |
-
color: colors[ side ]
|
2871 |
-
} );
|
2872 |
-
segments.push( {
|
2873 |
-
path: curve( cornerAfter, afterX, afterY, baseAngle, 0, 1 ) +
|
2874 |
-
curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ),
|
2875 |
-
fill: colors[ side ]
|
2876 |
-
} );
|
2877 |
-
}
|
2878 |
-
else {
|
2879 |
-
segments.push( {
|
2880 |
-
path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) +
|
2881 |
-
line( side, sideW, 0, 0 ) +
|
2882 |
-
curve( cornerAfter, afterX, afterY, baseAngle, 0, 0 ) +
|
2883 |
-
|
2884 |
-
( styles[ side ] === 'double' && sideW > 2 ?
|
2885 |
-
curve( cornerAfter, afterX - floor( afterX / 3 ), afterY - floor( afterY / 3 ), baseAngle - 45, 1, 0 ) +
|
2886 |
-
line( side, ceil( sideW / 3 * 2 ), 1, 0 ) +
|
2887 |
-
curve( cornerBefore, beforeX - floor( beforeX / 3 ), beforeY - floor( beforeY / 3 ), baseAngle, 1, 0 ) +
|
2888 |
-
'x ' +
|
2889 |
-
curve( cornerBefore, floor( beforeX / 3 ), floor( beforeY / 3 ), baseAngle + 45, 0, 1 ) +
|
2890 |
-
line( side, floor( sideW / 3 ), 1, 0 ) +
|
2891 |
-
curve( cornerAfter, floor( afterX / 3 ), floor( afterY / 3 ), baseAngle, 0, 0 )
|
2892 |
-
: '' ) +
|
2893 |
-
|
2894 |
-
curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ) +
|
2895 |
-
line( side, 0, 1, 0 ) +
|
2896 |
-
curve( cornerBefore, 0, 0, baseAngle, 1, 0 ),
|
2897 |
-
fill: colors[ side ]
|
2898 |
-
} );
|
2899 |
-
}
|
2900 |
-
}
|
2901 |
-
}
|
2902 |
-
|
2903 |
-
addSide( 't', 'l', 'r', 'tl', 'tr', 90 );
|
2904 |
-
addSide( 'r', 't', 'b', 'tr', 'br', 0 );
|
2905 |
-
addSide( 'b', 'r', 'l', 'br', 'bl', -90 );
|
2906 |
-
addSide( 'l', 'b', 't', 'bl', 'tl', -180 );
|
2907 |
-
}
|
2908 |
-
}
|
2909 |
-
|
2910 |
-
return segments;
|
2911 |
-
},
|
2912 |
-
|
2913 |
-
destroy: function() {
|
2914 |
-
PIE.RendererBase.destroy.call( this );
|
2915 |
-
this.targetElement.runtimeStyle.borderColor = '';
|
2916 |
-
}
|
2917 |
-
|
2918 |
-
|
2919 |
-
} );
|
2920 |
-
/**
|
2921 |
-
* Renderer for border-image
|
2922 |
-
* @constructor
|
2923 |
-
* @param {Element} el The target element
|
2924 |
-
* @param {Object} styleInfos The StyleInfo objects
|
2925 |
-
* @param {PIE.RootRenderer} parent
|
2926 |
-
*/
|
2927 |
-
PIE.BorderImageRenderer = PIE.RendererBase.newRenderer( {
|
2928 |
-
|
2929 |
-
boxZIndex: 5,
|
2930 |
-
pieceNames: [ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl', 'c' ],
|
2931 |
-
|
2932 |
-
needsUpdate: function() {
|
2933 |
-
return this.styleInfos.borderImageInfo.changed();
|
2934 |
-
},
|
2935 |
-
|
2936 |
-
isActive: function() {
|
2937 |
-
return this.styleInfos.borderImageInfo.isActive();
|
2938 |
-
},
|
2939 |
-
|
2940 |
-
draw: function() {
|
2941 |
-
this.getBox(); //make sure pieces are created
|
2942 |
-
|
2943 |
-
var props = this.styleInfos.borderImageInfo.getProps(),
|
2944 |
-
bounds = this.boundsInfo.getBounds(),
|
2945 |
-
el = this.targetElement,
|
2946 |
-
pieces = this.pieces;
|
2947 |
-
|
2948 |
-
PIE.Util.withImageSize( props.src, function( imgSize ) {
|
2949 |
-
var elW = bounds.w,
|
2950 |
-
elH = bounds.h,
|
2951 |
-
|
2952 |
-
widths = props.width,
|
2953 |
-
widthT = widths.t.pixels( el ),
|
2954 |
-
widthR = widths.r.pixels( el ),
|
2955 |
-
widthB = widths.b.pixels( el ),
|
2956 |
-
widthL = widths.l.pixels( el ),
|
2957 |
-
slices = props.slice,
|
2958 |
-
sliceT = slices.t.pixels( el ),
|
2959 |
-
sliceR = slices.r.pixels( el ),
|
2960 |
-
sliceB = slices.b.pixels( el ),
|
2961 |
-
sliceL = slices.l.pixels( el );
|
2962 |
-
|
2963 |
-
// Piece positions and sizes
|
2964 |
-
function setSizeAndPos( piece, w, h, x, y ) {
|
2965 |
-
var s = pieces[piece].style,
|
2966 |
-
max = Math.max;
|
2967 |
-
s.width = max(w, 0);
|
2968 |
-
s.height = max(h, 0);
|
2969 |
-
s.left = x;
|
2970 |
-
s.top = y;
|
2971 |
-
}
|
2972 |
-
setSizeAndPos( 'tl', widthL, widthT, 0, 0 );
|
2973 |
-
setSizeAndPos( 't', elW - widthL - widthR, widthT, widthL, 0 );
|
2974 |
-
setSizeAndPos( 'tr', widthR, widthT, elW - widthR, 0 );
|
2975 |
-
setSizeAndPos( 'r', widthR, elH - widthT - widthB, elW - widthR, widthT );
|
2976 |
-
setSizeAndPos( 'br', widthR, widthB, elW - widthR, elH - widthB );
|
2977 |
-
setSizeAndPos( 'b', elW - widthL - widthR, widthB, widthL, elH - widthB );
|
2978 |
-
setSizeAndPos( 'bl', widthL, widthB, 0, elH - widthB );
|
2979 |
-
setSizeAndPos( 'l', widthL, elH - widthT - widthB, 0, widthT );
|
2980 |
-
setSizeAndPos( 'c', elW - widthL - widthR, elH - widthT - widthB, widthL, widthT );
|
2981 |
-
|
2982 |
-
|
2983 |
-
// image croppings
|
2984 |
-
function setCrops( sides, crop, val ) {
|
2985 |
-
for( var i=0, len=sides.length; i < len; i++ ) {
|
2986 |
-
pieces[ sides[i] ]['imagedata'][ crop ] = val;
|
2987 |
-
}
|
2988 |
-
}
|
2989 |
-
|
2990 |
-
// corners
|
2991 |
-
setCrops( [ 'tl', 't', 'tr' ], 'cropBottom', ( imgSize.h - sliceT ) / imgSize.h );
|
2992 |
-
setCrops( [ 'tl', 'l', 'bl' ], 'cropRight', ( imgSize.w - sliceL ) / imgSize.w );
|
2993 |
-
setCrops( [ 'bl', 'b', 'br' ], 'cropTop', ( imgSize.h - sliceB ) / imgSize.h );
|
2994 |
-
setCrops( [ 'tr', 'r', 'br' ], 'cropLeft', ( imgSize.w - sliceR ) / imgSize.w );
|
2995 |
-
|
2996 |
-
// edges and center
|
2997 |
-
if( props.repeat.v === 'stretch' ) {
|
2998 |
-
setCrops( [ 'l', 'r', 'c' ], 'cropTop', sliceT / imgSize.h );
|
2999 |
-
setCrops( [ 'l', 'r', 'c' ], 'cropBottom', sliceB / imgSize.h );
|
3000 |
-
}
|
3001 |
-
if( props.repeat.h === 'stretch' ) {
|
3002 |
-
setCrops( [ 't', 'b', 'c' ], 'cropLeft', sliceL / imgSize.w );
|
3003 |
-
setCrops( [ 't', 'b', 'c' ], 'cropRight', sliceR / imgSize.w );
|
3004 |
-
}
|
3005 |
-
|
3006 |
-
// center fill
|
3007 |
-
pieces['c'].style.display = props.fill ? '' : 'none';
|
3008 |
-
}, this );
|
3009 |
-
},
|
3010 |
-
|
3011 |
-
getBox: function() {
|
3012 |
-
var box = this.parent.getLayer( this.boxZIndex ),
|
3013 |
-
s, piece, i,
|
3014 |
-
pieceNames = this.pieceNames,
|
3015 |
-
len = pieceNames.length;
|
3016 |
-
|
3017 |
-
if( !box ) {
|
3018 |
-
box = doc.createElement( 'border-image' );
|
3019 |
-
s = box.style;
|
3020 |
-
s.position = 'absolute';
|
3021 |
-
|
3022 |
-
this.pieces = {};
|
3023 |
-
|
3024 |
-
for( i = 0; i < len; i++ ) {
|
3025 |
-
piece = this.pieces[ pieceNames[i] ] = PIE.Util.createVmlElement( 'rect' );
|
3026 |
-
piece.appendChild( PIE.Util.createVmlElement( 'imagedata' ) );
|
3027 |
-
s = piece.style;
|
3028 |
-
s['behavior'] = 'url(#default#VML)';
|
3029 |
-
s.position = "absolute";
|
3030 |
-
s.top = s.left = 0;
|
3031 |
-
piece['imagedata'].src = this.styleInfos.borderImageInfo.getProps().src;
|
3032 |
-
piece.stroked = false;
|
3033 |
-
piece.filled = false;
|
3034 |
-
box.appendChild( piece );
|
3035 |
-
}
|
3036 |
-
|
3037 |
-
this.parent.addLayer( this.boxZIndex, box );
|
3038 |
-
}
|
3039 |
-
|
3040 |
-
return box;
|
3041 |
-
}
|
3042 |
-
|
3043 |
-
} );
|
3044 |
-
/**
|
3045 |
-
* Renderer for outset box-shadows
|
3046 |
-
* @constructor
|
3047 |
-
* @param {Element} el The target element
|
3048 |
-
* @param {Object} styleInfos The StyleInfo objects
|
3049 |
-
* @param {PIE.RootRenderer} parent
|
3050 |
-
*/
|
3051 |
-
PIE.BoxShadowOutsetRenderer = PIE.RendererBase.newRenderer( {
|
3052 |
-
|
3053 |
-
boxZIndex: 1,
|
3054 |
-
boxName: 'outset-box-shadow',
|
3055 |
-
|
3056 |
-
needsUpdate: function() {
|
3057 |
-
var si = this.styleInfos;
|
3058 |
-
return si.boxShadowInfo.changed() || si.borderRadiusInfo.changed();
|
3059 |
-
},
|
3060 |
-
|
3061 |
-
isActive: function() {
|
3062 |
-
var boxShadowInfo = this.styleInfos.boxShadowInfo;
|
3063 |
-
return boxShadowInfo.isActive() && boxShadowInfo.getProps().outset[0];
|
3064 |
-
},
|
3065 |
-
|
3066 |
-
draw: function() {
|
3067 |
-
var me = this,
|
3068 |
-
el = this.targetElement,
|
3069 |
-
box = this.getBox(),
|
3070 |
-
styleInfos = this.styleInfos,
|
3071 |
-
shadowInfos = styleInfos.boxShadowInfo.getProps().outset,
|
3072 |
-
radii = styleInfos.borderRadiusInfo.getProps(),
|
3073 |
-
len = shadowInfos.length,
|
3074 |
-
i = len, j,
|
3075 |
-
bounds = this.boundsInfo.getBounds(),
|
3076 |
-
w = bounds.w,
|
3077 |
-
h = bounds.h,
|
3078 |
-
clipAdjust = PIE.ieVersion === 8 ? 1 : 0, //workaround for IE8 bug where VML leaks out top/left of clip region by 1px
|
3079 |
-
corners = [ 'tl', 'tr', 'br', 'bl' ], corner,
|
3080 |
-
shadowInfo, shape, fill, ss, xOff, yOff, spread, blur, shrink, color, alpha, path,
|
3081 |
-
totalW, totalH, focusX, focusY, isBottom, isRight;
|
3082 |
-
|
3083 |
-
|
3084 |
-
function getShadowShape( index, corner, xOff, yOff, color, blur, path ) {
|
3085 |
-
var shape = me.getShape( 'shadow' + index + corner, 'fill', box, len - index ),
|
3086 |
-
fill = shape.fill;
|
3087 |
-
|
3088 |
-
// Position and size
|
3089 |
-
shape['coordsize'] = w * 2 + ',' + h * 2;
|
3090 |
-
shape['coordorigin'] = '1,1';
|
3091 |
-
|
3092 |
-
// Color and opacity
|
3093 |
-
shape['stroked'] = false;
|
3094 |
-
shape['filled'] = true;
|
3095 |
-
fill.color = color.colorValue( el );
|
3096 |
-
if( blur ) {
|
3097 |
-
fill['type'] = 'gradienttitle'; //makes the VML gradient follow the shape's outline - hooray for undocumented features?!?!
|
3098 |
-
fill['color2'] = fill.color;
|
3099 |
-
fill['opacity'] = 0;
|
3100 |
-
}
|
3101 |
-
|
3102 |
-
// Path
|
3103 |
-
shape.path = path;
|
3104 |
-
|
3105 |
-
// This needs to go last for some reason, to prevent rendering at incorrect size
|
3106 |
-
ss = shape.style;
|
3107 |
-
ss.left = xOff;
|
3108 |
-
ss.top = yOff;
|
3109 |
-
ss.width = w;
|
3110 |
-
ss.height = h;
|
3111 |
-
|
3112 |
-
return shape;
|
3113 |
-
}
|
3114 |
-
|
3115 |
-
|
3116 |
-
while( i-- ) {
|
3117 |
-
shadowInfo = shadowInfos[ i ];
|
3118 |
-
xOff = shadowInfo.xOffset.pixels( el );
|
3119 |
-
yOff = shadowInfo.yOffset.pixels( el );
|
3120 |
-
spread = shadowInfo.spread.pixels( el ),
|
3121 |
-
blur = shadowInfo.blur.pixels( el );
|
3122 |
-
color = shadowInfo.color;
|
3123 |
-
// Shape path
|
3124 |
-
shrink = -spread - blur;
|
3125 |
-
if( !radii && blur ) {
|
3126 |
-
// If blurring, use a non-null border radius info object so that getBoxPath will
|
3127 |
-
// round the corners of the expanded shadow shape rather than squaring them off.
|
3128 |
-
radii = PIE.BorderRadiusStyleInfo.ALL_ZERO;
|
3129 |
-
}
|
3130 |
-
path = this.getBoxPath( { t: shrink, r: shrink, b: shrink, l: shrink }, 2, radii );
|
3131 |
-
|
3132 |
-
if( blur ) {
|
3133 |
-
totalW = ( spread + blur ) * 2 + w;
|
3134 |
-
totalH = ( spread + blur ) * 2 + h;
|
3135 |
-
focusX = blur * 2 / totalW;
|
3136 |
-
focusY = blur * 2 / totalH;
|
3137 |
-
if( blur - spread > w / 2 || blur - spread > h / 2 ) {
|
3138 |
-
// If the blur is larger than half the element's narrowest dimension, we cannot do
|
3139 |
-
// this with a single shape gradient, because its focussize would have to be less than
|
3140 |
-
// zero which results in ugly artifacts. Instead we create four shapes, each with its
|
3141 |
-
// gradient focus past center, and then clip them so each only shows the quadrant
|
3142 |
-
// opposite the focus.
|
3143 |
-
for( j = 4; j--; ) {
|
3144 |
-
corner = corners[j];
|
3145 |
-
isBottom = corner.charAt( 0 ) === 'b';
|
3146 |
-
isRight = corner.charAt( 1 ) === 'r';
|
3147 |
-
shape = getShadowShape( i, corner, xOff, yOff, color, blur, path );
|
3148 |
-
fill = shape.fill;
|
3149 |
-
fill['focusposition'] = ( isRight ? 1 - focusX : focusX ) + ',' +
|
3150 |
-
( isBottom ? 1 - focusY : focusY );
|
3151 |
-
fill['focussize'] = '0,0';
|
3152 |
-
|
3153 |
-
// Clip to show only the appropriate quadrant. Add 1px to the top/left clip values
|
3154 |
-
// in IE8 to prevent a bug where IE8 displays one pixel outside the clip region.
|
3155 |
-
shape.style.clip = 'rect(' + ( ( isBottom ? totalH / 2 : 0 ) + clipAdjust ) + 'px,' +
|
3156 |
-
( isRight ? totalW : totalW / 2 ) + 'px,' +
|
3157 |
-
( isBottom ? totalH : totalH / 2 ) + 'px,' +
|
3158 |
-
( ( isRight ? totalW / 2 : 0 ) + clipAdjust ) + 'px)';
|
3159 |
-
}
|
3160 |
-
} else {
|
3161 |
-
// TODO delete old quadrant shapes if resizing expands past the barrier
|
3162 |
-
shape = getShadowShape( i, '', xOff, yOff, color, blur, path );
|
3163 |
-
fill = shape.fill;
|
3164 |
-
fill['focusposition'] = focusX + ',' + focusY;
|
3165 |
-
fill['focussize'] = ( 1 - focusX * 2 ) + ',' + ( 1 - focusY * 2 );
|
3166 |
-
}
|
3167 |
-
} else {
|
3168 |
-
shape = getShadowShape( i, '', xOff, yOff, color, blur, path );
|
3169 |
-
alpha = color.alpha();
|
3170 |
-
if( alpha < 1 ) {
|
3171 |
-
// shape.style.filter = 'alpha(opacity=' + ( alpha * 100 ) + ')';
|
3172 |
-
// ss.filter = 'progid:DXImageTransform.Microsoft.BasicImage(opacity=' + ( alpha ) + ')';
|
3173 |
-
shape.fill.opacity = alpha;
|
3174 |
-
}
|
3175 |
-
}
|
3176 |
-
}
|
3177 |
-
}
|
3178 |
-
|
3179 |
-
} );
|
3180 |
-
/**
|
3181 |
-
* Renderer for re-rendering img elements using VML. Kicks in if the img has
|
3182 |
-
* a border-radius applied, or if the -pie-png-fix flag is set.
|
3183 |
-
* @constructor
|
3184 |
-
* @param {Element} el The target element
|
3185 |
-
* @param {Object} styleInfos The StyleInfo objects
|
3186 |
-
* @param {PIE.RootRenderer} parent
|
3187 |
-
*/
|
3188 |
-
PIE.ImgRenderer = PIE.RendererBase.newRenderer( {
|
3189 |
-
|
3190 |
-
boxZIndex: 6,
|
3191 |
-
boxName: 'imgEl',
|
3192 |
-
|
3193 |
-
needsUpdate: function() {
|
3194 |
-
var si = this.styleInfos;
|
3195 |
-
return this.targetElement.src !== this._lastSrc || si.borderRadiusInfo.changed();
|
3196 |
-
},
|
3197 |
-
|
3198 |
-
isActive: function() {
|
3199 |
-
var si = this.styleInfos;
|
3200 |
-
return si.borderRadiusInfo.isActive() || si.backgroundInfo.isPngFix();
|
3201 |
-
},
|
3202 |
-
|
3203 |
-
draw: function() {
|
3204 |
-
this._lastSrc = src;
|
3205 |
-
this.hideActualImg();
|
3206 |
-
|
3207 |
-
var shape = this.getShape( 'img', 'fill', this.getBox() ),
|
3208 |
-
fill = shape.fill,
|
3209 |
-
bounds = this.boundsInfo.getBounds(),
|
3210 |
-
w = bounds.w,
|
3211 |
-
h = bounds.h,
|
3212 |
-
borderProps = this.styleInfos.borderInfo.getProps(),
|
3213 |
-
borderWidths = borderProps && borderProps.widths,
|
3214 |
-
el = this.targetElement,
|
3215 |
-
src = el.src,
|
3216 |
-
round = Math.round,
|
3217 |
-
s;
|
3218 |
-
|
3219 |
-
shape.stroked = false;
|
3220 |
-
fill.type = 'frame';
|
3221 |
-
fill.src = src;
|
3222 |
-
fill.position = (w ? 0.5 / w : 0) + ',' + (h ? 0.5 / h : 0);
|
3223 |
-
shape.coordsize = w * 2 + ',' + h * 2;
|
3224 |
-
shape.coordorigin = '1,1';
|
3225 |
-
shape.path = this.getBoxPath( borderWidths ? {
|
3226 |
-
t: round( borderWidths['t'].pixels( el ) ),
|
3227 |
-
r: round( borderWidths['r'].pixels( el ) ),
|
3228 |
-
b: round( borderWidths['b'].pixels( el ) ),
|
3229 |
-
l: round( borderWidths['l'].pixels( el ) )
|
3230 |
-
} : 0, 2 );
|
3231 |
-
s = shape.style;
|
3232 |
-
s.width = w;
|
3233 |
-
s.height = h;
|
3234 |
-
},
|
3235 |
-
|
3236 |
-
hideActualImg: function() {
|
3237 |
-
this.targetElement.runtimeStyle.filter = 'alpha(opacity=0)';
|
3238 |
-
},
|
3239 |
-
|
3240 |
-
destroy: function() {
|
3241 |
-
PIE.RendererBase.destroy.call( this );
|
3242 |
-
this.targetElement.runtimeStyle.filter = '';
|
3243 |
-
}
|
3244 |
-
|
3245 |
-
} );
|
3246 |
-
|
3247 |
-
PIE.Element = (function() {
|
3248 |
-
|
3249 |
-
var wrappers = {},
|
3250 |
-
lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
|
3251 |
-
pollCssProp = PIE.CSS_PREFIX + 'poll',
|
3252 |
-
hoverClass = ' ' + PIE.CLASS_PREFIX + 'hover',
|
3253 |
-
hoverClassRE = new RegExp( '\\b' + PIE.CLASS_PREFIX + 'hover\\b', 'g' ),
|
3254 |
-
ignorePropertyNames = { 'background':1, 'bgColor':1, 'display': 1 };
|
3255 |
-
|
3256 |
-
|
3257 |
-
function addListener( el, type, handler ) {
|
3258 |
-
el.attachEvent( type, handler );
|
3259 |
-
}
|
3260 |
-
|
3261 |
-
function removeListener( el, type, handler ) {
|
3262 |
-
el.detachEvent( type, handler );
|
3263 |
-
}
|
3264 |
-
|
3265 |
-
|
3266 |
-
function Element( el ) {
|
3267 |
-
var renderers,
|
3268 |
-
boundsInfo = new PIE.BoundsInfo( el ),
|
3269 |
-
styleInfos,
|
3270 |
-
styleInfosArr,
|
3271 |
-
ancestors,
|
3272 |
-
initializing,
|
3273 |
-
initialized,
|
3274 |
-
eventsAttached,
|
3275 |
-
delayed,
|
3276 |
-
destroyed,
|
3277 |
-
poll;
|
3278 |
-
|
3279 |
-
/**
|
3280 |
-
* Initialize PIE for this element.
|
3281 |
-
*/
|
3282 |
-
function init() {
|
3283 |
-
if( !initialized ) {
|
3284 |
-
var docEl,
|
3285 |
-
bounds,
|
3286 |
-
cs = el.currentStyle,
|
3287 |
-
lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
|
3288 |
-
rootRenderer;
|
3289 |
-
|
3290 |
-
// Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
|
3291 |
-
poll = cs.getAttribute( pollCssProp );
|
3292 |
-
poll = PIE.ieDocMode === 8 ? poll !== 'false' : poll === 'true';
|
3293 |
-
|
3294 |
-
// Force layout so move/resize events will fire. Set this as soon as possible to avoid layout changes
|
3295 |
-
// after load, but make sure it only gets called the first time through to avoid recursive calls to init().
|
3296 |
-
if( !initializing ) {
|
3297 |
-
initializing = 1;
|
3298 |
-
el.runtimeStyle.zoom = 1;
|
3299 |
-
initFirstChildPseudoClass();
|
3300 |
-
}
|
3301 |
-
|
3302 |
-
boundsInfo.lock();
|
3303 |
-
|
3304 |
-
// If the -pie-lazy-init:true flag is set, check if the element is outside the viewport and if so, delay initialization
|
3305 |
-
if( lazy && ( bounds = boundsInfo.getBounds() ) && ( docEl = doc.documentElement || doc.body ) &&
|
3306 |
-
( bounds.y > docEl.clientHeight || bounds.x > docEl.clientWidth || bounds.y + bounds.h < 0 || bounds.x + bounds.w < 0 ) ) {
|
3307 |
-
if( !delayed ) {
|
3308 |
-
delayed = 1;
|
3309 |
-
PIE.OnScroll.observe( init );
|
3310 |
-
}
|
3311 |
-
} else {
|
3312 |
-
initialized = 1;
|
3313 |
-
delayed = initializing = 0;
|
3314 |
-
PIE.OnScroll.unobserve( init );
|
3315 |
-
|
3316 |
-
// Create the style infos and renderers
|
3317 |
-
styleInfos = {
|
3318 |
-
backgroundInfo: new PIE.BackgroundStyleInfo( el ),
|
3319 |
-
borderInfo: new PIE.BorderStyleInfo( el ),
|
3320 |
-
borderImageInfo: new PIE.BorderImageStyleInfo( el ),
|
3321 |
-
borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
|
3322 |
-
boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
|
3323 |
-
visibilityInfo: new PIE.VisibilityStyleInfo( el )
|
3324 |
-
};
|
3325 |
-
styleInfosArr = [
|
3326 |
-
styleInfos.backgroundInfo,
|
3327 |
-
styleInfos.borderInfo,
|
3328 |
-
styleInfos.borderImageInfo,
|
3329 |
-
styleInfos.borderRadiusInfo,
|
3330 |
-
styleInfos.boxShadowInfo,
|
3331 |
-
styleInfos.visibilityInfo
|
3332 |
-
];
|
3333 |
-
|
3334 |
-
rootRenderer = new PIE.RootRenderer( el, boundsInfo, styleInfos );
|
3335 |
-
var childRenderers = [
|
3336 |
-
new PIE.BoxShadowOutsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3337 |
-
new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3338 |
-
//new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3339 |
-
new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3340 |
-
new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
|
3341 |
-
];
|
3342 |
-
if( el.tagName === 'IMG' ) {
|
3343 |
-
childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
|
3344 |
-
}
|
3345 |
-
rootRenderer.childRenderers = childRenderers; // circular reference, can't pass in constructor; TODO is there a cleaner way?
|
3346 |
-
renderers = [ rootRenderer ].concat( childRenderers );
|
3347 |
-
|
3348 |
-
// Add property change listeners to ancestors if requested
|
3349 |
-
initAncestorPropChangeListeners();
|
3350 |
-
|
3351 |
-
// Add to list of polled elements in IE8
|
3352 |
-
if( poll ) {
|
3353 |
-
PIE.Heartbeat.observe( update );
|
3354 |
-
PIE.Heartbeat.run();
|
3355 |
-
}
|
3356 |
-
|
3357 |
-
// Trigger rendering
|
3358 |
-
update( 1 );
|
3359 |
-
}
|
3360 |
-
|
3361 |
-
if( !eventsAttached ) {
|
3362 |
-
eventsAttached = 1;
|
3363 |
-
addListener( el, 'onmove', handleMoveOrResize );
|
3364 |
-
addListener( el, 'onresize', handleMoveOrResize );
|
3365 |
-
addListener( el, 'onpropertychange', propChanged );
|
3366 |
-
addListener( el, 'onmouseenter', mouseEntered );
|
3367 |
-
addListener( el, 'onmouseleave', mouseLeft );
|
3368 |
-
PIE.OnResize.observe( handleMoveOrResize );
|
3369 |
-
|
3370 |
-
PIE.OnBeforeUnload.observe( removeEventListeners );
|
3371 |
-
}
|
3372 |
-
|
3373 |
-
boundsInfo.unlock();
|
3374 |
-
}
|
3375 |
-
}
|
3376 |
-
|
3377 |
-
|
3378 |
-
|
3379 |
-
|
3380 |
-
/**
|
3381 |
-
* Event handler for onmove and onresize events. Invokes update() only if the element's
|
3382 |
-
* bounds have previously been calculated, to prevent multiple runs during page load when
|
3383 |
-
* the element has no initial CSS3 properties.
|
3384 |
-
*/
|
3385 |
-
function handleMoveOrResize() {
|
3386 |
-
if( boundsInfo && boundsInfo.hasBeenQueried() ) {
|
3387 |
-
update();
|
3388 |
-
}
|
3389 |
-
}
|
3390 |
-
|
3391 |
-
|
3392 |
-
/**
|
3393 |
-
* Update position and/or size as necessary. Both move and resize events call
|
3394 |
-
* this rather than the updatePos/Size functions because sometimes, particularly
|
3395 |
-
* during page load, one will fire but the other won't.
|
3396 |
-
*/
|
3397 |
-
function update( force ) {
|
3398 |
-
if( !destroyed ) {
|
3399 |
-
if( initialized ) {
|
3400 |
-
var i, len;
|
3401 |
-
|
3402 |
-
lockAll();
|
3403 |
-
if( force || boundsInfo.positionChanged() ) {
|
3404 |
-
/* TODO just using getBoundingClientRect (used internally by BoundsInfo) for detecting
|
3405 |
-
position changes may not always be accurate; it's possible that
|
3406 |
-
an element will actually move relative to its positioning parent, but its position
|
3407 |
-
relative to the viewport will stay the same. Need to come up with a better way to
|
3408 |
-
track movement. The most accurate would be the same logic used in RootRenderer.updatePos()
|
3409 |
-
but that is a more expensive operation since it does some DOM walking, and we want this
|
3410 |
-
check to be as fast as possible. */
|
3411 |
-
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3412 |
-
renderers[i].updatePos();
|
3413 |
-
}
|
3414 |
-
}
|
3415 |
-
if( force || boundsInfo.sizeChanged() ) {
|
3416 |
-
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3417 |
-
renderers[i].updateSize();
|
3418 |
-
}
|
3419 |
-
}
|
3420 |
-
unlockAll();
|
3421 |
-
}
|
3422 |
-
else if( !initializing ) {
|
3423 |
-
init();
|
3424 |
-
}
|
3425 |
-
}
|
3426 |
-
}
|
3427 |
-
|
3428 |
-
/**
|
3429 |
-
* Handle property changes to trigger update when appropriate.
|
3430 |
-
*/
|
3431 |
-
function propChanged() {
|
3432 |
-
var i, len, renderer,
|
3433 |
-
e = event;
|
3434 |
-
|
3435 |
-
// Some elements like <table> fire onpropertychange events for old-school background properties
|
3436 |
-
// ('background', 'bgColor') when runtimeStyle background properties are changed, which
|
3437 |
-
// results in an infinite loop; therefore we filter out those property names. Also, 'display'
|
3438 |
-
// is ignored because size calculations don't work correctly immediately when its onpropertychange
|
3439 |
-
// event fires, and because it will trigger an onresize event anyway.
|
3440 |
-
if( !destroyed && !( e && e.propertyName in ignorePropertyNames ) ) {
|
3441 |
-
if( initialized ) {
|
3442 |
-
lockAll();
|
3443 |
-
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3444 |
-
renderer = renderers[i];
|
3445 |
-
// Make sure position is synced if the element hasn't already been rendered.
|
3446 |
-
// TODO this feels sloppy - look into merging propChanged and update functions
|
3447 |
-
if( !renderer.isPositioned ) {
|
3448 |
-
renderer.updatePos();
|
3449 |
-
}
|
3450 |
-
if( renderer.needsUpdate() ) {
|
3451 |
-
renderer.updateProps();
|
3452 |
-
}
|
3453 |
-
}
|
3454 |
-
unlockAll();
|
3455 |
-
}
|
3456 |
-
else if( !initializing ) {
|
3457 |
-
init();
|
3458 |
-
}
|
3459 |
-
}
|
3460 |
-
}
|
3461 |
-
|
3462 |
-
|
3463 |
-
function addHoverClass() {
|
3464 |
-
if( el ) {
|
3465 |
-
el.className += hoverClass;
|
3466 |
-
}
|
3467 |
-
}
|
3468 |
-
|
3469 |
-
function removeHoverClass() {
|
3470 |
-
if( el ) {
|
3471 |
-
el.className = el.className.replace( hoverClassRE, '' );
|
3472 |
-
}
|
3473 |
-
}
|
3474 |
-
|
3475 |
-
/**
|
3476 |
-
* Handle mouseenter events. Adds a custom class to the element to allow IE6 to add
|
3477 |
-
* hover styles to non-link elements, and to trigger a propertychange update.
|
3478 |
-
*/
|
3479 |
-
function mouseEntered() {
|
3480 |
-
//must delay this because the mouseenter event fires before the :hover styles are added.
|
3481 |
-
setTimeout( addHoverClass, 0 );
|
3482 |
-
}
|
3483 |
-
|
3484 |
-
/**
|
3485 |
-
* Handle mouseleave events
|
3486 |
-
*/
|
3487 |
-
function mouseLeft() {
|
3488 |
-
//must delay this because the mouseleave event fires before the :hover styles are removed.
|
3489 |
-
setTimeout( removeHoverClass, 0 );
|
3490 |
-
}
|
3491 |
-
|
3492 |
-
|
3493 |
-
/**
|
3494 |
-
* Handle property changes on ancestors of the element; see initAncestorPropChangeListeners()
|
3495 |
-
* which adds these listeners as requested with the -pie-watch-ancestors CSS property.
|
3496 |
-
*/
|
3497 |
-
function ancestorPropChanged() {
|
3498 |
-
var name = event.propertyName;
|
3499 |
-
if( name === 'className' || name === 'id' ) {
|
3500 |
-
propChanged();
|
3501 |
-
}
|
3502 |
-
}
|
3503 |
-
|
3504 |
-
function lockAll() {
|
3505 |
-
boundsInfo.lock();
|
3506 |
-
for( var i = styleInfosArr.length; i--; ) {
|
3507 |
-
styleInfosArr[i].lock();
|
3508 |
-
}
|
3509 |
-
}
|
3510 |
-
|
3511 |
-
function unlockAll() {
|
3512 |
-
for( var i = styleInfosArr.length; i--; ) {
|
3513 |
-
styleInfosArr[i].unlock();
|
3514 |
-
}
|
3515 |
-
boundsInfo.unlock();
|
3516 |
-
}
|
3517 |
-
|
3518 |
-
|
3519 |
-
/**
|
3520 |
-
* Remove all event listeners from the element and any monitoried ancestors.
|
3521 |
-
*/
|
3522 |
-
function removeEventListeners() {
|
3523 |
-
if (eventsAttached) {
|
3524 |
-
if( ancestors ) {
|
3525 |
-
for( var i = 0, len = ancestors.length, a; i < len; i++ ) {
|
3526 |
-
a = ancestors[i];
|
3527 |
-
removeListener( a, 'onpropertychange', ancestorPropChanged );
|
3528 |
-
removeListener( a, 'onmouseenter', mouseEntered );
|
3529 |
-
removeListener( a, 'onmouseleave', mouseLeft );
|
3530 |
-
}
|
3531 |
-
}
|
3532 |
-
|
3533 |
-
// Remove event listeners
|
3534 |
-
removeListener( el, 'onmove', update );
|
3535 |
-
removeListener( el, 'onresize', update );
|
3536 |
-
removeListener( el, 'onpropertychange', propChanged );
|
3537 |
-
removeListener( el, 'onmouseenter', mouseEntered );
|
3538 |
-
removeListener( el, 'onmouseleave', mouseLeft );
|
3539 |
-
|
3540 |
-
PIE.OnBeforeUnload.unobserve( removeEventListeners );
|
3541 |
-
eventsAttached = 0;
|
3542 |
-
}
|
3543 |
-
}
|
3544 |
-
|
3545 |
-
|
3546 |
-
/**
|
3547 |
-
* Clean everything up when the behavior is removed from the element, or the element
|
3548 |
-
* is manually destroyed.
|
3549 |
-
*/
|
3550 |
-
function destroy() {
|
3551 |
-
if( !destroyed ) {
|
3552 |
-
var i, len;
|
3553 |
-
|
3554 |
-
removeEventListeners();
|
3555 |
-
|
3556 |
-
destroyed = 1;
|
3557 |
-
|
3558 |
-
// destroy any active renderers
|
3559 |
-
if( renderers ) {
|
3560 |
-
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3561 |
-
renderers[i].destroy();
|
3562 |
-
}
|
3563 |
-
}
|
3564 |
-
|
3565 |
-
// Remove from list of polled elements in IE8
|
3566 |
-
if( poll ) {
|
3567 |
-
PIE.Heartbeat.unobserve( update );
|
3568 |
-
}
|
3569 |
-
// Stop onresize listening
|
3570 |
-
PIE.OnResize.unobserve( update );
|
3571 |
-
|
3572 |
-
// Kill references
|
3573 |
-
renderers = boundsInfo = styleInfos = styleInfosArr = ancestors = el = null;
|
3574 |
-
}
|
3575 |
-
}
|
3576 |
-
|
3577 |
-
|
3578 |
-
/**
|
3579 |
-
* If requested via the custom -pie-watch-ancestors CSS property, add onpropertychange listeners
|
3580 |
-
* to ancestor(s) of the element so we can pick up style changes based on CSS rules using
|
3581 |
-
* descendant selectors.
|
3582 |
-
*/
|
3583 |
-
function initAncestorPropChangeListeners() {
|
3584 |
-
var watch = el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'watch-ancestors' ),
|
3585 |
-
i, a;
|
3586 |
-
if( watch ) {
|
3587 |
-
ancestors = [];
|
3588 |
-
watch = parseInt( watch, 10 );
|
3589 |
-
i = 0;
|
3590 |
-
a = el.parentNode;
|
3591 |
-
while( a && ( watch === 'NaN' || i++ < watch ) ) {
|
3592 |
-
ancestors.push( a );
|
3593 |
-
addListener( a, 'onpropertychange', ancestorPropChanged );
|
3594 |
-
addListener( a, 'onmouseenter', mouseEntered );
|
3595 |
-
addListener( a, 'onmouseleave', mouseLeft );
|
3596 |
-
a = a.parentNode;
|
3597 |
-
}
|
3598 |
-
}
|
3599 |
-
}
|
3600 |
-
|
3601 |
-
|
3602 |
-
/**
|
3603 |
-
* If the target element is a first child, add a pie_first-child class to it. This allows using
|
3604 |
-
* the added class as a workaround for the fact that PIE's rendering element breaks the :first-child
|
3605 |
-
* pseudo-class selector.
|
3606 |
-
*/
|
3607 |
-
function initFirstChildPseudoClass() {
|
3608 |
-
var tmpEl = el,
|
3609 |
-
isFirst = 1;
|
3610 |
-
while( tmpEl = tmpEl.previousSibling ) {
|
3611 |
-
if( tmpEl.nodeType === 1 ) {
|
3612 |
-
isFirst = 0;
|
3613 |
-
break;
|
3614 |
-
}
|
3615 |
-
}
|
3616 |
-
if( isFirst ) {
|
3617 |
-
el.className += ' ' + PIE.CLASS_PREFIX + 'first-child';
|
3618 |
-
}
|
3619 |
-
}
|
3620 |
-
|
3621 |
-
|
3622 |
-
// These methods are all already bound to this instance so there's no need to wrap them
|
3623 |
-
// in a closure to maintain the 'this' scope object when calling them.
|
3624 |
-
this.init = init;
|
3625 |
-
this.update = update;
|
3626 |
-
this.destroy = destroy;
|
3627 |
-
this.el = el;
|
3628 |
-
}
|
3629 |
-
|
3630 |
-
Element.getInstance = function( el ) {
|
3631 |
-
var id = PIE.Util.getUID( el );
|
3632 |
-
return wrappers[ id ] || ( wrappers[ id ] = new Element( el ) );
|
3633 |
-
};
|
3634 |
-
|
3635 |
-
Element.destroy = function( el ) {
|
3636 |
-
var id = PIE.Util.getUID( el ),
|
3637 |
-
wrapper = wrappers[ id ];
|
3638 |
-
if( wrapper ) {
|
3639 |
-
wrapper.destroy();
|
3640 |
-
delete wrappers[ id ];
|
3641 |
-
}
|
3642 |
-
};
|
3643 |
-
|
3644 |
-
Element.destroyAll = function() {
|
3645 |
-
var els = [], wrapper;
|
3646 |
-
if( wrappers ) {
|
3647 |
-
for( var w in wrappers ) {
|
3648 |
-
if( wrappers.hasOwnProperty( w ) ) {
|
3649 |
-
wrapper = wrappers[ w ];
|
3650 |
-
els.push( wrapper.el );
|
3651 |
-
wrapper.destroy();
|
3652 |
-
}
|
3653 |
-
}
|
3654 |
-
wrappers = {};
|
3655 |
-
}
|
3656 |
-
return els;
|
3657 |
-
};
|
3658 |
-
|
3659 |
-
return Element;
|
3660 |
-
})();
|
3661 |
-
|
3662 |
-
/*
|
3663 |
-
* This file exposes the public API for invoking PIE.
|
3664 |
-
*/
|
3665 |
-
|
3666 |
-
|
3667 |
-
/**
|
3668 |
-
* Programatically attach PIE to a single element.
|
3669 |
-
* @param {Element} el
|
3670 |
-
*/
|
3671 |
-
PIE[ 'attach' ] = function( el ) {
|
3672 |
-
if (PIE.ieDocMode < 9) {
|
3673 |
-
PIE.Element.getInstance( el ).init();
|
3674 |
-
}
|
3675 |
-
};
|
3676 |
-
|
3677 |
-
|
3678 |
-
/**
|
3679 |
-
* Programatically detach PIE from a single element.
|
3680 |
-
* @param {Element} el
|
3681 |
-
*/
|
3682 |
-
PIE[ 'detach' ] = function( el ) {
|
3683 |
-
PIE.Element.destroy( el );
|
3684 |
-
};
|
3685 |
-
|
3686 |
-
|
3687 |
-
} // if( !PIE )
|
3688 |
})();
|
1 |
+
/*
|
2 |
+
PIE: CSS3 rendering for IE
|
3 |
+
Version 1.0beta4
|
4 |
+
http://css3pie.com
|
5 |
+
Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
|
6 |
+
*/
|
7 |
+
(function(){
|
8 |
+
var doc = document;var PIE = window['PIE'];
|
9 |
+
|
10 |
+
if( !PIE ) {
|
11 |
+
PIE = window['PIE'] = {
|
12 |
+
CSS_PREFIX: '-pie-',
|
13 |
+
STYLE_PREFIX: 'Pie',
|
14 |
+
CLASS_PREFIX: 'pie_',
|
15 |
+
tableCellTags: {
|
16 |
+
'TD': 1,
|
17 |
+
'TH': 1
|
18 |
+
}
|
19 |
+
};
|
20 |
+
|
21 |
+
// Force the background cache to be used. No reason it shouldn't be.
|
22 |
+
try {
|
23 |
+
doc.execCommand( 'BackgroundImageCache', false, true );
|
24 |
+
} catch(e) {}
|
25 |
+
|
26 |
+
/*
|
27 |
+
* IE version detection approach by James Padolsey, with modifications -- from
|
28 |
+
* http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
|
29 |
+
*/
|
30 |
+
PIE.ieVersion = function(){
|
31 |
+
var v = 4,
|
32 |
+
div = doc.createElement('div'),
|
33 |
+
all = div.getElementsByTagName('i');
|
34 |
+
|
35 |
+
while (
|
36 |
+
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
|
37 |
+
all[0]
|
38 |
+
) {}
|
39 |
+
|
40 |
+
return v;
|
41 |
+
}();
|
42 |
+
|
43 |
+
// Detect IE6
|
44 |
+
if( PIE.ieVersion === 6 ) {
|
45 |
+
// IE6 can't access properties with leading dash, but can without it.
|
46 |
+
PIE.CSS_PREFIX = PIE.CSS_PREFIX.replace( /^-/, '' );
|
47 |
+
}
|
48 |
+
|
49 |
+
// Detect IE8
|
50 |
+
PIE.ieDocMode = doc.documentMode || PIE.ieVersion;
|
51 |
+
/**
|
52 |
+
* Utility functions
|
53 |
+
*/
|
54 |
+
(function() {
|
55 |
+
var vmlCreatorDoc,
|
56 |
+
idNum = 0,
|
57 |
+
imageSizes = {};
|
58 |
+
|
59 |
+
|
60 |
+
PIE.Util = {
|
61 |
+
|
62 |
+
/**
|
63 |
+
* To create a VML element, it must be created by a Document which has the VML
|
64 |
+
* namespace set. Unfortunately, if you try to add the namespace programatically
|
65 |
+
* into the main document, you will get an "Unspecified error" when trying to
|
66 |
+
* access document.namespaces before the document is finished loading. To get
|
67 |
+
* around this, we create a DocumentFragment, which in IE land is apparently a
|
68 |
+
* full-fledged Document. It allows adding namespaces immediately, so we add the
|
69 |
+
* namespace there and then have it create the VML element.
|
70 |
+
* @param {string} tag The tag name for the VML element
|
71 |
+
* @return {Element} The new VML element
|
72 |
+
*/
|
73 |
+
createVmlElement: function( tag ) {
|
74 |
+
var vmlPrefix = 'css3vml';
|
75 |
+
if( !vmlCreatorDoc ) {
|
76 |
+
vmlCreatorDoc = doc.createDocumentFragment();
|
77 |
+
vmlCreatorDoc.namespaces.add( vmlPrefix, 'urn:schemas-microsoft-com:vml' );
|
78 |
+
}
|
79 |
+
return vmlCreatorDoc.createElement( vmlPrefix + ':' + tag );
|
80 |
+
},
|
81 |
+
|
82 |
+
|
83 |
+
/**
|
84 |
+
* Generate and return a unique ID for a given object. The generated ID is stored
|
85 |
+
* as a property of the object for future reuse.
|
86 |
+
* @param {Object} obj
|
87 |
+
*/
|
88 |
+
getUID: function( obj ) {
|
89 |
+
return obj && obj[ '_pieId' ] || ( obj[ '_pieId' ] = ++idNum );
|
90 |
+
},
|
91 |
+
|
92 |
+
|
93 |
+
/**
|
94 |
+
* Simple utility for merging objects
|
95 |
+
* @param {Object} obj1 The main object into which all others will be merged
|
96 |
+
* @param {...Object} var_args Other objects which will be merged into the first, in order
|
97 |
+
*/
|
98 |
+
merge: function( obj1 ) {
|
99 |
+
var i, len, p, objN, args = arguments;
|
100 |
+
for( i = 1, len = args.length; i < len; i++ ) {
|
101 |
+
objN = args[i];
|
102 |
+
for( p in objN ) {
|
103 |
+
if( objN.hasOwnProperty( p ) ) {
|
104 |
+
obj1[ p ] = objN[ p ];
|
105 |
+
}
|
106 |
+
}
|
107 |
+
}
|
108 |
+
return obj1;
|
109 |
+
},
|
110 |
+
|
111 |
+
|
112 |
+
/**
|
113 |
+
* Execute a callback function, passing it the dimensions of a given image once
|
114 |
+
* they are known.
|
115 |
+
* @param {string} src The source URL of the image
|
116 |
+
* @param {function({w:number, h:number})} func The callback function to be called once the image dimensions are known
|
117 |
+
* @param {Object} ctx A context object which will be used as the 'this' value within the executed callback function
|
118 |
+
*/
|
119 |
+
withImageSize: function( src, func, ctx ) {
|
120 |
+
var size = imageSizes[ src ], img, queue;
|
121 |
+
if( size ) {
|
122 |
+
// If we have a queue, add to it
|
123 |
+
if( Object.prototype.toString.call( size ) === '[object Array]' ) {
|
124 |
+
size.push( [ func, ctx ] );
|
125 |
+
}
|
126 |
+
// Already have the size cached, call func right away
|
127 |
+
else {
|
128 |
+
func.call( ctx, size );
|
129 |
+
}
|
130 |
+
} else {
|
131 |
+
queue = imageSizes[ src ] = [ [ func, ctx ] ]; //create queue
|
132 |
+
img = new Image();
|
133 |
+
img.onload = function() {
|
134 |
+
size = imageSizes[ src ] = { w: img.width, h: img.height };
|
135 |
+
for( var i = 0, len = queue.length; i < len; i++ ) {
|
136 |
+
queue[ i ][ 0 ].call( queue[ i ][ 1 ], size );
|
137 |
+
}
|
138 |
+
img.onload = null;
|
139 |
+
};
|
140 |
+
img.src = src;
|
141 |
+
}
|
142 |
+
}
|
143 |
+
};
|
144 |
+
})();/**
|
145 |
+
*
|
146 |
+
*/
|
147 |
+
PIE.Observable = function() {
|
148 |
+
/**
|
149 |
+
* List of registered observer functions
|
150 |
+
*/
|
151 |
+
this.observers = [];
|
152 |
+
|
153 |
+
/**
|
154 |
+
* Hash of function ids to their position in the observers list, for fast lookup
|
155 |
+
*/
|
156 |
+
this.indexes = {};
|
157 |
+
};
|
158 |
+
PIE.Observable.prototype = {
|
159 |
+
|
160 |
+
observe: function( fn ) {
|
161 |
+
var id = PIE.Util.getUID( fn ),
|
162 |
+
indexes = this.indexes,
|
163 |
+
observers = this.observers;
|
164 |
+
if( !( id in indexes ) ) {
|
165 |
+
indexes[ id ] = observers.length;
|
166 |
+
observers.push( fn );
|
167 |
+
}
|
168 |
+
},
|
169 |
+
|
170 |
+
unobserve: function( fn ) {
|
171 |
+
var id = PIE.Util.getUID( fn ),
|
172 |
+
indexes = this.indexes;
|
173 |
+
if( id && id in indexes ) {
|
174 |
+
delete this.observers[ indexes[ id ] ];
|
175 |
+
delete indexes[ id ];
|
176 |
+
}
|
177 |
+
},
|
178 |
+
|
179 |
+
fire: function() {
|
180 |
+
var o = this.observers,
|
181 |
+
i = o.length;
|
182 |
+
while( i-- ) {
|
183 |
+
o[ i ] && o[ i ]();
|
184 |
+
}
|
185 |
+
}
|
186 |
+
|
187 |
+
};/*
|
188 |
+
* Simple heartbeat timer - this is a brute-force workaround for syncing issues caused by IE not
|
189 |
+
* always firing the onmove and onresize events when elements are moved or resized. We check a few
|
190 |
+
* times every second to make sure the elements have the correct position and size. See Element.js
|
191 |
+
* which adds heartbeat listeners based on the custom -pie-poll flag, which defaults to true in IE8
|
192 |
+
* and false elsewhere.
|
193 |
+
*/
|
194 |
+
|
195 |
+
PIE.Heartbeat = new PIE.Observable();
|
196 |
+
PIE.Heartbeat.run = function() {
|
197 |
+
var me = this;
|
198 |
+
if( !me.running ) {
|
199 |
+
setInterval( function() { me.fire() }, 250 );
|
200 |
+
me.running = 1;
|
201 |
+
}
|
202 |
+
};
|
203 |
+
/**
|
204 |
+
* Create an observable listener for the onbeforeunload event
|
205 |
+
*/
|
206 |
+
PIE.OnBeforeUnload = new PIE.Observable();
|
207 |
+
window.attachEvent( 'onbeforeunload', function() { PIE.OnBeforeUnload.fire(); } );
|
208 |
+
|
209 |
+
/**
|
210 |
+
* Attach an event which automatically gets detached onbeforeunload
|
211 |
+
*/
|
212 |
+
PIE.OnBeforeUnload.attachManagedEvent = function( target, name, handler ) {
|
213 |
+
target.attachEvent( name, handler );
|
214 |
+
this.observe( function() {
|
215 |
+
target.detachEvent( name, handler );
|
216 |
+
} );
|
217 |
+
};/**
|
218 |
+
* Create a single observable listener for window resize events.
|
219 |
+
*/
|
220 |
+
(function() {
|
221 |
+
PIE.OnResize = new PIE.Observable();
|
222 |
+
|
223 |
+
function resized() {
|
224 |
+
PIE.OnResize.fire();
|
225 |
+
}
|
226 |
+
|
227 |
+
PIE.OnBeforeUnload.attachManagedEvent( window, 'onresize', resized );
|
228 |
+
})();
|
229 |
+
/**
|
230 |
+
* Create a single observable listener for scroll events. Used for lazy loading based
|
231 |
+
* on the viewport, and for fixed position backgrounds.
|
232 |
+
*/
|
233 |
+
(function() {
|
234 |
+
PIE.OnScroll = new PIE.Observable();
|
235 |
+
|
236 |
+
function scrolled() {
|
237 |
+
PIE.OnScroll.fire();
|
238 |
+
}
|
239 |
+
|
240 |
+
PIE.OnBeforeUnload.attachManagedEvent( window, 'onscroll', scrolled );
|
241 |
+
|
242 |
+
PIE.OnResize.observe( scrolled );
|
243 |
+
})();
|
244 |
+
/**
|
245 |
+
* Listen for printing events, destroy all active PIE instances when printing, and
|
246 |
+
* restore them afterward.
|
247 |
+
*/
|
248 |
+
(function() {
|
249 |
+
|
250 |
+
var elements;
|
251 |
+
|
252 |
+
function beforePrint() {
|
253 |
+
elements = PIE.Element.destroyAll();
|
254 |
+
}
|
255 |
+
|
256 |
+
function afterPrint() {
|
257 |
+
if( elements ) {
|
258 |
+
for( var i = 0, len = elements.length; i < len; i++ ) {
|
259 |
+
PIE[ 'attach' ]( elements[i] );
|
260 |
+
}
|
261 |
+
elements = 0;
|
262 |
+
}
|
263 |
+
}
|
264 |
+
|
265 |
+
PIE.OnBeforeUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint );
|
266 |
+
PIE.OnBeforeUnload.attachManagedEvent( window, 'onafterprint', afterPrint );
|
267 |
+
|
268 |
+
})();/**
|
269 |
+
* Wrapper for length and percentage style values. The value is immutable. A singleton instance per unique
|
270 |
+
* value is returned from PIE.getLength() - always use that instead of instantiating directly.
|
271 |
+
* @constructor
|
272 |
+
* @param {string} val The CSS string representing the length. It is assumed that this will already have
|
273 |
+
* been validated as a valid length or percentage syntax.
|
274 |
+
*/
|
275 |
+
PIE.Length = (function() {
|
276 |
+
var lengthCalcEl = doc.createElement( 'length-calc' ),
|
277 |
+
parent = doc.documentElement,
|
278 |
+
s = lengthCalcEl.style,
|
279 |
+
conversions = {},
|
280 |
+
units = [ 'mm', 'cm', 'in', 'pt', 'pc' ],
|
281 |
+
i = units.length,
|
282 |
+
instances = {};
|
283 |
+
|
284 |
+
s.position = 'absolute';
|
285 |
+
s.top = s.left = '-9999px';
|
286 |
+
|
287 |
+
parent.appendChild( lengthCalcEl );
|
288 |
+
while( i-- ) {
|
289 |
+
lengthCalcEl.style.width = '100' + units[i];
|
290 |
+
conversions[ units[i] ] = lengthCalcEl.offsetWidth / 100;
|
291 |
+
}
|
292 |
+
parent.removeChild( lengthCalcEl );
|
293 |
+
|
294 |
+
|
295 |
+
function Length( val ) {
|
296 |
+
this.val = val;
|
297 |
+
}
|
298 |
+
Length.prototype = {
|
299 |
+
/**
|
300 |
+
* Regular expression for matching the length unit
|
301 |
+
* @private
|
302 |
+
*/
|
303 |
+
unitRE: /(px|em|ex|mm|cm|in|pt|pc|%)$/,
|
304 |
+
|
305 |
+
/**
|
306 |
+
* Get the numeric value of the length
|
307 |
+
* @return {number} The value
|
308 |
+
*/
|
309 |
+
getNumber: function() {
|
310 |
+
var num = this.num,
|
311 |
+
UNDEF;
|
312 |
+
if( num === UNDEF ) {
|
313 |
+
num = this.num = parseFloat( this.val );
|
314 |
+
}
|
315 |
+
return num;
|
316 |
+
},
|
317 |
+
|
318 |
+
/**
|
319 |
+
* Get the unit of the length
|
320 |
+
* @return {string} The unit
|
321 |
+
*/
|
322 |
+
getUnit: function() {
|
323 |
+
var unit = this.unit,
|
324 |
+
m;
|
325 |
+
if( !unit ) {
|
326 |
+
m = this.val.match( this.unitRE );
|
327 |
+
unit = this.unit = ( m && m[0] ) || 'px';
|
328 |
+
}
|
329 |
+
return unit;
|
330 |
+
},
|
331 |
+
|
332 |
+
/**
|
333 |
+
* Determine whether this is a percentage length value
|
334 |
+
* @return {boolean}
|
335 |
+
*/
|
336 |
+
isPercentage: function() {
|
337 |
+
return this.getUnit() === '%';
|
338 |
+
},
|
339 |
+
|
340 |
+
/**
|
341 |
+
* Resolve this length into a number of pixels.
|
342 |
+
* @param {Element} el - the context element, used to resolve font-relative values
|
343 |
+
* @param {(function():number|number)=} pct100 - the number of pixels that equal a 100% percentage. This can be either a number or a
|
344 |
+
* function which will be called to return the number.
|
345 |
+
*/
|
346 |
+
pixels: function( el, pct100 ) {
|
347 |
+
var num = this.getNumber(),
|
348 |
+
unit = this.getUnit();
|
349 |
+
switch( unit ) {
|
350 |
+
case "px":
|
351 |
+
return num;
|
352 |
+
case "%":
|
353 |
+
return num * ( typeof pct100 === 'function' ? pct100() : pct100 ) / 100;
|
354 |
+
case "em":
|
355 |
+
return num * this.getEmPixels( el );
|
356 |
+
case "ex":
|
357 |
+
return num * this.getEmPixels( el ) / 2;
|
358 |
+
default:
|
359 |
+
return num * conversions[ unit ];
|
360 |
+
}
|
361 |
+
},
|
362 |
+
|
363 |
+
/**
|
364 |
+
* The em and ex units are relative to the font-size of the current element,
|
365 |
+
* however if the font-size is set using non-pixel units then we get that value
|
366 |
+
* rather than a pixel conversion. To get around this, we keep a floating element
|
367 |
+
* with width:1em which we insert into the target element and then read its offsetWidth.
|
368 |
+
* But if the font-size *is* specified in pixels, then we use that directly to avoid
|
369 |
+
* the expensive DOM manipulation.
|
370 |
+
* @param el
|
371 |
+
*/
|
372 |
+
getEmPixels: function( el ) {
|
373 |
+
var fs = el.currentStyle.fontSize,
|
374 |
+
px;
|
375 |
+
|
376 |
+
if( fs.indexOf( 'px' ) > 0 ) {
|
377 |
+
return parseFloat( fs );
|
378 |
+
} else {
|
379 |
+
lengthCalcEl.style.width = '1em';
|
380 |
+
el.appendChild( lengthCalcEl );
|
381 |
+
px = lengthCalcEl.offsetWidth;
|
382 |
+
if( lengthCalcEl.parentNode === el ) { //not sure how this could be false but it sometimes is
|
383 |
+
el.removeChild( lengthCalcEl );
|
384 |
+
}
|
385 |
+
return px;
|
386 |
+
}
|
387 |
+
}
|
388 |
+
};
|
389 |
+
|
390 |
+
|
391 |
+
/**
|
392 |
+
* Retrieve a PIE.Length instance for the given value. A shared singleton instance is returned for each unique value.
|
393 |
+
* @param {string} val The CSS string representing the length. It is assumed that this will already have
|
394 |
+
* been validated as a valid length or percentage syntax.
|
395 |
+
*/
|
396 |
+
PIE.getLength = function( val ) {
|
397 |
+
return instances[ val ] || ( instances[ val ] = new Length( val ) );
|
398 |
+
};
|
399 |
+
|
400 |
+
return Length;
|
401 |
+
})();
|
402 |
+
/**
|
403 |
+
* Wrapper for a CSS3 bg-position value. Takes up to 2 position keywords and 2 lengths/percentages.
|
404 |
+
* @constructor
|
405 |
+
* @param {Array.<PIE.Tokenizer.Token>} tokens The tokens making up the background position value.
|
406 |
+
*/
|
407 |
+
PIE.BgPosition = (function() {
|
408 |
+
|
409 |
+
var length_fifty = PIE.getLength( '50%' ),
|
410 |
+
vert_idents = { 'top': 1, 'center': 1, 'bottom': 1 },
|
411 |
+
horiz_idents = { 'left': 1, 'center': 1, 'right': 1 };
|
412 |
+
|
413 |
+
|
414 |
+
function BgPosition( tokens ) {
|
415 |
+
this.tokens = tokens;
|
416 |
+
}
|
417 |
+
BgPosition.prototype = {
|
418 |
+
/**
|
419 |
+
* Normalize the values into the form:
|
420 |
+
* [ xOffsetSide, xOffsetLength, yOffsetSide, yOffsetLength ]
|
421 |
+
* where: xOffsetSide is either 'left' or 'right',
|
422 |
+
* yOffsetSide is either 'top' or 'bottom',
|
423 |
+
* and x/yOffsetLength are both PIE.Length objects.
|
424 |
+
* @return {Array}
|
425 |
+
*/
|
426 |
+
getValues: function() {
|
427 |
+
if( !this._values ) {
|
428 |
+
var tokens = this.tokens,
|
429 |
+
len = tokens.length,
|
430 |
+
Tokenizer = PIE.Tokenizer,
|
431 |
+
identType = Tokenizer.Type,
|
432 |
+
length_zero = PIE.getLength( '0' ),
|
433 |
+
type_ident = identType.IDENT,
|
434 |
+
type_length = identType.LENGTH,
|
435 |
+
type_percent = identType.PERCENT,
|
436 |
+
type, value,
|
437 |
+
vals = [ 'left', length_zero, 'top', length_zero ];
|
438 |
+
|
439 |
+
// If only one value, the second is assumed to be 'center'
|
440 |
+
if( len === 1 ) {
|
441 |
+
tokens.push( new Tokenizer.Token( type_ident, 'center' ) );
|
442 |
+
len++;
|
443 |
+
}
|
444 |
+
|
445 |
+
// Two values - CSS2
|
446 |
+
if( len === 2 ) {
|
447 |
+
// If both idents, they can appear in either order, so switch them if needed
|
448 |
+
if( type_ident & ( tokens[0].tokenType | tokens[1].tokenType ) &&
|
449 |
+
tokens[0].tokenValue in vert_idents && tokens[1].tokenValue in horiz_idents ) {
|
450 |
+
tokens.push( tokens.shift() );
|
451 |
+
}
|
452 |
+
if( tokens[0].tokenType & type_ident ) {
|
453 |
+
if( tokens[0].tokenValue === 'center' ) {
|
454 |
+
vals[1] = length_fifty;
|
455 |
+
} else {
|
456 |
+
vals[0] = tokens[0].tokenValue;
|
457 |
+
}
|
458 |
+
}
|
459 |
+
else if( tokens[0].isLengthOrPercent() ) {
|
460 |
+
vals[1] = PIE.getLength( tokens[0].tokenValue );
|
461 |
+
}
|
462 |
+
if( tokens[1].tokenType & type_ident ) {
|
463 |
+
if( tokens[1].tokenValue === 'center' ) {
|
464 |
+
vals[3] = length_fifty;
|
465 |
+
} else {
|
466 |
+
vals[2] = tokens[1].tokenValue;
|
467 |
+
}
|
468 |
+
}
|
469 |
+
else if( tokens[1].isLengthOrPercent() ) {
|
470 |
+
vals[3] = PIE.getLength( tokens[1].tokenValue );
|
471 |
+
}
|
472 |
+
}
|
473 |
+
|
474 |
+
// Three or four values - CSS3
|
475 |
+
else {
|
476 |
+
// TODO
|
477 |
+
}
|
478 |
+
|
479 |
+
this._values = vals;
|
480 |
+
}
|
481 |
+
return this._values;
|
482 |
+
},
|
483 |
+
|
484 |
+
/**
|
485 |
+
* Find the coordinates of the background image from the upper-left corner of the background area.
|
486 |
+
* Note that these coordinate values are not rounded.
|
487 |
+
* @param {Element} el
|
488 |
+
* @param {number} width - the width for percentages (background area width minus image width)
|
489 |
+
* @param {number} height - the height for percentages (background area height minus image height)
|
490 |
+
* @return {Object} { x: Number, y: Number }
|
491 |
+
*/
|
492 |
+
coords: function( el, width, height ) {
|
493 |
+
var vals = this.getValues(),
|
494 |
+
pxX = vals[1].pixels( el, width ),
|
495 |
+
pxY = vals[3].pixels( el, height );
|
496 |
+
|
497 |
+
return {
|
498 |
+
x: vals[0] === 'right' ? width - pxX : pxX,
|
499 |
+
y: vals[2] === 'bottom' ? height - pxY : pxY
|
500 |
+
};
|
501 |
+
}
|
502 |
+
};
|
503 |
+
|
504 |
+
return BgPosition;
|
505 |
+
})();
|
506 |
+
/**
|
507 |
+
* Wrapper for angle values; handles conversion to degrees from all allowed angle units
|
508 |
+
* @constructor
|
509 |
+
* @param {string} val The raw CSS value for the angle. It is assumed it has been pre-validated.
|
510 |
+
*/
|
511 |
+
PIE.Angle = (function() {
|
512 |
+
function Angle( val ) {
|
513 |
+
this.val = val;
|
514 |
+
}
|
515 |
+
Angle.prototype = {
|
516 |
+
unitRE: /[a-z]+$/i,
|
517 |
+
|
518 |
+
/**
|
519 |
+
* @return {string} The unit of the angle value
|
520 |
+
*/
|
521 |
+
getUnit: function() {
|
522 |
+
return this._unit || ( this._unit = this.val.match( this.unitRE )[0].toLowerCase() );
|
523 |
+
},
|
524 |
+
|
525 |
+
/**
|
526 |
+
* Get the numeric value of the angle in degrees.
|
527 |
+
* @return {number} The degrees value
|
528 |
+
*/
|
529 |
+
degrees: function() {
|
530 |
+
var deg = this._deg, u, n;
|
531 |
+
if( deg === undefined ) {
|
532 |
+
u = this.getUnit();
|
533 |
+
n = parseFloat( this.val, 10 );
|
534 |
+
deg = this._deg = ( u === 'deg' ? n : u === 'rad' ? n / Math.PI * 180 : u === 'grad' ? n / 400 * 360 : u === 'turn' ? n * 360 : 0 );
|
535 |
+
}
|
536 |
+
return deg;
|
537 |
+
}
|
538 |
+
};
|
539 |
+
|
540 |
+
return Angle;
|
541 |
+
})();/**
|
542 |
+
* Abstraction for colors values. Allows detection of rgba values. A singleton instance per unique
|
543 |
+
* value is returned from PIE.getColor() - always use that instead of instantiating directly.
|
544 |
+
* @constructor
|
545 |
+
* @param {string} val The raw CSS string value for the color
|
546 |
+
*/
|
547 |
+
PIE.Color = (function() {
|
548 |
+
var instances = {};
|
549 |
+
|
550 |
+
function Color( val ) {
|
551 |
+
this.val = val;
|
552 |
+
}
|
553 |
+
|
554 |
+
/**
|
555 |
+
* Regular expression for matching rgba colors and extracting their components
|
556 |
+
* @type {RegExp}
|
557 |
+
*/
|
558 |
+
Color.rgbaRE = /\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;
|
559 |
+
|
560 |
+
Color.names = {
|
561 |
+
"aliceblue":"F0F8FF", "antiquewhite":"FAEBD7", "aqua":"0FF",
|
562 |
+
"aquamarine":"7FFFD4", "azure":"F0FFFF", "beige":"F5F5DC",
|
563 |
+
"bisque":"FFE4C4", "black":"000", "blanchedalmond":"FFEBCD",
|
564 |
+
"blue":"00F", "blueviolet":"8A2BE2", "brown":"A52A2A",
|
565 |
+
"burlywood":"DEB887", "cadetblue":"5F9EA0", "chartreuse":"7FFF00",
|
566 |
+
"chocolate":"D2691E", "coral":"FF7F50", "cornflowerblue":"6495ED",
|
567 |
+
"cornsilk":"FFF8DC", "crimson":"DC143C", "cyan":"0FF",
|
568 |
+
"darkblue":"00008B", "darkcyan":"008B8B", "darkgoldenrod":"B8860B",
|
569 |
+
"darkgray":"A9A9A9", "darkgreen":"006400", "darkkhaki":"BDB76B",
|
570 |
+
"darkmagenta":"8B008B", "darkolivegreen":"556B2F", "darkorange":"FF8C00",
|
571 |
+
"darkorchid":"9932CC", "darkred":"8B0000", "darksalmon":"E9967A",
|
572 |
+
"darkseagreen":"8FBC8F", "darkslateblue":"483D8B", "darkslategray":"2F4F4F",
|
573 |
+
"darkturquoise":"00CED1", "darkviolet":"9400D3", "deeppink":"FF1493",
|
574 |
+
"deepskyblue":"00BFFF", "dimgray":"696969", "dodgerblue":"1E90FF",
|
575 |
+
"firebrick":"B22222", "floralwhite":"FFFAF0", "forestgreen":"228B22",
|
576 |
+
"fuchsia":"F0F", "gainsboro":"DCDCDC", "ghostwhite":"F8F8FF",
|
577 |
+
"gold":"FFD700", "goldenrod":"DAA520", "gray":"808080",
|
578 |
+
"green":"008000", "greenyellow":"ADFF2F", "honeydew":"F0FFF0",
|
579 |
+
"hotpink":"FF69B4", "indianred":"CD5C5C", "indigo":"4B0082",
|
580 |
+
"ivory":"FFFFF0", "khaki":"F0E68C", "lavender":"E6E6FA",
|
581 |
+
"lavenderblush":"FFF0F5", "lawngreen":"7CFC00", "lemonchiffon":"FFFACD",
|
582 |
+
"lightblue":"ADD8E6", "lightcoral":"F08080", "lightcyan":"E0FFFF",
|
583 |
+
"lightgoldenrodyellow":"FAFAD2", "lightgreen":"90EE90", "lightgrey":"D3D3D3",
|
584 |
+
"lightpink":"FFB6C1", "lightsalmon":"FFA07A", "lightseagreen":"20B2AA",
|
585 |
+
"lightskyblue":"87CEFA", "lightslategray":"789", "lightsteelblue":"B0C4DE",
|
586 |
+
"lightyellow":"FFFFE0", "lime":"0F0", "limegreen":"32CD32",
|
587 |
+
"linen":"FAF0E6", "magenta":"F0F", "maroon":"800000",
|
588 |
+
"mediumauqamarine":"66CDAA", "mediumblue":"0000CD", "mediumorchid":"BA55D3",
|
589 |
+
"mediumpurple":"9370D8", "mediumseagreen":"3CB371", "mediumslateblue":"7B68EE",
|
590 |
+
"mediumspringgreen":"00FA9A", "mediumturquoise":"48D1CC", "mediumvioletred":"C71585",
|
591 |
+
"midnightblue":"191970", "mintcream":"F5FFFA", "mistyrose":"FFE4E1",
|
592 |
+
"moccasin":"FFE4B5", "navajowhite":"FFDEAD", "navy":"000080",
|
593 |
+
"oldlace":"FDF5E6", "olive":"808000", "olivedrab":"688E23",
|
594 |
+
"orange":"FFA500", "orangered":"FF4500", "orchid":"DA70D6",
|
595 |
+
"palegoldenrod":"EEE8AA", "palegreen":"98FB98", "paleturquoise":"AFEEEE",
|
596 |
+
"palevioletred":"D87093", "papayawhip":"FFEFD5", "peachpuff":"FFDAB9",
|
597 |
+
"peru":"CD853F", "pink":"FFC0CB", "plum":"DDA0DD",
|
598 |
+
"powderblue":"B0E0E6", "purple":"800080", "red":"F00",
|
599 |
+
"rosybrown":"BC8F8F", "royalblue":"4169E1", "saddlebrown":"8B4513",
|
600 |
+
"salmon":"FA8072", "sandybrown":"F4A460", "seagreen":"2E8B57",
|
601 |
+
"seashell":"FFF5EE", "sienna":"A0522D", "silver":"C0C0C0",
|
602 |
+
"skyblue":"87CEEB", "slateblue":"6A5ACD", "slategray":"708090",
|
603 |
+
"snow":"FFFAFA", "springgreen":"00FF7F", "steelblue":"4682B4",
|
604 |
+
"tan":"D2B48C", "teal":"008080", "thistle":"D8BFD8",
|
605 |
+
"tomato":"FF6347", "turquoise":"40E0D0", "violet":"EE82EE",
|
606 |
+
"wheat":"F5DEB3", "white":"FFF", "whitesmoke":"F5F5F5",
|
607 |
+
"yellow":"FF0", "yellowgreen":"9ACD32"
|
608 |
+
};
|
609 |
+
|
610 |
+
Color.prototype = {
|
611 |
+
/**
|
612 |
+
* @private
|
613 |
+
*/
|
614 |
+
parse: function() {
|
615 |
+
if( !this._color ) {
|
616 |
+
var me = this,
|
617 |
+
v = me.val,
|
618 |
+
vLower,
|
619 |
+
m = v.match( Color.rgbaRE );
|
620 |
+
if( m ) {
|
621 |
+
me._color = 'rgb(' + m[1] + ',' + m[2] + ',' + m[3] + ')';
|
622 |
+
me._alpha = parseFloat( m[4] );
|
623 |
+
}
|
624 |
+
else {
|
625 |
+
if( ( vLower = v.toLowerCase() ) in Color.names ) {
|
626 |
+
v = '#' + Color.names[vLower];
|
627 |
+
}
|
628 |
+
me._color = v;
|
629 |
+
me._alpha = ( v === 'transparent' ? 0 : 1 );
|
630 |
+
}
|
631 |
+
}
|
632 |
+
},
|
633 |
+
|
634 |
+
/**
|
635 |
+
* Retrieve the value of the color in a format usable by IE natively. This will be the same as
|
636 |
+
* the raw input value, except for rgba values which will be converted to an rgb value.
|
637 |
+
* @param {Element} el The context element, used to get 'currentColor' keyword value.
|
638 |
+
* @return {string} Color value
|
639 |
+
*/
|
640 |
+
colorValue: function( el ) {
|
641 |
+
this.parse();
|
642 |
+
return this._color === 'currentColor' ? el.currentStyle.color : this._color;
|
643 |
+
},
|
644 |
+
|
645 |
+
/**
|
646 |
+
* Retrieve the alpha value of the color. Will be 1 for all values except for rgba values
|
647 |
+
* with an alpha component.
|
648 |
+
* @return {number} The alpha value, from 0 to 1.
|
649 |
+
*/
|
650 |
+
alpha: function() {
|
651 |
+
this.parse();
|
652 |
+
return this._alpha;
|
653 |
+
}
|
654 |
+
};
|
655 |
+
|
656 |
+
|
657 |
+
/**
|
658 |
+
* Retrieve a PIE.Color instance for the given value. A shared singleton instance is returned for each unique value.
|
659 |
+
* @param {string} val The CSS string representing the color. It is assumed that this will already have
|
660 |
+
* been validated as a valid color syntax.
|
661 |
+
*/
|
662 |
+
PIE.getColor = function(val) {
|
663 |
+
return instances[ val ] || ( instances[ val ] = new Color( val ) );
|
664 |
+
};
|
665 |
+
|
666 |
+
return Color;
|
667 |
+
})();/**
|
668 |
+
* A tokenizer for CSS value strings.
|
669 |
+
* @constructor
|
670 |
+
* @param {string} css The CSS value string
|
671 |
+
*/
|
672 |
+
PIE.Tokenizer = (function() {
|
673 |
+
function Tokenizer( css ) {
|
674 |
+
this.css = css;
|
675 |
+
this.ch = 0;
|
676 |
+
this.tokens = [];
|
677 |
+
this.tokenIndex = 0;
|
678 |
+
}
|
679 |
+
|
680 |
+
/**
|
681 |
+
* Enumeration of token type constants.
|
682 |
+
* @enum {number}
|
683 |
+
*/
|
684 |
+
var Type = Tokenizer.Type = {
|
685 |
+
ANGLE: 1,
|
686 |
+
CHARACTER: 2,
|
687 |
+
COLOR: 4,
|
688 |
+
DIMEN: 8,
|
689 |
+
FUNCTION: 16,
|
690 |
+
IDENT: 32,
|
691 |
+
LENGTH: 64,
|
692 |
+
NUMBER: 128,
|
693 |
+
OPERATOR: 256,
|
694 |
+
PERCENT: 512,
|
695 |
+
STRING: 1024,
|
696 |
+
URL: 2048
|
697 |
+
};
|
698 |
+
|
699 |
+
/**
|
700 |
+
* A single token
|
701 |
+
* @constructor
|
702 |
+
* @param {number} type The type of the token - see PIE.Tokenizer.Type
|
703 |
+
* @param {string} value The value of the token
|
704 |
+
*/
|
705 |
+
Tokenizer.Token = function( type, value ) {
|
706 |
+
this.tokenType = type;
|
707 |
+
this.tokenValue = value;
|
708 |
+
};
|
709 |
+
Tokenizer.Token.prototype = {
|
710 |
+
isLength: function() {
|
711 |
+
return this.tokenType & Type.LENGTH || ( this.tokenType & Type.NUMBER && this.tokenValue === '0' );
|
712 |
+
},
|
713 |
+
isLengthOrPercent: function() {
|
714 |
+
return this.isLength() || this.tokenType & Type.PERCENT;
|
715 |
+
}
|
716 |
+
};
|
717 |
+
|
718 |
+
Tokenizer.prototype = {
|
719 |
+
whitespace: /\s/,
|
720 |
+
number: /^[\+\-]?(\d*\.)?\d+/,
|
721 |
+
url: /^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,
|
722 |
+
ident: /^\-?[_a-z][\w-]*/i,
|
723 |
+
string: /^("([^"]*)"|'([^']*)')/,
|
724 |
+
operator: /^[\/,]/,
|
725 |
+
hash: /^#[\w]+/,
|
726 |
+
hashColor: /^#([\da-f]{6}|[\da-f]{3})/i,
|
727 |
+
|
728 |
+
unitTypes: {
|
729 |
+
'px': Type.LENGTH, 'em': Type.LENGTH, 'ex': Type.LENGTH,
|
730 |
+
'mm': Type.LENGTH, 'cm': Type.LENGTH, 'in': Type.LENGTH,
|
731 |
+
'pt': Type.LENGTH, 'pc': Type.LENGTH,
|
732 |
+
'deg': Type.ANGLE, 'rad': Type.ANGLE, 'grad': Type.ANGLE
|
733 |
+
},
|
734 |
+
|
735 |
+
colorNames: {
|
736 |
+
'aqua':1, 'black':1, 'blue':1, 'fuchsia':1, 'gray':1, 'green':1, 'lime':1, 'maroon':1,
|
737 |
+
'navy':1, 'olive':1, 'purple':1, 'red':1, 'silver':1, 'teal':1, 'white':1, 'yellow': 1,
|
738 |
+
'currentColor': 1
|
739 |
+
},
|
740 |
+
|
741 |
+
colorFunctions: {
|
742 |
+
'rgb': 1, 'rgba': 1, 'hsl': 1, 'hsla': 1
|
743 |
+
},
|
744 |
+
|
745 |
+
|
746 |
+
/**
|
747 |
+
* Advance to and return the next token in the CSS string. If the end of the CSS string has
|
748 |
+
* been reached, null will be returned.
|
749 |
+
* @param {boolean} forget - if true, the token will not be stored for the purposes of backtracking with prev().
|
750 |
+
* @return {PIE.Tokenizer.Token}
|
751 |
+
*/
|
752 |
+
next: function( forget ) {
|
753 |
+
var css, ch, firstChar, match, val,
|
754 |
+
me = this;
|
755 |
+
|
756 |
+
function newToken( type, value ) {
|
757 |
+
var tok = new Tokenizer.Token( type, value );
|
758 |
+
if( !forget ) {
|
759 |
+
me.tokens.push( tok );
|
760 |
+
me.tokenIndex++;
|
761 |
+
}
|
762 |
+
return tok;
|
763 |
+
}
|
764 |
+
function failure() {
|
765 |
+
me.tokenIndex++;
|
766 |
+
return null;
|
767 |
+
}
|
768 |
+
|
769 |
+
// In case we previously backed up, return the stored token in the next slot
|
770 |
+
if( this.tokenIndex < this.tokens.length ) {
|
771 |
+
return this.tokens[ this.tokenIndex++ ];
|
772 |
+
}
|
773 |
+
|
774 |
+
// Move past leading whitespace characters
|
775 |
+
while( this.whitespace.test( this.css.charAt( this.ch ) ) ) {
|
776 |
+
this.ch++;
|
777 |
+
}
|
778 |
+
if( this.ch >= this.css.length ) {
|
779 |
+
return failure();
|
780 |
+
}
|
781 |
+
|
782 |
+
ch = this.ch;
|
783 |
+
css = this.css.substring( this.ch );
|
784 |
+
firstChar = css.charAt( 0 );
|
785 |
+
switch( firstChar ) {
|
786 |
+
case '#':
|
787 |
+
if( match = css.match( this.hashColor ) ) {
|
788 |
+
this.ch += match[0].length;
|
789 |
+
return newToken( Type.COLOR, match[0] );
|
790 |
+
}
|
791 |
+
break;
|
792 |
+
|
793 |
+
case '"':
|
794 |
+
case "'":
|
795 |
+
if( match = css.match( this.string ) ) {
|
796 |
+
this.ch += match[0].length;
|
797 |
+
return newToken( Type.STRING, match[2] || match[3] || '' );
|
798 |
+
}
|
799 |
+
break;
|
800 |
+
|
801 |
+
case "/":
|
802 |
+
case ",":
|
803 |
+
this.ch++;
|
804 |
+
return newToken( Type.OPERATOR, firstChar );
|
805 |
+
|
806 |
+
case 'u':
|
807 |
+
if( match = css.match( this.url ) ) {
|
808 |
+
this.ch += match[0].length;
|
809 |
+
return newToken( Type.URL, match[2] || match[3] || match[4] || '' );
|
810 |
+
}
|
811 |
+
}
|
812 |
+
|
813 |
+
// Numbers and values starting with numbers
|
814 |
+
if( match = css.match( this.number ) ) {
|
815 |
+
val = match[0];
|
816 |
+
this.ch += val.length;
|
817 |
+
|
818 |
+
// Check if it is followed by a unit
|
819 |
+
if( css.charAt( val.length ) === '%' ) {
|
820 |
+
this.ch++;
|
821 |
+
return newToken( Type.PERCENT, val + '%' );
|
822 |
+
}
|
823 |
+
if( match = css.substring( val.length ).match( this.ident ) ) {
|
824 |
+
val += match[0];
|
825 |
+
this.ch += match[0].length;
|
826 |
+
return newToken( this.unitTypes[ match[0].toLowerCase() ] || Type.DIMEN, val );
|
827 |
+
}
|
828 |
+
|
829 |
+
// Plain ol' number
|
830 |
+
return newToken( Type.NUMBER, val );
|
831 |
+
}
|
832 |
+
|
833 |
+
// Identifiers
|
834 |
+
if( match = css.match( this.ident ) ) {
|
835 |
+
val = match[0];
|
836 |
+
this.ch += val.length;
|
837 |
+
|
838 |
+
// Named colors
|
839 |
+
if( val.toLowerCase() in PIE.Color.names || val === 'currentColor' ) {
|
840 |
+
return newToken( Type.COLOR, val );
|
841 |
+
}
|
842 |
+
|
843 |
+
// Functions
|
844 |
+
if( css.charAt( val.length ) === '(' ) {
|
845 |
+
this.ch++;
|
846 |
+
|
847 |
+
// Color values in function format: rgb, rgba, hsl, hsla
|
848 |
+
if( val.toLowerCase() in this.colorFunctions ) {
|
849 |
+
function isNum( tok ) {
|
850 |
+
return tok && tok.tokenType & Type.NUMBER;
|
851 |
+
}
|
852 |
+
function isNumOrPct( tok ) {
|
853 |
+
return tok && ( tok.tokenType & ( Type.NUMBER | Type.PERCENT ) );
|
854 |
+
}
|
855 |
+
function isValue( tok, val ) {
|
856 |
+
return tok && tok.tokenValue === val;
|
857 |
+
}
|
858 |
+
function next() {
|
859 |
+
return me.next( 1 );
|
860 |
+
}
|
861 |
+
|
862 |
+
if( ( val.charAt(0) === 'r' ? isNumOrPct( next() ) : isNum( next() ) ) &&
|
863 |
+
isValue( next(), ',' ) &&
|
864 |
+
isNumOrPct( next() ) &&
|
865 |
+
isValue( next(), ',' ) &&
|
866 |
+
isNumOrPct( next() ) &&
|
867 |
+
( val === 'rgb' || val === 'hsa' || (
|
868 |
+
isValue( next(), ',' ) &&
|
869 |
+
isNum( next() )
|
870 |
+
) ) &&
|
871 |
+
isValue( next(), ')' ) ) {
|
872 |
+
return newToken( Type.COLOR, this.css.substring( ch, this.ch ) );
|
873 |
+
}
|
874 |
+
return failure();
|
875 |
+
}
|
876 |
+
|
877 |
+
return newToken( Type.FUNCTION, val );
|
878 |
+
}
|
879 |
+
|
880 |
+
// Other identifier
|
881 |
+
return newToken( Type.IDENT, val );
|
882 |
+
}
|
883 |
+
|
884 |
+
// Standalone character
|
885 |
+
this.ch++;
|
886 |
+
return newToken( Type.CHARACTER, firstChar );
|
887 |
+
},
|
888 |
+
|
889 |
+
/**
|
890 |
+
* Determine whether there is another token
|
891 |
+
* @return {boolean}
|
892 |
+
*/
|
893 |
+
hasNext: function() {
|
894 |
+
var next = this.next();
|
895 |
+
this.prev();
|
896 |
+
return !!next;
|
897 |
+
},
|
898 |
+
|
899 |
+
/**
|
900 |
+
* Back up and return the previous token
|
901 |
+
* @return {PIE.Tokenizer.Token}
|
902 |
+
*/
|
903 |
+
prev: function() {
|
904 |
+
return this.tokens[ this.tokenIndex-- - 2 ];
|
905 |
+
},
|
906 |
+
|
907 |
+
/**
|
908 |
+
* Retrieve all the tokens in the CSS string
|
909 |
+
* @return {Array.<PIE.Tokenizer.Token>}
|
910 |
+
*/
|
911 |
+
all: function() {
|
912 |
+
while( this.next() ) {}
|
913 |
+
return this.tokens;
|
914 |
+
},
|
915 |
+
|
916 |
+
/**
|
917 |
+
* Return a list of tokens from the current position until the given function returns
|
918 |
+
* true. The final token will not be included in the list.
|
919 |
+
* @param {function():boolean} func - test function
|
920 |
+
* @param {boolean} require - if true, then if the end of the CSS string is reached
|
921 |
+
* before the test function returns true, null will be returned instead of the
|
922 |
+
* tokens that have been found so far.
|
923 |
+
* @return {Array.<PIE.Tokenizer.Token>}
|
924 |
+
*/
|
925 |
+
until: function( func, require ) {
|
926 |
+
var list = [], t, hit;
|
927 |
+
while( t = this.next() ) {
|
928 |
+
if( func( t ) ) {
|
929 |
+
hit = true;
|
930 |
+
this.prev();
|
931 |
+
break;
|
932 |
+
}
|
933 |
+
list.push( t );
|
934 |
+
}
|
935 |
+
return require && !hit ? null : list;
|
936 |
+
}
|
937 |
+
};
|
938 |
+
|
939 |
+
return Tokenizer;
|
940 |
+
})();/**
|
941 |
+
* Handles calculating, caching, and detecting changes to size and position of the element.
|
942 |
+
* @constructor
|
943 |
+
* @param {Element} el the target element
|
944 |
+
*/
|
945 |
+
PIE.BoundsInfo = function( el ) {
|
946 |
+
this.targetElement = el;
|
947 |
+
};
|
948 |
+
PIE.BoundsInfo.prototype = {
|
949 |
+
|
950 |
+
_locked: 0,
|
951 |
+
|
952 |
+
positionChanged: function() {
|
953 |
+
var last = this._lastBounds,
|
954 |
+
bounds;
|
955 |
+
return !last || ( ( bounds = this.getBounds() ) && ( last.x !== bounds.x || last.y !== bounds.y ) );
|
956 |
+
},
|
957 |
+
|
958 |
+
sizeChanged: function() {
|
959 |
+
var last = this._lastBounds,
|
960 |
+
bounds;
|
961 |
+
return !last || ( ( bounds = this.getBounds() ) && ( last.w !== bounds.w || last.h !== bounds.h ) );
|
962 |
+
},
|
963 |
+
|
964 |
+
getLiveBounds: function() {
|
965 |
+
var rect = this.targetElement.getBoundingClientRect();
|
966 |
+
return {
|
967 |
+
x: rect.left,
|
968 |
+
y: rect.top,
|
969 |
+
w: rect.right - rect.left,
|
970 |
+
h: rect.bottom - rect.top
|
971 |
+
};
|
972 |
+
},
|
973 |
+
|
974 |
+
getBounds: function() {
|
975 |
+
return this._locked ?
|
976 |
+
( this._lockedBounds || ( this._lockedBounds = this.getLiveBounds() ) ) :
|
977 |
+
this.getLiveBounds();
|
978 |
+
},
|
979 |
+
|
980 |
+
hasBeenQueried: function() {
|
981 |
+
return !!this._lastBounds;
|
982 |
+
},
|
983 |
+
|
984 |
+
lock: function() {
|
985 |
+
++this._locked;
|
986 |
+
},
|
987 |
+
|
988 |
+
unlock: function() {
|
989 |
+
if( !--this._locked ) {
|
990 |
+
if( this._lockedBounds ) this._lastBounds = this._lockedBounds;
|
991 |
+
this._lockedBounds = null;
|
992 |
+
}
|
993 |
+
}
|
994 |
+
|
995 |
+
};
|
996 |
+
(function() {
|
997 |
+
|
998 |
+
function cacheWhenLocked( fn ) {
|
999 |
+
var uid = PIE.Util.getUID( fn );
|
1000 |
+
return function() {
|
1001 |
+
if( this._locked ) {
|
1002 |
+
var cache = this._lockedValues || ( this._lockedValues = {} );
|
1003 |
+
return ( uid in cache ) ? cache[ uid ] : ( cache[ uid ] = fn.call( this ) );
|
1004 |
+
} else {
|
1005 |
+
return fn.call( this );
|
1006 |
+
}
|
1007 |
+
}
|
1008 |
+
}
|
1009 |
+
|
1010 |
+
|
1011 |
+
PIE.StyleInfoBase = {
|
1012 |
+
|
1013 |
+
_locked: 0,
|
1014 |
+
|
1015 |
+
/**
|
1016 |
+
* Create a new StyleInfo class, with the standard constructor, and augmented by
|
1017 |
+
* the StyleInfoBase's members.
|
1018 |
+
* @param proto
|
1019 |
+
*/
|
1020 |
+
newStyleInfo: function( proto ) {
|
1021 |
+
function StyleInfo( el ) {
|
1022 |
+
this.targetElement = el;
|
1023 |
+
}
|
1024 |
+
PIE.Util.merge( StyleInfo.prototype, PIE.StyleInfoBase, proto );
|
1025 |
+
StyleInfo._propsCache = {};
|
1026 |
+
return StyleInfo;
|
1027 |
+
},
|
1028 |
+
|
1029 |
+
/**
|
1030 |
+
* Get an object representation of the target CSS style, caching it for each unique
|
1031 |
+
* CSS value string.
|
1032 |
+
* @return {Object}
|
1033 |
+
*/
|
1034 |
+
getProps: function() {
|
1035 |
+
var css = this.getCss(),
|
1036 |
+
cache = this.constructor._propsCache;
|
1037 |
+
return css ? ( css in cache ? cache[ css ] : ( cache[ css ] = this.parseCss( css ) ) ) : null;
|
1038 |
+
},
|
1039 |
+
|
1040 |
+
/**
|
1041 |
+
* Get the raw CSS value for the target style
|
1042 |
+
* @return {string}
|
1043 |
+
*/
|
1044 |
+
getCss: cacheWhenLocked( function() {
|
1045 |
+
var el = this.targetElement,
|
1046 |
+
ctor = this.constructor,
|
1047 |
+
s = el.style,
|
1048 |
+
cs = el.currentStyle,
|
1049 |
+
cssProp = this.cssProperty,
|
1050 |
+
styleProp = this.styleProperty,
|
1051 |
+
prefixedCssProp = ctor._prefixedCssProp || ( ctor._prefixedCssProp = PIE.CSS_PREFIX + cssProp ),
|
1052 |
+
prefixedStyleProp = ctor._prefixedStyleProp || ( ctor._prefixedStyleProp = PIE.STYLE_PREFIX + styleProp.charAt(0).toUpperCase() + styleProp.substring(1) );
|
1053 |
+
return s[ prefixedStyleProp ] || cs.getAttribute( prefixedCssProp ) || s[ styleProp ] || cs.getAttribute( cssProp );
|
1054 |
+
} ),
|
1055 |
+
|
1056 |
+
/**
|
1057 |
+
* Determine whether the target CSS style is active.
|
1058 |
+
* @return {boolean}
|
1059 |
+
*/
|
1060 |
+
isActive: cacheWhenLocked( function() {
|
1061 |
+
return !!this.getProps();
|
1062 |
+
} ),
|
1063 |
+
|
1064 |
+
/**
|
1065 |
+
* Determine whether the target CSS style has changed since the last time it was used.
|
1066 |
+
* @return {boolean}
|
1067 |
+
*/
|
1068 |
+
changed: cacheWhenLocked( function() {
|
1069 |
+
var currentCss = this.getCss(),
|
1070 |
+
changed = currentCss !== this._lastCss;
|
1071 |
+
this._lastCss = currentCss;
|
1072 |
+
return changed;
|
1073 |
+
} ),
|
1074 |
+
|
1075 |
+
cacheWhenLocked: cacheWhenLocked,
|
1076 |
+
|
1077 |
+
lock: function() {
|
1078 |
+
++this._locked;
|
1079 |
+
},
|
1080 |
+
|
1081 |
+
unlock: function() {
|
1082 |
+
if( !--this._locked ) {
|
1083 |
+
delete this._lockedValues;
|
1084 |
+
}
|
1085 |
+
}
|
1086 |
+
};
|
1087 |
+
|
1088 |
+
})();/**
|
1089 |
+
* Handles parsing, caching, and detecting changes to background (and -pie-background) CSS
|
1090 |
+
* @constructor
|
1091 |
+
* @param {Element} el the target element
|
1092 |
+
*/
|
1093 |
+
PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1094 |
+
|
1095 |
+
cssProperty: PIE.CSS_PREFIX + 'background',
|
1096 |
+
styleProperty: PIE.STYLE_PREFIX + 'Background',
|
1097 |
+
|
1098 |
+
attachIdents: { 'scroll':1, 'fixed':1, 'local':1 },
|
1099 |
+
repeatIdents: { 'repeat-x':1, 'repeat-y':1, 'repeat':1, 'no-repeat':1 },
|
1100 |
+
originIdents: { 'padding-box':1, 'border-box':1, 'content-box':1 },
|
1101 |
+
clipIdents: { 'padding-box':1, 'border-box':1 },
|
1102 |
+
positionIdents: { 'top':1, 'right':1, 'bottom':1, 'left':1, 'center':1 },
|
1103 |
+
sizeIdents: { 'contain':1, 'cover':1 },
|
1104 |
+
|
1105 |
+
/**
|
1106 |
+
* For background styles, we support the -pie-background property but fall back to the standard
|
1107 |
+
* backround* properties. The reason we have to use the prefixed version is that IE natively
|
1108 |
+
* parses the standard properties and if it sees something it doesn't know how to parse, for example
|
1109 |
+
* multiple values or gradient definitions, it will throw that away and not make it available through
|
1110 |
+
* currentStyle.
|
1111 |
+
*
|
1112 |
+
* Format of return object:
|
1113 |
+
* {
|
1114 |
+
* color: <PIE.Color>,
|
1115 |
+
* bgImages: [
|
1116 |
+
* {
|
1117 |
+
* imgType: 'image',
|
1118 |
+
* imgUrl: 'image.png',
|
1119 |
+
* imgRepeat: <'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'>,
|
1120 |
+
* bgPosition: <PIE.BgPosition>,
|
1121 |
+
* attachment: <'scroll' | 'fixed' | 'local'>,
|
1122 |
+
* bgOrigin: <'border-box' | 'padding-box' | 'content-box'>,
|
1123 |
+
* clip: <'border-box' | 'padding-box'>,
|
1124 |
+
* size: <'contain' | 'cover' | { w: <'auto' | PIE.Length>, h: <'auto' | PIE.Length> }>
|
1125 |
+
* },
|
1126 |
+
* {
|
1127 |
+
* imgType: 'linear-gradient',
|
1128 |
+
* gradientStart: <PIE.BgPosition>,
|
1129 |
+
* angle: <PIE.Angle>,
|
1130 |
+
* stops: [
|
1131 |
+
* { color: <PIE.Color>, offset: <PIE.Length> },
|
1132 |
+
* { color: <PIE.Color>, offset: <PIE.Length> }, ...
|
1133 |
+
* ]
|
1134 |
+
* }
|
1135 |
+
* ]
|
1136 |
+
* }
|
1137 |
+
* @param {String} css
|
1138 |
+
* @override
|
1139 |
+
*/
|
1140 |
+
parseCss: function( css ) {
|
1141 |
+
var el = this.targetElement,
|
1142 |
+
cs = el.currentStyle,
|
1143 |
+
tokenizer, token, image,
|
1144 |
+
tok_type = PIE.Tokenizer.Type,
|
1145 |
+
type_operator = tok_type.OPERATOR,
|
1146 |
+
type_ident = tok_type.IDENT,
|
1147 |
+
type_color = tok_type.COLOR,
|
1148 |
+
tokType, tokVal,
|
1149 |
+
positionIdents = this.positionIdents,
|
1150 |
+
gradient, stop,
|
1151 |
+
props = null;
|
1152 |
+
|
1153 |
+
function isBgPosToken( token ) {
|
1154 |
+
return token.isLengthOrPercent() || ( token.tokenType & type_ident && token.tokenValue in positionIdents );
|
1155 |
+
}
|
1156 |
+
|
1157 |
+
function sizeToken( token ) {
|
1158 |
+
return ( token.isLengthOrPercent() && PIE.getLength( token.tokenValue ) ) || ( token.tokenValue === 'auto' && 'auto' );
|
1159 |
+
}
|
1160 |
+
|
1161 |
+
// If the CSS3-specific -pie-background property is present, parse it
|
1162 |
+
if( this.getCss3() ) {
|
1163 |
+
tokenizer = new PIE.Tokenizer( css );
|
1164 |
+
props = { bgImages: [] };
|
1165 |
+
image = {};
|
1166 |
+
|
1167 |
+
while( token = tokenizer.next() ) {
|
1168 |
+
tokType = token.tokenType;
|
1169 |
+
tokVal = token.tokenValue;
|
1170 |
+
|
1171 |
+
if( !image.imgType && tokType & tok_type.FUNCTION && tokVal === 'linear-gradient' ) {
|
1172 |
+
gradient = { stops: [], imgType: tokVal };
|
1173 |
+
stop = {};
|
1174 |
+
while( token = tokenizer.next() ) {
|
1175 |
+
tokType = token.tokenType;
|
1176 |
+
tokVal = token.tokenValue;
|
1177 |
+
|
1178 |
+
// If we reached the end of the function and had at least 2 stops, flush the info
|
1179 |
+
if( tokType & tok_type.CHARACTER && tokVal === ')' ) {
|
1180 |
+
if( stop.color ) {
|
1181 |
+
gradient.stops.push( stop );
|
1182 |
+
}
|
1183 |
+
if( gradient.stops.length > 1 ) {
|
1184 |
+
PIE.Util.merge( image, gradient );
|
1185 |
+
}
|
1186 |
+
break;
|
1187 |
+
}
|
1188 |
+
|
1189 |
+
// Color stop - must start with color
|
1190 |
+
if( tokType & type_color ) {
|
1191 |
+
// if we already have an angle/position, make sure that the previous token was a comma
|
1192 |
+
if( gradient.angle || gradient.gradientStart ) {
|
1193 |
+
token = tokenizer.prev();
|
1194 |
+
if( token.tokenType !== type_operator ) {
|
1195 |
+
break; //fail
|
1196 |
+
}
|
1197 |
+
tokenizer.next();
|
1198 |
+
}
|
1199 |
+
|
1200 |
+
stop = {
|
1201 |
+
color: PIE.getColor( tokVal )
|
1202 |
+
};
|
1203 |
+
// check for offset following color
|
1204 |
+
token = tokenizer.next();
|
1205 |
+
if( token.isLengthOrPercent() ) {
|
1206 |
+
stop.offset = PIE.getLength( token.tokenValue );
|
1207 |
+
} else {
|
1208 |
+
tokenizer.prev();
|
1209 |
+
}
|
1210 |
+
}
|
1211 |
+
// Angle - can only appear in first spot
|
1212 |
+
else if( tokType & tok_type.ANGLE && !gradient.angle && !stop.color && !gradient.stops.length ) {
|
1213 |
+
gradient.angle = new PIE.Angle( token.tokenValue );
|
1214 |
+
}
|
1215 |
+
else if( isBgPosToken( token ) && !gradient.gradientStart && !stop.color && !gradient.stops.length ) {
|
1216 |
+
tokenizer.prev();
|
1217 |
+
gradient.gradientStart = new PIE.BgPosition(
|
1218 |
+
tokenizer.until( function( t ) {
|
1219 |
+
return !isBgPosToken( t );
|
1220 |
+
}, false )
|
1221 |
+
);
|
1222 |
+
}
|
1223 |
+
else if( tokType & type_operator && tokVal === ',' ) {
|
1224 |
+
if( stop.color ) {
|
1225 |
+
gradient.stops.push( stop );
|
1226 |
+
stop = {};
|
1227 |
+
}
|
1228 |
+
}
|
1229 |
+
else {
|
1230 |
+
// Found something we didn't recognize; fail without adding image
|
1231 |
+
break;
|
1232 |
+
}
|
1233 |
+
}
|
1234 |
+
}
|
1235 |
+
else if( !image.imgType && tokType & tok_type.URL ) {
|
1236 |
+
image.imgUrl = tokVal;
|
1237 |
+
image.imgType = 'image';
|
1238 |
+
}
|
1239 |
+
else if( isBgPosToken( token ) && !image.size ) {
|
1240 |
+
tokenizer.prev();
|
1241 |
+
image.bgPosition = new PIE.BgPosition(
|
1242 |
+
tokenizer.until( function( t ) {
|
1243 |
+
return !isBgPosToken( t );
|
1244 |
+
}, false )
|
1245 |
+
);
|
1246 |
+
}
|
1247 |
+
else if( tokType & type_ident ) {
|
1248 |
+
if( tokVal in this.repeatIdents ) {
|
1249 |
+
image.imgRepeat = tokVal;
|
1250 |
+
}
|
1251 |
+
else if( tokVal in this.originIdents ) {
|
1252 |
+
image.bgOrigin = tokVal;
|
1253 |
+
if( tokVal in this.clipIdents ) {
|
1254 |
+
image.clip = tokVal;
|
1255 |
+
}
|
1256 |
+
}
|
1257 |
+
else if( tokVal in this.attachIdents ) {
|
1258 |
+
image.attachment = tokVal;
|
1259 |
+
}
|
1260 |
+
}
|
1261 |
+
else if( tokType & type_color && !props.color ) {
|
1262 |
+
props.color = PIE.getColor( tokVal );
|
1263 |
+
}
|
1264 |
+
else if( tokType & type_operator ) {
|
1265 |
+
// background size
|
1266 |
+
if( tokVal === '/' ) {
|
1267 |
+
token = tokenizer.next();
|
1268 |
+
tokType = token.tokenType;
|
1269 |
+
tokVal = token.tokenValue;
|
1270 |
+
if( tokType & type_ident && tokVal in this.sizeIdents ) {
|
1271 |
+
image.size = tokVal;
|
1272 |
+
}
|
1273 |
+
else if( tokVal = sizeToken( token ) ) {
|
1274 |
+
image.size = {
|
1275 |
+
w: tokVal,
|
1276 |
+
h: sizeToken( tokenizer.next() ) || ( tokenizer.prev() && tokVal )
|
1277 |
+
};
|
1278 |
+
}
|
1279 |
+
}
|
1280 |
+
// new layer
|
1281 |
+
else if( tokVal === ',' && image.imgType ) {
|
1282 |
+
props.bgImages.push( image );
|
1283 |
+
image = {};
|
1284 |
+
}
|
1285 |
+
}
|
1286 |
+
else {
|
1287 |
+
// Found something unrecognized; chuck everything
|
1288 |
+
return null;
|
1289 |
+
}
|
1290 |
+
}
|
1291 |
+
|
1292 |
+
// leftovers
|
1293 |
+
if( image.imgType ) {
|
1294 |
+
props.bgImages.push( image );
|
1295 |
+
}
|
1296 |
+
}
|
1297 |
+
|
1298 |
+
// Otherwise, use the standard background properties; let IE give us the values rather than parsing them
|
1299 |
+
else {
|
1300 |
+
this.withActualBg( function() {
|
1301 |
+
var posX = cs.backgroundPositionX,
|
1302 |
+
posY = cs.backgroundPositionY,
|
1303 |
+
img = cs.backgroundImage,
|
1304 |
+
color = cs.backgroundColor;
|
1305 |
+
|
1306 |
+
props = {};
|
1307 |
+
if( color !== 'transparent' ) {
|
1308 |
+
props.color = PIE.getColor( color )
|
1309 |
+
}
|
1310 |
+
if( img !== 'none' ) {
|
1311 |
+
props.bgImages = [ {
|
1312 |
+
imgType: 'image',
|
1313 |
+
imgUrl: new PIE.Tokenizer( img ).next().tokenValue,
|
1314 |
+
imgRepeat: cs.backgroundRepeat,
|
1315 |
+
bgPosition: new PIE.BgPosition( new PIE.Tokenizer( posX + ' ' + posY ).all() )
|
1316 |
+
} ];
|
1317 |
+
}
|
1318 |
+
} );
|
1319 |
+
}
|
1320 |
+
|
1321 |
+
return ( props && ( props.color || ( props.bgImages && props.bgImages[0] ) ) ) ? props : null;
|
1322 |
+
},
|
1323 |
+
|
1324 |
+
/**
|
1325 |
+
* Execute a function with the actual background styles (not overridden with runtimeStyle
|
1326 |
+
* properties set by the renderers) available via currentStyle.
|
1327 |
+
* @param fn
|
1328 |
+
*/
|
1329 |
+
withActualBg: function( fn ) {
|
1330 |
+
var rs = this.targetElement.runtimeStyle,
|
1331 |
+
rsImage = rs.backgroundImage,
|
1332 |
+
rsColor = rs.backgroundColor,
|
1333 |
+
ret;
|
1334 |
+
|
1335 |
+
if( rsImage ) rs.backgroundImage = '';
|
1336 |
+
if( rsColor ) rs.backgroundColor = '';
|
1337 |
+
|
1338 |
+
ret = fn.call( this );
|
1339 |
+
|
1340 |
+
if( rsImage ) rs.backgroundImage = rsImage;
|
1341 |
+
if( rsColor ) rs.backgroundColor = rsColor;
|
1342 |
+
|
1343 |
+
return ret;
|
1344 |
+
},
|
1345 |
+
|
1346 |
+
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1347 |
+
return this.getCss3() ||
|
1348 |
+
this.withActualBg( function() {
|
1349 |
+
var cs = this.targetElement.currentStyle;
|
1350 |
+
return cs.backgroundColor + ' ' + cs.backgroundImage + ' ' + cs.backgroundRepeat + ' ' +
|
1351 |
+
cs.backgroundPositionX + ' ' + cs.backgroundPositionY;
|
1352 |
+
} );
|
1353 |
+
} ),
|
1354 |
+
|
1355 |
+
getCss3: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1356 |
+
var el = this.targetElement;
|
1357 |
+
return el.style[ this.styleProperty ] || el.currentStyle.getAttribute( this.cssProperty );
|
1358 |
+
} ),
|
1359 |
+
|
1360 |
+
/**
|
1361 |
+
* Tests if style.PiePngFix or the -pie-png-fix property is set to true in IE6.
|
1362 |
+
*/
|
1363 |
+
isPngFix: function() {
|
1364 |
+
var val = 0, el;
|
1365 |
+
if( PIE.ieVersion < 7 ) {
|
1366 |
+
el = this.targetElement;
|
1367 |
+
val = ( '' + ( el.style[ PIE.STYLE_PREFIX + 'PngFix' ] || el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'png-fix' ) ) === 'true' );
|
1368 |
+
}
|
1369 |
+
return val;
|
1370 |
+
},
|
1371 |
+
|
1372 |
+
/**
|
1373 |
+
* The isActive logic is slightly different, because getProps() always returns an object
|
1374 |
+
* even if it is just falling back to the native background properties. But we only want
|
1375 |
+
* to report is as being "active" if either the -pie-background override property is present
|
1376 |
+
* and parses successfully or '-pie-png-fix' is set to true in IE6.
|
1377 |
+
*/
|
1378 |
+
isActive: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1379 |
+
return (this.getCss3() || this.isPngFix()) && !!this.getProps();
|
1380 |
+
} )
|
1381 |
+
|
1382 |
+
} );/**
|
1383 |
+
* Handles parsing, caching, and detecting changes to border CSS
|
1384 |
+
* @constructor
|
1385 |
+
* @param {Element} el the target element
|
1386 |
+
*/
|
1387 |
+
PIE.BorderStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1388 |
+
|
1389 |
+
sides: [ 'Top', 'Right', 'Bottom', 'Left' ],
|
1390 |
+
namedWidths: {
|
1391 |
+
'thin': '1px',
|
1392 |
+
'medium': '3px',
|
1393 |
+
'thick': '5px'
|
1394 |
+
},
|
1395 |
+
|
1396 |
+
parseCss: function( css ) {
|
1397 |
+
var w = {},
|
1398 |
+
s = {},
|
1399 |
+
c = {},
|
1400 |
+
active = false,
|
1401 |
+
colorsSame = true,
|
1402 |
+
stylesSame = true,
|
1403 |
+
widthsSame = true;
|
1404 |
+
|
1405 |
+
this.withActualBorder( function() {
|
1406 |
+
var el = this.targetElement,
|
1407 |
+
cs = el.currentStyle,
|
1408 |
+
i = 0,
|
1409 |
+
style, color, width, lastStyle, lastColor, lastWidth, side, ltr;
|
1410 |
+
for( ; i < 4; i++ ) {
|
1411 |
+
side = this.sides[ i ];
|
1412 |
+
|
1413 |
+
ltr = side.charAt(0).toLowerCase();
|
1414 |
+
style = s[ ltr ] = cs[ 'border' + side + 'Style' ];
|
1415 |
+
color = cs[ 'border' + side + 'Color' ];
|
1416 |
+
width = cs[ 'border' + side + 'Width' ];
|
1417 |
+
|
1418 |
+
if( i > 0 ) {
|
1419 |
+
if( style !== lastStyle ) { stylesSame = false; }
|
1420 |
+
if( color !== lastColor ) { colorsSame = false; }
|
1421 |
+
if( width !== lastWidth ) { widthsSame = false; }
|
1422 |
+
}
|
1423 |
+
lastStyle = style;
|
1424 |
+
lastColor = color;
|
1425 |
+
lastWidth = width;
|
1426 |
+
|
1427 |
+
c[ ltr ] = PIE.getColor( color );
|
1428 |
+
|
1429 |
+
width = w[ ltr ] = PIE.getLength( s[ ltr ] === 'none' ? '0' : ( this.namedWidths[ width ] || width ) );
|
1430 |
+
if( width.pixels( this.targetElement ) > 0 ) {
|
1431 |
+
active = true;
|
1432 |
+
}
|
1433 |
+
}
|
1434 |
+
} );
|
1435 |
+
|
1436 |
+
return active ? {
|
1437 |
+
widths: w,
|
1438 |
+
styles: s,
|
1439 |
+
colors: c,
|
1440 |
+
widthsSame: widthsSame,
|
1441 |
+
colorsSame: colorsSame,
|
1442 |
+
stylesSame: stylesSame
|
1443 |
+
} : null;
|
1444 |
+
},
|
1445 |
+
|
1446 |
+
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1447 |
+
var el = this.targetElement,
|
1448 |
+
cs = el.currentStyle,
|
1449 |
+
css;
|
1450 |
+
|
1451 |
+
// Don't redraw or hide borders for cells in border-collapse:collapse tables
|
1452 |
+
if( !( el.tagName in PIE.tableCellTags && el.offsetParent.currentStyle.borderCollapse === 'collapse' ) ) {
|
1453 |
+
this.withActualBorder( function() {
|
1454 |
+
css = cs.borderWidth + '|' + cs.borderStyle + '|' + cs.borderColor;
|
1455 |
+
} );
|
1456 |
+
}
|
1457 |
+
return css;
|
1458 |
+
} ),
|
1459 |
+
|
1460 |
+
/**
|
1461 |
+
* Execute a function with the actual border styles (not overridden with runtimeStyle
|
1462 |
+
* properties set by the renderers) available via currentStyle.
|
1463 |
+
* @param fn
|
1464 |
+
*/
|
1465 |
+
withActualBorder: function( fn ) {
|
1466 |
+
var rs = this.targetElement.runtimeStyle,
|
1467 |
+
rsWidth = rs.borderWidth,
|
1468 |
+
rsColor = rs.borderColor,
|
1469 |
+
ret;
|
1470 |
+
|
1471 |
+
if( rsWidth ) rs.borderWidth = '';
|
1472 |
+
if( rsColor ) rs.borderColor = '';
|
1473 |
+
|
1474 |
+
ret = fn.call( this );
|
1475 |
+
|
1476 |
+
if( rsWidth ) rs.borderWidth = rsWidth;
|
1477 |
+
if( rsColor ) rs.borderColor = rsColor;
|
1478 |
+
|
1479 |
+
return ret;
|
1480 |
+
}
|
1481 |
+
|
1482 |
+
} );
|
1483 |
+
/**
|
1484 |
+
* Handles parsing, caching, and detecting changes to border-radius CSS
|
1485 |
+
* @constructor
|
1486 |
+
* @param {Element} el the target element
|
1487 |
+
*/
|
1488 |
+
(function() {
|
1489 |
+
|
1490 |
+
PIE.BorderRadiusStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1491 |
+
|
1492 |
+
cssProperty: 'border-radius',
|
1493 |
+
styleProperty: 'borderRadius',
|
1494 |
+
|
1495 |
+
parseCss: function( css ) {
|
1496 |
+
var p = null, x, y,
|
1497 |
+
tokenizer, token, length,
|
1498 |
+
hasNonZero = false;
|
1499 |
+
|
1500 |
+
if( css ) {
|
1501 |
+
tokenizer = new PIE.Tokenizer( css );
|
1502 |
+
|
1503 |
+
function collectLengths() {
|
1504 |
+
var arr = [], num;
|
1505 |
+
while( ( token = tokenizer.next() ) && token.isLengthOrPercent() ) {
|
1506 |
+
length = PIE.getLength( token.tokenValue );
|
1507 |
+
num = length.getNumber();
|
1508 |
+
if( num < 0 ) {
|
1509 |
+
return null;
|
1510 |
+
}
|
1511 |
+
if( num > 0 ) {
|
1512 |
+
hasNonZero = true;
|
1513 |
+
}
|
1514 |
+
arr.push( length );
|
1515 |
+
}
|
1516 |
+
return arr.length > 0 && arr.length < 5 ? {
|
1517 |
+
'tl': arr[0],
|
1518 |
+
'tr': arr[1] || arr[0],
|
1519 |
+
'br': arr[2] || arr[0],
|
1520 |
+
'bl': arr[3] || arr[1] || arr[0]
|
1521 |
+
} : null;
|
1522 |
+
}
|
1523 |
+
|
1524 |
+
// Grab the initial sequence of lengths
|
1525 |
+
if( x = collectLengths() ) {
|
1526 |
+
// See if there is a slash followed by more lengths, for the y-axis radii
|
1527 |
+
if( token ) {
|
1528 |
+
if( token.tokenType & PIE.Tokenizer.Type.OPERATOR && token.tokenValue === '/' ) {
|
1529 |
+
y = collectLengths();
|
1530 |
+
}
|
1531 |
+
} else {
|
1532 |
+
y = x;
|
1533 |
+
}
|
1534 |
+
|
1535 |
+
// Treat all-zero values the same as no value
|
1536 |
+
if( hasNonZero && x && y ) {
|
1537 |
+
p = { x: x, y : y };
|
1538 |
+
}
|
1539 |
+
}
|
1540 |
+
}
|
1541 |
+
|
1542 |
+
return p;
|
1543 |
+
}
|
1544 |
+
} );
|
1545 |
+
|
1546 |
+
var zero = PIE.getLength( '0' ),
|
1547 |
+
zeros = { 'tl': zero, 'tr': zero, 'br': zero, 'bl': zero };
|
1548 |
+
PIE.BorderRadiusStyleInfo.ALL_ZERO = { x: zeros, y: zeros };
|
1549 |
+
|
1550 |
+
})();/**
|
1551 |
+
* Handles parsing, caching, and detecting changes to border-image CSS
|
1552 |
+
* @constructor
|
1553 |
+
* @param {Element} el the target element
|
1554 |
+
*/
|
1555 |
+
PIE.BorderImageStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1556 |
+
|
1557 |
+
cssProperty: 'border-image',
|
1558 |
+
styleProperty: 'borderImage',
|
1559 |
+
|
1560 |
+
repeatIdents: { 'stretch':1, 'round':1, 'repeat':1, 'space':1 },
|
1561 |
+
|
1562 |
+
parseCss: function( css ) {
|
1563 |
+
var p = null, tokenizer, token, type, value,
|
1564 |
+
slices, widths, outsets,
|
1565 |
+
slashCount = 0, cs,
|
1566 |
+
Type = PIE.Tokenizer.Type,
|
1567 |
+
IDENT = Type.IDENT,
|
1568 |
+
NUMBER = Type.NUMBER,
|
1569 |
+
LENGTH = Type.LENGTH,
|
1570 |
+
PERCENT = Type.PERCENT;
|
1571 |
+
|
1572 |
+
if( css ) {
|
1573 |
+
tokenizer = new PIE.Tokenizer( css );
|
1574 |
+
p = {};
|
1575 |
+
|
1576 |
+
function isSlash( token ) {
|
1577 |
+
return token && ( token.tokenType & Type.OPERATOR ) && ( token.tokenValue === '/' );
|
1578 |
+
}
|
1579 |
+
|
1580 |
+
function isFillIdent( token ) {
|
1581 |
+
return token && ( token.tokenType & IDENT ) && ( token.tokenValue === 'fill' );
|
1582 |
+
}
|
1583 |
+
|
1584 |
+
function collectSlicesEtc() {
|
1585 |
+
slices = tokenizer.until( function( tok ) {
|
1586 |
+
return !( tok.tokenType & ( NUMBER | PERCENT ) );
|
1587 |
+
} );
|
1588 |
+
|
1589 |
+
if( isFillIdent( tokenizer.next() ) && !p.fill ) {
|
1590 |
+
p.fill = true;
|
1591 |
+
} else {
|
1592 |
+
tokenizer.prev();
|
1593 |
+
}
|
1594 |
+
|
1595 |
+
if( isSlash( tokenizer.next() ) ) {
|
1596 |
+
slashCount++;
|
1597 |
+
widths = tokenizer.until( function( tok ) {
|
1598 |
+
return !( token.tokenType & ( NUMBER | PERCENT | LENGTH ) ) && !( ( token.tokenType & IDENT ) && token.tokenValue === 'auto' );
|
1599 |
+
} );
|
1600 |
+
|
1601 |
+
if( isSlash( tokenizer.next() ) ) {
|
1602 |
+
slashCount++;
|
1603 |
+
outsets = tokenizer.until( function( tok ) {
|
1604 |
+
return !( token.tokenType & ( NUMBER | LENGTH ) );
|
1605 |
+
} );
|
1606 |
+
}
|
1607 |
+
} else {
|
1608 |
+
tokenizer.prev();
|
1609 |
+
}
|
1610 |
+
}
|
1611 |
+
|
1612 |
+
while( token = tokenizer.next() ) {
|
1613 |
+
type = token.tokenType;
|
1614 |
+
value = token.tokenValue;
|
1615 |
+
|
1616 |
+
// Numbers and/or 'fill' keyword: slice values. May be followed optionally by width values, followed optionally by outset values
|
1617 |
+
if( type & ( NUMBER | PERCENT ) && !slices ) {
|
1618 |
+
tokenizer.prev();
|
1619 |
+
collectSlicesEtc();
|
1620 |
+
}
|
1621 |
+
else if( isFillIdent( token ) && !p.fill ) {
|
1622 |
+
p.fill = true;
|
1623 |
+
collectSlicesEtc();
|
1624 |
+
}
|
1625 |
+
|
1626 |
+
// Idents: one or values for 'repeat'
|
1627 |
+
else if( ( type & IDENT ) && this.repeatIdents[value] && !p.repeat ) {
|
1628 |
+
p.repeat = { h: value };
|
1629 |
+
if( token = tokenizer.next() ) {
|
1630 |
+
if( ( token.tokenType & IDENT ) && this.repeatIdents[token.tokenValue] ) {
|
1631 |
+
p.repeat.v = token.tokenValue;
|
1632 |
+
} else {
|
1633 |
+
tokenizer.prev();
|
1634 |
+
}
|
1635 |
+
}
|
1636 |
+
}
|
1637 |
+
|
1638 |
+
// URL of the image
|
1639 |
+
else if( ( type & Type.URL ) && !p.src ) {
|
1640 |
+
p.src = value;
|
1641 |
+
}
|
1642 |
+
|
1643 |
+
// Found something unrecognized; exit.
|
1644 |
+
else {
|
1645 |
+
return null;
|
1646 |
+
}
|
1647 |
+
}
|
1648 |
+
|
1649 |
+
// Validate what we collected
|
1650 |
+
if( !p.src || !slices || slices.length < 1 || slices.length > 4 ||
|
1651 |
+
( widths && widths.length > 4 ) || ( slashCount === 1 && widths.length < 1 ) ||
|
1652 |
+
( outsets && outsets.length > 4 ) || ( slashCount === 2 && outsets.length < 1 ) ) {
|
1653 |
+
return null;
|
1654 |
+
}
|
1655 |
+
|
1656 |
+
// Fill in missing values
|
1657 |
+
if( !p.repeat ) {
|
1658 |
+
p.repeat = { h: 'stretch' };
|
1659 |
+
}
|
1660 |
+
if( !p.repeat.v ) {
|
1661 |
+
p.repeat.v = p.repeat.h;
|
1662 |
+
}
|
1663 |
+
|
1664 |
+
function distributeSides( tokens, convertFn ) {
|
1665 |
+
return {
|
1666 |
+
t: convertFn( tokens[0] ),
|
1667 |
+
r: convertFn( tokens[1] || tokens[0] ),
|
1668 |
+
b: convertFn( tokens[2] || tokens[0] ),
|
1669 |
+
l: convertFn( tokens[3] || tokens[1] || tokens[0] )
|
1670 |
+
};
|
1671 |
+
}
|
1672 |
+
|
1673 |
+
p.slice = distributeSides( slices, function( tok ) {
|
1674 |
+
return PIE.getLength( ( tok.tokenType & NUMBER ) ? tok.tokenValue + 'px' : tok.tokenValue );
|
1675 |
+
} );
|
1676 |
+
|
1677 |
+
p.width = widths && widths.length > 0 ?
|
1678 |
+
distributeSides( widths, function( tok ) {
|
1679 |
+
return tok.tokenType & ( LENGTH | PERCENT ) ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
|
1680 |
+
} ) :
|
1681 |
+
( cs = this.targetElement.currentStyle ) && {
|
1682 |
+
t: PIE.getLength( cs.borderTopWidth ),
|
1683 |
+
r: PIE.getLength( cs.borderRightWidth ),
|
1684 |
+
b: PIE.getLength( cs.borderBottomWidth ),
|
1685 |
+
l: PIE.getLength( cs.borderLeftWidth )
|
1686 |
+
};
|
1687 |
+
|
1688 |
+
p.outset = distributeSides( outsets || [ 0 ], function( tok ) {
|
1689 |
+
return tok.tokenType & LENGTH ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
|
1690 |
+
} );
|
1691 |
+
}
|
1692 |
+
|
1693 |
+
return p;
|
1694 |
+
}
|
1695 |
+
} );/**
|
1696 |
+
* Handles parsing, caching, and detecting changes to box-shadow CSS
|
1697 |
+
* @constructor
|
1698 |
+
* @param {Element} el the target element
|
1699 |
+
*/
|
1700 |
+
PIE.BoxShadowStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1701 |
+
|
1702 |
+
cssProperty: 'box-shadow',
|
1703 |
+
styleProperty: 'boxShadow',
|
1704 |
+
|
1705 |
+
parseCss: function( css ) {
|
1706 |
+
var props,
|
1707 |
+
getLength = PIE.getLength,
|
1708 |
+
Type = PIE.Tokenizer.Type,
|
1709 |
+
tokenizer;
|
1710 |
+
|
1711 |
+
if( css ) {
|
1712 |
+
tokenizer = new PIE.Tokenizer( css );
|
1713 |
+
props = { outset: [], inset: [] };
|
1714 |
+
|
1715 |
+
function parseItem() {
|
1716 |
+
var token, type, value, color, lengths, inset, len;
|
1717 |
+
|
1718 |
+
while( token = tokenizer.next() ) {
|
1719 |
+
value = token.tokenValue;
|
1720 |
+
type = token.tokenType;
|
1721 |
+
|
1722 |
+
if( type & Type.OPERATOR && value === ',' ) {
|
1723 |
+
break;
|
1724 |
+
}
|
1725 |
+
else if( token.isLength() && !lengths ) {
|
1726 |
+
tokenizer.prev();
|
1727 |
+
lengths = tokenizer.until( function( token ) {
|
1728 |
+
return !token.isLength();
|
1729 |
+
} );
|
1730 |
+
}
|
1731 |
+
else if( type & Type.COLOR && !color ) {
|
1732 |
+
color = value;
|
1733 |
+
}
|
1734 |
+
else if( type & Type.IDENT && value === 'inset' && !inset ) {
|
1735 |
+
inset = true;
|
1736 |
+
}
|
1737 |
+
else { //encountered an unrecognized token; fail.
|
1738 |
+
return false;
|
1739 |
+
}
|
1740 |
+
}
|
1741 |
+
|
1742 |
+
len = lengths && lengths.length;
|
1743 |
+
if( len > 1 && len < 5 ) {
|
1744 |
+
( inset ? props.inset : props.outset ).push( {
|
1745 |
+
xOffset: getLength( lengths[0].tokenValue ),
|
1746 |
+
yOffset: getLength( lengths[1].tokenValue ),
|
1747 |
+
blur: getLength( lengths[2] ? lengths[2].tokenValue : '0' ),
|
1748 |
+
spread: getLength( lengths[3] ? lengths[3].tokenValue : '0' ),
|
1749 |
+
color: PIE.getColor( color || 'currentColor' )
|
1750 |
+
} );
|
1751 |
+
return true;
|
1752 |
+
}
|
1753 |
+
return false;
|
1754 |
+
}
|
1755 |
+
|
1756 |
+
while( parseItem() ) {}
|
1757 |
+
}
|
1758 |
+
|
1759 |
+
return props && ( props.inset.length || props.outset.length ) ? props : null;
|
1760 |
+
}
|
1761 |
+
} );
|
1762 |
+
/**
|
1763 |
+
* Retrieves the state of the element's visibility and display
|
1764 |
+
* @constructor
|
1765 |
+
* @param {Element} el the target element
|
1766 |
+
*/
|
1767 |
+
PIE.VisibilityStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
|
1768 |
+
|
1769 |
+
getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
|
1770 |
+
var cs = this.targetElement.currentStyle;
|
1771 |
+
return cs.visibility + '|' + cs.display;
|
1772 |
+
} ),
|
1773 |
+
|
1774 |
+
parseCss: function() {
|
1775 |
+
var el = this.targetElement,
|
1776 |
+
rs = el.runtimeStyle,
|
1777 |
+
cs = el.currentStyle,
|
1778 |
+
rsVis = rs.visibility,
|
1779 |
+
csVis;
|
1780 |
+
|
1781 |
+
rs.visibility = '';
|
1782 |
+
csVis = cs.visibility;
|
1783 |
+
rs.visibility = rsVis;
|
1784 |
+
|
1785 |
+
return {
|
1786 |
+
visible: csVis !== 'hidden',
|
1787 |
+
displayed: cs.display !== 'none'
|
1788 |
+
}
|
1789 |
+
},
|
1790 |
+
|
1791 |
+
/**
|
1792 |
+
* Always return false for isActive, since this property alone will not trigger
|
1793 |
+
* a renderer to do anything.
|
1794 |
+
*/
|
1795 |
+
isActive: function() {
|
1796 |
+
return false;
|
1797 |
+
}
|
1798 |
+
|
1799 |
+
} );
|
1800 |
+
PIE.RendererBase = {
|
1801 |
+
|
1802 |
+
/**
|
1803 |
+
* Create a new Renderer class, with the standard constructor, and augmented by
|
1804 |
+
* the RendererBase's members.
|
1805 |
+
* @param proto
|
1806 |
+
*/
|
1807 |
+
newRenderer: function( proto ) {
|
1808 |
+
function Renderer( el, boundsInfo, styleInfos, parent ) {
|
1809 |
+
this.targetElement = el;
|
1810 |
+
this.boundsInfo = boundsInfo;
|
1811 |
+
this.styleInfos = styleInfos;
|
1812 |
+
this.parent = parent;
|
1813 |
+
}
|
1814 |
+
PIE.Util.merge( Renderer.prototype, PIE.RendererBase, proto );
|
1815 |
+
return Renderer;
|
1816 |
+
},
|
1817 |
+
|
1818 |
+
/**
|
1819 |
+
* Flag indicating the element has already been positioned at least once.
|
1820 |
+
* @type {boolean}
|
1821 |
+
*/
|
1822 |
+
isPositioned: false,
|
1823 |
+
|
1824 |
+
/**
|
1825 |
+
* Determine if the renderer needs to be updated
|
1826 |
+
* @return {boolean}
|
1827 |
+
*/
|
1828 |
+
needsUpdate: function() {
|
1829 |
+
return false;
|
1830 |
+
},
|
1831 |
+
|
1832 |
+
/**
|
1833 |
+
* Tell the renderer to update based on modified properties
|
1834 |
+
*/
|
1835 |
+
updateProps: function() {
|
1836 |
+
this.destroy();
|
1837 |
+
if( this.isActive() ) {
|
1838 |
+
this.draw();
|
1839 |
+
}
|
1840 |
+
},
|
1841 |
+
|
1842 |
+
/**
|
1843 |
+
* Tell the renderer to update based on modified element position
|
1844 |
+
*/
|
1845 |
+
updatePos: function() {
|
1846 |
+
this.isPositioned = true;
|
1847 |
+
},
|
1848 |
+
|
1849 |
+
/**
|
1850 |
+
* Tell the renderer to update based on modified element dimensions
|
1851 |
+
*/
|
1852 |
+
updateSize: function() {
|
1853 |
+
if( this.isActive() ) {
|
1854 |
+
this.draw();
|
1855 |
+
} else {
|
1856 |
+
this.destroy();
|
1857 |
+
}
|
1858 |
+
},
|
1859 |
+
|
1860 |
+
|
1861 |
+
/**
|
1862 |
+
* Add a layer element, with the given z-order index, to the renderer's main box element. We can't use
|
1863 |
+
* z-index because that breaks when the root rendering box's z-index is 'auto' in IE8+ standards mode.
|
1864 |
+
* So instead we make sure they are inserted into the DOM in the correct order.
|
1865 |
+
* @param {number} index
|
1866 |
+
* @param {Element} el
|
1867 |
+
*/
|
1868 |
+
addLayer: function( index, el ) {
|
1869 |
+
this.removeLayer( index );
|
1870 |
+
for( var layers = this._layers || ( this._layers = [] ), i = index + 1, len = layers.length, layer; i < len; i++ ) {
|
1871 |
+
layer = layers[i];
|
1872 |
+
if( layer ) {
|
1873 |
+
break;
|
1874 |
+
}
|
1875 |
+
}
|
1876 |
+
layers[index] = el;
|
1877 |
+
this.getBox().insertBefore( el, layer || null );
|
1878 |
+
},
|
1879 |
+
|
1880 |
+
/**
|
1881 |
+
* Retrieve a layer element by its index, or null if not present
|
1882 |
+
* @param {number} index
|
1883 |
+
* @return {Element}
|
1884 |
+
*/
|
1885 |
+
getLayer: function( index ) {
|
1886 |
+
var layers = this._layers;
|
1887 |
+
return layers && layers[index] || null;
|
1888 |
+
},
|
1889 |
+
|
1890 |
+
/**
|
1891 |
+
* Remove a layer element by its index
|
1892 |
+
* @param {number} index
|
1893 |
+
*/
|
1894 |
+
removeLayer: function( index ) {
|
1895 |
+
var layer = this.getLayer( index ),
|
1896 |
+
box = this._box;
|
1897 |
+
if( layer && box ) {
|
1898 |
+
box.removeChild( layer );
|
1899 |
+
this._layers[index] = null;
|
1900 |
+
}
|
1901 |
+
},
|
1902 |
+
|
1903 |
+
|
1904 |
+
/**
|
1905 |
+
* Get a VML shape by name, creating it if necessary.
|
1906 |
+
* @param {string} name A name identifying the element
|
1907 |
+
* @param {string=} subElName If specified a subelement of the shape will be created with this tag name
|
1908 |
+
* @param {Element} parent The parent element for the shape; will be ignored if 'group' is specified
|
1909 |
+
* @param {number=} group If specified, an ordinal group for the shape. 1 or greater. Groups are rendered
|
1910 |
+
* using container elements in the correct order, to get correct z stacking without z-index.
|
1911 |
+
*/
|
1912 |
+
getShape: function( name, subElName, parent, group ) {
|
1913 |
+
var shapes = this._shapes || ( this._shapes = {} ),
|
1914 |
+
shape = shapes[ name ],
|
1915 |
+
s;
|
1916 |
+
|
1917 |
+
if( !shape ) {
|
1918 |
+
shape = shapes[ name ] = PIE.Util.createVmlElement( 'shape' );
|
1919 |
+
if( subElName ) {
|
1920 |
+
shape.appendChild( shape[ subElName ] = PIE.Util.createVmlElement( subElName ) );
|
1921 |
+
}
|
1922 |
+
|
1923 |
+
if( group ) {
|
1924 |
+
parent = this.getLayer( group );
|
1925 |
+
if( !parent ) {
|
1926 |
+
this.addLayer( group, doc.createElement( 'group' + group ) );
|
1927 |
+
parent = this.getLayer( group );
|
1928 |
+
}
|
1929 |
+
}
|
1930 |
+
|
1931 |
+
parent.appendChild( shape );
|
1932 |
+
|
1933 |
+
s = shape.style;
|
1934 |
+
s.position = 'absolute';
|
1935 |
+
s.left = s.top = 0;
|
1936 |
+
s['behavior'] = 'url(#default#VML)';
|
1937 |
+
}
|
1938 |
+
return shape;
|
1939 |
+
},
|
1940 |
+
|
1941 |
+
/**
|
1942 |
+
* Delete a named shape which was created by getShape(). Returns true if a shape with the
|
1943 |
+
* given name was found and deleted, or false if there was no shape of that name.
|
1944 |
+
* @param {string} name
|
1945 |
+
* @return {boolean}
|
1946 |
+
*/
|
1947 |
+
deleteShape: function( name ) {
|
1948 |
+
var shapes = this._shapes,
|
1949 |
+
shape = shapes && shapes[ name ];
|
1950 |
+
if( shape ) {
|
1951 |
+
shape.parentNode.removeChild( shape );
|
1952 |
+
delete shapes[ name ];
|
1953 |
+
}
|
1954 |
+
return !!shape;
|
1955 |
+
},
|
1956 |
+
|
1957 |
+
|
1958 |
+
/**
|
1959 |
+
* For a given set of border radius length/percentage values, convert them to concrete pixel
|
1960 |
+
* values based on the current size of the target element.
|
1961 |
+
* @param {Object} radii
|
1962 |
+
* @return {Object}
|
1963 |
+
*/
|
1964 |
+
getRadiiPixels: function( radii ) {
|
1965 |
+
var el = this.targetElement,
|
1966 |
+
bounds = this.boundsInfo.getBounds(),
|
1967 |
+
w = bounds.w,
|
1968 |
+
h = bounds.h,
|
1969 |
+
tlX, tlY, trX, trY, brX, brY, blX, blY, f;
|
1970 |
+
|
1971 |
+
tlX = radii.x['tl'].pixels( el, w );
|
1972 |
+
tlY = radii.y['tl'].pixels( el, h );
|
1973 |
+
trX = radii.x['tr'].pixels( el, w );
|
1974 |
+
trY = radii.y['tr'].pixels( el, h );
|
1975 |
+
brX = radii.x['br'].pixels( el, w );
|
1976 |
+
brY = radii.y['br'].pixels( el, h );
|
1977 |
+
blX = radii.x['bl'].pixels( el, w );
|
1978 |
+
blY = radii.y['bl'].pixels( el, h );
|
1979 |
+
|
1980 |
+
// If any corner ellipses overlap, reduce them all by the appropriate factor. This formula
|
1981 |
+
// is taken straight from the CSS3 Backgrounds and Borders spec.
|
1982 |
+
f = Math.min(
|
1983 |
+
w / ( tlX + trX ),
|
1984 |
+
h / ( trY + brY ),
|
1985 |
+
w / ( blX + brX ),
|
1986 |
+
h / ( tlY + blY )
|
1987 |
+
);
|
1988 |
+
if( f < 1 ) {
|
1989 |
+
tlX *= f;
|
1990 |
+
tlY *= f;
|
1991 |
+
trX *= f;
|
1992 |
+
trY *= f;
|
1993 |
+
brX *= f;
|
1994 |
+
brY *= f;
|
1995 |
+
blX *= f;
|
1996 |
+
blY *= f;
|
1997 |
+
}
|
1998 |
+
|
1999 |
+
return {
|
2000 |
+
x: {
|
2001 |
+
'tl': tlX,
|
2002 |
+
'tr': trX,
|
2003 |
+
'br': brX,
|
2004 |
+
'bl': blX
|
2005 |
+
},
|
2006 |
+
y: {
|
2007 |
+
'tl': tlY,
|
2008 |
+
'tr': trY,
|
2009 |
+
'br': brY,
|
2010 |
+
'bl': blY
|
2011 |
+
}
|
2012 |
+
}
|
2013 |
+
},
|
2014 |
+
|
2015 |
+
/**
|
2016 |
+
* Return the VML path string for the element's background box, with corners rounded.
|
2017 |
+
* @param {Object.<{t:number, r:number, b:number, l:number}>} shrink - if present, specifies number of
|
2018 |
+
* pixels to shrink the box path inward from the element's four sides.
|
2019 |
+
* @param {number=} mult If specified, all coordinates will be multiplied by this number
|
2020 |
+
* @param {Object=} radii If specified, this will be used for the corner radii instead of the properties
|
2021 |
+
* from this renderer's borderRadiusInfo object.
|
2022 |
+
* @return {string} the VML path
|
2023 |
+
*/
|
2024 |
+
getBoxPath: function( shrink, mult, radii ) {
|
2025 |
+
mult = mult || 1;
|
2026 |
+
|
2027 |
+
var r, str,
|
2028 |
+
bounds = this.boundsInfo.getBounds(),
|
2029 |
+
w = bounds.w * mult,
|
2030 |
+
h = bounds.h * mult,
|
2031 |
+
radInfo = this.styleInfos.borderRadiusInfo,
|
2032 |
+
floor = Math.floor, ceil = Math.ceil,
|
2033 |
+
shrinkT = shrink ? shrink.t * mult : 0,
|
2034 |
+
shrinkR = shrink ? shrink.r * mult : 0,
|
2035 |
+
shrinkB = shrink ? shrink.b * mult : 0,
|
2036 |
+
shrinkL = shrink ? shrink.l * mult : 0,
|
2037 |
+
tlX, tlY, trX, trY, brX, brY, blX, blY;
|
2038 |
+
|
2039 |
+
if( radii || radInfo.isActive() ) {
|
2040 |
+
r = this.getRadiiPixels( radii || radInfo.getProps() );
|
2041 |
+
|
2042 |
+
tlX = r.x['tl'] * mult;
|
2043 |
+
tlY = r.y['tl'] * mult;
|
2044 |
+
trX = r.x['tr'] * mult;
|
2045 |
+
trY = r.y['tr'] * mult;
|
2046 |
+
brX = r.x['br'] * mult;
|
2047 |
+
brY = r.y['br'] * mult;
|
2048 |
+
blX = r.x['bl'] * mult;
|
2049 |
+
blY = r.y['bl'] * mult;
|
2050 |
+
|
2051 |
+
str = 'm' + floor( shrinkL ) + ',' + floor( tlY ) +
|
2052 |
+
'qy' + floor( tlX ) + ',' + floor( shrinkT ) +
|
2053 |
+
'l' + ceil( w - trX ) + ',' + floor( shrinkT ) +
|
2054 |
+
'qx' + ceil( w - shrinkR ) + ',' + floor( trY ) +
|
2055 |
+
'l' + ceil( w - shrinkR ) + ',' + ceil( h - brY ) +
|
2056 |
+
'qy' + ceil( w - brX ) + ',' + ceil( h - shrinkB ) +
|
2057 |
+
'l' + floor( blX ) + ',' + ceil( h - shrinkB ) +
|
2058 |
+
'qx' + floor( shrinkL ) + ',' + ceil( h - blY ) + ' x e';
|
2059 |
+
} else {
|
2060 |
+
// simplified path for non-rounded box
|
2061 |
+
str = 'm' + floor( shrinkL ) + ',' + floor( shrinkT ) +
|
2062 |
+
'l' + ceil( w - shrinkR ) + ',' + floor( shrinkT ) +
|
2063 |
+
'l' + ceil( w - shrinkR ) + ',' + ceil( h - shrinkB ) +
|
2064 |
+
'l' + floor( shrinkL ) + ',' + ceil( h - shrinkB ) +
|
2065 |
+
'xe';
|
2066 |
+
}
|
2067 |
+
return str;
|
2068 |
+
},
|
2069 |
+
|
2070 |
+
|
2071 |
+
/**
|
2072 |
+
* Get the container element for the shapes, creating it if necessary.
|
2073 |
+
*/
|
2074 |
+
getBox: function() {
|
2075 |
+
var box = this.parent.getLayer( this.boxZIndex ), s;
|
2076 |
+
|
2077 |
+
if( !box ) {
|
2078 |
+
box = doc.createElement( this.boxName );
|
2079 |
+
s = box.style;
|
2080 |
+
s.position = 'absolute';
|
2081 |
+
s.top = s.left = 0;
|
2082 |
+
this.parent.addLayer( this.boxZIndex, box );
|
2083 |
+
}
|
2084 |
+
|
2085 |
+
return box;
|
2086 |
+
},
|
2087 |
+
|
2088 |
+
|
2089 |
+
/**
|
2090 |
+
* Destroy the rendered objects. This is a base implementation which handles common renderer
|
2091 |
+
* structures, but individual renderers may override as necessary.
|
2092 |
+
*/
|
2093 |
+
destroy: function() {
|
2094 |
+
this.parent.removeLayer( this.boxZIndex );
|
2095 |
+
delete this._shapes;
|
2096 |
+
delete this._layers;
|
2097 |
+
}
|
2098 |
+
};
|
2099 |
+
/**
|
2100 |
+
* Root renderer; creates the outermost container element and handles keeping it aligned
|
2101 |
+
* with the target element's size and position.
|
2102 |
+
* @param {Element} el The target element
|
2103 |
+
* @param {Object} styleInfos The StyleInfo objects
|
2104 |
+
*/
|
2105 |
+
PIE.RootRenderer = PIE.RendererBase.newRenderer( {
|
2106 |
+
|
2107 |
+
isActive: function() {
|
2108 |
+
var children = this.childRenderers;
|
2109 |
+
for( var i in children ) {
|
2110 |
+
if( children.hasOwnProperty( i ) && children[ i ].isActive() ) {
|
2111 |
+
return true;
|
2112 |
+
}
|
2113 |
+
}
|
2114 |
+
return false;
|
2115 |
+
},
|
2116 |
+
|
2117 |
+
needsUpdate: function() {
|
2118 |
+
return this.styleInfos.visibilityInfo.changed();
|
2119 |
+
},
|
2120 |
+
|
2121 |
+
updatePos: function() {
|
2122 |
+
if( this.isActive() ) {
|
2123 |
+
var el = this.getPositioningElement(),
|
2124 |
+
par = el,
|
2125 |
+
docEl,
|
2126 |
+
parRect,
|
2127 |
+
tgtCS = el.currentStyle,
|
2128 |
+
tgtPos = tgtCS.position,
|
2129 |
+
boxPos,
|
2130 |
+
s = this.getBox().style, cs,
|
2131 |
+
x = 0, y = 0,
|
2132 |
+
elBounds = this.boundsInfo.getBounds();
|
2133 |
+
|
2134 |
+
if( tgtPos === 'fixed' && PIE.ieVersion > 6 ) {
|
2135 |
+
x = elBounds.x;
|
2136 |
+
y = elBounds.y;
|
2137 |
+
boxPos = tgtPos;
|
2138 |
+
} else {
|
2139 |
+
// Get the element's offsets from its nearest positioned ancestor. Uses
|
2140 |
+
// getBoundingClientRect for accuracy and speed.
|
2141 |
+
do {
|
2142 |
+
par = par.offsetParent;
|
2143 |
+
} while( par && ( par.currentStyle.position === 'static' ) );
|
2144 |
+
if( par ) {
|
2145 |
+
parRect = par.getBoundingClientRect();
|
2146 |
+
cs = par.currentStyle;
|
2147 |
+
x = elBounds.x - parRect.left - ( parseFloat(cs.borderLeftWidth) || 0 );
|
2148 |
+
y = elBounds.y - parRect.top - ( parseFloat(cs.borderTopWidth) || 0 );
|
2149 |
+
} else {
|
2150 |
+
docEl = doc.documentElement;
|
2151 |
+
x = elBounds.x + docEl.scrollLeft - docEl.clientLeft;
|
2152 |
+
y = elBounds.y + docEl.scrollTop - docEl.clientTop;
|
2153 |
+
}
|
2154 |
+
boxPos = 'absolute';
|
2155 |
+
}
|
2156 |
+
|
2157 |
+
s.position = boxPos;
|
2158 |
+
s.left = x;
|
2159 |
+
s.top = y;
|
2160 |
+
s.zIndex = tgtPos === 'static' ? -1 : tgtCS.zIndex;
|
2161 |
+
this.isPositioned = true;
|
2162 |
+
}
|
2163 |
+
},
|
2164 |
+
|
2165 |
+
updateSize: function() {
|
2166 |
+
// NO-OP
|
2167 |
+
},
|
2168 |
+
|
2169 |
+
updateVisibility: function() {
|
2170 |
+
var vis = this.styleInfos.visibilityInfo.getProps();
|
2171 |
+
this.getBox().style.display = ( vis.visible && vis.displayed ) ? '' : 'none';
|
2172 |
+
},
|
2173 |
+
|
2174 |
+
updateProps: function() {
|
2175 |
+
if( this.isActive() ) {
|
2176 |
+
this.updateVisibility();
|
2177 |
+
} else {
|
2178 |
+
this.destroy();
|
2179 |
+
}
|
2180 |
+
},
|
2181 |
+
|
2182 |
+
getPositioningElement: function() {
|
2183 |
+
var el = this.targetElement;
|
2184 |
+
return el.tagName in PIE.tableCellTags ? el.offsetParent : el;
|
2185 |
+
},
|
2186 |
+
|
2187 |
+
getBox: function() {
|
2188 |
+
var box = this._box, el;
|
2189 |
+
if( !box ) {
|
2190 |
+
el = this.getPositioningElement();
|
2191 |
+
box = this._box = doc.createElement( 'css3-container' );
|
2192 |
+
box.style['direction'] = 'ltr'; //fix positioning bug in rtl environments
|
2193 |
+
|
2194 |
+
this.updateVisibility();
|
2195 |
+
|
2196 |
+
el.parentNode.insertBefore( box, el );
|
2197 |
+
}
|
2198 |
+
return box;
|
2199 |
+
},
|
2200 |
+
|
2201 |
+
destroy: function() {
|
2202 |
+
var box = this._box, par;
|
2203 |
+
if( box && ( par = box.parentNode ) ) {
|
2204 |
+
par.removeChild( box );
|
2205 |
+
}
|
2206 |
+
delete this._box;
|
2207 |
+
delete this._layers;
|
2208 |
+
}
|
2209 |
+
|
2210 |
+
} );
|
2211 |
+
/**
|
2212 |
+
* Renderer for element backgrounds.
|
2213 |
+
* @constructor
|
2214 |
+
* @param {Element} el The target element
|
2215 |
+
* @param {Object} styleInfos The StyleInfo objects
|
2216 |
+
* @param {PIE.RootRenderer} parent
|
2217 |
+
*/
|
2218 |
+
PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
|
2219 |
+
|
2220 |
+
boxZIndex: 2,
|
2221 |
+
boxName: 'background',
|
2222 |
+
|
2223 |
+
needsUpdate: function() {
|
2224 |
+
var si = this.styleInfos;
|
2225 |
+
return si.backgroundInfo.changed() || si.borderRadiusInfo.changed();
|
2226 |
+
},
|
2227 |
+
|
2228 |
+
isActive: function() {
|
2229 |
+
var si = this.styleInfos;
|
2230 |
+
return si.borderImageInfo.isActive() ||
|
2231 |
+
si.borderRadiusInfo.isActive() ||
|
2232 |
+
si.backgroundInfo.isActive() ||
|
2233 |
+
( si.boxShadowInfo.isActive() && si.boxShadowInfo.getProps().inset );
|
2234 |
+
},
|
2235 |
+
|
2236 |
+
/**
|
2237 |
+
* Draw the shapes
|
2238 |
+
*/
|
2239 |
+
draw: function() {
|
2240 |
+
var bounds = this.boundsInfo.getBounds();
|
2241 |
+
if( bounds.w && bounds.h ) {
|
2242 |
+
this.drawBgColor();
|
2243 |
+
this.drawBgImages();
|
2244 |
+
}
|
2245 |
+
},
|
2246 |
+
|
2247 |
+
/**
|
2248 |
+
* Draw the background color shape
|
2249 |
+
*/
|
2250 |
+
drawBgColor: function() {
|
2251 |
+
var props = this.styleInfos.backgroundInfo.getProps(),
|
2252 |
+
bounds = this.boundsInfo.getBounds(),
|
2253 |
+
el = this.targetElement,
|
2254 |
+
color = props && props.color,
|
2255 |
+
shape, w, h, s, alpha;
|
2256 |
+
|
2257 |
+
if( color && color.alpha() > 0 ) {
|
2258 |
+
this.hideBackground();
|
2259 |
+
|
2260 |
+
shape = this.getShape( 'bgColor', 'fill', this.getBox(), 1 );
|
2261 |
+
w = bounds.w;
|
2262 |
+
h = bounds.h;
|
2263 |
+
shape.stroked = false;
|
2264 |
+
shape.coordsize = w * 2 + ',' + h * 2;
|
2265 |
+
shape.coordorigin = '1,1';
|
2266 |
+
shape.path = this.getBoxPath( null, 2 );
|
2267 |
+
s = shape.style;
|
2268 |
+
s.width = w;
|
2269 |
+
s.height = h;
|
2270 |
+
shape.fill.color = color.colorValue( el );
|
2271 |
+
|
2272 |
+
alpha = color.alpha();
|
2273 |
+
if( alpha < 1 ) {
|
2274 |
+
shape.fill.opacity = alpha;
|
2275 |
+
}
|
2276 |
+
} else {
|
2277 |
+
this.deleteShape( 'bgColor' );
|
2278 |
+
}
|
2279 |
+
},
|
2280 |
+
|
2281 |
+
/**
|
2282 |
+
* Draw all the background image layers
|
2283 |
+
*/
|
2284 |
+
drawBgImages: function() {
|
2285 |
+
var props = this.styleInfos.backgroundInfo.getProps(),
|
2286 |
+
bounds = this.boundsInfo.getBounds(),
|
2287 |
+
images = props && props.bgImages,
|
2288 |
+
img, shape, w, h, s, i;
|
2289 |
+
|
2290 |
+
if( images ) {
|
2291 |
+
this.hideBackground();
|
2292 |
+
|
2293 |
+
w = bounds.w;
|
2294 |
+
h = bounds.h;
|
2295 |
+
|
2296 |
+
i = images.length;
|
2297 |
+
while( i-- ) {
|
2298 |
+
img = images[i];
|
2299 |
+
shape = this.getShape( 'bgImage' + i, 'fill', this.getBox(), 2 );
|
2300 |
+
|
2301 |
+
shape.stroked = false;
|
2302 |
+
shape.fill.type = 'tile';
|
2303 |
+
shape.fillcolor = 'none';
|
2304 |
+
shape.coordsize = w * 2 + ',' + h * 2;
|
2305 |
+
shape.coordorigin = '1,1';
|
2306 |
+
shape.path = this.getBoxPath( 0, 2 );
|
2307 |
+
s = shape.style;
|
2308 |
+
s.width = w;
|
2309 |
+
s.height = h;
|
2310 |
+
|
2311 |
+
if( img.imgType === 'linear-gradient' ) {
|
2312 |
+
this.addLinearGradient( shape, img );
|
2313 |
+
}
|
2314 |
+
else {
|
2315 |
+
shape.fill.src = img.imgUrl;
|
2316 |
+
this.positionBgImage( shape, i );
|
2317 |
+
}
|
2318 |
+
}
|
2319 |
+
}
|
2320 |
+
|
2321 |
+
// Delete any bgImage shapes previously created which weren't used above
|
2322 |
+
i = images ? images.length : 0;
|
2323 |
+
while( this.deleteShape( 'bgImage' + i++ ) ) {}
|
2324 |
+
},
|
2325 |
+
|
2326 |
+
|
2327 |
+
/**
|
2328 |
+
* Set the position and clipping of the background image for a layer
|
2329 |
+
* @param {Element} shape
|
2330 |
+
* @param {number} index
|
2331 |
+
*/
|
2332 |
+
positionBgImage: function( shape, index ) {
|
2333 |
+
PIE.Util.withImageSize( shape.fill.src, function( size ) {
|
2334 |
+
var fill = shape.fill,
|
2335 |
+
el = this.targetElement,
|
2336 |
+
bounds = this.boundsInfo.getBounds(),
|
2337 |
+
elW = bounds.w,
|
2338 |
+
elH = bounds.h,
|
2339 |
+
si = this.styleInfos,
|
2340 |
+
border = si.borderInfo.getProps(),
|
2341 |
+
bw = border && border.widths,
|
2342 |
+
bwT = bw ? bw['t'].pixels( el ) : 0,
|
2343 |
+
bwR = bw ? bw['r'].pixels( el ) : 0,
|
2344 |
+
bwB = bw ? bw['b'].pixels( el ) : 0,
|
2345 |
+
bwL = bw ? bw['l'].pixels( el ) : 0,
|
2346 |
+
bg = si.backgroundInfo.getProps().bgImages[ index ],
|
2347 |
+
bgPos = bg.bgPosition ? bg.bgPosition.coords( el, elW - size.w - bwL - bwR, elH - size.h - bwT - bwB ) : { x:0, y:0 },
|
2348 |
+
repeat = bg.imgRepeat,
|
2349 |
+
pxX, pxY,
|
2350 |
+
clipT = 0, clipL = 0,
|
2351 |
+
clipR = elW + 1, clipB = elH + 1, //make sure the default clip region is not inside the box (by a subpixel)
|
2352 |
+
clipAdjust = PIE.ieVersion === 8 ? 0 : 1; //prior to IE8 requires 1 extra pixel in the image clip region
|
2353 |
+
|
2354 |
+
// Positioning - find the pixel offset from the top/left and convert to a ratio
|
2355 |
+
// The position is shifted by half a pixel, to adjust for the half-pixel coordorigin shift which is
|
2356 |
+
// needed to fix antialiasing but makes the bg image fuzzy.
|
2357 |
+
pxX = Math.round( bgPos.x ) + bwL + 0.5;
|
2358 |
+
pxY = Math.round( bgPos.y ) + bwT + 0.5;
|
2359 |
+
fill.position = ( pxX / elW ) + ',' + ( pxY / elH );
|
2360 |
+
|
2361 |
+
// Repeating - clip the image shape
|
2362 |
+
if( repeat && repeat !== 'repeat' ) {
|
2363 |
+
if( repeat === 'repeat-x' || repeat === 'no-repeat' ) {
|
2364 |
+
clipT = pxY + 1;
|
2365 |
+
clipB = pxY + size.h + clipAdjust;
|
2366 |
+
}
|
2367 |
+
if( repeat === 'repeat-y' || repeat === 'no-repeat' ) {
|
2368 |
+
clipL = pxX + 1;
|
2369 |
+
clipR = pxX + size.w + clipAdjust;
|
2370 |
+
}
|
2371 |
+
shape.style.clip = 'rect(' + clipT + 'px,' + clipR + 'px,' + clipB + 'px,' + clipL + 'px)';
|
2372 |
+
}
|
2373 |
+
}, this );
|
2374 |
+
},
|
2375 |
+
|
2376 |
+
|
2377 |
+
/**
|
2378 |
+
* Draw the linear gradient for a gradient layer
|
2379 |
+
* @param {Element} shape
|
2380 |
+
* @param {Object} info The object holding the information about the gradient
|
2381 |
+
*/
|
2382 |
+
addLinearGradient: function( shape, info ) {
|
2383 |
+
var el = this.targetElement,
|
2384 |
+
bounds = this.boundsInfo.getBounds(),
|
2385 |
+
w = bounds.w,
|
2386 |
+
h = bounds.h,
|
2387 |
+
fill = shape.fill,
|
2388 |
+
angle = info.angle,
|
2389 |
+
startPos = info.gradientStart,
|
2390 |
+
stops = info.stops,
|
2391 |
+
stopCount = stops.length,
|
2392 |
+
PI = Math.PI,
|
2393 |
+
UNDEF,
|
2394 |
+
startX, startY,
|
2395 |
+
endX, endY,
|
2396 |
+
startCornerX, startCornerY,
|
2397 |
+
endCornerX, endCornerY,
|
2398 |
+
vmlAngle, vmlGradientLength, vmlColors,
|
2399 |
+
deltaX, deltaY, lineLength,
|
2400 |
+
stopPx, vmlOffsetPct,
|
2401 |
+
p, i, j, before, after;
|
2402 |
+
|
2403 |
+
/**
|
2404 |
+
* Find the point along a given line (defined by a starting point and an angle), at which
|
2405 |
+
* that line is intersected by a perpendicular line extending through another point.
|
2406 |
+
* @param x1 - x coord of the starting point
|
2407 |
+
* @param y1 - y coord of the starting point
|
2408 |
+
* @param angle - angle of the line extending from the starting point (in degrees)
|
2409 |
+
* @param x2 - x coord of point along the perpendicular line
|
2410 |
+
* @param y2 - y coord of point along the perpendicular line
|
2411 |
+
* @return [ x, y ]
|
2412 |
+
*/
|
2413 |
+
function perpendicularIntersect( x1, y1, angle, x2, y2 ) {
|
2414 |
+
// Handle straight vertical and horizontal angles, for performance and to avoid
|
2415 |
+
// divide-by-zero errors.
|
2416 |
+
if( angle === 0 || angle === 180 ) {
|
2417 |
+
return [ x2, y1 ];
|
2418 |
+
}
|
2419 |
+
else if( angle === 90 || angle === 270 ) {
|
2420 |
+
return [ x1, y2 ];
|
2421 |
+
}
|
2422 |
+
else {
|
2423 |
+
// General approach: determine the Ax+By=C formula for each line (the slope of the second
|
2424 |
+
// line is the negative inverse of the first) and then solve for where both formulas have
|
2425 |
+
// the same x/y values.
|
2426 |
+
var a1 = Math.tan( -angle * PI / 180 ),
|
2427 |
+
c1 = a1 * x1 - y1,
|
2428 |
+
a2 = -1 / a1,
|
2429 |
+
c2 = a2 * x2 - y2,
|
2430 |
+
d = a2 - a1,
|
2431 |
+
endX = ( c2 - c1 ) / d,
|
2432 |
+
endY = ( a1 * c2 - a2 * c1 ) / d;
|
2433 |
+
return [ endX, endY ];
|
2434 |
+
}
|
2435 |
+
}
|
2436 |
+
|
2437 |
+
// Find the "start" and "end" corners; these are the corners furthest along the gradient line.
|
2438 |
+
// This is used below to find the start/end positions of the CSS3 gradient-line, and also in finding
|
2439 |
+
// the total length of the VML rendered gradient-line corner to corner.
|
2440 |
+
function findCorners() {
|
2441 |
+
startCornerX = ( angle >= 90 && angle < 270 ) ? w : 0;
|
2442 |
+
startCornerY = angle < 180 ? h : 0;
|
2443 |
+
endCornerX = w - startCornerX;
|
2444 |
+
endCornerY = h - startCornerY;
|
2445 |
+
}
|
2446 |
+
|
2447 |
+
// Normalize the angle to a value between [0, 360)
|
2448 |
+
function normalizeAngle() {
|
2449 |
+
while( angle < 0 ) {
|
2450 |
+
angle += 360;
|
2451 |
+
}
|
2452 |
+
angle = angle % 360;
|
2453 |
+
}
|
2454 |
+
|
2455 |
+
// Find the distance between two points
|
2456 |
+
function distance( p1, p2 ) {
|
2457 |
+
var dx = p2[0] - p1[0],
|
2458 |
+
dy = p2[1] - p1[1];
|
2459 |
+
return Math.abs(
|
2460 |
+
dx === 0 ? dy :
|
2461 |
+
dy === 0 ? dx :
|
2462 |
+
Math.sqrt( dx * dx + dy * dy )
|
2463 |
+
);
|
2464 |
+
}
|
2465 |
+
|
2466 |
+
// Find the start and end points of the gradient
|
2467 |
+
if( startPos ) {
|
2468 |
+
startPos = startPos.coords( el, w, h );
|
2469 |
+
startX = startPos.x;
|
2470 |
+
startY = startPos.y;
|
2471 |
+
}
|
2472 |
+
if( angle ) {
|
2473 |
+
angle = angle.degrees();
|
2474 |
+
|
2475 |
+
normalizeAngle();
|
2476 |
+
findCorners();
|
2477 |
+
|
2478 |
+
// If no start position was specified, then choose a corner as the starting point.
|
2479 |
+
if( !startPos ) {
|
2480 |
+
startX = startCornerX;
|
2481 |
+
startY = startCornerY;
|
2482 |
+
}
|
2483 |
+
|
2484 |
+
// Find the end position by extending a perpendicular line from the gradient-line which
|
2485 |
+
// intersects the corner opposite from the starting corner.
|
2486 |
+
p = perpendicularIntersect( startX, startY, angle, endCornerX, endCornerY );
|
2487 |
+
endX = p[0];
|
2488 |
+
endY = p[1];
|
2489 |
+
}
|
2490 |
+
else if( startPos ) {
|
2491 |
+
// Start position but no angle specified: find the end point by rotating 180deg around the center
|
2492 |
+
endX = w - startX;
|
2493 |
+
endY = h - startY;
|
2494 |
+
}
|
2495 |
+
else {
|
2496 |
+
// Neither position nor angle specified; create vertical gradient from top to bottom
|
2497 |
+
startX = startY = endX = 0;
|
2498 |
+
endY = h;
|
2499 |
+
}
|
2500 |
+
deltaX = endX - startX;
|
2501 |
+
deltaY = endY - startY;
|
2502 |
+
|
2503 |
+
if( angle === UNDEF ) {
|
2504 |
+
// Get the angle based on the change in x/y from start to end point. Checks first for horizontal
|
2505 |
+
// or vertical angles so they get exact whole numbers rather than what atan2 gives.
|
2506 |
+
angle = ( !deltaX ? ( deltaY < 0 ? 90 : 270 ) :
|
2507 |
+
( !deltaY ? ( deltaX < 0 ? 180 : 0 ) :
|
2508 |
+
-Math.atan2( deltaY, deltaX ) / PI * 180
|
2509 |
+
)
|
2510 |
+
);
|
2511 |
+
normalizeAngle();
|
2512 |
+
findCorners();
|
2513 |
+
}
|
2514 |
+
|
2515 |
+
|
2516 |
+
// In VML land, the angle of the rendered gradient depends on the aspect ratio of the shape's
|
2517 |
+
// bounding box; for example specifying a 45 deg angle actually results in a gradient
|
2518 |
+
// drawn diagonally from one corner to its opposite corner, which will only appear to the
|
2519 |
+
// viewer as 45 degrees if the shape is equilateral. We adjust for this by taking the x/y deltas
|
2520 |
+
// between the start and end points, multiply one of them by the shape's aspect ratio,
|
2521 |
+
// and get their arctangent, resulting in an appropriate VML angle. If the angle is perfectly
|
2522 |
+
// horizontal or vertical then we don't need to do this conversion.
|
2523 |
+
vmlAngle = ( angle % 90 ) ? Math.atan2( deltaX * w / h, deltaY ) / PI * 180 : ( angle + 90 );
|
2524 |
+
|
2525 |
+
// VML angles are 180 degrees offset from CSS angles
|
2526 |
+
vmlAngle += 180;
|
2527 |
+
vmlAngle = vmlAngle % 360;
|
2528 |
+
|
2529 |
+
// Add all the stops to the VML 'colors' list, including the first and last stops.
|
2530 |
+
// For each, we find its pixel offset along the gradient-line; if the offset of a stop is less
|
2531 |
+
// than that of its predecessor we increase it to be equal. We then map that pixel offset to a
|
2532 |
+
// percentage along the VML gradient-line, which runs from shape corner to corner.
|
2533 |
+
lineLength = distance( [ startX, startY ], [ endX, endY ] );
|
2534 |
+
vmlGradientLength = distance( [ startCornerX, startCornerY ], perpendicularIntersect( startCornerX, startCornerY, angle, endCornerX, endCornerY ) );
|
2535 |
+
vmlColors = [];
|
2536 |
+
vmlOffsetPct = distance( [ startX, startY ], perpendicularIntersect( startX, startY, angle, startCornerX, startCornerY ) ) / vmlGradientLength * 100;
|
2537 |
+
|
2538 |
+
// Find the pixel offsets along the CSS3 gradient-line for each stop.
|
2539 |
+
stopPx = [];
|
2540 |
+
for( i = 0; i < stopCount; i++ ) {
|
2541 |
+
stopPx.push( stops[i].offset ? stops[i].offset.pixels( el, lineLength ) :
|
2542 |
+
i === 0 ? 0 : i === stopCount - 1 ? lineLength : null );
|
2543 |
+
}
|
2544 |
+
// Fill in gaps with evenly-spaced offsets
|
2545 |
+
for( i = 1; i < stopCount; i++ ) {
|
2546 |
+
if( stopPx[ i ] === null ) {
|
2547 |
+
before = stopPx[ i - 1 ];
|
2548 |
+
j = i;
|
2549 |
+
do {
|
2550 |
+
after = stopPx[ ++j ];
|
2551 |
+
} while( after === null );
|
2552 |
+
stopPx[ i ] = before + ( after - before ) / ( j - i + 1 );
|
2553 |
+
}
|
2554 |
+
// Make sure each stop's offset is no less than the one before it
|
2555 |
+
stopPx[ i ] = Math.max( stopPx[ i ], stopPx[ i - 1 ] );
|
2556 |
+
}
|
2557 |
+
|
2558 |
+
// Convert to percentage along the VML gradient line and add to the VML 'colors' value
|
2559 |
+
for( i = 0; i < stopCount; i++ ) {
|
2560 |
+
vmlColors.push(
|
2561 |
+
( vmlOffsetPct + ( stopPx[ i ] / vmlGradientLength * 100 ) ) + '% ' + stops[i].color.colorValue( el )
|
2562 |
+
);
|
2563 |
+
}
|
2564 |
+
|
2565 |
+
// Now, finally, we're ready to render the gradient fill. Set the start and end colors to
|
2566 |
+
// the first and last stop colors; this just sets outer bounds for the gradient.
|
2567 |
+
fill['angle'] = vmlAngle;
|
2568 |
+
fill['type'] = 'gradient';
|
2569 |
+
fill['method'] = 'sigma';
|
2570 |
+
fill['color'] = stops[0].color.colorValue( el );
|
2571 |
+
fill['color2'] = stops[stopCount - 1].color.colorValue( el );
|
2572 |
+
fill['colors'].value = vmlColors.join( ',' );
|
2573 |
+
},
|
2574 |
+
|
2575 |
+
|
2576 |
+
/**
|
2577 |
+
* Hide the actual background image and color of the element.
|
2578 |
+
*/
|
2579 |
+
hideBackground: function() {
|
2580 |
+
var rs = this.targetElement.runtimeStyle;
|
2581 |
+
rs.backgroundImage = 'url(about:blank)'; //ensures the background area reacts to mouse events
|
2582 |
+
rs.backgroundColor = 'transparent';
|
2583 |
+
},
|
2584 |
+
|
2585 |
+
destroy: function() {
|
2586 |
+
PIE.RendererBase.destroy.call( this );
|
2587 |
+
var rs = this.targetElement.runtimeStyle;
|
2588 |
+
rs.backgroundImage = rs.backgroundColor = '';
|
2589 |
+
}
|
2590 |
+
|
2591 |
+
} );
|
2592 |
+
/**
|
2593 |
+
* Renderer for element borders.
|
2594 |
+
* @constructor
|
2595 |
+
* @param {Element} el The target element
|
2596 |
+
* @param {Object} styleInfos The StyleInfo objects
|
2597 |
+
* @param {PIE.RootRenderer} parent
|
2598 |
+
*/
|
2599 |
+
PIE.BorderRenderer = PIE.RendererBase.newRenderer( {
|
2600 |
+
|
2601 |
+
boxZIndex: 4,
|
2602 |
+
boxName: 'border',
|
2603 |
+
|
2604 |
+
/**
|
2605 |
+
* Lookup table of elements which cannot take custom children.
|
2606 |
+
*/
|
2607 |
+
childlessElements: {
|
2608 |
+
'TABLE':1, //can obviously have children but not custom ones
|
2609 |
+
'INPUT':1,
|
2610 |
+
'TEXTAREA':1,
|
2611 |
+
'SELECT':1,
|
2612 |
+
'OPTION':1,
|
2613 |
+
'IMG':1,
|
2614 |
+
'HR':1,
|
2615 |
+
'FIELDSET':1 //can take children but wrapping its children messes up its <legend>
|
2616 |
+
},
|
2617 |
+
|
2618 |
+
/**
|
2619 |
+
* Values of the type attribute for input elements displayed as buttons
|
2620 |
+
*/
|
2621 |
+
inputButtonTypes: {
|
2622 |
+
'submit':1,
|
2623 |
+
'button':1,
|
2624 |
+
'reset':1
|
2625 |
+
},
|
2626 |
+
|
2627 |
+
needsUpdate: function() {
|
2628 |
+
var si = this.styleInfos;
|
2629 |
+
return si.borderInfo.changed() || si.borderRadiusInfo.changed();
|
2630 |
+
},
|
2631 |
+
|
2632 |
+
isActive: function() {
|
2633 |
+
var si = this.styleInfos;
|
2634 |
+
return ( si.borderImageInfo.isActive() ||
|
2635 |
+
si.borderRadiusInfo.isActive() ||
|
2636 |
+
si.backgroundInfo.isActive() ) &&
|
2637 |
+
si.borderInfo.isActive(); //check BorderStyleInfo last because it's the most expensive
|
2638 |
+
},
|
2639 |
+
|
2640 |
+
/**
|
2641 |
+
* Draw the border shape(s)
|
2642 |
+
*/
|
2643 |
+
draw: function() {
|
2644 |
+
var el = this.targetElement,
|
2645 |
+
cs = el.currentStyle,
|
2646 |
+
props = this.styleInfos.borderInfo.getProps(),
|
2647 |
+
bounds = this.boundsInfo.getBounds(),
|
2648 |
+
w = bounds.w,
|
2649 |
+
h = bounds.h,
|
2650 |
+
side, shape, stroke, s,
|
2651 |
+
segments, seg, i, len;
|
2652 |
+
|
2653 |
+
if( props ) {
|
2654 |
+
this.hideBorder();
|
2655 |
+
|
2656 |
+
segments = this.getBorderSegments( 2 );
|
2657 |
+
for( i = 0, len = segments.length; i < len; i++) {
|
2658 |
+
seg = segments[i];
|
2659 |
+
shape = this.getShape( 'borderPiece' + i, seg.stroke ? 'stroke' : 'fill', this.getBox() );
|
2660 |
+
shape.coordsize = w * 2 + ',' + h * 2;
|
2661 |
+
shape.coordorigin = '1,1';
|
2662 |
+
shape.path = seg.path;
|
2663 |
+
s = shape.style;
|
2664 |
+
s.width = w;
|
2665 |
+
s.height = h;
|
2666 |
+
|
2667 |
+
shape.filled = !!seg.fill;
|
2668 |
+
shape.stroked = !!seg.stroke;
|
2669 |
+
if( seg.stroke ) {
|
2670 |
+
stroke = shape.stroke;
|
2671 |
+
stroke['weight'] = seg.weight + 'px';
|
2672 |
+
stroke.color = seg.color.colorValue( el );
|
2673 |
+
stroke['dashstyle'] = seg.stroke === 'dashed' ? '2 2' : seg.stroke === 'dotted' ? '1 1' : 'solid';
|
2674 |
+
stroke['linestyle'] = seg.stroke === 'double' && seg.weight > 2 ? 'ThinThin' : 'Single';
|
2675 |
+
} else {
|
2676 |
+
shape.fill.color = seg.fill.colorValue( el );
|
2677 |
+
}
|
2678 |
+
}
|
2679 |
+
|
2680 |
+
// remove any previously-created border shapes which didn't get used above
|
2681 |
+
while( this.deleteShape( 'borderPiece' + i++ ) ) {}
|
2682 |
+
}
|
2683 |
+
},
|
2684 |
+
|
2685 |
+
/**
|
2686 |
+
* Hide the actual border of the element. In IE7 and up we can just set its color to transparent;
|
2687 |
+
* however IE6 does not support transparent borders so we have to get tricky with it. Also, some elements
|
2688 |
+
* like form buttons require removing the border width altogether, so for those we increase the padding
|
2689 |
+
* by the border size.
|
2690 |
+
*/
|
2691 |
+
hideBorder: function() {
|
2692 |
+
var el = this.targetElement,
|
2693 |
+
cs = el.currentStyle,
|
2694 |
+
rs = el.runtimeStyle,
|
2695 |
+
tag = el.tagName,
|
2696 |
+
isIE6 = PIE.ieVersion === 6,
|
2697 |
+
sides, side, i;
|
2698 |
+
|
2699 |
+
if( ( isIE6 && tag in this.childlessElements ) || tag === 'BUTTON' ||
|
2700 |
+
( tag === 'INPUT' && el.type in this.inputButtonTypes ) ) {
|
2701 |
+
rs.borderWidth = '';
|
2702 |
+
sides = this.styleInfos.borderInfo.sides;
|
2703 |
+
for( i = sides.length; i--; ) {
|
2704 |
+
side = sides[ i ];
|
2705 |
+
rs[ 'padding' + side ] = '';
|
2706 |
+
rs[ 'padding' + side ] = ( PIE.getLength( cs[ 'padding' + side ] ) ).pixels( el ) +
|
2707 |
+
( PIE.getLength( cs[ 'border' + side + 'Width' ] ) ).pixels( el ) +
|
2708 |
+
( !PIE.ieVersion === 8 && i % 2 ? 1 : 0 ); //needs an extra horizontal pixel to counteract the extra "inner border" going away
|
2709 |
+
}
|
2710 |
+
rs.borderWidth = 0;
|
2711 |
+
}
|
2712 |
+
else if( isIE6 ) {
|
2713 |
+
// Wrap all the element's children in a custom element, set the element to visiblity:hidden,
|
2714 |
+
// and set the wrapper element to visiblity:visible. This hides the outer element's decorations
|
2715 |
+
// (background and border) but displays all the contents.
|
2716 |
+
// TODO find a better way to do this that doesn't mess up the DOM parent-child relationship,
|
2717 |
+
// as this can interfere with other author scripts which add/modify/delete children. Also, this
|
2718 |
+
// won't work for elements which cannot take children, e.g. input/button/textarea/img/etc. Look into
|
2719 |
+
// using a compositor filter or some other filter which masks the border.
|
2720 |
+
if( el.childNodes.length !== 1 || el.firstChild.tagName !== 'ie6-mask' ) {
|
2721 |
+
var cont = doc.createElement( 'ie6-mask' ),
|
2722 |
+
s = cont.style, child;
|
2723 |
+
s.visibility = 'visible';
|
2724 |
+
s.zoom = 1;
|
2725 |
+
while( child = el.firstChild ) {
|
2726 |
+
cont.appendChild( child );
|
2727 |
+
}
|
2728 |
+
el.appendChild( cont );
|
2729 |
+
rs.visibility = 'hidden';
|
2730 |
+
}
|
2731 |
+
}
|
2732 |
+
else {
|
2733 |
+
rs.borderColor = 'transparent';
|
2734 |
+
}
|
2735 |
+
},
|
2736 |
+
|
2737 |
+
|
2738 |
+
/**
|
2739 |
+
* Get the VML path definitions for the border segment(s).
|
2740 |
+
* @param {number=} mult If specified, all coordinates will be multiplied by this number
|
2741 |
+
* @return {Array.<string>}
|
2742 |
+
*/
|
2743 |
+
getBorderSegments: function( mult ) {
|
2744 |
+
var el = this.targetElement,
|
2745 |
+
bounds, elW, elH,
|
2746 |
+
borderInfo = this.styleInfos.borderInfo,
|
2747 |
+
segments = [],
|
2748 |
+
floor, ceil, wT, wR, wB, wL,
|
2749 |
+
round = Math.round,
|
2750 |
+
borderProps, radiusInfo, radii, widths, styles, colors;
|
2751 |
+
|
2752 |
+
if( borderInfo.isActive() ) {
|
2753 |
+
borderProps = borderInfo.getProps();
|
2754 |
+
|
2755 |
+
widths = borderProps.widths;
|
2756 |
+
styles = borderProps.styles;
|
2757 |
+
colors = borderProps.colors;
|
2758 |
+
|
2759 |
+
if( borderProps.widthsSame && borderProps.stylesSame && borderProps.colorsSame ) {
|
2760 |
+
if( colors['t'].alpha() > 0 ) {
|
2761 |
+
// shortcut for identical border on all sides - only need 1 stroked shape
|
2762 |
+
wT = widths['t'].pixels( el ); //thickness
|
2763 |
+
wR = wT / 2; //shrink
|
2764 |
+
segments.push( {
|
2765 |
+
path: this.getBoxPath( { t: wR, r: wR, b: wR, l: wR }, mult ),
|
2766 |
+
stroke: styles['t'],
|
2767 |
+
color: colors['t'],
|
2768 |
+
weight: wT
|
2769 |
+
} );
|
2770 |
+
}
|
2771 |
+
}
|
2772 |
+
else {
|
2773 |
+
mult = mult || 1;
|
2774 |
+
bounds = this.boundsInfo.getBounds();
|
2775 |
+
elW = bounds.w;
|
2776 |
+
elH = bounds.h;
|
2777 |
+
|
2778 |
+
wT = round( widths['t'].pixels( el ) );
|
2779 |
+
wR = round( widths['r'].pixels( el ) );
|
2780 |
+
wB = round( widths['b'].pixels( el ) );
|
2781 |
+
wL = round( widths['l'].pixels( el ) );
|
2782 |
+
var pxWidths = {
|
2783 |
+
't': wT,
|
2784 |
+
'r': wR,
|
2785 |
+
'b': wB,
|
2786 |
+
'l': wL
|
2787 |
+
};
|
2788 |
+
|
2789 |
+
radiusInfo = this.styleInfos.borderRadiusInfo;
|
2790 |
+
if( radiusInfo.isActive() ) {
|
2791 |
+
radii = this.getRadiiPixels( radiusInfo.getProps() );
|
2792 |
+
}
|
2793 |
+
|
2794 |
+
floor = Math.floor;
|
2795 |
+
ceil = Math.ceil;
|
2796 |
+
|
2797 |
+
function radius( xy, corner ) {
|
2798 |
+
return radii ? radii[ xy ][ corner ] : 0;
|
2799 |
+
}
|
2800 |
+
|
2801 |
+
function curve( corner, shrinkX, shrinkY, startAngle, ccw, doMove ) {
|
2802 |
+
var rx = radius( 'x', corner),
|
2803 |
+
ry = radius( 'y', corner),
|
2804 |
+
deg = 65535,
|
2805 |
+
isRight = corner.charAt( 1 ) === 'r',
|
2806 |
+
isBottom = corner.charAt( 0 ) === 'b';
|
2807 |
+
return ( rx > 0 && ry > 0 ) ?
|
2808 |
+
( doMove ? 'al' : 'ae' ) +
|
2809 |
+
( isRight ? ceil( elW - rx ) : floor( rx ) ) * mult + ',' + // center x
|
2810 |
+
( isBottom ? ceil( elH - ry ) : floor( ry ) ) * mult + ',' + // center y
|
2811 |
+
( floor( rx ) - shrinkX ) * mult + ',' + // width
|
2812 |
+
( floor( ry ) - shrinkY ) * mult + ',' + // height
|
2813 |
+
( startAngle * deg ) + ',' + // start angle
|
2814 |
+
( 45 * deg * ( ccw ? 1 : -1 ) // angle change
|
2815 |
+
) : (
|
2816 |
+
( doMove ? 'm' : 'l' ) +
|
2817 |
+
( isRight ? elW - shrinkX : shrinkX ) * mult + ',' +
|
2818 |
+
( isBottom ? elH - shrinkY : shrinkY ) * mult
|
2819 |
+
);
|
2820 |
+
}
|
2821 |
+
|
2822 |
+
function line( side, shrink, ccw, doMove ) {
|
2823 |
+
var
|
2824 |
+
start = (
|
2825 |
+
side === 't' ?
|
2826 |
+
floor( radius( 'x', 'tl') ) * mult + ',' + ceil( shrink ) * mult :
|
2827 |
+
side === 'r' ?
|
2828 |
+
ceil( elW - shrink ) * mult + ',' + floor( radius( 'y', 'tr') ) * mult :
|
2829 |
+
side === 'b' ?
|
2830 |
+
ceil( elW - radius( 'x', 'br') ) * mult + ',' + floor( elH - shrink ) * mult :
|
2831 |
+
// side === 'l' ?
|
2832 |
+
floor( shrink ) * mult + ',' + ceil( elH - radius( 'y', 'bl') ) * mult
|
2833 |
+
),
|
2834 |
+
end = (
|
2835 |
+
side === 't' ?
|
2836 |
+
ceil( elW - radius( 'x', 'tr') ) * mult + ',' + ceil( shrink ) * mult :
|
2837 |
+
side === 'r' ?
|
2838 |
+
ceil( elW - shrink ) * mult + ',' + ceil( elH - radius( 'y', 'br') ) * mult :
|
2839 |
+
side === 'b' ?
|
2840 |
+
floor( radius( 'x', 'bl') ) * mult + ',' + floor( elH - shrink ) * mult :
|
2841 |
+
// side === 'l' ?
|
2842 |
+
floor( shrink ) * mult + ',' + floor( radius( 'y', 'tl') ) * mult
|
2843 |
+
);
|
2844 |
+
return ccw ? ( doMove ? 'm' + end : '' ) + 'l' + start :
|
2845 |
+
( doMove ? 'm' + start : '' ) + 'l' + end;
|
2846 |
+
}
|
2847 |
+
|
2848 |
+
|
2849 |
+
function addSide( side, sideBefore, sideAfter, cornerBefore, cornerAfter, baseAngle ) {
|
2850 |
+
var vert = side === 'l' || side === 'r',
|
2851 |
+
sideW = pxWidths[ side ],
|
2852 |
+
beforeX, beforeY, afterX, afterY;
|
2853 |
+
|
2854 |
+
if( sideW > 0 && styles[ side ] !== 'none' && colors[ side ].alpha() > 0 ) {
|
2855 |
+
beforeX = pxWidths[ vert ? side : sideBefore ];
|
2856 |
+
beforeY = pxWidths[ vert ? sideBefore : side ];
|
2857 |
+
afterX = pxWidths[ vert ? side : sideAfter ];
|
2858 |
+
afterY = pxWidths[ vert ? sideAfter : side ];
|
2859 |
+
|
2860 |
+
if( styles[ side ] === 'dashed' || styles[ side ] === 'dotted' ) {
|
2861 |
+
segments.push( {
|
2862 |
+
path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) +
|
2863 |
+
curve( cornerBefore, 0, 0, baseAngle, 1, 0 ),
|
2864 |
+
fill: colors[ side ]
|
2865 |
+
} );
|
2866 |
+
segments.push( {
|
2867 |
+
path: line( side, sideW / 2, 0, 1 ),
|
2868 |
+
stroke: styles[ side ],
|
2869 |
+
weight: sideW,
|
2870 |
+
color: colors[ side ]
|
2871 |
+
} );
|
2872 |
+
segments.push( {
|
2873 |
+
path: curve( cornerAfter, afterX, afterY, baseAngle, 0, 1 ) +
|
2874 |
+
curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ),
|
2875 |
+
fill: colors[ side ]
|
2876 |
+
} );
|
2877 |
+
}
|
2878 |
+
else {
|
2879 |
+
segments.push( {
|
2880 |
+
path: curve( cornerBefore, beforeX, beforeY, baseAngle + 45, 0, 1 ) +
|
2881 |
+
line( side, sideW, 0, 0 ) +
|
2882 |
+
curve( cornerAfter, afterX, afterY, baseAngle, 0, 0 ) +
|
2883 |
+
|
2884 |
+
( styles[ side ] === 'double' && sideW > 2 ?
|
2885 |
+
curve( cornerAfter, afterX - floor( afterX / 3 ), afterY - floor( afterY / 3 ), baseAngle - 45, 1, 0 ) +
|
2886 |
+
line( side, ceil( sideW / 3 * 2 ), 1, 0 ) +
|
2887 |
+
curve( cornerBefore, beforeX - floor( beforeX / 3 ), beforeY - floor( beforeY / 3 ), baseAngle, 1, 0 ) +
|
2888 |
+
'x ' +
|
2889 |
+
curve( cornerBefore, floor( beforeX / 3 ), floor( beforeY / 3 ), baseAngle + 45, 0, 1 ) +
|
2890 |
+
line( side, floor( sideW / 3 ), 1, 0 ) +
|
2891 |
+
curve( cornerAfter, floor( afterX / 3 ), floor( afterY / 3 ), baseAngle, 0, 0 )
|
2892 |
+
: '' ) +
|
2893 |
+
|
2894 |
+
curve( cornerAfter, 0, 0, baseAngle - 45, 1, 0 ) +
|
2895 |
+
line( side, 0, 1, 0 ) +
|
2896 |
+
curve( cornerBefore, 0, 0, baseAngle, 1, 0 ),
|
2897 |
+
fill: colors[ side ]
|
2898 |
+
} );
|
2899 |
+
}
|
2900 |
+
}
|
2901 |
+
}
|
2902 |
+
|
2903 |
+
addSide( 't', 'l', 'r', 'tl', 'tr', 90 );
|
2904 |
+
addSide( 'r', 't', 'b', 'tr', 'br', 0 );
|
2905 |
+
addSide( 'b', 'r', 'l', 'br', 'bl', -90 );
|
2906 |
+
addSide( 'l', 'b', 't', 'bl', 'tl', -180 );
|
2907 |
+
}
|
2908 |
+
}
|
2909 |
+
|
2910 |
+
return segments;
|
2911 |
+
},
|
2912 |
+
|
2913 |
+
destroy: function() {
|
2914 |
+
PIE.RendererBase.destroy.call( this );
|
2915 |
+
this.targetElement.runtimeStyle.borderColor = '';
|
2916 |
+
}
|
2917 |
+
|
2918 |
+
|
2919 |
+
} );
|
2920 |
+
/**
|
2921 |
+
* Renderer for border-image
|
2922 |
+
* @constructor
|
2923 |
+
* @param {Element} el The target element
|
2924 |
+
* @param {Object} styleInfos The StyleInfo objects
|
2925 |
+
* @param {PIE.RootRenderer} parent
|
2926 |
+
*/
|
2927 |
+
PIE.BorderImageRenderer = PIE.RendererBase.newRenderer( {
|
2928 |
+
|
2929 |
+
boxZIndex: 5,
|
2930 |
+
pieceNames: [ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl', 'c' ],
|
2931 |
+
|
2932 |
+
needsUpdate: function() {
|
2933 |
+
return this.styleInfos.borderImageInfo.changed();
|
2934 |
+
},
|
2935 |
+
|
2936 |
+
isActive: function() {
|
2937 |
+
return this.styleInfos.borderImageInfo.isActive();
|
2938 |
+
},
|
2939 |
+
|
2940 |
+
draw: function() {
|
2941 |
+
this.getBox(); //make sure pieces are created
|
2942 |
+
|
2943 |
+
var props = this.styleInfos.borderImageInfo.getProps(),
|
2944 |
+
bounds = this.boundsInfo.getBounds(),
|
2945 |
+
el = this.targetElement,
|
2946 |
+
pieces = this.pieces;
|
2947 |
+
|
2948 |
+
PIE.Util.withImageSize( props.src, function( imgSize ) {
|
2949 |
+
var elW = bounds.w,
|
2950 |
+
elH = bounds.h,
|
2951 |
+
|
2952 |
+
widths = props.width,
|
2953 |
+
widthT = widths.t.pixels( el ),
|
2954 |
+
widthR = widths.r.pixels( el ),
|
2955 |
+
widthB = widths.b.pixels( el ),
|
2956 |
+
widthL = widths.l.pixels( el ),
|
2957 |
+
slices = props.slice,
|
2958 |
+
sliceT = slices.t.pixels( el ),
|
2959 |
+
sliceR = slices.r.pixels( el ),
|
2960 |
+
sliceB = slices.b.pixels( el ),
|
2961 |
+
sliceL = slices.l.pixels( el );
|
2962 |
+
|
2963 |
+
// Piece positions and sizes
|
2964 |
+
function setSizeAndPos( piece, w, h, x, y ) {
|
2965 |
+
var s = pieces[piece].style,
|
2966 |
+
max = Math.max;
|
2967 |
+
s.width = max(w, 0);
|
2968 |
+
s.height = max(h, 0);
|
2969 |
+
s.left = x;
|
2970 |
+
s.top = y;
|
2971 |
+
}
|
2972 |
+
setSizeAndPos( 'tl', widthL, widthT, 0, 0 );
|
2973 |
+
setSizeAndPos( 't', elW - widthL - widthR, widthT, widthL, 0 );
|
2974 |
+
setSizeAndPos( 'tr', widthR, widthT, elW - widthR, 0 );
|
2975 |
+
setSizeAndPos( 'r', widthR, elH - widthT - widthB, elW - widthR, widthT );
|
2976 |
+
setSizeAndPos( 'br', widthR, widthB, elW - widthR, elH - widthB );
|
2977 |
+
setSizeAndPos( 'b', elW - widthL - widthR, widthB, widthL, elH - widthB );
|
2978 |
+
setSizeAndPos( 'bl', widthL, widthB, 0, elH - widthB );
|
2979 |
+
setSizeAndPos( 'l', widthL, elH - widthT - widthB, 0, widthT );
|
2980 |
+
setSizeAndPos( 'c', elW - widthL - widthR, elH - widthT - widthB, widthL, widthT );
|
2981 |
+
|
2982 |
+
|
2983 |
+
// image croppings
|
2984 |
+
function setCrops( sides, crop, val ) {
|
2985 |
+
for( var i=0, len=sides.length; i < len; i++ ) {
|
2986 |
+
pieces[ sides[i] ]['imagedata'][ crop ] = val;
|
2987 |
+
}
|
2988 |
+
}
|
2989 |
+
|
2990 |
+
// corners
|
2991 |
+
setCrops( [ 'tl', 't', 'tr' ], 'cropBottom', ( imgSize.h - sliceT ) / imgSize.h );
|
2992 |
+
setCrops( [ 'tl', 'l', 'bl' ], 'cropRight', ( imgSize.w - sliceL ) / imgSize.w );
|
2993 |
+
setCrops( [ 'bl', 'b', 'br' ], 'cropTop', ( imgSize.h - sliceB ) / imgSize.h );
|
2994 |
+
setCrops( [ 'tr', 'r', 'br' ], 'cropLeft', ( imgSize.w - sliceR ) / imgSize.w );
|
2995 |
+
|
2996 |
+
// edges and center
|
2997 |
+
if( props.repeat.v === 'stretch' ) {
|
2998 |
+
setCrops( [ 'l', 'r', 'c' ], 'cropTop', sliceT / imgSize.h );
|
2999 |
+
setCrops( [ 'l', 'r', 'c' ], 'cropBottom', sliceB / imgSize.h );
|
3000 |
+
}
|
3001 |
+
if( props.repeat.h === 'stretch' ) {
|
3002 |
+
setCrops( [ 't', 'b', 'c' ], 'cropLeft', sliceL / imgSize.w );
|
3003 |
+
setCrops( [ 't', 'b', 'c' ], 'cropRight', sliceR / imgSize.w );
|
3004 |
+
}
|
3005 |
+
|
3006 |
+
// center fill
|
3007 |
+
pieces['c'].style.display = props.fill ? '' : 'none';
|
3008 |
+
}, this );
|
3009 |
+
},
|
3010 |
+
|
3011 |
+
getBox: function() {
|
3012 |
+
var box = this.parent.getLayer( this.boxZIndex ),
|
3013 |
+
s, piece, i,
|
3014 |
+
pieceNames = this.pieceNames,
|
3015 |
+
len = pieceNames.length;
|
3016 |
+
|
3017 |
+
if( !box ) {
|
3018 |
+
box = doc.createElement( 'border-image' );
|
3019 |
+
s = box.style;
|
3020 |
+
s.position = 'absolute';
|
3021 |
+
|
3022 |
+
this.pieces = {};
|
3023 |
+
|
3024 |
+
for( i = 0; i < len; i++ ) {
|
3025 |
+
piece = this.pieces[ pieceNames[i] ] = PIE.Util.createVmlElement( 'rect' );
|
3026 |
+
piece.appendChild( PIE.Util.createVmlElement( 'imagedata' ) );
|
3027 |
+
s = piece.style;
|
3028 |
+
s['behavior'] = 'url(#default#VML)';
|
3029 |
+
s.position = "absolute";
|
3030 |
+
s.top = s.left = 0;
|
3031 |
+
piece['imagedata'].src = this.styleInfos.borderImageInfo.getProps().src;
|
3032 |
+
piece.stroked = false;
|
3033 |
+
piece.filled = false;
|
3034 |
+
box.appendChild( piece );
|
3035 |
+
}
|
3036 |
+
|
3037 |
+
this.parent.addLayer( this.boxZIndex, box );
|
3038 |
+
}
|
3039 |
+
|
3040 |
+
return box;
|
3041 |
+
}
|
3042 |
+
|
3043 |
+
} );
|
3044 |
+
/**
|
3045 |
+
* Renderer for outset box-shadows
|
3046 |
+
* @constructor
|
3047 |
+
* @param {Element} el The target element
|
3048 |
+
* @param {Object} styleInfos The StyleInfo objects
|
3049 |
+
* @param {PIE.RootRenderer} parent
|
3050 |
+
*/
|
3051 |
+
PIE.BoxShadowOutsetRenderer = PIE.RendererBase.newRenderer( {
|
3052 |
+
|
3053 |
+
boxZIndex: 1,
|
3054 |
+
boxName: 'outset-box-shadow',
|
3055 |
+
|
3056 |
+
needsUpdate: function() {
|
3057 |
+
var si = this.styleInfos;
|
3058 |
+
return si.boxShadowInfo.changed() || si.borderRadiusInfo.changed();
|
3059 |
+
},
|
3060 |
+
|
3061 |
+
isActive: function() {
|
3062 |
+
var boxShadowInfo = this.styleInfos.boxShadowInfo;
|
3063 |
+
return boxShadowInfo.isActive() && boxShadowInfo.getProps().outset[0];
|
3064 |
+
},
|
3065 |
+
|
3066 |
+
draw: function() {
|
3067 |
+
var me = this,
|
3068 |
+
el = this.targetElement,
|
3069 |
+
box = this.getBox(),
|
3070 |
+
styleInfos = this.styleInfos,
|
3071 |
+
shadowInfos = styleInfos.boxShadowInfo.getProps().outset,
|
3072 |
+
radii = styleInfos.borderRadiusInfo.getProps(),
|
3073 |
+
len = shadowInfos.length,
|
3074 |
+
i = len, j,
|
3075 |
+
bounds = this.boundsInfo.getBounds(),
|
3076 |
+
w = bounds.w,
|
3077 |
+
h = bounds.h,
|
3078 |
+
clipAdjust = PIE.ieVersion === 8 ? 1 : 0, //workaround for IE8 bug where VML leaks out top/left of clip region by 1px
|
3079 |
+
corners = [ 'tl', 'tr', 'br', 'bl' ], corner,
|
3080 |
+
shadowInfo, shape, fill, ss, xOff, yOff, spread, blur, shrink, color, alpha, path,
|
3081 |
+
totalW, totalH, focusX, focusY, isBottom, isRight;
|
3082 |
+
|
3083 |
+
|
3084 |
+
function getShadowShape( index, corner, xOff, yOff, color, blur, path ) {
|
3085 |
+
var shape = me.getShape( 'shadow' + index + corner, 'fill', box, len - index ),
|
3086 |
+
fill = shape.fill;
|
3087 |
+
|
3088 |
+
// Position and size
|
3089 |
+
shape['coordsize'] = w * 2 + ',' + h * 2;
|
3090 |
+
shape['coordorigin'] = '1,1';
|
3091 |
+
|
3092 |
+
// Color and opacity
|
3093 |
+
shape['stroked'] = false;
|
3094 |
+
shape['filled'] = true;
|
3095 |
+
fill.color = color.colorValue( el );
|
3096 |
+
if( blur ) {
|
3097 |
+
fill['type'] = 'gradienttitle'; //makes the VML gradient follow the shape's outline - hooray for undocumented features?!?!
|
3098 |
+
fill['color2'] = fill.color;
|
3099 |
+
fill['opacity'] = 0;
|
3100 |
+
}
|
3101 |
+
|
3102 |
+
// Path
|
3103 |
+
shape.path = path;
|
3104 |
+
|
3105 |
+
// This needs to go last for some reason, to prevent rendering at incorrect size
|
3106 |
+
ss = shape.style;
|
3107 |
+
ss.left = xOff;
|
3108 |
+
ss.top = yOff;
|
3109 |
+
ss.width = w;
|
3110 |
+
ss.height = h;
|
3111 |
+
|
3112 |
+
return shape;
|
3113 |
+
}
|
3114 |
+
|
3115 |
+
|
3116 |
+
while( i-- ) {
|
3117 |
+
shadowInfo = shadowInfos[ i ];
|
3118 |
+
xOff = shadowInfo.xOffset.pixels( el );
|
3119 |
+
yOff = shadowInfo.yOffset.pixels( el );
|
3120 |
+
spread = shadowInfo.spread.pixels( el ),
|
3121 |
+
blur = shadowInfo.blur.pixels( el );
|
3122 |
+
color = shadowInfo.color;
|
3123 |
+
// Shape path
|
3124 |
+
shrink = -spread - blur;
|
3125 |
+
if( !radii && blur ) {
|
3126 |
+
// If blurring, use a non-null border radius info object so that getBoxPath will
|
3127 |
+
// round the corners of the expanded shadow shape rather than squaring them off.
|
3128 |
+
radii = PIE.BorderRadiusStyleInfo.ALL_ZERO;
|
3129 |
+
}
|
3130 |
+
path = this.getBoxPath( { t: shrink, r: shrink, b: shrink, l: shrink }, 2, radii );
|
3131 |
+
|
3132 |
+
if( blur ) {
|
3133 |
+
totalW = ( spread + blur ) * 2 + w;
|
3134 |
+
totalH = ( spread + blur ) * 2 + h;
|
3135 |
+
focusX = blur * 2 / totalW;
|
3136 |
+
focusY = blur * 2 / totalH;
|
3137 |
+
if( blur - spread > w / 2 || blur - spread > h / 2 ) {
|
3138 |
+
// If the blur is larger than half the element's narrowest dimension, we cannot do
|
3139 |
+
// this with a single shape gradient, because its focussize would have to be less than
|
3140 |
+
// zero which results in ugly artifacts. Instead we create four shapes, each with its
|
3141 |
+
// gradient focus past center, and then clip them so each only shows the quadrant
|
3142 |
+
// opposite the focus.
|
3143 |
+
for( j = 4; j--; ) {
|
3144 |
+
corner = corners[j];
|
3145 |
+
isBottom = corner.charAt( 0 ) === 'b';
|
3146 |
+
isRight = corner.charAt( 1 ) === 'r';
|
3147 |
+
shape = getShadowShape( i, corner, xOff, yOff, color, blur, path );
|
3148 |
+
fill = shape.fill;
|
3149 |
+
fill['focusposition'] = ( isRight ? 1 - focusX : focusX ) + ',' +
|
3150 |
+
( isBottom ? 1 - focusY : focusY );
|
3151 |
+
fill['focussize'] = '0,0';
|
3152 |
+
|
3153 |
+
// Clip to show only the appropriate quadrant. Add 1px to the top/left clip values
|
3154 |
+
// in IE8 to prevent a bug where IE8 displays one pixel outside the clip region.
|
3155 |
+
shape.style.clip = 'rect(' + ( ( isBottom ? totalH / 2 : 0 ) + clipAdjust ) + 'px,' +
|
3156 |
+
( isRight ? totalW : totalW / 2 ) + 'px,' +
|
3157 |
+
( isBottom ? totalH : totalH / 2 ) + 'px,' +
|
3158 |
+
( ( isRight ? totalW / 2 : 0 ) + clipAdjust ) + 'px)';
|
3159 |
+
}
|
3160 |
+
} else {
|
3161 |
+
// TODO delete old quadrant shapes if resizing expands past the barrier
|
3162 |
+
shape = getShadowShape( i, '', xOff, yOff, color, blur, path );
|
3163 |
+
fill = shape.fill;
|
3164 |
+
fill['focusposition'] = focusX + ',' + focusY;
|
3165 |
+
fill['focussize'] = ( 1 - focusX * 2 ) + ',' + ( 1 - focusY * 2 );
|
3166 |
+
}
|
3167 |
+
} else {
|
3168 |
+
shape = getShadowShape( i, '', xOff, yOff, color, blur, path );
|
3169 |
+
alpha = color.alpha();
|
3170 |
+
if( alpha < 1 ) {
|
3171 |
+
// shape.style.filter = 'alpha(opacity=' + ( alpha * 100 ) + ')';
|
3172 |
+
// ss.filter = 'progid:DXImageTransform.Microsoft.BasicImage(opacity=' + ( alpha ) + ')';
|
3173 |
+
shape.fill.opacity = alpha;
|
3174 |
+
}
|
3175 |
+
}
|
3176 |
+
}
|
3177 |
+
}
|
3178 |
+
|
3179 |
+
} );
|
3180 |
+
/**
|
3181 |
+
* Renderer for re-rendering img elements using VML. Kicks in if the img has
|
3182 |
+
* a border-radius applied, or if the -pie-png-fix flag is set.
|
3183 |
+
* @constructor
|
3184 |
+
* @param {Element} el The target element
|
3185 |
+
* @param {Object} styleInfos The StyleInfo objects
|
3186 |
+
* @param {PIE.RootRenderer} parent
|
3187 |
+
*/
|
3188 |
+
PIE.ImgRenderer = PIE.RendererBase.newRenderer( {
|
3189 |
+
|
3190 |
+
boxZIndex: 6,
|
3191 |
+
boxName: 'imgEl',
|
3192 |
+
|
3193 |
+
needsUpdate: function() {
|
3194 |
+
var si = this.styleInfos;
|
3195 |
+
return this.targetElement.src !== this._lastSrc || si.borderRadiusInfo.changed();
|
3196 |
+
},
|
3197 |
+
|
3198 |
+
isActive: function() {
|
3199 |
+
var si = this.styleInfos;
|
3200 |
+
return si.borderRadiusInfo.isActive() || si.backgroundInfo.isPngFix();
|
3201 |
+
},
|
3202 |
+
|
3203 |
+
draw: function() {
|
3204 |
+
this._lastSrc = src;
|
3205 |
+
this.hideActualImg();
|
3206 |
+
|
3207 |
+
var shape = this.getShape( 'img', 'fill', this.getBox() ),
|
3208 |
+
fill = shape.fill,
|
3209 |
+
bounds = this.boundsInfo.getBounds(),
|
3210 |
+
w = bounds.w,
|
3211 |
+
h = bounds.h,
|
3212 |
+
borderProps = this.styleInfos.borderInfo.getProps(),
|
3213 |
+
borderWidths = borderProps && borderProps.widths,
|
3214 |
+
el = this.targetElement,
|
3215 |
+
src = el.src,
|
3216 |
+
round = Math.round,
|
3217 |
+
s;
|
3218 |
+
|
3219 |
+
shape.stroked = false;
|
3220 |
+
fill.type = 'frame';
|
3221 |
+
fill.src = src;
|
3222 |
+
fill.position = (w ? 0.5 / w : 0) + ',' + (h ? 0.5 / h : 0);
|
3223 |
+
shape.coordsize = w * 2 + ',' + h * 2;
|
3224 |
+
shape.coordorigin = '1,1';
|
3225 |
+
shape.path = this.getBoxPath( borderWidths ? {
|
3226 |
+
t: round( borderWidths['t'].pixels( el ) ),
|
3227 |
+
r: round( borderWidths['r'].pixels( el ) ),
|
3228 |
+
b: round( borderWidths['b'].pixels( el ) ),
|
3229 |
+
l: round( borderWidths['l'].pixels( el ) )
|
3230 |
+
} : 0, 2 );
|
3231 |
+
s = shape.style;
|
3232 |
+
s.width = w;
|
3233 |
+
s.height = h;
|
3234 |
+
},
|
3235 |
+
|
3236 |
+
hideActualImg: function() {
|
3237 |
+
this.targetElement.runtimeStyle.filter = 'alpha(opacity=0)';
|
3238 |
+
},
|
3239 |
+
|
3240 |
+
destroy: function() {
|
3241 |
+
PIE.RendererBase.destroy.call( this );
|
3242 |
+
this.targetElement.runtimeStyle.filter = '';
|
3243 |
+
}
|
3244 |
+
|
3245 |
+
} );
|
3246 |
+
|
3247 |
+
PIE.Element = (function() {
|
3248 |
+
|
3249 |
+
var wrappers = {},
|
3250 |
+
lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
|
3251 |
+
pollCssProp = PIE.CSS_PREFIX + 'poll',
|
3252 |
+
hoverClass = ' ' + PIE.CLASS_PREFIX + 'hover',
|
3253 |
+
hoverClassRE = new RegExp( '\\b' + PIE.CLASS_PREFIX + 'hover\\b', 'g' ),
|
3254 |
+
ignorePropertyNames = { 'background':1, 'bgColor':1, 'display': 1 };
|
3255 |
+
|
3256 |
+
|
3257 |
+
function addListener( el, type, handler ) {
|
3258 |
+
el.attachEvent( type, handler );
|
3259 |
+
}
|
3260 |
+
|
3261 |
+
function removeListener( el, type, handler ) {
|
3262 |
+
el.detachEvent( type, handler );
|
3263 |
+
}
|
3264 |
+
|
3265 |
+
|
3266 |
+
function Element( el ) {
|
3267 |
+
var renderers,
|
3268 |
+
boundsInfo = new PIE.BoundsInfo( el ),
|
3269 |
+
styleInfos,
|
3270 |
+
styleInfosArr,
|
3271 |
+
ancestors,
|
3272 |
+
initializing,
|
3273 |
+
initialized,
|
3274 |
+
eventsAttached,
|
3275 |
+
delayed,
|
3276 |
+
destroyed,
|
3277 |
+
poll;
|
3278 |
+
|
3279 |
+
/**
|
3280 |
+
* Initialize PIE for this element.
|
3281 |
+
*/
|
3282 |
+
function init() {
|
3283 |
+
if( !initialized ) {
|
3284 |
+
var docEl,
|
3285 |
+
bounds,
|
3286 |
+
cs = el.currentStyle,
|
3287 |
+
lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
|
3288 |
+
rootRenderer;
|
3289 |
+
|
3290 |
+
// Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
|
3291 |
+
poll = cs.getAttribute( pollCssProp );
|
3292 |
+
poll = PIE.ieDocMode === 8 ? poll !== 'false' : poll === 'true';
|
3293 |
+
|
3294 |
+
// Force layout so move/resize events will fire. Set this as soon as possible to avoid layout changes
|
3295 |
+
// after load, but make sure it only gets called the first time through to avoid recursive calls to init().
|
3296 |
+
if( !initializing ) {
|
3297 |
+
initializing = 1;
|
3298 |
+
el.runtimeStyle.zoom = 1;
|
3299 |
+
initFirstChildPseudoClass();
|
3300 |
+
}
|
3301 |
+
|
3302 |
+
boundsInfo.lock();
|
3303 |
+
|
3304 |
+
// If the -pie-lazy-init:true flag is set, check if the element is outside the viewport and if so, delay initialization
|
3305 |
+
if( lazy && ( bounds = boundsInfo.getBounds() ) && ( docEl = doc.documentElement || doc.body ) &&
|
3306 |
+
( bounds.y > docEl.clientHeight || bounds.x > docEl.clientWidth || bounds.y + bounds.h < 0 || bounds.x + bounds.w < 0 ) ) {
|
3307 |
+
if( !delayed ) {
|
3308 |
+
delayed = 1;
|
3309 |
+
PIE.OnScroll.observe( init );
|
3310 |
+
}
|
3311 |
+
} else {
|
3312 |
+
initialized = 1;
|
3313 |
+
delayed = initializing = 0;
|
3314 |
+
PIE.OnScroll.unobserve( init );
|
3315 |
+
|
3316 |
+
// Create the style infos and renderers
|
3317 |
+
styleInfos = {
|
3318 |
+
backgroundInfo: new PIE.BackgroundStyleInfo( el ),
|
3319 |
+
borderInfo: new PIE.BorderStyleInfo( el ),
|
3320 |
+
borderImageInfo: new PIE.BorderImageStyleInfo( el ),
|
3321 |
+
borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
|
3322 |
+
boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
|
3323 |
+
visibilityInfo: new PIE.VisibilityStyleInfo( el )
|
3324 |
+
};
|
3325 |
+
styleInfosArr = [
|
3326 |
+
styleInfos.backgroundInfo,
|
3327 |
+
styleInfos.borderInfo,
|
3328 |
+
styleInfos.borderImageInfo,
|
3329 |
+
styleInfos.borderRadiusInfo,
|
3330 |
+
styleInfos.boxShadowInfo,
|
3331 |
+
styleInfos.visibilityInfo
|
3332 |
+
];
|
3333 |
+
|
3334 |
+
rootRenderer = new PIE.RootRenderer( el, boundsInfo, styleInfos );
|
3335 |
+
var childRenderers = [
|
3336 |
+
new PIE.BoxShadowOutsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3337 |
+
new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3338 |
+
//new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3339 |
+
new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
|
3340 |
+
new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
|
3341 |
+
];
|
3342 |
+
if( el.tagName === 'IMG' ) {
|
3343 |
+
childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
|
3344 |
+
}
|
3345 |
+
rootRenderer.childRenderers = childRenderers; // circular reference, can't pass in constructor; TODO is there a cleaner way?
|
3346 |
+
renderers = [ rootRenderer ].concat( childRenderers );
|
3347 |
+
|
3348 |
+
// Add property change listeners to ancestors if requested
|
3349 |
+
initAncestorPropChangeListeners();
|
3350 |
+
|
3351 |
+
// Add to list of polled elements in IE8
|
3352 |
+
if( poll ) {
|
3353 |
+
PIE.Heartbeat.observe( update );
|
3354 |
+
PIE.Heartbeat.run();
|
3355 |
+
}
|
3356 |
+
|
3357 |
+
// Trigger rendering
|
3358 |
+
update( 1 );
|
3359 |
+
}
|
3360 |
+
|
3361 |
+
if( !eventsAttached ) {
|
3362 |
+
eventsAttached = 1;
|
3363 |
+
addListener( el, 'onmove', handleMoveOrResize );
|
3364 |
+
addListener( el, 'onresize', handleMoveOrResize );
|
3365 |
+
addListener( el, 'onpropertychange', propChanged );
|
3366 |
+
addListener( el, 'onmouseenter', mouseEntered );
|
3367 |
+
addListener( el, 'onmouseleave', mouseLeft );
|
3368 |
+
PIE.OnResize.observe( handleMoveOrResize );
|
3369 |
+
|
3370 |
+
PIE.OnBeforeUnload.observe( removeEventListeners );
|
3371 |
+
}
|
3372 |
+
|
3373 |
+
boundsInfo.unlock();
|
3374 |
+
}
|
3375 |
+
}
|
3376 |
+
|
3377 |
+
|
3378 |
+
|
3379 |
+
|
3380 |
+
/**
|
3381 |
+
* Event handler for onmove and onresize events. Invokes update() only if the element's
|
3382 |
+
* bounds have previously been calculated, to prevent multiple runs during page load when
|
3383 |
+
* the element has no initial CSS3 properties.
|
3384 |
+
*/
|
3385 |
+
function handleMoveOrResize() {
|
3386 |
+
if( boundsInfo && boundsInfo.hasBeenQueried() ) {
|
3387 |
+
update();
|
3388 |
+
}
|
3389 |
+
}
|
3390 |
+
|
3391 |
+
|
3392 |
+
/**
|
3393 |
+
* Update position and/or size as necessary. Both move and resize events call
|
3394 |
+
* this rather than the updatePos/Size functions because sometimes, particularly
|
3395 |
+
* during page load, one will fire but the other won't.
|
3396 |
+
*/
|
3397 |
+
function update( force ) {
|
3398 |
+
if( !destroyed ) {
|
3399 |
+
if( initialized ) {
|
3400 |
+
var i, len;
|
3401 |
+
|
3402 |
+
lockAll();
|
3403 |
+
if( force || boundsInfo.positionChanged() ) {
|
3404 |
+
/* TODO just using getBoundingClientRect (used internally by BoundsInfo) for detecting
|
3405 |
+
position changes may not always be accurate; it's possible that
|
3406 |
+
an element will actually move relative to its positioning parent, but its position
|
3407 |
+
relative to the viewport will stay the same. Need to come up with a better way to
|
3408 |
+
track movement. The most accurate would be the same logic used in RootRenderer.updatePos()
|
3409 |
+
but that is a more expensive operation since it does some DOM walking, and we want this
|
3410 |
+
check to be as fast as possible. */
|
3411 |
+
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3412 |
+
renderers[i].updatePos();
|
3413 |
+
}
|
3414 |
+
}
|
3415 |
+
if( force || boundsInfo.sizeChanged() ) {
|
3416 |
+
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3417 |
+
renderers[i].updateSize();
|
3418 |
+
}
|
3419 |
+
}
|
3420 |
+
unlockAll();
|
3421 |
+
}
|
3422 |
+
else if( !initializing ) {
|
3423 |
+
init();
|
3424 |
+
}
|
3425 |
+
}
|
3426 |
+
}
|
3427 |
+
|
3428 |
+
/**
|
3429 |
+
* Handle property changes to trigger update when appropriate.
|
3430 |
+
*/
|
3431 |
+
function propChanged() {
|
3432 |
+
var i, len, renderer,
|
3433 |
+
e = event;
|
3434 |
+
|
3435 |
+
// Some elements like <table> fire onpropertychange events for old-school background properties
|
3436 |
+
// ('background', 'bgColor') when runtimeStyle background properties are changed, which
|
3437 |
+
// results in an infinite loop; therefore we filter out those property names. Also, 'display'
|
3438 |
+
// is ignored because size calculations don't work correctly immediately when its onpropertychange
|
3439 |
+
// event fires, and because it will trigger an onresize event anyway.
|
3440 |
+
if( !destroyed && !( e && e.propertyName in ignorePropertyNames ) ) {
|
3441 |
+
if( initialized ) {
|
3442 |
+
lockAll();
|
3443 |
+
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3444 |
+
renderer = renderers[i];
|
3445 |
+
// Make sure position is synced if the element hasn't already been rendered.
|
3446 |
+
// TODO this feels sloppy - look into merging propChanged and update functions
|
3447 |
+
if( !renderer.isPositioned ) {
|
3448 |
+
renderer.updatePos();
|
3449 |
+
}
|
3450 |
+
if( renderer.needsUpdate() ) {
|
3451 |
+
renderer.updateProps();
|
3452 |
+
}
|
3453 |
+
}
|
3454 |
+
unlockAll();
|
3455 |
+
}
|
3456 |
+
else if( !initializing ) {
|
3457 |
+
init();
|
3458 |
+
}
|
3459 |
+
}
|
3460 |
+
}
|
3461 |
+
|
3462 |
+
|
3463 |
+
function addHoverClass() {
|
3464 |
+
if( el ) {
|
3465 |
+
el.className += hoverClass;
|
3466 |
+
}
|
3467 |
+
}
|
3468 |
+
|
3469 |
+
function removeHoverClass() {
|
3470 |
+
if( el ) {
|
3471 |
+
el.className = el.className.replace( hoverClassRE, '' );
|
3472 |
+
}
|
3473 |
+
}
|
3474 |
+
|
3475 |
+
/**
|
3476 |
+
* Handle mouseenter events. Adds a custom class to the element to allow IE6 to add
|
3477 |
+
* hover styles to non-link elements, and to trigger a propertychange update.
|
3478 |
+
*/
|
3479 |
+
function mouseEntered() {
|
3480 |
+
//must delay this because the mouseenter event fires before the :hover styles are added.
|
3481 |
+
setTimeout( addHoverClass, 0 );
|
3482 |
+
}
|
3483 |
+
|
3484 |
+
/**
|
3485 |
+
* Handle mouseleave events
|
3486 |
+
*/
|
3487 |
+
function mouseLeft() {
|
3488 |
+
//must delay this because the mouseleave event fires before the :hover styles are removed.
|
3489 |
+
setTimeout( removeHoverClass, 0 );
|
3490 |
+
}
|
3491 |
+
|
3492 |
+
|
3493 |
+
/**
|
3494 |
+
* Handle property changes on ancestors of the element; see initAncestorPropChangeListeners()
|
3495 |
+
* which adds these listeners as requested with the -pie-watch-ancestors CSS property.
|
3496 |
+
*/
|
3497 |
+
function ancestorPropChanged() {
|
3498 |
+
var name = event.propertyName;
|
3499 |
+
if( name === 'className' || name === 'id' ) {
|
3500 |
+
propChanged();
|
3501 |
+
}
|
3502 |
+
}
|
3503 |
+
|
3504 |
+
function lockAll() {
|
3505 |
+
boundsInfo.lock();
|
3506 |
+
for( var i = styleInfosArr.length; i--; ) {
|
3507 |
+
styleInfosArr[i].lock();
|
3508 |
+
}
|
3509 |
+
}
|
3510 |
+
|
3511 |
+
function unlockAll() {
|
3512 |
+
for( var i = styleInfosArr.length; i--; ) {
|
3513 |
+
styleInfosArr[i].unlock();
|
3514 |
+
}
|
3515 |
+
boundsInfo.unlock();
|
3516 |
+
}
|
3517 |
+
|
3518 |
+
|
3519 |
+
/**
|
3520 |
+
* Remove all event listeners from the element and any monitoried ancestors.
|
3521 |
+
*/
|
3522 |
+
function removeEventListeners() {
|
3523 |
+
if (eventsAttached) {
|
3524 |
+
if( ancestors ) {
|
3525 |
+
for( var i = 0, len = ancestors.length, a; i < len; i++ ) {
|
3526 |
+
a = ancestors[i];
|
3527 |
+
removeListener( a, 'onpropertychange', ancestorPropChanged );
|
3528 |
+
removeListener( a, 'onmouseenter', mouseEntered );
|
3529 |
+
removeListener( a, 'onmouseleave', mouseLeft );
|
3530 |
+
}
|
3531 |
+
}
|
3532 |
+
|
3533 |
+
// Remove event listeners
|
3534 |
+
removeListener( el, 'onmove', update );
|
3535 |
+
removeListener( el, 'onresize', update );
|
3536 |
+
removeListener( el, 'onpropertychange', propChanged );
|
3537 |
+
removeListener( el, 'onmouseenter', mouseEntered );
|
3538 |
+
removeListener( el, 'onmouseleave', mouseLeft );
|
3539 |
+
|
3540 |
+
PIE.OnBeforeUnload.unobserve( removeEventListeners );
|
3541 |
+
eventsAttached = 0;
|
3542 |
+
}
|
3543 |
+
}
|
3544 |
+
|
3545 |
+
|
3546 |
+
/**
|
3547 |
+
* Clean everything up when the behavior is removed from the element, or the element
|
3548 |
+
* is manually destroyed.
|
3549 |
+
*/
|
3550 |
+
function destroy() {
|
3551 |
+
if( !destroyed ) {
|
3552 |
+
var i, len;
|
3553 |
+
|
3554 |
+
removeEventListeners();
|
3555 |
+
|
3556 |
+
destroyed = 1;
|
3557 |
+
|
3558 |
+
// destroy any active renderers
|
3559 |
+
if( renderers ) {
|
3560 |
+
for( i = 0, len = renderers.length; i < len; i++ ) {
|
3561 |
+
renderers[i].destroy();
|
3562 |
+
}
|
3563 |
+
}
|
3564 |
+
|
3565 |
+
// Remove from list of polled elements in IE8
|
3566 |
+
if( poll ) {
|
3567 |
+
PIE.Heartbeat.unobserve( update );
|
3568 |
+
}
|
3569 |
+
// Stop onresize listening
|
3570 |
+
PIE.OnResize.unobserve( update );
|
3571 |
+
|
3572 |
+
// Kill references
|
3573 |
+
renderers = boundsInfo = styleInfos = styleInfosArr = ancestors = el = null;
|
3574 |
+
}
|
3575 |
+
}
|
3576 |
+
|
3577 |
+
|
3578 |
+
/**
|
3579 |
+
* If requested via the custom -pie-watch-ancestors CSS property, add onpropertychange listeners
|
3580 |
+
* to ancestor(s) of the element so we can pick up style changes based on CSS rules using
|
3581 |
+
* descendant selectors.
|
3582 |
+
*/
|
3583 |
+
function initAncestorPropChangeListeners() {
|
3584 |
+
var watch = el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'watch-ancestors' ),
|
3585 |
+
i, a;
|
3586 |
+
if( watch ) {
|
3587 |
+
ancestors = [];
|
3588 |
+
watch = parseInt( watch, 10 );
|
3589 |
+
i = 0;
|
3590 |
+
a = el.parentNode;
|
3591 |
+
while( a && ( watch === 'NaN' || i++ < watch ) ) {
|
3592 |
+
ancestors.push( a );
|
3593 |
+
addListener( a, 'onpropertychange', ancestorPropChanged );
|
3594 |
+
addListener( a, 'onmouseenter', mouseEntered );
|
3595 |
+
addListener( a, 'onmouseleave', mouseLeft );
|
3596 |
+
a = a.parentNode;
|
3597 |
+
}
|
3598 |
+
}
|
3599 |
+
}
|
3600 |
+
|
3601 |
+
|
3602 |
+
/**
|
3603 |
+
* If the target element is a first child, add a pie_first-child class to it. This allows using
|
3604 |
+
* the added class as a workaround for the fact that PIE's rendering element breaks the :first-child
|
3605 |
+
* pseudo-class selector.
|
3606 |
+
*/
|
3607 |
+
function initFirstChildPseudoClass() {
|
3608 |
+
var tmpEl = el,
|
3609 |
+
isFirst = 1;
|
3610 |
+
while( tmpEl = tmpEl.previousSibling ) {
|
3611 |
+
if( tmpEl.nodeType === 1 ) {
|
3612 |
+
isFirst = 0;
|
3613 |
+
break;
|
3614 |
+
}
|
3615 |
+
}
|
3616 |
+
if( isFirst ) {
|
3617 |
+
el.className += ' ' + PIE.CLASS_PREFIX + 'first-child';
|
3618 |
+
}
|
3619 |
+
}
|
3620 |
+
|
3621 |
+
|
3622 |
+
// These methods are all already bound to this instance so there's no need to wrap them
|
3623 |
+
// in a closure to maintain the 'this' scope object when calling them.
|
3624 |
+
this.init = init;
|
3625 |
+
this.update = update;
|
3626 |
+
this.destroy = destroy;
|
3627 |
+
this.el = el;
|
3628 |
+
}
|
3629 |
+
|
3630 |
+
Element.getInstance = function( el ) {
|
3631 |
+
var id = PIE.Util.getUID( el );
|
3632 |
+
return wrappers[ id ] || ( wrappers[ id ] = new Element( el ) );
|
3633 |
+
};
|
3634 |
+
|
3635 |
+
Element.destroy = function( el ) {
|
3636 |
+
var id = PIE.Util.getUID( el ),
|
3637 |
+
wrapper = wrappers[ id ];
|
3638 |
+
if( wrapper ) {
|
3639 |
+
wrapper.destroy();
|
3640 |
+
delete wrappers[ id ];
|
3641 |
+
}
|
3642 |
+
};
|
3643 |
+
|
3644 |
+
Element.destroyAll = function() {
|
3645 |
+
var els = [], wrapper;
|
3646 |
+
if( wrappers ) {
|
3647 |
+
for( var w in wrappers ) {
|
3648 |
+
if( wrappers.hasOwnProperty( w ) ) {
|
3649 |
+
wrapper = wrappers[ w ];
|
3650 |
+
els.push( wrapper.el );
|
3651 |
+
wrapper.destroy();
|
3652 |
+
}
|
3653 |
+
}
|
3654 |
+
wrappers = {};
|
3655 |
+
}
|
3656 |
+
return els;
|
3657 |
+
};
|
3658 |
+
|
3659 |
+
return Element;
|
3660 |
+
})();
|
3661 |
+
|
3662 |
+
/*
|
3663 |
+
* This file exposes the public API for invoking PIE.
|
3664 |
+
*/
|
3665 |
+
|
3666 |
+
|
3667 |
+
/**
|
3668 |
+
* Programatically attach PIE to a single element.
|
3669 |
+
* @param {Element} el
|
3670 |
+
*/
|
3671 |
+
PIE[ 'attach' ] = function( el ) {
|
3672 |
+
if (PIE.ieDocMode < 9) {
|
3673 |
+
PIE.Element.getInstance( el ).init();
|
3674 |
+
}
|
3675 |
+
};
|
3676 |
+
|
3677 |
+
|
3678 |
+
/**
|
3679 |
+
* Programatically detach PIE from a single element.
|
3680 |
+
* @param {Element} el
|
3681 |
+
*/
|
3682 |
+
PIE[ 'detach' ] = function( el ) {
|
3683 |
+
PIE.Element.destroy( el );
|
3684 |
+
};
|
3685 |
+
|
3686 |
+
|
3687 |
+
} // if( !PIE )
|
3688 |
})();
|
js/admin.js
CHANGED
@@ -1,433 +1,433 @@
|
|
1 |
-
jQuery(function($) {
|
2 |
-
$('div.gradPicker', '#styles-form').gradientPicker();
|
3 |
-
$('div.bgPicker', '#styles-form').bgPicker();
|
4 |
-
|
5 |
-
// Color Picker
|
6 |
-
$('input.pds_color_input', '#styles-form').change(function(){
|
7 |
-
if ( $(this).val().length < 3 ) {return;}
|
8 |
-
$(this).css( 'color', '#'+$(this).val() );
|
9 |
-
$(this).css( 'background-color', '#'+$(this).val() );
|
10 |
-
}).change().ColorPicker({
|
11 |
-
onChange: function(){
|
12 |
-
var el = $(this).data('colorpicker').el;
|
13 |
-
var hex = $(this).find('div.colorpicker_hex input').val();
|
14 |
-
|
15 |
-
$(el).val(hex).change();
|
16 |
-
saveStyles();
|
17 |
-
},
|
18 |
-
onSubmit: function(hsb, hex, rgb, el) {
|
19 |
-
$(el).val(hex).change();
|
20 |
-
$(el).ColorPickerHide();
|
21 |
-
},
|
22 |
-
onBeforeShow: function () {
|
23 |
-
$(this).ColorPickerSetColor( this.value );
|
24 |
-
},
|
25 |
-
onHide: function (colpkr) {
|
26 |
-
var el = $(colpkr).data('colorpicker').el;
|
27 |
-
var hex = $(colpkr).find('div.colorpicker_hex input').val();
|
28 |
-
|
29 |
-
$(el).val(hex).change();
|
30 |
-
|
31 |
-
return true;
|
32 |
-
}
|
33 |
-
});
|
34 |
-
|
35 |
-
// Sliders for integer inputs
|
36 |
-
$('input.slider', '#styles-form').each(function() {
|
37 |
-
// Show/hide slider on input click
|
38 |
-
$(this).click(function( e ) {
|
39 |
-
|
40 |
-
// Only init sliders on click for faster page load
|
41 |
-
if ( ! $(this).parent().next().hasClass('pds_slider_ui') ) {
|
42 |
-
|
43 |
-
var input_id = $(this).attr('id');
|
44 |
-
var input_val = parseInt( $(this).val() );
|
45 |
-
var opts = {
|
46 |
-
min: $(this).data('min'),
|
47 |
-
max: $(this).data('max'),
|
48 |
-
range: "min",
|
49 |
-
value: input_val + 1,
|
50 |
-
slide: function(event, ui) {
|
51 |
-
$(this).prev().find('input').val(ui.value - 1);
|
52 |
-
},
|
53 |
-
change: function(event, ui) {
|
54 |
-
$(this).prev().find('input').change();
|
55 |
-
}
|
56 |
-
};
|
57 |
-
|
58 |
-
$(this).parent().after('<div class="pds_slider_ui"></div>')
|
59 |
-
$(this).parent().next().slider(opts);
|
60 |
-
|
61 |
-
}
|
62 |
-
|
63 |
-
$(this).parent().next().toggle();
|
64 |
-
|
65 |
-
});
|
66 |
-
});
|
67 |
-
|
68 |
-
// Font buttons
|
69 |
-
$('a.value-toggle', '#styles-form').click( fontToggles );
|
70 |
-
|
71 |
-
$('select.pds_font_select', '#styles-form').change(function(){
|
72 |
-
var src = $(this).val();
|
73 |
-
if ( src.indexOf("http://") != -1) {
|
74 |
-
window.open( src, 'Google Web Fonts' );
|
75 |
-
}
|
76 |
-
|
77 |
-
})
|
78 |
-
|
79 |
-
// AJAX Submit & Preview
|
80 |
-
$('input.storm-submit', '#styles-form').click( saveStyles );
|
81 |
-
$('input, select', '#styles-form').change( saveStyles );
|
82 |
-
|
83 |
-
function saveStyles() {
|
84 |
-
if ( $(this).hasClass('storm-submit') ) {
|
85 |
-
var preview = false;
|
86 |
-
}else {
|
87 |
-
var preview = true;
|
88 |
-
}
|
89 |
-
|
90 |
-
clearTimeout( window.stormSaveTimeout );
|
91 |
-
window.stormSaveTimeout = setTimeout( function(){
|
92 |
-
|
93 |
-
// Display waiting graphic
|
94 |
-
var waiting = $('#styles-form img.waiting').show();
|
95 |
-
window.response_wrapper = $('#styles-form span.response').html('');
|
96 |
-
|
97 |
-
// Get form info
|
98 |
-
var data = $('#styles-form').serialize();
|
99 |
-
if ( preview ) { data = data + '&preview=1'; }
|
100 |
-
|
101 |
-
$.post(ajaxurl, data, function( response ) {
|
102 |
-
if ( response.message.indexOf('updated') != -1 ) {
|
103 |
-
$.cookie('pdstyles_preview_update', '1', {path: '/'});
|
104 |
-
$.cookie('pdstyles_preview_id', response.id, {path: '/'});
|
105 |
-
$.cookie('pdstyles_preview_href', response.href, {path: '/'});
|
106 |
-
}
|
107 |
-
|
108 |
-
$(response_wrapper).html( response.message );
|
109 |
-
waiting.hide();
|
110 |
-
|
111 |
-
}, 'json');
|
112 |
-
|
113 |
-
return false;
|
114 |
-
|
115 |
-
}, 500);
|
116 |
-
|
117 |
-
return false;
|
118 |
-
}
|
119 |
-
|
120 |
-
function fontToggles(){
|
121 |
-
var old_val = $(this).next().val();
|
122 |
-
var options = $(this).data('options');
|
123 |
-
var index = $.inArray( old_val, options );
|
124 |
-
|
125 |
-
if ( -1 != index && (index+1) != options.length ) {
|
126 |
-
$(this).next().val( options[ index + 1 ] );
|
127 |
-
}else {
|
128 |
-
$(this).next().val( options[0] );
|
129 |
-
}
|
130 |
-
|
131 |
-
var new_val = $(this).next().val();
|
132 |
-
var old_class = $(this).data('type') +'-'+ old_val.replace('.', '');
|
133 |
-
var new_class = $(this).data('type') +'-'+ new_val.replace('.', '');
|
134 |
-
|
135 |
-
$(this).removeClass( old_class ).addClass( new_class );
|
136 |
-
|
137 |
-
$(this).next().change();
|
138 |
-
|
139 |
-
return false;
|
140 |
-
}
|
141 |
-
|
142 |
-
}); // End DOM Ready
|
143 |
-
|
144 |
-
/**
|
145 |
-
* Background Picker plugin
|
146 |
-
*
|
147 |
-
* Creates UI for creating background CSS: Image, Gradient, RGBA Color, Transparent, Hidden
|
148 |
-
*
|
149 |
-
* @author pdclark
|
150 |
-
**/
|
151 |
-
(function($) {
|
152 |
-
$.bgPicker = function(element, options) {
|
153 |
-
|
154 |
-
// plugin's default options
|
155 |
-
// this is private property and is accessible only from inside the plugin
|
156 |
-
var defaults = {
|
157 |
-
|
158 |
-
// foo: 'bar',
|
159 |
-
|
160 |
-
// if your plugin is event-driven, you may provide callback capabilities for its events.
|
161 |
-
// execute these functions before or after events of your plugin, so that users may customize
|
162 |
-
// those particular events without changing the plugin's code
|
163 |
-
// onFoo: function() {}
|
164 |
-
|
165 |
-
}
|
166 |
-
|
167 |
-
// to avoid confusions, use "plugin" to reference the current instance of the object
|
168 |
-
var plugin = this;
|
169 |
-
|
170 |
-
// this will hold the merged default, and user-provided options
|
171 |
-
// plugin's properties will be available through this object like:
|
172 |
-
// plugin.settings.propertyName from inside the plugin or
|
173 |
-
// element.data('bgPicker').settings.propertyName from outside the plugin, where "element" is the
|
174 |
-
// element the plugin is attached to;
|
175 |
-
plugin.settings = {}
|
176 |
-
|
177 |
-
var $element = $(element), // reference to the jQuery version of DOM element the plugin is attached to
|
178 |
-
element = element; // reference to the actual DOM element
|
179 |
-
|
180 |
-
var $ui = $element.find('div.ui'),
|
181 |
-
$type_links = $element.find('div.types a'),
|
182 |
-
$active = $element.find('div.data input[name$="[active]"]'),
|
183 |
-
$css = $element.find('div.data input[name$="[css]"]'),
|
184 |
-
$image = $element.find('div.data input[name$="[image]"]'),
|
185 |
-
$stops = $element.find('div.data input[name$="[stops]"]'),
|
186 |
-
$color = $element.find('div.data input[name$="[bg_color]"]');
|
187 |
-
|
188 |
-
var colorPickerOpts = {
|
189 |
-
onSubmit: function(hsb, hex, rgb, el) {
|
190 |
-
setColor(el, hex);
|
191 |
-
// $(el).ColorPickerHide();
|
192 |
-
},
|
193 |
-
onBeforeShow: function () {
|
194 |
-
if ( $(this).data('color') ) {
|
195 |
-
$(this).ColorPickerSetColor( $(this).data('color') );
|
196 |
-
}
|
197 |
-
},
|
198 |
-
onHide: function (colpkr) {
|
199 |
-
var el = $(colpkr).data('colorpicker').el;
|
200 |
-
var hex = $(colpkr).find('div.colorpicker_hex input').val();
|
201 |
-
|
202 |
-
setColor(el, hex);
|
203 |
-
|
204 |
-
return true;
|
205 |
-
},
|
206 |
-
onChange: function(hsb, hex, rgb) {
|
207 |
-
setColor($color, hex);
|
208 |
-
},
|
209 |
-
flat: true,
|
210 |
-
color: 'ff0000'
|
211 |
-
};
|
212 |
-
|
213 |
-
// the "constructor" method that gets called when the object is created
|
214 |
-
plugin.init = function() {
|
215 |
-
// the plugin's final properties are the merged default and user-provided options (if any)
|
216 |
-
plugin.settings = $.extend({}, defaults, options);
|
217 |
-
|
218 |
-
$type_links.click( type_click );
|
219 |
-
type_switch( $active.val() );
|
220 |
-
|
221 |
-
$color.add( $stops ).add( $image ).change( update_css );
|
222 |
-
$image.change( update_image_preview );
|
223 |
-
|
224 |
-
}
|
225 |
-
|
226 |
-
// Global method -- Override WordPress default behavior
|
227 |
-
// send image url to the options field
|
228 |
-
window.send_to_editor = function (h) {
|
229 |
-
// get the image src from the html code in h
|
230 |
-
var re = new RegExp('<img src="([^"]+)"');
|
231 |
-
var m = re.exec(h);
|
232 |
-
jQuery('#'+blogicons.uploadid).val(m[1]).change();
|
233 |
-
tb_remove();
|
234 |
-
}
|
235 |
-
|
236 |
-
// Thickbox window position
|
237 |
-
if ( ! window.tb_resize_attached ) {
|
238 |
-
$(window).resize( function() { plugin.tb_position() } );
|
239 |
-
window.tb_resize_attached = true;
|
240 |
-
}
|
241 |
-
plugin.tb_position = function() {
|
242 |
-
var tbWindow = $('#TB_window');
|
243 |
-
var width = $(window).width();
|
244 |
-
var H = $(window).height();
|
245 |
-
var W = ( 720 < width ) ? 720 : width;
|
246 |
-
|
247 |
-
if ( tbWindow.size() ) {
|
248 |
-
tbWindow.width( W - 50 ).height( H - 45 );
|
249 |
-
$('#TB_iframeContent').width( W - 50 ).height( H - 75 );
|
250 |
-
tbWindow.css({'margin-left': '-' + parseInt((( W - 50 ) / 2),10) + 'px'});
|
251 |
-
if ( typeof document.body.style.maxWidth != 'undefined' )
|
252 |
-
tbWindow.css({'top':'20px','margin-top':'0'});
|
253 |
-
$('#TB_title').css({'background-color':'#222','color':'#cfcfcf'});
|
254 |
-
};
|
255 |
-
|
256 |
-
return $('a.thickbox').each( function() {
|
257 |
-
var href = $(this).attr('href');
|
258 |
-
if ( ! href ) return;
|
259 |
-
href = href.replace(/&width=[0-9]+/g, '');
|
260 |
-
href = href.replace(/&height=[0-9]+/g, '');
|
261 |
-
$(this).attr( 'href', href + '&width=' + ( W - 80 ) + '&height=' + ( H - 85 ) );
|
262 |
-
});
|
263 |
-
};
|
264 |
-
|
265 |
-
//
|
266 |
-
// public methods
|
267 |
-
//
|
268 |
-
// plugin.foo_public_method = function() {}
|
269 |
-
|
270 |
-
|
271 |
-
//
|
272 |
-
// private methods
|
273 |
-
//
|
274 |
-
var update_css = function () {
|
275 |
-
$css.val( $(this).val() ).change();
|
276 |
-
}
|
277 |
-
|
278 |
-
var type_click = function() {
|
279 |
-
var new_type = $(this).data('type');
|
280 |
-
|
281 |
-
if ( new_type == $active.val() ) {
|
282 |
-
return false;
|
283 |
-
}else {
|
284 |
-
type_switch( new_type );
|
285 |
-
}
|
286 |
-
|
287 |
-
return false;
|
288 |
-
}
|
289 |
-
|
290 |
-
var type_switch = function( type ) {
|
291 |
-
$ui.empty();
|
292 |
-
|
293 |
-
$type_links.removeClass('active').each( function(){
|
294 |
-
if (type == $(this).data('type')) { $(this).addClass('active'); }
|
295 |
-
});
|
296 |
-
|
297 |
-
switch ( type ) {
|
298 |
-
case 'bg_color': load_color(); break;
|
299 |
-
case 'transparent': load_transparent(); break;
|
300 |
-
case 'gradient': load_gradient(); break;
|
301 |
-
case 'image': load_image(); break;
|
302 |
-
case 'hide': load_hide(); break;
|
303 |
-
case 'font': load_font(); break;
|
304 |
-
}
|
305 |
-
|
306 |
-
if ( type !== 'font' ) {
|
307 |
-
$active.val( type );
|
308 |
-
}
|
309 |
-
}
|
310 |
-
|
311 |
-
var load_font = function() {
|
312 |
-
$ui.siblings('div.font').toggle();
|
313 |
-
$ui.siblings('div.background-image').hide();
|
314 |
-
}
|
315 |
-
|
316 |
-
var load_hide = function() {
|
317 |
-
$css.val('hide').change();
|
318 |
-
$ui.siblings('div.background-image').hide();
|
319 |
-
}
|
320 |
-
|
321 |
-
var load_transparent = function() {
|
322 |
-
$css.val('transparent').change();
|
323 |
-
$ui.siblings('div.background-image').hide();
|
324 |
-
}
|
325 |
-
|
326 |
-
var load_gradient = function() {
|
327 |
-
var gradientPicker = $('<div class="gradPicker" />').gradientPicker({
|
328 |
-
$stops: $stops
|
329 |
-
});
|
330 |
-
|
331 |
-
$css.val( $stops.val() ).change();
|
332 |
-
$ui.siblings('div.background-image').hide();
|
333 |
-
$ui.append( gradientPicker );
|
334 |
-
}
|
335 |
-
|
336 |
-
var load_image = function() {
|
337 |
-
var imagePicker = $('<input type="button" class="button" value="Select Image" />').click( show_image_uploader );
|
338 |
-
var imagePreview = $('<img class="imagePreview" />').attr('src', $image.val() );
|
339 |
-
|
340 |
-
$css.val( $image.val() ).change();
|
341 |
-
|
342 |
-
$ui.siblings('div.background-image').show();
|
343 |
-
$ui.append( imagePicker ).append( imagePreview );
|
344 |
-
}
|
345 |
-
|
346 |
-
var update_image_preview = function() {
|
347 |
-
$ui.find('img.imagePreview').attr('src', $image.val() );
|
348 |
-
}
|
349 |
-
|
350 |
-
var load_color = function() {
|
351 |
-
$ui.siblings('div.background-image').hide();
|
352 |
-
|
353 |
-
var colorVal = $color.val().replace('#', '');
|
354 |
-
|
355 |
-
// Update color field value
|
356 |
-
if ( colorVal.length > 1 ) {
|
357 |
-
$color.data('color', colorVal );
|
358 |
-
$color.data('ahex', colorVal );
|
359 |
-
}else {
|
360 |
-
$color.data('ahex', 'ffffffff' );
|
361 |
-
}
|
362 |
-
$css.val( $color.val() ).change(); // Keeps #
|
363 |
-
|
364 |
-
var tmpColorPickerOpts = $.extend( colorPickerOpts, { color: colorVal });
|
365 |
-
|
366 |
-
var colorPicker = $('<div/>').ColorPicker( tmpColorPickerOpts );
|
367 |
-
|
368 |
-
$ui.append( colorPicker );
|
369 |
-
|
370 |
-
// function(color, context) { /* Live color slide */
|
371 |
-
// if ( color.val() == null ) {
|
372 |
-
// var rgba = 'transparent';
|
373 |
-
// }else {
|
374 |
-
// var alpha = Math.round( color.val('a') / 255 * 100 ) / 100;
|
375 |
-
// var rgba = 'rgba('+color.val('r')+','+color.val('g')+','+color.val('b')+','+alpha+')';
|
376 |
-
// }
|
377 |
-
//
|
378 |
-
// $color.val( rgba );
|
379 |
-
// $color.data('ahex', color.val('ahex') );
|
380 |
-
// $css.val( rgba ).change();
|
381 |
-
// }
|
382 |
-
|
383 |
-
}
|
384 |
-
|
385 |
-
var setColor = function(el, hex) {
|
386 |
-
$(el).each(function() {
|
387 |
-
$color.val( '#'+hex ).data('color', hex);
|
388 |
-
// $(this).css('backgroundColor', $color.val() );
|
389 |
-
});
|
390 |
-
|
391 |
-
$css.val( $color.val() );
|
392 |
-
|
393 |
-
$css.change();
|
394 |
-
}
|
395 |
-
|
396 |
-
var show_image_uploader = function() {
|
397 |
-
blogicons = {
|
398 |
-
uploadid: $image.attr('id')
|
399 |
-
}
|
400 |
-
tb_show('', storm_admin.mediaUploadURL+'?type=image&tab=library&TB_iframe=true');
|
401 |
-
}
|
402 |
-
|
403 |
-
plugin.init();
|
404 |
-
|
405 |
-
}
|
406 |
-
|
407 |
-
// add the plugin to the jQuery.fn object
|
408 |
-
$.fn.bgPicker = function(options) {
|
409 |
-
|
410 |
-
// iterate through the DOM elements we are attaching the plugin to
|
411 |
-
return this.each(function() {
|
412 |
-
|
413 |
-
// if plugin has not already been attached to the element
|
414 |
-
if (undefined == $(this).data('bgPicker')) {
|
415 |
-
|
416 |
-
// create a new instance of the plugin
|
417 |
-
// pass the DOM element and the user-provided options as arguments
|
418 |
-
var plugin = new $.bgPicker(this, options);
|
419 |
-
|
420 |
-
// in the jQuery version of the element
|
421 |
-
// store a reference to the plugin object
|
422 |
-
// you can later access the plugin and its methods and properties like
|
423 |
-
// element.data('bgPicker').publicMethod(arg1, arg2, ... argn) or
|
424 |
-
// element.data('bgPicker').settings.propertyName
|
425 |
-
$(this).data('bgPicker', plugin);
|
426 |
-
|
427 |
-
}
|
428 |
-
|
429 |
-
});
|
430 |
-
|
431 |
-
}
|
432 |
-
|
433 |
})(jQuery);
|
1 |
+
jQuery(function($) {
|
2 |
+
$('div.gradPicker', '#styles-form').gradientPicker();
|
3 |
+
$('div.bgPicker', '#styles-form').bgPicker();
|
4 |
+
|
5 |
+
// Color Picker
|
6 |
+
$('input.pds_color_input', '#styles-form').change(function(){
|
7 |
+
if ( $(this).val().length < 3 ) {return;}
|
8 |
+
$(this).css( 'color', '#'+$(this).val() );
|
9 |
+
$(this).css( 'background-color', '#'+$(this).val() );
|
10 |
+
}).change().ColorPicker({
|
11 |
+
onChange: function(){
|
12 |
+
var el = $(this).data('colorpicker').el;
|
13 |
+
var hex = $(this).find('div.colorpicker_hex input').val();
|
14 |
+
|
15 |
+
$(el).val(hex).change();
|
16 |
+
saveStyles();
|
17 |
+
},
|
18 |
+
onSubmit: function(hsb, hex, rgb, el) {
|
19 |
+
$(el).val(hex).change();
|
20 |
+
$(el).ColorPickerHide();
|
21 |
+
},
|
22 |
+
onBeforeShow: function () {
|
23 |
+
$(this).ColorPickerSetColor( this.value );
|
24 |
+
},
|
25 |
+
onHide: function (colpkr) {
|
26 |
+
var el = $(colpkr).data('colorpicker').el;
|
27 |
+
var hex = $(colpkr).find('div.colorpicker_hex input').val();
|
28 |
+
|
29 |
+
$(el).val(hex).change();
|
30 |
+
|
31 |
+
return true;
|
32 |
+
}
|
33 |
+
});
|
34 |
+
|
35 |
+
// Sliders for integer inputs
|
36 |
+
$('input.slider', '#styles-form').each(function() {
|
37 |
+
// Show/hide slider on input click
|
38 |
+
$(this).click(function( e ) {
|
39 |
+
|
40 |
+
// Only init sliders on click for faster page load
|
41 |
+
if ( ! $(this).parent().next().hasClass('pds_slider_ui') ) {
|
42 |
+
|
43 |
+
var input_id = $(this).attr('id');
|
44 |
+
var input_val = parseInt( $(this).val() );
|
45 |
+
var opts = {
|
46 |
+
min: $(this).data('min'),
|
47 |
+
max: $(this).data('max'),
|
48 |
+
range: "min",
|
49 |
+
value: input_val + 1,
|
50 |
+
slide: function(event, ui) {
|
51 |
+
$(this).prev().find('input').val(ui.value - 1);
|
52 |
+
},
|
53 |
+
change: function(event, ui) {
|
54 |
+
$(this).prev().find('input').change();
|
55 |
+
}
|
56 |
+
};
|
57 |
+
|
58 |
+
$(this).parent().after('<div class="pds_slider_ui"></div>')
|
59 |
+
$(this).parent().next().slider(opts);
|
60 |
+
|
61 |
+
}
|
62 |
+
|
63 |
+
$(this).parent().next().toggle();
|
64 |
+
|
65 |
+
});
|
66 |
+
});
|
67 |
+
|
68 |
+
// Font buttons
|
69 |
+
$('a.value-toggle', '#styles-form').click( fontToggles );
|
70 |
+
|
71 |
+
$('select.pds_font_select', '#styles-form').change(function(){
|
72 |
+
var src = $(this).val();
|
73 |
+
if ( src.indexOf("http://") != -1) {
|
74 |
+
window.open( src, 'Google Web Fonts' );
|
75 |
+
}
|
76 |
+
|
77 |
+
})
|
78 |
+
|
79 |
+
// AJAX Submit & Preview
|
80 |
+
$('input.storm-submit', '#styles-form').click( saveStyles );
|
81 |
+
$('input, select', '#styles-form').change( saveStyles );
|
82 |
+
|
83 |
+
function saveStyles() {
|
84 |
+
if ( $(this).hasClass('storm-submit') ) {
|
85 |
+
var preview = false;
|
86 |
+
}else {
|
87 |
+
var preview = true;
|
88 |
+
}
|
89 |
+
|
90 |
+
clearTimeout( window.stormSaveTimeout );
|
91 |
+
window.stormSaveTimeout = setTimeout( function(){
|
92 |
+
|
93 |
+
// Display waiting graphic
|
94 |
+
var waiting = $('#styles-form img.waiting').show();
|
95 |
+
window.response_wrapper = $('#styles-form span.response').html('');
|
96 |
+
|
97 |
+
// Get form info
|
98 |
+
var data = $('#styles-form').serialize();
|
99 |
+
if ( preview ) { data = data + '&preview=1'; }
|
100 |
+
|
101 |
+
$.post(ajaxurl, data, function( response ) {
|
102 |
+
if ( response.message.indexOf('updated') != -1 ) {
|
103 |
+
$.cookie('pdstyles_preview_update', '1', {path: '/'});
|
104 |
+
$.cookie('pdstyles_preview_id', response.id, {path: '/'});
|
105 |
+
$.cookie('pdstyles_preview_href', response.href, {path: '/'});
|
106 |
+
}
|
107 |
+
|
108 |
+
$(response_wrapper).html( response.message );
|
109 |
+
waiting.hide();
|
110 |
+
|
111 |
+
}, 'json');
|
112 |
+
|
113 |
+
return false;
|
114 |
+
|
115 |
+
}, 500);
|
116 |
+
|
117 |
+
return false;
|
118 |
+
}
|
119 |
+
|
120 |
+
function fontToggles(){
|
121 |
+
var old_val = $(this).next().val();
|
122 |
+
var options = $(this).data('options');
|
123 |
+
var index = $.inArray( old_val, options );
|
124 |
+
|
125 |
+
if ( -1 != index && (index+1) != options.length ) {
|
126 |
+
$(this).next().val( options[ index + 1 ] );
|
127 |
+
}else {
|
128 |
+
$(this).next().val( options[0] );
|
129 |
+
}
|
130 |
+
|
131 |
+
var new_val = $(this).next().val();
|
132 |
+
var old_class = $(this).data('type') +'-'+ old_val.replace('.', '');
|
133 |
+
var new_class = $(this).data('type') +'-'+ new_val.replace('.', '');
|
134 |
+
|
135 |
+
$(this).removeClass( old_class ).addClass( new_class );
|
136 |
+
|
137 |
+
$(this).next().change();
|
138 |
+
|
139 |
+
return false;
|
140 |
+
}
|
141 |
+
|
142 |
+
}); // End DOM Ready
|
143 |
+
|
144 |
+
/**
|
145 |
+
* Background Picker plugin
|
146 |
+
*
|
147 |
+
* Creates UI for creating background CSS: Image, Gradient, RGBA Color, Transparent, Hidden
|
148 |
+
*
|
149 |
+
* @author pdclark
|
150 |
+
**/
|
151 |
+
(function($) {
|
152 |
+
$.bgPicker = function(element, options) {
|
153 |
+
|
154 |
+
// plugin's default options
|
155 |
+
// this is private property and is accessible only from inside the plugin
|
156 |
+
var defaults = {
|
157 |
+
|
158 |
+
// foo: 'bar',
|
159 |
+
|
160 |
+
// if your plugin is event-driven, you may provide callback capabilities for its events.
|
161 |
+
// execute these functions before or after events of your plugin, so that users may customize
|
162 |
+
// those particular events without changing the plugin's code
|
163 |
+
// onFoo: function() {}
|
164 |
+
|
165 |
+
}
|
166 |
+
|
167 |
+
// to avoid confusions, use "plugin" to reference the current instance of the object
|
168 |
+
var plugin = this;
|
169 |
+
|
170 |
+
// this will hold the merged default, and user-provided options
|
171 |
+
// plugin's properties will be available through this object like:
|
172 |
+
// plugin.settings.propertyName from inside the plugin or
|
173 |
+
// element.data('bgPicker').settings.propertyName from outside the plugin, where "element" is the
|
174 |
+
// element the plugin is attached to;
|
175 |
+
plugin.settings = {}
|
176 |
+
|
177 |
+
var $element = $(element), // reference to the jQuery version of DOM element the plugin is attached to
|
178 |
+
element = element; // reference to the actual DOM element
|
179 |
+
|
180 |
+
var $ui = $element.find('div.ui'),
|
181 |
+
$type_links = $element.find('div.types a'),
|
182 |
+
$active = $element.find('div.data input[name$="[active]"]'),
|
183 |
+
$css = $element.find('div.data input[name$="[css]"]'),
|
184 |
+
$image = $element.find('div.data input[name$="[image]"]'),
|
185 |
+
$stops = $element.find('div.data input[name$="[stops]"]'),
|
186 |
+
$color = $element.find('div.data input[name$="[bg_color]"]');
|
187 |
+
|
188 |
+
var colorPickerOpts = {
|
189 |
+
onSubmit: function(hsb, hex, rgb, el) {
|
190 |
+
setColor(el, hex);
|
191 |
+
// $(el).ColorPickerHide();
|
192 |
+
},
|
193 |
+
onBeforeShow: function () {
|
194 |
+
if ( $(this).data('color') ) {
|
195 |
+
$(this).ColorPickerSetColor( $(this).data('color') );
|
196 |
+
}
|
197 |
+
},
|
198 |
+
onHide: function (colpkr) {
|
199 |
+
var el = $(colpkr).data('colorpicker').el;
|
200 |
+
var hex = $(colpkr).find('div.colorpicker_hex input').val();
|
201 |
+
|
202 |
+
setColor(el, hex);
|
203 |
+
|
204 |
+
return true;
|
205 |
+
},
|
206 |
+
onChange: function(hsb, hex, rgb) {
|
207 |
+
setColor($color, hex);
|
208 |
+
},
|
209 |
+
flat: true,
|
210 |
+
color: 'ff0000'
|
211 |
+
};
|
212 |
+
|
213 |
+
// the "constructor" method that gets called when the object is created
|
214 |
+
plugin.init = function() {
|
215 |
+
// the plugin's final properties are the merged default and user-provided options (if any)
|
216 |
+
plugin.settings = $.extend({}, defaults, options);
|
217 |
+
|
218 |
+
$type_links.click( type_click );
|
219 |
+
type_switch( $active.val() );
|
220 |
+
|
221 |
+
$color.add( $stops ).add( $image ).change( update_css );
|
222 |
+
$image.change( update_image_preview );
|
223 |
+
|
224 |
+
}
|
225 |
+
|
226 |
+
// Global method -- Override WordPress default behavior
|
227 |
+
// send image url to the options field
|
228 |
+
window.send_to_editor = function (h) {
|
229 |
+
// get the image src from the html code in h
|
230 |
+
var re = new RegExp('<img src="([^"]+)"');
|
231 |
+
var m = re.exec(h);
|
232 |
+
jQuery('#'+blogicons.uploadid).val(m[1]).change();
|
233 |
+
tb_remove();
|
234 |
+
}
|
235 |
+
|
236 |
+
// Thickbox window position
|
237 |
+
if ( ! window.tb_resize_attached ) {
|
238 |
+
$(window).resize( function() { plugin.tb_position() } );
|
239 |
+
window.tb_resize_attached = true;
|
240 |
+
}
|
241 |
+
plugin.tb_position = function() {
|
242 |
+
var tbWindow = $('#TB_window');
|
243 |
+
var width = $(window).width();
|
244 |
+
var H = $(window).height();
|
245 |
+
var W = ( 720 < width ) ? 720 : width;
|
246 |
+
|
247 |
+
if ( tbWindow.size() ) {
|
248 |
+
tbWindow.width( W - 50 ).height( H - 45 );
|
249 |
+
$('#TB_iframeContent').width( W - 50 ).height( H - 75 );
|
250 |
+
tbWindow.css({'margin-left': '-' + parseInt((( W - 50 ) / 2),10) + 'px'});
|
251 |
+
if ( typeof document.body.style.maxWidth != 'undefined' )
|
252 |
+
tbWindow.css({'top':'20px','margin-top':'0'});
|
253 |
+
$('#TB_title').css({'background-color':'#222','color':'#cfcfcf'});
|
254 |
+
};
|
255 |
+
|
256 |
+
return $('a.thickbox').each( function() {
|
257 |
+
var href = $(this).attr('href');
|
258 |
+
if ( ! href ) return;
|
259 |
+
href = href.replace(/&width=[0-9]+/g, '');
|
260 |
+
href = href.replace(/&height=[0-9]+/g, '');
|
261 |
+
$(this).attr( 'href', href + '&width=' + ( W - 80 ) + '&height=' + ( H - 85 ) );
|
262 |
+
});
|
263 |
+
};
|
264 |
+
|
265 |
+
//
|
266 |
+
// public methods
|
267 |
+
//
|
268 |
+
// plugin.foo_public_method = function() {}
|
269 |
+
|
270 |
+
|
271 |
+
//
|
272 |
+
// private methods
|
273 |
+
//
|
274 |
+
var update_css = function () {
|
275 |
+
$css.val( $(this).val() ).change();
|
276 |
+
}
|
277 |
+
|
278 |
+
var type_click = function() {
|
279 |
+
var new_type = $(this).data('type');
|
280 |
+
|
281 |
+
if ( new_type == $active.val() ) {
|
282 |
+
return false;
|
283 |
+
}else {
|
284 |
+
type_switch( new_type );
|
285 |
+
}
|
286 |
+
|
287 |
+
return false;
|
288 |
+
}
|
289 |
+
|
290 |
+
var type_switch = function( type ) {
|
291 |
+
$ui.empty();
|
292 |
+
|
293 |
+
$type_links.removeClass('active').each( function(){
|
294 |
+
if (type == $(this).data('type')) { $(this).addClass('active'); }
|
295 |
+
});
|
296 |
+
|
297 |
+
switch ( type ) {
|
298 |
+
case 'bg_color': load_color(); break;
|
299 |
+
case 'transparent': load_transparent(); break;
|
300 |
+
case 'gradient': load_gradient(); break;
|
301 |
+
case 'image': load_image(); break;
|
302 |
+
case 'hide': load_hide(); break;
|
303 |
+
case 'font': load_font(); break;
|
304 |
+
}
|
305 |
+
|
306 |
+
if ( type !== 'font' ) {
|
307 |
+
$active.val( type );
|
308 |
+
}
|
309 |
+
}
|
310 |
+
|
311 |
+
var load_font = function() {
|
312 |
+
$ui.siblings('div.font').toggle();
|
313 |
+
$ui.siblings('div.background-image').hide();
|
314 |
+
}
|
315 |
+
|
316 |
+
var load_hide = function() {
|
317 |
+
$css.val('hide').change();
|
318 |
+
$ui.siblings('div.background-image').hide();
|
319 |
+
}
|
320 |
+
|
321 |
+
var load_transparent = function() {
|
322 |
+
$css.val('transparent').change();
|
323 |
+
$ui.siblings('div.background-image').hide();
|
324 |
+
}
|
325 |
+
|
326 |
+
var load_gradient = function() {
|
327 |
+
var gradientPicker = $('<div class="gradPicker" />').gradientPicker({
|
328 |
+
$stops: $stops
|
329 |
+
});
|
330 |
+
|
331 |
+
$css.val( $stops.val() ).change();
|
332 |
+
$ui.siblings('div.background-image').hide();
|
333 |
+
$ui.append( gradientPicker );
|
334 |
+
}
|
335 |
+
|
336 |
+
var load_image = function() {
|
337 |
+
var imagePicker = $('<input type="button" class="button" value="Select Image" />').click( show_image_uploader );
|
338 |
+
var imagePreview = $('<img class="imagePreview" />').attr('src', $image.val() );
|
339 |
+
|
340 |
+
$css.val( $image.val() ).change();
|
341 |
+
|
342 |
+
$ui.siblings('div.background-image').show();
|
343 |
+
$ui.append( imagePicker ).append( imagePreview );
|
344 |
+
}
|
345 |
+
|
346 |
+
var update_image_preview = function() {
|
347 |
+
$ui.find('img.imagePreview').attr('src', $image.val() );
|
348 |
+
}
|
349 |
+
|
350 |
+
var load_color = function() {
|
351 |
+
$ui.siblings('div.background-image').hide();
|
352 |
+
|
353 |
+
var colorVal = $color.val().replace('#', '');
|
354 |
+
|
355 |
+
// Update color field value
|
356 |
+
if ( colorVal.length > 1 ) {
|
357 |
+
$color.data('color', colorVal );
|
358 |
+
$color.data('ahex', colorVal );
|
359 |
+
}else {
|
360 |
+
$color.data('ahex', 'ffffffff' );
|
361 |
+
}
|
362 |
+
$css.val( $color.val() ).change(); // Keeps #
|
363 |
+
|
364 |
+
var tmpColorPickerOpts = $.extend( colorPickerOpts, { color: colorVal });
|
365 |
+
|
366 |
+
var colorPicker = $('<div/>').ColorPicker( tmpColorPickerOpts );
|
367 |
+
|
368 |
+
$ui.append( colorPicker );
|
369 |
+
|
370 |
+
// function(color, context) { /* Live color slide */
|
371 |
+
// if ( color.val() == null ) {
|
372 |
+
// var rgba = 'transparent';
|
373 |
+
// }else {
|
374 |
+
// var alpha = Math.round( color.val('a') / 255 * 100 ) / 100;
|
375 |
+
// var rgba = 'rgba('+color.val('r')+','+color.val('g')+','+color.val('b')+','+alpha+')';
|
376 |
+
// }
|
377 |
+
//
|
378 |
+
// $color.val( rgba );
|
379 |
+
// $color.data('ahex', color.val('ahex') );
|
380 |
+
// $css.val( rgba ).change();
|
381 |
+
// }
|
382 |
+
|
383 |
+
}
|
384 |
+
|
385 |
+
var setColor = function(el, hex) {
|
386 |
+
$(el).each(function() {
|
387 |
+
$color.val( '#'+hex ).data('color', hex);
|
388 |
+
// $(this).css('backgroundColor', $color.val() );
|
389 |
+
});
|
390 |
+
|
391 |
+
$css.val( $color.val() );
|
392 |
+
|
393 |
+
$css.change();
|
394 |
+
}
|
395 |
+
|
396 |
+
var show_image_uploader = function() {
|
397 |
+
blogicons = {
|
398 |
+
uploadid: $image.attr('id')
|
399 |
+
}
|
400 |
+
tb_show('', storm_admin.mediaUploadURL+'?type=image&tab=library&TB_iframe=true');
|
401 |
+
}
|
402 |
+
|
403 |
+
plugin.init();
|
404 |
+
|
405 |
+
}
|
406 |
+
|
407 |
+
// add the plugin to the jQuery.fn object
|
408 |
+
$.fn.bgPicker = function(options) {
|
409 |
+
|
410 |
+
// iterate through the DOM elements we are attaching the plugin to
|
411 |
+
return this.each(function() {
|
412 |
+
|
413 |
+
// if plugin has not already been attached to the element
|
414 |
+
if (undefined == $(this).data('bgPicker')) {
|
415 |
+
|
416 |
+
// create a new instance of the plugin
|
417 |
+
// pass the DOM element and the user-provided options as arguments
|
418 |
+
var plugin = new $.bgPicker(this, options);
|
419 |
+
|
420 |
+
// in the jQuery version of the element
|
421 |
+
// store a reference to the plugin object
|
422 |
+
// you can later access the plugin and its methods and properties like
|
423 |
+
// element.data('bgPicker').publicMethod(arg1, arg2, ... argn) or
|
424 |
+
// element.data('bgPicker').settings.propertyName
|
425 |
+
$(this).data('bgPicker', plugin);
|
426 |
+
|
427 |
+
}
|
428 |
+
|
429 |
+
});
|
430 |
+
|
431 |
+
}
|
432 |
+
|
433 |
})(jQuery);
|
js/jq.gradientpicker.js
CHANGED
@@ -1,366 +1,366 @@
|
|
1 |
-
// Gradient Picker plugin
|
2 |
-
// @author pdclark
|
3 |
-
(function($) {
|
4 |
-
|
5 |
-
// here we go!
|
6 |
-
$.gradientPicker = function(element, options) {
|
7 |
-
|
8 |
-
// to avoid confusion, use "plugin" to reference the current instance of the object
|
9 |
-
var plugin = this;
|
10 |
-
|
11 |
-
// this will hold the merged default, and user-provided options
|
12 |
-
// plugin's properties will be available through this object like:
|
13 |
-
// plugin.settings.propertyName from inside the plugin or
|
14 |
-
// element.data('gradientPicker').settings.propertyName from outside the plugin, where "element" is the
|
15 |
-
// element the plugin is attached to;
|
16 |
-
plugin.settings = {}
|
17 |
-
|
18 |
-
var $element = $(element), // reference to the jQuery version of DOM element the plugin is attached to
|
19 |
-
element = element; // reference to the actual DOM element
|
20 |
-
|
21 |
-
var $markerWrap, $preview, $stops, $presets;
|
22 |
-
|
23 |
-
var initComplete = false;
|
24 |
-
|
25 |
-
var timeoutID;
|
26 |
-
|
27 |
-
var stops = new Array();
|
28 |
-
|
29 |
-
var colorPickerOpts = {
|
30 |
-
eventName: 'dblclick',
|
31 |
-
onSubmit: function(hsb, hex, rgb, el) {
|
32 |
-
setHandleColor(el, hex);
|
33 |
-
$(el).ColorPickerHide();
|
34 |
-
},
|
35 |
-
onBeforeShow: function () {
|
36 |
-
if ( $(this).data('color') ) {
|
37 |
-
$(this).ColorPickerSetColor( $(this).data('color') );
|
38 |
-
}
|
39 |
-
},
|
40 |
-
onHide: function (colpkr) {
|
41 |
-
var el = $(colpkr).data('colorpicker').el;
|
42 |
-
var hex = $(colpkr).find('div.colorpicker_hex input').val();
|
43 |
-
|
44 |
-
setHandleColor(el, hex);
|
45 |
-
|
46 |
-
return true;
|
47 |
-
},
|
48 |
-
onChange: function(hsb, hex, rgb) {
|
49 |
-
var el = $(this).data('colorpicker').el;
|
50 |
-
|
51 |
-
setHandleColor(el, hex);
|
52 |
-
}
|
53 |
-
};
|
54 |
-
|
55 |
-
// plugin's default options
|
56 |
-
// this is private property and is accessible only from inside the plugin
|
57 |
-
var defaults = {
|
58 |
-
|
59 |
-
// foo: 'bar',
|
60 |
-
$stops: $element.find('input.stops'),
|
61 |
-
|
62 |
-
// if your plugin is event-driven, you may provide callback capabilities for its events.
|
63 |
-
// execute these functions before or after events of your plugin, so that users may customize
|
64 |
-
// those particular events without changing the plugin's code
|
65 |
-
// onFoo: function() {}
|
66 |
-
|
67 |
-
}
|
68 |
-
|
69 |
-
// Constructor
|
70 |
-
plugin.init = function() {
|
71 |
-
// the plugin's final properties are the merged default and user-provided options (if any)
|
72 |
-
plugin.settings = $.extend({}, defaults, options);
|
73 |
-
|
74 |
-
$presets = $('<div class="presets" />');
|
75 |
-
$preview = $('<div class="grad-preview" />');
|
76 |
-
$markerWrap = $('<div class="stop-markers" />').click( addMarker );
|
77 |
-
|
78 |
-
$stops = plugin.settings.$stops;
|
79 |
-
|
80 |
-
$element.append( $presets, $preview, $markerWrap );
|
81 |
-
|
82 |
-
stopsInputToArray();
|
83 |
-
stopsArrayToMarkers();
|
84 |
-
stopsMarkersToArray();
|
85 |
-
|
86 |
-
setupPresets();
|
87 |
-
|
88 |
-
initComplete = true;
|
89 |
-
}
|
90 |
-
|
91 |
-
//
|
92 |
-
// public methods
|
93 |
-
//
|
94 |
-
// these methods can be called like:
|
95 |
-
// plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
|
96 |
-
// element.data('gradientPicker').publicMethod(arg1, arg2, ... argn) from outside the plugin, where "element"
|
97 |
-
// is the element the plugin is attached to;
|
98 |
-
|
99 |
-
plugin.updatePreview = function() {
|
100 |
-
var css = 'background:-webkit-linear-gradient(0deg, '+stops+');background:-moz-linear-gradient(0deg, '+stops+');background:-ms-linear-gradient(0deg, '+stops+');background:-o-linear-gradient(0deg, '+stops+');background:linear-gradient(0deg, '+stops+');';
|
101 |
-
|
102 |
-
$preview.attr('style', css);
|
103 |
-
|
104 |
-
stopsArrayToInput();
|
105 |
-
}
|
106 |
-
|
107 |
-
//
|
108 |
-
// Private Methods
|
109 |
-
//
|
110 |
-
|
111 |
-
// --- Data passing
|
112 |
-
|
113 |
-
var stopsInputToArray = function () {
|
114 |
-
stops.length = 0;
|
115 |
-
|
116 |
-
var tmp = $stops.val();
|
117 |
-
tmp = tmp.split(',');
|
118 |
-
|
119 |
-
$.each(tmp, function(i, val){
|
120 |
-
val = $.trim(val);
|
121 |
-
val = val.split(' ');
|
122 |
-
|
123 |
-
if ( val[0] != undefined ){ var hex = val[0].replace('#', ''); }
|
124 |
-
else { var hex = '#000000'; }
|
125 |
-
|
126 |
-
if ( val[1] != undefined ){ var value = val[1].replace('%', ''); }
|
127 |
-
else { var value = ''; }
|
128 |
-
|
129 |
-
stops.push( {
|
130 |
-
hex: hex,
|
131 |
-
value: value,
|
132 |
-
toString: function() { return '#'+this.hex+' '+this.value+'%'; }
|
133 |
-
});
|
134 |
-
|
135 |
-
});
|
136 |
-
plugin.updatePreview();
|
137 |
-
}
|
138 |
-
|
139 |
-
var stopsArrayToMarkers = function () {
|
140 |
-
$markerWrap.find('div.marker').slider('destroy').remove();
|
141 |
-
$.each( stops, function(i, stop){
|
142 |
-
addMarker( {}, stop.value, stop.hex );
|
143 |
-
} );
|
144 |
-
|
145 |
-
}
|
146 |
-
|
147 |
-
var stopsArrayToInput = function() {
|
148 |
-
if ( stops.toString() != $stops.val() ) {
|
149 |
-
|
150 |
-
clearTimeout(timeoutID);
|
151 |
-
|
152 |
-
timeoutID = setTimeout( function(){
|
153 |
-
$stops.val(stops).change();
|
154 |
-
}, 500);
|
155 |
-
|
156 |
-
}
|
157 |
-
}
|
158 |
-
|
159 |
-
var stopsMarkersToArray = function() {
|
160 |
-
if ( !initComplete ) { return; }
|
161 |
-
|
162 |
-
stops.length = 0;
|
163 |
-
|
164 |
-
$markerWrap.find('div.marker').each(function(){
|
165 |
-
var hex = $(this).data('color'),
|
166 |
-
value = $(this).slider('value');
|
167 |
-
|
168 |
-
stops.push({
|
169 |
-
hex: hex,
|
170 |
-
value: value,
|
171 |
-
toString: function() { return '#'+this.hex+' '+this.value+'%'; }
|
172 |
-
});
|
173 |
-
});
|
174 |
-
|
175 |
-
stops.sort( function( a, b ){
|
176 |
-
if ( a.value < b.value ) { return -1; } // Less than 0: Sort "a" to be a lower index than "b"
|
177 |
-
if ( a.value > b.value ) { return 1; } // Greater than 0: Sort "b" to be a lower index than "a".
|
178 |
-
return 0; // Zero: "a" and "b" should be considered equal, and no sorting performed.
|
179 |
-
});
|
180 |
-
|
181 |
-
plugin.updatePreview();
|
182 |
-
}
|
183 |
-
|
184 |
-
// --- Presets
|
185 |
-
|
186 |
-
var setupPresets = function() {
|
187 |
-
var li, css,
|
188 |
-
cssTemplate = 'background: -moz-linear-gradient(VAL);background: -webkit-linear-gradient(VAL);background: -o-linear-gradient(VAL);background: -ms-linear-gradient(VAL);background: linear-gradient(VAL);',
|
189 |
-
presets = [
|
190 |
-
'#000000 0%, #ffffff 100%'
|
191 |
-
,'#e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%'
|
192 |
-
,'#d8e0de 0%, #aebfbc 22%, #99afab 33%, #8ea6a2 50%, #829d98 67%, #4e5c5a 82%, #0e0e0e 100%'
|
193 |
-
,'#b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%'
|
194 |
-
,'#3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%'
|
195 |
-
,'#b3dced 0%,#29b8e5 50%,#bce0ee 100%'
|
196 |
-
,'#cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%'
|
197 |
-
,'#e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%'
|
198 |
-
,'#e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%'
|
199 |
-
// ,'#00b7ea 0%, #009ec3 100%'
|
200 |
-
,'#ff0000 0%,#ff9d00 20%,#fbff00 40%,#1fcf00 60%,#0011ff 80%,#c910c9 100%'
|
201 |
-
],
|
202 |
-
$list = $('<ul/>');
|
203 |
-
|
204 |
-
$.each( presets, function( index, value ){
|
205 |
-
|
206 |
-
css = cssTemplate.replace(/VAL/g, '-45deg, '+value);
|
207 |
-
|
208 |
-
li = $('<li/>')
|
209 |
-
.attr( 'style', css )
|
210 |
-
.data('value', value)
|
211 |
-
.click( loadPreset );
|
212 |
-
|
213 |
-
$list.append( li );
|
214 |
-
|
215 |
-
});
|
216 |
-
|
217 |
-
$presets.append( $list );
|
218 |
-
|
219 |
-
// If we don't have a gradient loaded by now,
|
220 |
-
// load the first preset
|
221 |
-
if ( stops.length == 1 ) {
|
222 |
-
$presets.find('li:first').click();
|
223 |
-
}
|
224 |
-
|
225 |
-
}
|
226 |
-
|
227 |
-
var loadPreset = function() {
|
228 |
-
$stops.val( $(this).data('value') );
|
229 |
-
|
230 |
-
stopsInputToArray();
|
231 |
-
stopsArrayToMarkers();
|
232 |
-
$stops.change();
|
233 |
-
// stopsMarkersToArray();
|
234 |
-
|
235 |
-
}
|
236 |
-
|
237 |
-
// --- Sliders
|
238 |
-
|
239 |
-
var markerSlide = function(event, ui) {
|
240 |
-
var thisY = $(this).offset().top;
|
241 |
-
var mouseY = event.originalEvent.pageY;
|
242 |
-
|
243 |
-
if ( (mouseY - thisY) > 25 ) { // Mouse has moved more than X pixels below slider
|
244 |
-
if ( ! $(this).data('remove') ) { // Slider not yet flagged 'remove'
|
245 |
-
$(this).data('remove', true); // Flag as 'remove'
|
246 |
-
$(this).css('opacity', '.2');
|
247 |
-
}
|
248 |
-
}else { // Mouse within X pixels of slider
|
249 |
-
if ( $(this).data('remove') ) { // Slider still flagged
|
250 |
-
$(this).data('remove', false); // Unflag it
|
251 |
-
$(this).css('opacity', '1');
|
252 |
-
}
|
253 |
-
}
|
254 |
-
|
255 |
-
stopsMarkersToArray();
|
256 |
-
}
|
257 |
-
|
258 |
-
var markerStop = function( event, ui ) {
|
259 |
-
if ( $(this).data('remove') ) {
|
260 |
-
$(this).slider('destroy').remove();
|
261 |
-
stopsMarkersToArray();
|
262 |
-
}
|
263 |
-
stopsArrayToInput();
|
264 |
-
}
|
265 |
-
|
266 |
-
var setHandleColor = function(el, hex, newMarker) {
|
267 |
-
$(el).each(function() {
|
268 |
-
$(this).data('color', hex).find('a').css('backgroundColor', '#'+hex);
|
269 |
-
});
|
270 |
-
|
271 |
-
if ( newMarker !== true ){
|
272 |
-
stopsMarkersToArray();
|
273 |
-
}
|
274 |
-
}
|
275 |
-
|
276 |
-
var addMarker = function( e, value, hex ) {
|
277 |
-
if ( 'object' == typeof(e.target) && $(e.target).is('a') ) {
|
278 |
-
return;
|
279 |
-
}
|
280 |
-
|
281 |
-
if ( e.layerX === undefined ) {
|
282 |
-
var offset = $(this).offset();
|
283 |
-
if ( offset != null ) { e.layerX = e.pageX - offset.left; }
|
284 |
-
}
|
285 |
-
|
286 |
-
if ( value === undefined ) { value = Math.round( e.layerX / $(this).width() * 100 ); }
|
287 |
-
if ( hex === undefined ) { hex = '000000'; }
|
288 |
-
|
289 |
-
if ( isNaN(value) ) return;
|
290 |
-
|
291 |
-
var marker = $('<div class="marker"/>');
|
292 |
-
|
293 |
-
var sliderOpts = {
|
294 |
-
min: 0,
|
295 |
-
max: 100,
|
296 |
-
value: value,
|
297 |
-
stop: markerStop,
|
298 |
-
slide: markerSlide
|
299 |
-
};
|
300 |
-
|
301 |
-
marker.slider( sliderOpts ).unbind( 'click' ).ColorPicker( colorPickerOpts ).click( removeMarker );
|
302 |
-
|
303 |
-
$markerWrap.append( marker );
|
304 |
-
|
305 |
-
setHandleColor( marker, hex, true );
|
306 |
-
|
307 |
-
}
|
308 |
-
|
309 |
-
var removeMarker = function(e) {
|
310 |
-
if ( e.altKey || e === true ) {
|
311 |
-
$(this).slider('destroy').remove();
|
312 |
-
stopsMarkersToArray();
|
313 |
-
stopsArrayToInput();
|
314 |
-
return false;
|
315 |
-
}
|
316 |
-
}
|
317 |
-
|
318 |
-
// --- Utility
|
319 |
-
|
320 |
-
var rgbtohex = function(rgbString) {
|
321 |
-
var parts = rgbString
|
322 |
-
.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
|
323 |
-
;
|
324 |
-
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]
|
325 |
-
|
326 |
-
delete (parts[0]);
|
327 |
-
for (var i = 1; i <= 3; ++i) {
|
328 |
-
parts[i] = parseInt(parts[i]).toString(16);
|
329 |
-
if (parts[i].length == 1) parts[i] = '0' + parts[i];
|
330 |
-
}
|
331 |
-
return '#'+parts.join(''); // "0070ff"
|
332 |
-
}
|
333 |
-
|
334 |
-
// fire up the plugin!
|
335 |
-
// call the "constructor" method
|
336 |
-
plugin.init();
|
337 |
-
|
338 |
-
}
|
339 |
-
|
340 |
-
// add the plugin to the jQuery.fn object
|
341 |
-
$.fn.gradientPicker = function(options) {
|
342 |
-
|
343 |
-
// iterate through the DOM elements we are attaching the plugin to
|
344 |
-
return this.each(function() {
|
345 |
-
|
346 |
-
// if plugin has not already been attached to the element
|
347 |
-
if (undefined == $(this).data('gradientPicker')) {
|
348 |
-
|
349 |
-
// create a new instance of the plugin
|
350 |
-
// pass the DOM element and the user-provided options as arguments
|
351 |
-
var plugin = new $.gradientPicker(this, options);
|
352 |
-
|
353 |
-
// in the jQuery version of the element
|
354 |
-
// store a reference to the plugin object
|
355 |
-
// you can later access the plugin and its methods and properties like
|
356 |
-
// element.data('gradientPicker').publicMethod(arg1, arg2, ... argn) or
|
357 |
-
// element.data('gradientPicker').settings.propertyName
|
358 |
-
$(this).data('gradientPicker', plugin);
|
359 |
-
|
360 |
-
}
|
361 |
-
|
362 |
-
});
|
363 |
-
|
364 |
-
}
|
365 |
-
|
366 |
-
})(jQuery);
|
1 |
+
// Gradient Picker plugin
|
2 |
+
// @author pdclark
|
3 |
+
(function($) {
|
4 |
+
|
5 |
+
// here we go!
|
6 |
+
$.gradientPicker = function(element, options) {
|
7 |
+
|
8 |
+
// to avoid confusion, use "plugin" to reference the current instance of the object
|
9 |
+
var plugin = this;
|
10 |
+
|
11 |
+
// this will hold the merged default, and user-provided options
|
12 |
+
// plugin's properties will be available through this object like:
|
13 |
+
// plugin.settings.propertyName from inside the plugin or
|
14 |
+
// element.data('gradientPicker').settings.propertyName from outside the plugin, where "element" is the
|
15 |
+
// element the plugin is attached to;
|
16 |
+
plugin.settings = {}
|
17 |
+
|
18 |
+
var $element = $(element), // reference to the jQuery version of DOM element the plugin is attached to
|
19 |
+
element = element; // reference to the actual DOM element
|
20 |
+
|
21 |
+
var $markerWrap, $preview, $stops, $presets;
|
22 |
+
|
23 |
+
var initComplete = false;
|
24 |
+
|
25 |
+
var timeoutID;
|
26 |
+
|
27 |
+
var stops = new Array();
|
28 |
+
|
29 |
+
var colorPickerOpts = {
|
30 |
+
eventName: 'dblclick',
|
31 |
+
onSubmit: function(hsb, hex, rgb, el) {
|
32 |
+
setHandleColor(el, hex);
|
33 |
+
$(el).ColorPickerHide();
|
34 |
+
},
|
35 |
+
onBeforeShow: function () {
|
36 |
+
if ( $(this).data('color') ) {
|
37 |
+
$(this).ColorPickerSetColor( $(this).data('color') );
|
38 |
+
}
|
39 |
+
},
|
40 |
+
onHide: function (colpkr) {
|
41 |
+
var el = $(colpkr).data('colorpicker').el;
|
42 |
+
var hex = $(colpkr).find('div.colorpicker_hex input').val();
|
43 |
+
|
44 |
+
setHandleColor(el, hex);
|
45 |
+
|
46 |
+
return true;
|
47 |
+
},
|
48 |
+
onChange: function(hsb, hex, rgb) {
|
49 |
+
var el = $(this).data('colorpicker').el;
|
50 |
+
|
51 |
+
setHandleColor(el, hex);
|
52 |
+
}
|
53 |
+
};
|
54 |
+
|
55 |
+
// plugin's default options
|
56 |
+
// this is private property and is accessible only from inside the plugin
|
57 |
+
var defaults = {
|
58 |
+
|
59 |
+
// foo: 'bar',
|
60 |
+
$stops: $element.find('input.stops'),
|
61 |
+
|
62 |
+
// if your plugin is event-driven, you may provide callback capabilities for its events.
|
63 |
+
// execute these functions before or after events of your plugin, so that users may customize
|
64 |
+
// those particular events without changing the plugin's code
|
65 |
+
// onFoo: function() {}
|
66 |
+
|
67 |
+
}
|
68 |
+
|
69 |
+
// Constructor
|
70 |
+
plugin.init = function() {
|
71 |
+
// the plugin's final properties are the merged default and user-provided options (if any)
|
72 |
+
plugin.settings = $.extend({}, defaults, options);
|
73 |
+
|
74 |
+
$presets = $('<div class="presets" />');
|
75 |
+
$preview = $('<div class="grad-preview" />');
|
76 |
+
$markerWrap = $('<div class="stop-markers" />').click( addMarker );
|
77 |
+
|
78 |
+
$stops = plugin.settings.$stops;
|
79 |
+
|
80 |
+
$element.append( $presets, $preview, $markerWrap );
|
81 |
+
|
82 |
+
stopsInputToArray();
|
83 |
+
stopsArrayToMarkers();
|
84 |
+
stopsMarkersToArray();
|
85 |
+
|
86 |
+
setupPresets();
|
87 |
+
|
88 |
+
initComplete = true;
|
89 |
+
}
|
90 |
+
|
91 |
+
//
|
92 |
+
// public methods
|
93 |
+
//
|
94 |
+
// these methods can be called like:
|
95 |
+
// plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
|
96 |
+
// element.data('gradientPicker').publicMethod(arg1, arg2, ... argn) from outside the plugin, where "element"
|
97 |
+
// is the element the plugin is attached to;
|
98 |
+
|
99 |
+
plugin.updatePreview = function() {
|
100 |
+
var css = 'background:-webkit-linear-gradient(0deg, '+stops+');background:-moz-linear-gradient(0deg, '+stops+');background:-ms-linear-gradient(0deg, '+stops+');background:-o-linear-gradient(0deg, '+stops+');background:linear-gradient(0deg, '+stops+');';
|
101 |
+
|
102 |
+
$preview.attr('style', css);
|
103 |
+
|
104 |
+
stopsArrayToInput();
|
105 |
+
}
|
106 |
+
|
107 |
+
//
|
108 |
+
// Private Methods
|
109 |
+
//
|
110 |
+
|
111 |
+
// --- Data passing
|
112 |
+
|
113 |
+
var stopsInputToArray = function () {
|
114 |
+
stops.length = 0;
|
115 |
+
|
116 |
+
var tmp = $stops.val();
|
117 |
+
tmp = tmp.split(',');
|
118 |
+
|
119 |
+
$.each(tmp, function(i, val){
|
120 |
+
val = $.trim(val);
|
121 |
+
val = val.split(' ');
|
122 |
+
|
123 |
+
if ( val[0] != undefined ){ var hex = val[0].replace('#', ''); }
|
124 |
+
else { var hex = '#000000'; }
|
125 |
+
|
126 |
+
if ( val[1] != undefined ){ var value = val[1].replace('%', ''); }
|
127 |
+
else { var value = ''; }
|
128 |
+
|
129 |
+
stops.push( {
|
130 |
+
hex: hex,
|
131 |
+
value: value,
|
132 |
+
toString: function() { return '#'+this.hex+' '+this.value+'%'; }
|
133 |
+
});
|
134 |
+
|
135 |
+
});
|
136 |
+
plugin.updatePreview();
|
137 |
+
}
|
138 |
+
|
139 |
+
var stopsArrayToMarkers = function () {
|
140 |
+
$markerWrap.find('div.marker').slider('destroy').remove();
|
141 |
+
$.each( stops, function(i, stop){
|
142 |
+
addMarker( {}, stop.value, stop.hex );
|
143 |
+
} );
|
144 |
+
|
145 |
+
}
|
146 |
+
|
147 |
+
var stopsArrayToInput = function() {
|
148 |
+
if ( stops.toString() != $stops.val() ) {
|
149 |
+
|
150 |
+
clearTimeout(timeoutID);
|
151 |
+
|
152 |
+
timeoutID = setTimeout( function(){
|
153 |
+
$stops.val(stops).change();
|
154 |
+
}, 500);
|
155 |
+
|
156 |
+
}
|
157 |
+
}
|
158 |
+
|
159 |
+
var stopsMarkersToArray = function() {
|
160 |
+
if ( !initComplete ) { return; }
|
161 |
+
|
162 |
+
stops.length = 0;
|
163 |
+
|
164 |
+
$markerWrap.find('div.marker').each(function(){
|
165 |
+
var hex = $(this).data('color'),
|
166 |
+
value = $(this).slider('value');
|
167 |
+
|
168 |
+
stops.push({
|
169 |
+
hex: hex,
|
170 |
+
value: value,
|
171 |
+
toString: function() { return '#'+this.hex+' '+this.value+'%'; }
|
172 |
+
});
|
173 |
+
});
|
174 |
+
|
175 |
+
stops.sort( function( a, b ){
|
176 |
+
if ( a.value < b.value ) { return -1; } // Less than 0: Sort "a" to be a lower index than "b"
|
177 |
+
if ( a.value > b.value ) { return 1; } // Greater than 0: Sort "b" to be a lower index than "a".
|
178 |
+
return 0; // Zero: "a" and "b" should be considered equal, and no sorting performed.
|
179 |
+
});
|
180 |
+
|
181 |
+
plugin.updatePreview();
|
182 |
+
}
|
183 |
+
|
184 |
+
// --- Presets
|
185 |
+
|
186 |
+
var setupPresets = function() {
|
187 |
+
var li, css,
|
188 |
+
cssTemplate = 'background: -moz-linear-gradient(VAL);background: -webkit-linear-gradient(VAL);background: -o-linear-gradient(VAL);background: -ms-linear-gradient(VAL);background: linear-gradient(VAL);',
|
189 |
+
presets = [
|
190 |
+
'#000000 0%, #ffffff 100%'
|
191 |
+
,'#e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%'
|
192 |
+
,'#d8e0de 0%, #aebfbc 22%, #99afab 33%, #8ea6a2 50%, #829d98 67%, #4e5c5a 82%, #0e0e0e 100%'
|
193 |
+
,'#b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%'
|
194 |
+
,'#3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%'
|
195 |
+
,'#b3dced 0%,#29b8e5 50%,#bce0ee 100%'
|
196 |
+
,'#cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%'
|
197 |
+
,'#e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%'
|
198 |
+
,'#e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%'
|
199 |
+
// ,'#00b7ea 0%, #009ec3 100%'
|
200 |
+
,'#ff0000 0%,#ff9d00 20%,#fbff00 40%,#1fcf00 60%,#0011ff 80%,#c910c9 100%'
|
201 |
+
],
|
202 |
+
$list = $('<ul/>');
|
203 |
+
|
204 |
+
$.each( presets, function( index, value ){
|
205 |
+
|
206 |
+
css = cssTemplate.replace(/VAL/g, '-45deg, '+value);
|
207 |
+
|
208 |
+
li = $('<li/>')
|
209 |
+
.attr( 'style', css )
|
210 |
+
.data('value', value)
|
211 |
+
.click( loadPreset );
|
212 |
+
|
213 |
+
$list.append( li );
|
214 |
+
|
215 |
+
});
|
216 |
+
|
217 |
+
$presets.append( $list );
|
218 |
+
|
219 |
+
// If we don't have a gradient loaded by now,
|
220 |
+
// load the first preset
|
221 |
+
if ( stops.length == 1 ) {
|
222 |
+
$presets.find('li:first').click();
|
223 |
+
}
|
224 |
+
|
225 |
+
}
|
226 |
+
|
227 |
+
var loadPreset = function() {
|
228 |
+
$stops.val( $(this).data('value') );
|
229 |
+
|
230 |
+
stopsInputToArray();
|
231 |
+
stopsArrayToMarkers();
|
232 |
+
$stops.change();
|
233 |
+
// stopsMarkersToArray();
|
234 |
+
|
235 |
+
}
|
236 |
+
|
237 |
+
// --- Sliders
|
238 |
+
|
239 |
+
var markerSlide = function(event, ui) {
|
240 |
+
var thisY = $(this).offset().top;
|
241 |
+
var mouseY = event.originalEvent.pageY;
|
242 |
+
|
243 |
+
if ( (mouseY - thisY) > 25 ) { // Mouse has moved more than X pixels below slider
|
244 |
+
if ( ! $(this).data('remove') ) { // Slider not yet flagged 'remove'
|
245 |
+
$(this).data('remove', true); // Flag as 'remove'
|
246 |
+
$(this).css('opacity', '.2');
|
247 |
+
}
|
248 |
+
}else { // Mouse within X pixels of slider
|
249 |
+
if ( $(this).data('remove') ) { // Slider still flagged
|
250 |
+
$(this).data('remove', false); // Unflag it
|
251 |
+
$(this).css('opacity', '1');
|
252 |
+
}
|
253 |
+
}
|
254 |
+
|
255 |
+
stopsMarkersToArray();
|
256 |
+
}
|
257 |
+
|
258 |
+
var markerStop = function( event, ui ) {
|
259 |
+
if ( $(this).data('remove') ) {
|
260 |
+
$(this).slider('destroy').remove();
|
261 |
+
stopsMarkersToArray();
|
262 |
+
}
|
263 |
+
stopsArrayToInput();
|
264 |
+
}
|
265 |
+
|
266 |
+
var setHandleColor = function(el, hex, newMarker) {
|
267 |
+
$(el).each(function() {
|
268 |
+
$(this).data('color', hex).find('a').css('backgroundColor', '#'+hex);
|
269 |
+
});
|
270 |
+
|
271 |
+
if ( newMarker !== true ){
|
272 |
+
stopsMarkersToArray();
|
273 |
+
}
|
274 |
+
}
|
275 |
+
|
276 |
+
var addMarker = function( e, value, hex ) {
|
277 |
+
if ( 'object' == typeof(e.target) && $(e.target).is('a') ) {
|
278 |
+
return;
|
279 |
+
}
|
280 |
+
|
281 |
+
if ( e.layerX === undefined ) {
|
282 |
+
var offset = $(this).offset();
|
283 |
+
if ( offset != null ) { e.layerX = e.pageX - offset.left; }
|
284 |
+
}
|
285 |
+
|
286 |
+
if ( value === undefined ) { value = Math.round( e.layerX / $(this).width() * 100 ); }
|
287 |
+
if ( hex === undefined ) { hex = '000000'; }
|
288 |
+
|
289 |
+
if ( isNaN(value) ) return;
|
290 |
+
|
291 |
+
var marker = $('<div class="marker"/>');
|
292 |
+
|
293 |
+
var sliderOpts = {
|
294 |
+
min: 0,
|
295 |
+
max: 100,
|
296 |
+
value: value,
|
297 |
+
stop: markerStop,
|
298 |
+
slide: markerSlide
|
299 |
+
};
|
300 |
+
|
301 |
+
marker.slider( sliderOpts ).unbind( 'click' ).ColorPicker( colorPickerOpts ).click( removeMarker );
|
302 |
+
|
303 |
+
$markerWrap.append( marker );
|
304 |
+
|
305 |
+
setHandleColor( marker, hex, true );
|
306 |
+
|
307 |
+
}
|
308 |
+
|
309 |
+
var removeMarker = function(e) {
|
310 |
+
if ( e.altKey || e === true ) {
|
311 |
+
$(this).slider('destroy').remove();
|
312 |
+
stopsMarkersToArray();
|
313 |
+
stopsArrayToInput();
|
314 |
+
return false;
|
315 |
+
}
|
316 |
+
}
|
317 |
+
|
318 |
+
// --- Utility
|
319 |
+
|
320 |
+
var rgbtohex = function(rgbString) {
|
321 |
+
var parts = rgbString
|
322 |
+
.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
|
323 |
+
;
|
324 |
+
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]
|
325 |
+
|
326 |
+
delete (parts[0]);
|
327 |
+
for (var i = 1; i <= 3; ++i) {
|
328 |
+
parts[i] = parseInt(parts[i]).toString(16);
|
329 |
+
if (parts[i].length == 1) parts[i] = '0' + parts[i];
|
330 |
+
}
|
331 |
+
return '#'+parts.join(''); // "0070ff"
|
332 |
+
}
|
333 |
+
|
334 |
+
// fire up the plugin!
|
335 |
+
// call the "constructor" method
|
336 |
+
plugin.init();
|
337 |
+
|
338 |
+
}
|
339 |
+
|
340 |
+
// add the plugin to the jQuery.fn object
|
341 |
+
$.fn.gradientPicker = function(options) {
|
342 |
+
|
343 |
+
// iterate through the DOM elements we are attaching the plugin to
|
344 |
+
return this.each(function() {
|
345 |
+
|
346 |
+
// if plugin has not already been attached to the element
|
347 |
+
if (undefined == $(this).data('gradientPicker')) {
|
348 |
+
|
349 |
+
// create a new instance of the plugin
|
350 |
+
// pass the DOM element and the user-provided options as arguments
|
351 |
+
var plugin = new $.gradientPicker(this, options);
|
352 |
+
|
353 |
+
// in the jQuery version of the element
|
354 |
+
// store a reference to the plugin object
|
355 |
+
// you can later access the plugin and its methods and properties like
|
356 |
+
// element.data('gradientPicker').publicMethod(arg1, arg2, ... argn) or
|
357 |
+
// element.data('gradientPicker').settings.propertyName
|
358 |
+
$(this).data('gradientPicker', plugin);
|
359 |
+
|
360 |
+
}
|
361 |
+
|
362 |
+
});
|
363 |
+
|
364 |
+
}
|
365 |
+
|
366 |
+
})(jQuery);
|
js/jquery.ui.mouse.js
CHANGED
@@ -1,162 +1,162 @@
|
|
1 |
-
/*!
|
2 |
-
* jQuery UI Mouse 1.8.16
|
3 |
-
*
|
4 |
-
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
5 |
-
* Dual licensed under the MIT or GPL Version 2 licenses.
|
6 |
-
* http://jquery.org/license
|
7 |
-
*
|
8 |
-
* http://docs.jquery.com/UI/Mouse
|
9 |
-
*
|
10 |
-
* Depends:
|
11 |
-
* jquery.ui.widget.js
|
12 |
-
*/
|
13 |
-
(function( $, undefined ) {
|
14 |
-
|
15 |
-
var mouseHandled = false;
|
16 |
-
$( document ).mouseup( function( e ) {
|
17 |
-
mouseHandled = false;
|
18 |
-
});
|
19 |
-
|
20 |
-
$.widget("ui.mouse", {
|
21 |
-
options: {
|
22 |
-
cancel: ':input,option',
|
23 |
-
distance: 1,
|
24 |
-
delay: 0
|
25 |
-
},
|
26 |
-
_mouseInit: function() {
|
27 |
-
var self = this;
|
28 |
-
|
29 |
-
this.element
|
30 |
-
.bind('mousedown.'+this.widgetName, function(event) {
|
31 |
-
return self._mouseDown(event);
|
32 |
-
})
|
33 |
-
.bind('click.'+this.widgetName, function(event) {
|
34 |
-
if (true === $.data(event.target, self.widgetName + '.preventClickEvent')) {
|
35 |
-
$.removeData(event.target, self.widgetName + '.preventClickEvent');
|
36 |
-
event.stopImmediatePropagation();
|
37 |
-
return false;
|
38 |
-
}
|
39 |
-
});
|
40 |
-
|
41 |
-
this.started = false;
|
42 |
-
},
|
43 |
-
|
44 |
-
// TODO: make sure destroying one instance of mouse doesn't mess with
|
45 |
-
// other instances of mouse
|
46 |
-
_mouseDestroy: function() {
|
47 |
-
this.element.unbind('.'+this.widgetName);
|
48 |
-
},
|
49 |
-
|
50 |
-
_mouseDown: function(event) {
|
51 |
-
// don't let more than one widget handle mouseStart
|
52 |
-
if( mouseHandled ) { return };
|
53 |
-
|
54 |
-
// we may have missed mouseup (out of window)
|
55 |
-
(this._mouseStarted && this._mouseUp(event));
|
56 |
-
|
57 |
-
this._mouseDownEvent = event;
|
58 |
-
|
59 |
-
var self = this,
|
60 |
-
btnIsLeft = (event.which == 1),
|
61 |
-
// event.target.nodeName works around a bug in IE 8 with
|
62 |
-
// disabled inputs (#7620)
|
63 |
-
elIsCancel = (typeof this.options.cancel == "string" && event.target.nodeName ? $(event.target).closest(this.options.cancel).length : false);
|
64 |
-
if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
|
65 |
-
return true;
|
66 |
-
}
|
67 |
-
|
68 |
-
this.mouseDelayMet = !this.options.delay;
|
69 |
-
if (!this.mouseDelayMet) {
|
70 |
-
this._mouseDelayTimer = setTimeout(function() {
|
71 |
-
self.mouseDelayMet = true;
|
72 |
-
}, this.options.delay);
|
73 |
-
}
|
74 |
-
|
75 |
-
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
|
76 |
-
this._mouseStarted = (this._mouseStart(event) !== false);
|
77 |
-
if (!this._mouseStarted) {
|
78 |
-
event.preventDefault();
|
79 |
-
return true;
|
80 |
-
}
|
81 |
-
}
|
82 |
-
|
83 |
-
// Click event may never have fired (Gecko & Opera)
|
84 |
-
if (true === $.data(event.target, this.widgetName + '.preventClickEvent')) {
|
85 |
-
$.removeData(event.target, this.widgetName + '.preventClickEvent');
|
86 |
-
}
|
87 |
-
|
88 |
-
// these delegates are required to keep context
|
89 |
-
this._mouseMoveDelegate = function(event) {
|
90 |
-
return self._mouseMove(event);
|
91 |
-
};
|
92 |
-
this._mouseUpDelegate = function(event) {
|
93 |
-
return self._mouseUp(event);
|
94 |
-
};
|
95 |
-
$(document)
|
96 |
-
.bind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
|
97 |
-
.bind('mouseup.'+this.widgetName, this._mouseUpDelegate);
|
98 |
-
|
99 |
-
event.preventDefault();
|
100 |
-
|
101 |
-
mouseHandled = true;
|
102 |
-
return true;
|
103 |
-
},
|
104 |
-
|
105 |
-
_mouseMove: function(event) {
|
106 |
-
// IE mouseup check - mouseup happened when mouse was out of window
|
107 |
-
if ($.browser.msie && !(document.documentMode >= 9) && !event.button) {
|
108 |
-
return this._mouseUp(event);
|
109 |
-
}
|
110 |
-
|
111 |
-
if (this._mouseStarted) {
|
112 |
-
this._mouseDrag(event);
|
113 |
-
return event.preventDefault();
|
114 |
-
}
|
115 |
-
|
116 |
-
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
|
117 |
-
this._mouseStarted =
|
118 |
-
(this._mouseStart(this._mouseDownEvent, event) !== false);
|
119 |
-
(this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
|
120 |
-
}
|
121 |
-
|
122 |
-
return !this._mouseStarted;
|
123 |
-
},
|
124 |
-
|
125 |
-
_mouseUp: function(event) {
|
126 |
-
$(document)
|
127 |
-
.unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
|
128 |
-
.unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);
|
129 |
-
|
130 |
-
if (this._mouseStarted) {
|
131 |
-
this._mouseStarted = false;
|
132 |
-
|
133 |
-
if (event.target == this._mouseDownEvent.target) {
|
134 |
-
$.data(event.target, this.widgetName + '.preventClickEvent', true);
|
135 |
-
}
|
136 |
-
|
137 |
-
this._mouseStop(event);
|
138 |
-
}
|
139 |
-
|
140 |
-
return false;
|
141 |
-
},
|
142 |
-
|
143 |
-
_mouseDistanceMet: function(event) {
|
144 |
-
return (Math.max(
|
145 |
-
Math.abs(this._mouseDownEvent.pageX - event.pageX),
|
146 |
-
Math.abs(this._mouseDownEvent.pageY - event.pageY)
|
147 |
-
) >= this.options.distance
|
148 |
-
);
|
149 |
-
},
|
150 |
-
|
151 |
-
_mouseDelayMet: function(event) {
|
152 |
-
return this.mouseDelayMet;
|
153 |
-
},
|
154 |
-
|
155 |
-
// These are placeholder methods, to be overriden by extending plugin
|
156 |
-
_mouseStart: function(event) {},
|
157 |
-
_mouseDrag: function(event) {},
|
158 |
-
_mouseStop: function(event) {},
|
159 |
-
_mouseCapture: function(event) { return true; }
|
160 |
-
});
|
161 |
-
|
162 |
-
})(jQuery);
|
1 |
+
/*!
|
2 |
+
* jQuery UI Mouse 1.8.16
|
3 |
+
*
|
4 |
+
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
5 |
+
* Dual licensed under the MIT or GPL Version 2 licenses.
|
6 |
+
* http://jquery.org/license
|
7 |
+
*
|
8 |
+
* http://docs.jquery.com/UI/Mouse
|
9 |
+
*
|
10 |
+
* Depends:
|
11 |
+
* jquery.ui.widget.js
|
12 |
+
*/
|
13 |
+
(function( $, undefined ) {
|
14 |
+
|
15 |
+
var mouseHandled = false;
|
16 |
+
$( document ).mouseup( function( e ) {
|
17 |
+
mouseHandled = false;
|
18 |
+
});
|
19 |
+
|
20 |
+
$.widget("ui.mouse", {
|
21 |
+
options: {
|
22 |
+
cancel: ':input,option',
|
23 |
+
distance: 1,
|
24 |
+
delay: 0
|
25 |
+
},
|
26 |
+
_mouseInit: function() {
|
27 |
+
var self = this;
|
28 |
+
|
29 |
+
this.element
|
30 |
+
.bind('mousedown.'+this.widgetName, function(event) {
|
31 |
+
return self._mouseDown(event);
|
32 |
+
})
|
33 |
+
.bind('click.'+this.widgetName, function(event) {
|
34 |
+
if (true === $.data(event.target, self.widgetName + '.preventClickEvent')) {
|
35 |
+
$.removeData(event.target, self.widgetName + '.preventClickEvent');
|
36 |
+
event.stopImmediatePropagation();
|
37 |
+
return false;
|
38 |
+
}
|
39 |
+
});
|
40 |
+
|
41 |
+
this.started = false;
|
42 |
+
},
|
43 |
+
|
44 |
+
// TODO: make sure destroying one instance of mouse doesn't mess with
|
45 |
+
// other instances of mouse
|
46 |
+
_mouseDestroy: function() {
|
47 |
+
this.element.unbind('.'+this.widgetName);
|
48 |
+
},
|
49 |
+
|
50 |
+
_mouseDown: function(event) {
|
51 |
+
// don't let more than one widget handle mouseStart
|
52 |
+
if( mouseHandled ) { return };
|
53 |
+
|
54 |
+
// we may have missed mouseup (out of window)
|
55 |
+
(this._mouseStarted && this._mouseUp(event));
|
56 |
+
|
57 |
+
this._mouseDownEvent = event;
|
58 |
+
|
59 |
+
var self = this,
|
60 |
+
btnIsLeft = (event.which == 1),
|
61 |
+
// event.target.nodeName works around a bug in IE 8 with
|
62 |
+
// disabled inputs (#7620)
|
63 |
+
elIsCancel = (typeof this.options.cancel == "string" && event.target.nodeName ? $(event.target).closest(this.options.cancel).length : false);
|
64 |
+
if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
|
65 |
+
return true;
|
66 |
+
}
|
67 |
+
|
68 |
+
this.mouseDelayMet = !this.options.delay;
|
69 |
+
if (!this.mouseDelayMet) {
|
70 |
+
this._mouseDelayTimer = setTimeout(function() {
|
71 |
+
self.mouseDelayMet = true;
|
72 |
+
}, this.options.delay);
|
73 |
+
}
|
74 |
+
|
75 |
+
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
|
76 |
+
this._mouseStarted = (this._mouseStart(event) !== false);
|
77 |
+
if (!this._mouseStarted) {
|
78 |
+
event.preventDefault();
|
79 |
+
return true;
|
80 |
+
}
|
81 |
+
}
|
82 |
+
|
83 |
+
// Click event may never have fired (Gecko & Opera)
|
84 |
+
if (true === $.data(event.target, this.widgetName + '.preventClickEvent')) {
|
85 |
+
$.removeData(event.target, this.widgetName + '.preventClickEvent');
|
86 |
+
}
|
87 |
+
|
88 |
+
// these delegates are required to keep context
|
89 |
+
this._mouseMoveDelegate = function(event) {
|
90 |
+
return self._mouseMove(event);
|
91 |
+
};
|
92 |
+
this._mouseUpDelegate = function(event) {
|
93 |
+
return self._mouseUp(event);
|
94 |
+
};
|
95 |
+
$(document)
|
96 |
+
.bind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
|
97 |
+
.bind('mouseup.'+this.widgetName, this._mouseUpDelegate);
|
98 |
+
|
99 |
+
event.preventDefault();
|
100 |
+
|
101 |
+
mouseHandled = true;
|
102 |
+
return true;
|
103 |
+
},
|
104 |
+
|
105 |
+
_mouseMove: function(event) {
|
106 |
+
// IE mouseup check - mouseup happened when mouse was out of window
|
107 |
+
if ($.browser.msie && !(document.documentMode >= 9) && !event.button) {
|
108 |
+
return this._mouseUp(event);
|
109 |
+
}
|
110 |
+
|
111 |
+
if (this._mouseStarted) {
|
112 |
+
this._mouseDrag(event);
|
113 |
+
return event.preventDefault();
|
114 |
+
}
|
115 |
+
|
116 |
+
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
|
117 |
+
this._mouseStarted =
|
118 |
+
(this._mouseStart(this._mouseDownEvent, event) !== false);
|
119 |
+
(this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
|
120 |
+
}
|
121 |
+
|
122 |
+
return !this._mouseStarted;
|
123 |
+
},
|
124 |
+
|
125 |
+
_mouseUp: function(event) {
|
126 |
+
$(document)
|
127 |
+
.unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
|
128 |
+
.unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);
|
129 |
+
|
130 |
+
if (this._mouseStarted) {
|
131 |
+
this._mouseStarted = false;
|
132 |
+
|
133 |
+
if (event.target == this._mouseDownEvent.target) {
|
134 |
+
$.data(event.target, this.widgetName + '.preventClickEvent', true);
|
135 |
+
}
|
136 |
+
|
137 |
+
this._mouseStop(event);
|
138 |
+
}
|
139 |
+
|
140 |
+
return false;
|
141 |
+
},
|
142 |
+
|
143 |
+
_mouseDistanceMet: function(event) {
|
144 |
+
return (Math.max(
|
145 |
+
Math.abs(this._mouseDownEvent.pageX - event.pageX),
|
146 |
+
Math.abs(this._mouseDownEvent.pageY - event.pageY)
|
147 |
+
) >= this.options.distance
|
148 |
+
);
|
149 |
+
},
|
150 |
+
|
151 |
+
_mouseDelayMet: function(event) {
|
152 |
+
return this.mouseDelayMet;
|
153 |
+
},
|
154 |
+
|
155 |
+
// These are placeholder methods, to be overriden by extending plugin
|
156 |
+
_mouseStart: function(event) {},
|
157 |
+
_mouseDrag: function(event) {},
|
158 |
+
_mouseStop: function(event) {},
|
159 |
+
_mouseCapture: function(event) { return true; }
|
160 |
+
});
|
161 |
+
|
162 |
+
})(jQuery);
|
js/jquery.ui.slider.js
CHANGED
@@ -1,666 +1,666 @@
|
|
1 |
-
/*
|
2 |
-
* jQuery UI Slider 1.8.16
|
3 |
-
*
|
4 |
-
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
5 |
-
* Dual licensed under the MIT or GPL Version 2 licenses.
|
6 |
-
* http://jquery.org/license
|
7 |
-
*
|
8 |
-
* http://docs.jquery.com/UI/Slider
|
9 |
-
*
|
10 |
-
* Depends:
|
11 |
-
* jquery.ui.core.js
|
12 |
-
* jquery.ui.mouse.js
|
13 |
-
* jquery.ui.widget.js
|
14 |
-
*/
|
15 |
-
(function( $, undefined ) {
|
16 |
-
|
17 |
-
// number of pages in a slider
|
18 |
-
// (how many times can you page up/down to go through the whole range)
|
19 |
-
var numPages = 5;
|
20 |
-
|
21 |
-
$.widget( "ui.slider", $.ui.mouse, {
|
22 |
-
|
23 |
-
widgetEventPrefix: "slide",
|
24 |
-
|
25 |
-
options: {
|
26 |
-
animate: false,
|
27 |
-
distance: 0,
|
28 |
-
max: 100,
|
29 |
-
min: 0,
|
30 |
-
orientation: "horizontal",
|
31 |
-
range: false,
|
32 |
-
step: 1,
|
33 |
-
value: 0,
|
34 |
-
values: null
|
35 |
-
},
|
36 |
-
|
37 |
-
_create: function() {
|
38 |
-
var self = this,
|
39 |
-
o = this.options,
|
40 |
-
existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),
|
41 |
-
handle = "<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>",
|
42 |
-
handleCount = ( o.values && o.values.length ) || 1,
|
43 |
-
handles = [];
|
44 |
-
|
45 |
-
this._keySliding = false;
|
46 |
-
this._mouseSliding = false;
|
47 |
-
this._animateOff = true;
|
48 |
-
this._handleIndex = null;
|
49 |
-
this._detectOrientation();
|
50 |
-
this._mouseInit();
|
51 |
-
|
52 |
-
this.element
|
53 |
-
.addClass( "ui-slider" +
|
54 |
-
" ui-slider-" + this.orientation +
|
55 |
-
" ui-widget" +
|
56 |
-
" ui-widget-content" +
|
57 |
-
" ui-corner-all" +
|
58 |
-
( o.disabled ? " ui-slider-disabled ui-disabled" : "" ) );
|
59 |
-
|
60 |
-
this.range = $([]);
|
61 |
-
|
62 |
-
if ( o.range ) {
|
63 |
-
if ( o.range === true ) {
|
64 |
-
if ( !o.values ) {
|
65 |
-
o.values = [ this._valueMin(), this._valueMin() ];
|
66 |
-
}
|
67 |
-
if ( o.values.length && o.values.length !== 2 ) {
|
68 |
-
o.values = [ o.values[0], o.values[0] ];
|
69 |
-
}
|
70 |
-
}
|
71 |
-
|
72 |
-
this.range = $( "<div></div>" )
|
73 |
-
.appendTo( this.element )
|
74 |
-
.addClass( "ui-slider-range" +
|
75 |
-
// note: this isn't the most fittingly semantic framework class for this element,
|
76 |
-
// but worked best visually with a variety of themes
|
77 |
-
" ui-widget-header" +
|
78 |
-
( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) );
|
79 |
-
}
|
80 |
-
|
81 |
-
for ( var i = existingHandles.length; i < handleCount; i += 1 ) {
|
82 |
-
handles.push( handle );
|
83 |
-
}
|
84 |
-
|
85 |
-
this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( self.element ) );
|
86 |
-
|
87 |
-
this.handle = this.handles.eq( 0 );
|
88 |
-
|
89 |
-
this.handles.add( this.range ).filter( "a" )
|
90 |
-
.click(function( event ) {
|
91 |
-
event.preventDefault();
|
92 |
-
})
|
93 |
-
.hover(function() {
|
94 |
-
if ( !o.disabled ) {
|
95 |
-
$( this ).addClass( "ui-state-hover" );
|
96 |
-
}
|
97 |
-
}, function() {
|
98 |
-
$( this ).removeClass( "ui-state-hover" );
|
99 |
-
})
|
100 |
-
.focus(function() {
|
101 |
-
if ( !o.disabled ) {
|
102 |
-
$( ".ui-slider .ui-state-focus" ).removeClass( "ui-state-focus" );
|
103 |
-
$( this ).addClass( "ui-state-focus" );
|
104 |
-
} else {
|
105 |
-
$( this ).blur();
|
106 |
-
}
|
107 |
-
})
|
108 |
-
.blur(function() {
|
109 |
-
$( this ).removeClass( "ui-state-focus" );
|
110 |
-
});
|
111 |
-
|
112 |
-
this.handles.each(function( i ) {
|
113 |
-
$( this ).data( "index.ui-slider-handle", i );
|
114 |
-
});
|
115 |
-
|
116 |
-
this.handles
|
117 |
-
.keydown(function( event ) {
|
118 |
-
var ret = true,
|
119 |
-
index = $( this ).data( "index.ui-slider-handle" ),
|
120 |
-
allowed,
|
121 |
-
curVal,
|
122 |
-
newVal,
|
123 |
-
step;
|
124 |
-
|
125 |
-
if ( self.options.disabled ) {
|
126 |
-
return;
|
127 |
-
}
|
128 |
-
|
129 |
-
switch ( event.keyCode ) {
|
130 |
-
case $.ui.keyCode.HOME:
|
131 |
-
case $.ui.keyCode.END:
|
132 |
-
case $.ui.keyCode.PAGE_UP:
|
133 |
-
case $.ui.keyCode.PAGE_DOWN:
|
134 |
-
case $.ui.keyCode.UP:
|
135 |
-
case $.ui.keyCode.RIGHT:
|
136 |
-
case $.ui.keyCode.DOWN:
|
137 |
-
case $.ui.keyCode.LEFT:
|
138 |
-
ret = false;
|
139 |
-
if ( !self._keySliding ) {
|
140 |
-
self._keySliding = true;
|
141 |
-
$( this ).addClass( "ui-state-active" );
|
142 |
-
allowed = self._start( event, index );
|
143 |
-
if ( allowed === false ) {
|
144 |
-
return;
|
145 |
-
}
|
146 |
-
}
|
147 |
-
break;
|
148 |
-
}
|
149 |
-
|
150 |
-
step = self.options.step;
|
151 |
-
if ( self.options.values && self.options.values.length ) {
|
152 |
-
curVal = newVal = self.values( index );
|
153 |
-
} else {
|
154 |
-
curVal = newVal = self.value();
|
155 |
-
}
|
156 |
-
|
157 |
-
switch ( event.keyCode ) {
|
158 |
-
case $.ui.keyCode.HOME:
|
159 |
-
newVal = self._valueMin();
|
160 |
-
break;
|
161 |
-
case $.ui.keyCode.END:
|
162 |
-
newVal = self._valueMax();
|
163 |
-
break;
|
164 |
-
case $.ui.keyCode.PAGE_UP:
|
165 |
-
newVal = self._trimAlignValue( curVal + ( (self._valueMax() - self._valueMin()) / numPages ) );
|
166 |
-
break;
|
167 |
-
case $.ui.keyCode.PAGE_DOWN:
|
168 |
-
newVal = self._trimAlignValue( curVal - ( (self._valueMax() - self._valueMin()) / numPages ) );
|
169 |
-
break;
|
170 |
-
case $.ui.keyCode.UP:
|
171 |
-
case $.ui.keyCode.RIGHT:
|
172 |
-
if ( curVal === self._valueMax() ) {
|
173 |
-
return;
|
174 |
-
}
|
175 |
-
newVal = self._trimAlignValue( curVal + step );
|
176 |
-
break;
|
177 |
-
case $.ui.keyCode.DOWN:
|
178 |
-
case $.ui.keyCode.LEFT:
|
179 |
-
if ( curVal === self._valueMin() ) {
|
180 |
-
return;
|
181 |
-
}
|
182 |
-
newVal = self._trimAlignValue( curVal - step );
|
183 |
-
break;
|
184 |
-
}
|
185 |
-
|
186 |
-
self._slide( event, index, newVal );
|
187 |
-
|
188 |
-
return ret;
|
189 |
-
|
190 |
-
})
|
191 |
-
.keyup(function( event ) {
|
192 |
-
var index = $( this ).data( "index.ui-slider-handle" );
|
193 |
-
|
194 |
-
if ( self._keySliding ) {
|
195 |
-
self._keySliding = false;
|
196 |
-
self._stop( event, index );
|
197 |
-
self._change( event, index );
|
198 |
-
$( this ).removeClass( "ui-state-active" );
|
199 |
-
}
|
200 |
-
|
201 |
-
});
|
202 |
-
|
203 |
-
this._refreshValue();
|
204 |
-
|
205 |
-
this._animateOff = false;
|
206 |
-
},
|
207 |
-
|
208 |
-
destroy: function() {
|
209 |
-
this.handles.remove();
|
210 |
-
this.range.remove();
|
211 |
-
|
212 |
-
this.element
|
213 |
-
.removeClass( "ui-slider" +
|
214 |
-
" ui-slider-horizontal" +
|
215 |
-
" ui-slider-vertical" +
|
216 |
-
" ui-slider-disabled" +
|
217 |
-
" ui-widget" +
|
218 |
-
" ui-widget-content" +
|
219 |
-
" ui-corner-all" )
|
220 |
-
.removeData( "slider" )
|
221 |
-
.unbind( ".slider" );
|
222 |
-
|
223 |
-
this._mouseDestroy();
|
224 |
-
|
225 |
-
return this;
|
226 |
-
},
|
227 |
-
|
228 |
-
_mouseCapture: function( event ) {
|
229 |
-
var o = this.options,
|
230 |
-
position,
|
231 |
-
normValue,
|
232 |
-
distance,
|
233 |
-
closestHandle,
|
234 |
-
self,
|
235 |
-
index,
|
236 |
-
allowed,
|
237 |
-
offset,
|
238 |
-
mouseOverHandle;
|
239 |
-
|
240 |
-
if ( o.disabled ) {
|
241 |
-
return false;
|
242 |
-
}
|
243 |
-
|
244 |
-
this.elementSize = {
|
245 |
-
width: this.element.outerWidth(),
|
246 |
-
height: this.element.outerHeight()
|
247 |
-
};
|
248 |
-
this.elementOffset = this.element.offset();
|
249 |
-
|
250 |
-
position = { x: event.pageX, y: event.pageY };
|
251 |
-
normValue = this._normValueFromMouse( position );
|
252 |
-
distance = this._valueMax() - this._valueMin() + 1;
|
253 |
-
self = this;
|
254 |
-
this.handles.each(function( i ) {
|
255 |
-
var thisDistance = Math.abs( normValue - self.values(i) );
|
256 |
-
if ( distance > thisDistance ) {
|
257 |
-
distance = thisDistance;
|
258 |
-
closestHandle = $( this );
|
259 |
-
index = i;
|
260 |
-
}
|
261 |
-
});
|
262 |
-
|
263 |
-
// workaround for bug #3736 (if both handles of a range are at 0,
|
264 |
-
// the first is always used as the one with least distance,
|
265 |
-
// and moving it is obviously prevented by preventing negative ranges)
|
266 |
-
if( o.range === true && this.values(1) === o.min ) {
|
267 |
-
index += 1;
|
268 |
-
closestHandle = $( this.handles[index] );
|
269 |
-
}
|
270 |
-
|
271 |
-
allowed = this._start( event, index );
|
272 |
-
if ( allowed === false ) {
|
273 |
-
return false;
|
274 |
-
}
|
275 |
-
this._mouseSliding = true;
|
276 |
-
|
277 |
-
self._handleIndex = index;
|
278 |
-
|
279 |
-
closestHandle
|
280 |
-
.addClass( "ui-state-active" )
|
281 |
-
.focus();
|
282 |
-
|
283 |
-
offset = closestHandle.offset();
|
284 |
-
mouseOverHandle = !$( event.target ).parents().andSelf().is( ".ui-slider-handle" );
|
285 |
-
this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : {
|
286 |
-
left: event.pageX - offset.left - ( closestHandle.width() / 2 ),
|
287 |
-
top: event.pageY - offset.top -
|
288 |
-
( closestHandle.height() / 2 ) -
|
289 |
-
( parseInt( closestHandle.css("borderTopWidth"), 10 ) || 0 ) -
|
290 |
-
( parseInt( closestHandle.css("borderBottomWidth"), 10 ) || 0) +
|
291 |
-
( parseInt( closestHandle.css("marginTop"), 10 ) || 0)
|
292 |
-
};
|
293 |
-
|
294 |
-
if ( !this.handles.hasClass( "ui-state-hover" ) ) {
|
295 |
-
this._slide( event, index, normValue );
|
296 |
-
}
|
297 |
-
this._animateOff = true;
|
298 |
-
return true;
|
299 |
-
},
|
300 |
-
|
301 |
-
_mouseStart: function( event ) {
|
302 |
-
return true;
|
303 |
-
},
|
304 |
-
|
305 |
-
_mouseDrag: function( event ) {
|
306 |
-
var position = { x: event.pageX, y: event.pageY },
|
307 |
-
normValue = this._normValueFromMouse( position );
|
308 |
-
|
309 |
-
this._slide( event, this._handleIndex, normValue );
|
310 |
-
|
311 |
-
return false;
|
312 |
-
},
|
313 |
-
|
314 |
-
_mouseStop: function( event ) {
|
315 |
-
this.handles.removeClass( "ui-state-active" );
|
316 |
-
this._mouseSliding = false;
|
317 |
-
|
318 |
-
this._stop( event, this._handleIndex );
|
319 |
-
this._change( event, this._handleIndex );
|
320 |
-
|
321 |
-
this._handleIndex = null;
|
322 |
-
this._clickOffset = null;
|
323 |
-
this._animateOff = false;
|
324 |
-
|
325 |
-
return false;
|
326 |
-
},
|
327 |
-
|
328 |
-
_detectOrientation: function() {
|
329 |
-
this.orientation = ( this.options.orientation === "vertical" ) ? "vertical" : "horizontal";
|
330 |
-
},
|
331 |
-
|
332 |
-
_normValueFromMouse: function( position ) {
|
333 |
-
var pixelTotal,
|
334 |
-
pixelMouse,
|
335 |
-
percentMouse,
|
336 |
-
valueTotal,
|
337 |
-
valueMouse;
|
338 |
-
|
339 |
-
if ( this.orientation === "horizontal" ) {
|
340 |
-
pixelTotal = this.elementSize.width;
|
341 |
-
pixelMouse = position.x - this.elementOffset.left - ( this._clickOffset ? this._clickOffset.left : 0 );
|
342 |
-
} else {
|
343 |
-
pixelTotal = this.elementSize.height;
|
344 |
-
pixelMouse = position.y - this.elementOffset.top - ( this._clickOffset ? this._clickOffset.top : 0 );
|
345 |
-
}
|
346 |
-
|
347 |
-
percentMouse = ( pixelMouse / pixelTotal );
|
348 |
-
if ( percentMouse > 1 ) {
|
349 |
-
percentMouse = 1;
|
350 |
-
}
|
351 |
-
if ( percentMouse < 0 ) {
|
352 |
-
percentMouse = 0;
|
353 |
-
}
|
354 |
-
if ( this.orientation === "vertical" ) {
|
355 |
-
percentMouse = 1 - percentMouse;
|
356 |
-
}
|
357 |
-
|
358 |
-
valueTotal = this._valueMax() - this._valueMin();
|
359 |
-
valueMouse = this._valueMin() + percentMouse * valueTotal;
|
360 |
-
|
361 |
-
return this._trimAlignValue( valueMouse );
|
362 |
-
},
|
363 |
-
|
364 |
-
_start: function( event, index ) {
|
365 |
-
var uiHash = {
|
366 |
-
handle: this.handles[ index ],
|
367 |
-
value: this.value()
|
368 |
-
};
|
369 |
-
if ( this.options.values && this.options.values.length ) {
|
370 |
-
uiHash.value = this.values( index );
|
371 |
-
uiHash.values = this.values();
|
372 |
-
}
|
373 |
-
return this._trigger( "start", event, uiHash );
|
374 |
-
},
|
375 |
-
|
376 |
-
_slide: function( event, index, newVal ) {
|
377 |
-
var otherVal,
|
378 |
-
newValues,
|
379 |
-
allowed;
|
380 |
-
|
381 |
-
if ( this.options.values && this.options.values.length ) {
|
382 |
-
otherVal = this.values( index ? 0 : 1 );
|
383 |
-
|
384 |
-
if ( ( this.options.values.length === 2 && this.options.range === true ) &&
|
385 |
-
( ( index === 0 && newVal > otherVal) || ( index === 1 && newVal < otherVal ) )
|
386 |
-
) {
|
387 |
-
newVal = otherVal;
|
388 |
-
}
|
389 |
-
|
390 |
-
if ( newVal !== this.values( index ) ) {
|
391 |
-
newValues = this.values();
|
392 |
-
newValues[ index ] = newVal;
|
393 |
-
// A slide can be canceled by returning false from the slide callback
|
394 |
-
allowed = this._trigger( "slide", event, {
|
395 |
-
handle: this.handles[ index ],
|
396 |
-
value: newVal,
|
397 |
-
values: newValues
|
398 |
-
} );
|
399 |
-
otherVal = this.values( index ? 0 : 1 );
|
400 |
-
if ( allowed !== false ) {
|
401 |
-
this.values( index, newVal, true );
|
402 |
-
}
|
403 |
-
}
|
404 |
-
} else {
|
405 |
-
if ( newVal !== this.value() ) {
|
406 |
-
// A slide can be canceled by returning false from the slide callback
|
407 |
-
allowed = this._trigger( "slide", event, {
|
408 |
-
handle: this.handles[ index ],
|
409 |
-
value: newVal
|
410 |
-
} );
|
411 |
-
if ( allowed !== false ) {
|
412 |
-
this.value( newVal );
|
413 |
-
}
|
414 |
-
}
|
415 |
-
}
|
416 |
-
},
|
417 |
-
|
418 |
-
_stop: function( event, index ) {
|
419 |
-
var uiHash = {
|
420 |
-
handle: this.handles[ index ],
|
421 |
-
value: this.value()
|
422 |
-
};
|
423 |
-
if ( this.options.values && this.options.values.length ) {
|
424 |
-
uiHash.value = this.values( index );
|
425 |
-
uiHash.values = this.values();
|
426 |
-
}
|
427 |
-
|
428 |
-
this._trigger( "stop", event, uiHash );
|
429 |
-
},
|
430 |
-
|
431 |
-
_change: function( event, index ) {
|
432 |
-
if ( !this._keySliding && !this._mouseSliding ) {
|
433 |
-
var uiHash = {
|
434 |
-
handle: this.handles[ index ],
|
435 |
-
value: this.value()
|
436 |
-
};
|
437 |
-
if ( this.options.values && this.options.values.length ) {
|
438 |
-
uiHash.value = this.values( index );
|
439 |
-
uiHash.values = this.values();
|
440 |
-
}
|
441 |
-
|
442 |
-
this._trigger( "change", event, uiHash );
|
443 |
-
}
|
444 |
-
},
|
445 |
-
|
446 |
-
value: function( newValue ) {
|
447 |
-
if ( arguments.length ) {
|
448 |
-
this.options.value = this._trimAlignValue( newValue );
|
449 |
-
this._refreshValue();
|
450 |
-
this._change( null, 0 );
|
451 |
-
return;
|
452 |
-
}
|
453 |
-
|
454 |
-
return this._value();
|
455 |
-
},
|
456 |
-
|
457 |
-
values: function( index, newValue ) {
|
458 |
-
var vals,
|
459 |
-
newValues,
|
460 |
-
i;
|
461 |
-
|
462 |
-
if ( arguments.length > 1 ) {
|
463 |
-
this.options.values[ index ] = this._trimAlignValue( newValue );
|
464 |
-
this._refreshValue();
|
465 |
-
this._change( null, index );
|
466 |
-
return;
|
467 |
-
}
|
468 |
-
|
469 |
-
if ( arguments.length ) {
|
470 |
-
if ( $.isArray( arguments[ 0 ] ) ) {
|
471 |
-
vals = this.options.values;
|
472 |
-
newValues = arguments[ 0 ];
|
473 |
-
for ( i = 0; i < vals.length; i += 1 ) {
|
474 |
-
vals[ i ] = this._trimAlignValue( newValues[ i ] );
|
475 |
-
this._change( null, i );
|
476 |
-
}
|
477 |
-
this._refreshValue();
|
478 |
-
} else {
|
479 |
-
if ( this.options.values && this.options.values.length ) {
|
480 |
-
return this._values( index );
|
481 |
-
} else {
|
482 |
-
return this.value();
|
483 |
-
}
|
484 |
-
}
|
485 |
-
} else {
|
486 |
-
return this._values();
|
487 |
-
}
|
488 |
-
},
|
489 |
-
|
490 |
-
_setOption: function( key, value ) {
|
491 |
-
var i,
|
492 |
-
valsLength = 0;
|
493 |
-
|
494 |
-
if ( $.isArray( this.options.values ) ) {
|
495 |
-
valsLength = this.options.values.length;
|
496 |
-
}
|
497 |
-
|
498 |
-
$.Widget.prototype._setOption.apply( this, arguments );
|
499 |
-
|
500 |
-
switch ( key ) {
|
501 |
-
case "disabled":
|
502 |
-
if ( value ) {
|
503 |
-
this.handles.filter( ".ui-state-focus" ).blur();
|
504 |
-
this.handles.removeClass( "ui-state-hover" );
|
505 |
-
this.handles.propAttr( "disabled", true );
|
506 |
-
this.element.addClass( "ui-disabled" );
|
507 |
-
} else {
|
508 |
-
this.handles.propAttr( "disabled", false );
|
509 |
-
this.element.removeClass( "ui-disabled" );
|
510 |
-
}
|
511 |
-
break;
|
512 |
-
case "orientation":
|
513 |
-
this._detectOrientation();
|
514 |
-
this.element
|
515 |
-
.removeClass( "ui-slider-horizontal ui-slider-vertical" )
|
516 |
-
.addClass( "ui-slider-" + this.orientation );
|
517 |
-
this._refreshValue();
|
518 |
-
break;
|
519 |
-
case "value":
|
520 |
-
this._animateOff = true;
|
521 |
-
this._refreshValue();
|
522 |
-
this._change( null, 0 );
|
523 |
-
this._animateOff = false;
|
524 |
-
break;
|
525 |
-
case "values":
|
526 |
-
this._animateOff = true;
|
527 |
-
this._refreshValue();
|
528 |
-
for ( i = 0; i < valsLength; i += 1 ) {
|
529 |
-
this._change( null, i );
|
530 |
-
}
|
531 |
-
this._animateOff = false;
|
532 |
-
break;
|
533 |
-
}
|
534 |
-
},
|
535 |
-
|
536 |
-
//internal value getter
|
537 |
-
// _value() returns value trimmed by min and max, aligned by step
|
538 |
-
_value: function() {
|
539 |
-
var val = this.options.value;
|
540 |
-
val = this._trimAlignValue( val );
|
541 |
-
|
542 |
-
return val;
|
543 |
-
},
|
544 |
-
|
545 |
-
//internal values getter
|
546 |
-
// _values() returns array of values trimmed by min and max, aligned by step
|
547 |
-
// _values( index ) returns single value trimmed by min and max, aligned by step
|
548 |
-
_values: function( index ) {
|
549 |
-
var val,
|
550 |
-
vals,
|
551 |
-
i;
|
552 |
-
|
553 |
-
if ( arguments.length ) {
|
554 |
-
val = this.options.values[ index ];
|
555 |
-
val = this._trimAlignValue( val );
|
556 |
-
|
557 |
-
return val;
|
558 |
-
} else {
|
559 |
-
// .slice() creates a copy of the array
|
560 |
-
// this copy gets trimmed by min and max and then returned
|
561 |
-
vals = this.options.values.slice();
|
562 |
-
for ( i = 0; i < vals.length; i+= 1) {
|
563 |
-
vals[ i ] = this._trimAlignValue( vals[ i ] );
|
564 |
-
}
|
565 |
-
|
566 |
-
return vals;
|
567 |
-
}
|
568 |
-
},
|
569 |
-
|
570 |
-
// returns the step-aligned value that val is closest to, between (inclusive) min and max
|
571 |
-
_trimAlignValue: function( val ) {
|
572 |
-
if ( val <= this._valueMin() ) {
|
573 |
-
return this._valueMin();
|
574 |
-
}
|
575 |
-
if ( val >= this._valueMax() ) {
|
576 |
-
return this._valueMax();
|
577 |
-
}
|
578 |
-
var step = ( this.options.step > 0 ) ? this.options.step : 1,
|
579 |
-
valModStep = (val - this._valueMin()) % step,
|
580 |
-
alignValue = val - valModStep;
|
581 |
-
|
582 |
-
if ( Math.abs(valModStep) * 2 >= step ) {
|
583 |
-
alignValue += ( valModStep > 0 ) ? step : ( -step );
|
584 |
-
}
|
585 |
-
|
586 |
-
// Since JavaScript has problems with large floats, round
|
587 |
-
// the final value to 5 digits after the decimal point (see #4124)
|
588 |
-
return parseFloat( alignValue.toFixed(5) );
|
589 |
-
},
|
590 |
-
|
591 |
-
_valueMin: function() {
|
592 |
-
return this.options.min;
|
593 |
-
},
|
594 |
-
|
595 |
-
_valueMax: function() {
|
596 |
-
return this.options.max;
|
597 |
-
},
|
598 |
-
|
599 |
-
_refreshValue: function() {
|
600 |
-
var oRange = this.options.range,
|
601 |
-
o = this.options,
|
602 |
-
self = this,
|
603 |
-
animate = ( !this._animateOff ) ? o.animate : false,
|
604 |
-
valPercent,
|
605 |
-
_set = {},
|
606 |
-
lastValPercent,
|
607 |
-
value,
|
608 |
-
valueMin,
|
609 |
-
valueMax;
|
610 |
-
|
611 |
-
if ( this.options.values && this.options.values.length ) {
|
612 |
-
this.handles.each(function( i, j ) {
|
613 |
-
valPercent = ( self.values(i) - self._valueMin() ) / ( self._valueMax() - self._valueMin() ) * 100;
|
614 |
-
_set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
|
615 |
-
$( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
|
616 |
-
if ( self.options.range === true ) {
|
617 |
-
if ( self.orientation === "horizontal" ) {
|
618 |
-
if ( i === 0 ) {
|
619 |
-
self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { left: valPercent + "%" }, o.animate );
|
620 |
-
}
|
621 |
-
if ( i === 1 ) {
|
622 |
-
self.range[ animate ? "animate" : "css" ]( { width: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
|
623 |
-
}
|
624 |
-
} else {
|
625 |
-
if ( i === 0 ) {
|
626 |
-
self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { bottom: ( valPercent ) + "%" }, o.animate );
|
627 |
-
}
|
628 |
-
if ( i === 1 ) {
|
629 |
-
self.range[ animate ? "animate" : "css" ]( { height: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
|
630 |
-
}
|
631 |
-
}
|
632 |
-
}
|
633 |
-
lastValPercent = valPercent;
|
634 |
-
});
|
635 |
-
} else {
|
636 |
-
value = this.value();
|
637 |
-
valueMin = this._valueMin();
|
638 |
-
valueMax = this._valueMax();
|
639 |
-
valPercent = ( valueMax !== valueMin ) ?
|
640 |
-
( value - valueMin ) / ( valueMax - valueMin ) * 100 :
|
641 |
-
0;
|
642 |
-
_set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
|
643 |
-
this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
|
644 |
-
|
645 |
-
if ( oRange === "min" && this.orientation === "horizontal" ) {
|
646 |
-
this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { width: valPercent + "%" }, o.animate );
|
647 |
-
}
|
648 |
-
if ( oRange === "max" && this.orientation === "horizontal" ) {
|
649 |
-
this.range[ animate ? "animate" : "css" ]( { width: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
|
650 |
-
}
|
651 |
-
if ( oRange === "min" && this.orientation === "vertical" ) {
|
652 |
-
this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { height: valPercent + "%" }, o.animate );
|
653 |
-
}
|
654 |
-
if ( oRange === "max" && this.orientation === "vertical" ) {
|
655 |
-
this.range[ animate ? "animate" : "css" ]( { height: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
|
656 |
-
}
|
657 |
-
}
|
658 |
-
}
|
659 |
-
|
660 |
-
});
|
661 |
-
|
662 |
-
$.extend( $.ui.slider, {
|
663 |
-
version: "1.8.16"
|
664 |
-
});
|
665 |
-
|
666 |
-
}(jQuery));
|
1 |
+
/*
|
2 |
+
* jQuery UI Slider 1.8.16
|
3 |
+
*
|
4 |
+
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
5 |
+
* Dual licensed under the MIT or GPL Version 2 licenses.
|
6 |
+
* http://jquery.org/license
|
7 |
+
*
|
8 |
+
* http://docs.jquery.com/UI/Slider
|
9 |
+
*
|
10 |
+
* Depends:
|
11 |
+
* jquery.ui.core.js
|
12 |
+
* jquery.ui.mouse.js
|
13 |
+
* jquery.ui.widget.js
|
14 |
+
*/
|
15 |
+
(function( $, undefined ) {
|
16 |
+
|
17 |
+
// number of pages in a slider
|
18 |
+
// (how many times can you page up/down to go through the whole range)
|
19 |
+
var numPages = 5;
|
20 |
+
|
21 |
+
$.widget( "ui.slider", $.ui.mouse, {
|
22 |
+
|
23 |
+
widgetEventPrefix: "slide",
|
24 |
+
|
25 |
+
options: {
|
26 |
+
animate: false,
|
27 |
+
distance: 0,
|
28 |
+
max: 100,
|
29 |
+
min: 0,
|
30 |
+
orientation: "horizontal",
|
31 |
+
range: false,
|
32 |
+
step: 1,
|
33 |
+
value: 0,
|
34 |
+
values: null
|
35 |
+
},
|
36 |
+
|
37 |
+
_create: function() {
|
38 |
+
var self = this,
|
39 |
+
o = this.options,
|
40 |
+
existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),
|
41 |
+
handle = "<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>",
|
42 |
+
handleCount = ( o.values && o.values.length ) || 1,
|
43 |
+
handles = [];
|
44 |
+
|
45 |
+
this._keySliding = false;
|
46 |
+
this._mouseSliding = false;
|
47 |
+
this._animateOff = true;
|
48 |
+
this._handleIndex = null;
|
49 |
+
this._detectOrientation();
|
50 |
+
this._mouseInit();
|
51 |
+
|
52 |
+
this.element
|
53 |
+
.addClass( "ui-slider" +
|
54 |
+
" ui-slider-" + this.orientation +
|
55 |
+
" ui-widget" +
|
56 |
+
" ui-widget-content" +
|
57 |
+
" ui-corner-all" +
|
58 |
+
( o.disabled ? " ui-slider-disabled ui-disabled" : "" ) );
|
59 |
+
|
60 |
+
this.range = $([]);
|
61 |
+
|
62 |
+
if ( o.range ) {
|
63 |
+
if ( o.range === true ) {
|
64 |
+
if ( !o.values ) {
|
65 |
+
o.values = [ this._valueMin(), this._valueMin() ];
|
66 |
+
}
|
67 |
+
if ( o.values.length && o.values.length !== 2 ) {
|
68 |
+
o.values = [ o.values[0], o.values[0] ];
|
69 |
+
}
|
70 |
+
}
|
71 |
+
|
72 |
+
this.range = $( "<div></div>" )
|
73 |
+
.appendTo( this.element )
|
74 |
+
.addClass( "ui-slider-range" +
|
75 |
+
// note: this isn't the most fittingly semantic framework class for this element,
|
76 |
+
// but worked best visually with a variety of themes
|
77 |
+
" ui-widget-header" +
|
78 |
+
( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) );
|
79 |
+
}
|
80 |
+
|
81 |
+
for ( var i = existingHandles.length; i < handleCount; i += 1 ) {
|
82 |
+
handles.push( handle );
|
83 |
+
}
|
84 |
+
|
85 |
+
this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( self.element ) );
|
86 |
+
|
87 |
+
this.handle = this.handles.eq( 0 );
|
88 |
+
|
89 |
+
this.handles.add( this.range ).filter( "a" )
|
90 |
+
.click(function( event ) {
|
91 |
+
event.preventDefault();
|
92 |
+
})
|
93 |
+
.hover(function() {
|
94 |
+
if ( !o.disabled ) {
|
95 |
+
$( this ).addClass( "ui-state-hover" );
|
96 |
+
}
|
97 |
+
}, function() {
|
98 |
+
$( this ).removeClass( "ui-state-hover" );
|
99 |
+
})
|
100 |
+
.focus(function() {
|
101 |
+
if ( !o.disabled ) {
|
102 |
+
$( ".ui-slider .ui-state-focus" ).removeClass( "ui-state-focus" );
|
103 |
+
$( this ).addClass( "ui-state-focus" );
|
104 |
+
} else {
|
105 |
+
$( this ).blur();
|
106 |
+
}
|
107 |
+
})
|
108 |
+
.blur(function() {
|
109 |
+
$( this ).removeClass( "ui-state-focus" );
|
110 |
+
});
|
111 |
+
|
112 |
+
this.handles.each(function( i ) {
|
113 |
+
$( this ).data( "index.ui-slider-handle", i );
|
114 |
+
});
|
115 |
+
|
116 |
+
this.handles
|
117 |
+
.keydown(function( event ) {
|
118 |
+
var ret = true,
|
119 |
+
index = $( this ).data( "index.ui-slider-handle" ),
|
120 |
+
allowed,
|
121 |
+
curVal,
|
122 |
+
newVal,
|
123 |
+
step;
|
124 |
+
|
125 |
+
if ( self.options.disabled ) {
|
126 |
+
return;
|
127 |
+
}
|
128 |
+
|
129 |
+
switch ( event.keyCode ) {
|
130 |
+
case $.ui.keyCode.HOME:
|
131 |
+
case $.ui.keyCode.END:
|
132 |
+
case $.ui.keyCode.PAGE_UP:
|
133 |
+
case $.ui.keyCode.PAGE_DOWN:
|
134 |
+
case $.ui.keyCode.UP:
|
135 |
+
case $.ui.keyCode.RIGHT:
|
136 |
+
case $.ui.keyCode.DOWN:
|
137 |
+
case $.ui.keyCode.LEFT:
|
138 |
+
ret = false;
|
139 |
+
if ( !self._keySliding ) {
|
140 |
+
self._keySliding = true;
|
141 |
+
$( this ).addClass( "ui-state-active" );
|
142 |
+
allowed = self._start( event, index );
|
143 |
+
if ( allowed === false ) {
|
144 |
+
return;
|
145 |
+
}
|
146 |
+
}
|
147 |
+
break;
|
148 |
+
}
|
149 |
+
|
150 |
+
step = self.options.step;
|
151 |
+
if ( self.options.values && self.options.values.length ) {
|
152 |
+
curVal = newVal = self.values( index );
|
153 |
+
} else {
|
154 |
+
curVal = newVal = self.value();
|
155 |
+
}
|
156 |
+
|
157 |
+
switch ( event.keyCode ) {
|
158 |
+
case $.ui.keyCode.HOME:
|
159 |
+
newVal = self._valueMin();
|
160 |
+
break;
|
161 |
+
case $.ui.keyCode.END:
|
162 |
+
newVal = self._valueMax();
|
163 |
+
break;
|
164 |
+
case $.ui.keyCode.PAGE_UP:
|
165 |
+
newVal = self._trimAlignValue( curVal + ( (self._valueMax() - self._valueMin()) / numPages ) );
|
166 |
+
break;
|
167 |
+
case $.ui.keyCode.PAGE_DOWN:
|
168 |
+
newVal = self._trimAlignValue( curVal - ( (self._valueMax() - self._valueMin()) / numPages ) );
|
169 |
+
break;
|
170 |
+
case $.ui.keyCode.UP:
|
171 |
+
case $.ui.keyCode.RIGHT:
|
172 |
+
if ( curVal === self._valueMax() ) {
|
173 |
+
return;
|
174 |
+
}
|
175 |
+
newVal = self._trimAlignValue( curVal + step );
|
176 |
+
break;
|
177 |
+
case $.ui.keyCode.DOWN:
|
178 |
+
case $.ui.keyCode.LEFT:
|
179 |
+
if ( curVal === self._valueMin() ) {
|
180 |
+
return;
|
181 |
+
}
|
182 |
+
newVal = self._trimAlignValue( curVal - step );
|
183 |
+
break;
|
184 |
+
}
|
185 |
+
|
186 |
+
self._slide( event, index, newVal );
|
187 |
+
|
188 |
+
return ret;
|
189 |
+
|
190 |
+
})
|
191 |
+
.keyup(function( event ) {
|
192 |
+
var index = $( this ).data( "index.ui-slider-handle" );
|
193 |
+
|
194 |
+
if ( self._keySliding ) {
|
195 |
+
self._keySliding = false;
|
196 |
+
self._stop( event, index );
|
197 |
+
self._change( event, index );
|
198 |
+
$( this ).removeClass( "ui-state-active" );
|
199 |
+
}
|
200 |
+
|
201 |
+
});
|
202 |
+
|
203 |
+
this._refreshValue();
|
204 |
+
|
205 |
+
this._animateOff = false;
|
206 |
+
},
|
207 |
+
|
208 |
+
destroy: function() {
|
209 |
+
this.handles.remove();
|
210 |
+
this.range.remove();
|
211 |
+
|
212 |
+
this.element
|
213 |
+
.removeClass( "ui-slider" +
|
214 |
+
" ui-slider-horizontal" +
|
215 |
+
" ui-slider-vertical" +
|
216 |
+
" ui-slider-disabled" +
|
217 |
+
" ui-widget" +
|
218 |
+
" ui-widget-content" +
|
219 |
+
" ui-corner-all" )
|
220 |
+
.removeData( "slider" )
|
221 |
+
.unbind( ".slider" );
|
222 |
+
|
223 |
+
this._mouseDestroy();
|
224 |
+
|
225 |
+
return this;
|
226 |
+
},
|
227 |
+
|
228 |
+
_mouseCapture: function( event ) {
|
229 |
+
var o = this.options,
|
230 |
+
position,
|
231 |
+
normValue,
|
232 |
+
distance,
|
233 |
+
closestHandle,
|
234 |
+
self,
|
235 |
+
index,
|
236 |
+
allowed,
|
237 |
+
offset,
|
238 |
+
mouseOverHandle;
|
239 |
+
|
240 |
+
if ( o.disabled ) {
|
241 |
+
return false;
|
242 |
+
}
|
243 |
+
|
244 |
+
this.elementSize = {
|
245 |
+
width: this.element.outerWidth(),
|
246 |
+
height: this.element.outerHeight()
|
247 |
+
};
|
248 |
+
this.elementOffset = this.element.offset();
|
249 |
+
|
250 |
+
position = { x: event.pageX, y: event.pageY };
|
251 |
+
normValue = this._normValueFromMouse( position );
|
252 |
+
distance = this._valueMax() - this._valueMin() + 1;
|
253 |
+
self = this;
|
254 |
+
this.handles.each(function( i ) {
|
255 |
+
var thisDistance = Math.abs( normValue - self.values(i) );
|
256 |
+
if ( distance > thisDistance ) {
|
257 |
+
distance = thisDistance;
|
258 |
+
closestHandle = $( this );
|
259 |
+
index = i;
|
260 |
+
}
|
261 |
+
});
|
262 |
+
|
263 |
+
// workaround for bug #3736 (if both handles of a range are at 0,
|
264 |
+
// the first is always used as the one with least distance,
|
265 |
+
// and moving it is obviously prevented by preventing negative ranges)
|
266 |
+
if( o.range === true && this.values(1) === o.min ) {
|
267 |
+
index += 1;
|
268 |
+
closestHandle = $( this.handles[index] );
|
269 |
+
}
|
270 |
+
|
271 |
+
allowed = this._start( event, index );
|
272 |
+
if ( allowed === false ) {
|
273 |
+
return false;
|
274 |
+
}
|
275 |
+
this._mouseSliding = true;
|
276 |
+
|
277 |
+
self._handleIndex = index;
|
278 |
+
|
279 |
+
closestHandle
|
280 |
+
.addClass( "ui-state-active" )
|
281 |
+
.focus();
|
282 |
+
|
283 |
+
offset = closestHandle.offset();
|
284 |
+
mouseOverHandle = !$( event.target ).parents().andSelf().is( ".ui-slider-handle" );
|
285 |
+
this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : {
|
286 |
+
left: event.pageX - offset.left - ( closestHandle.width() / 2 ),
|
287 |
+
top: event.pageY - offset.top -
|
288 |
+
( closestHandle.height() / 2 ) -
|
289 |
+
( parseInt( closestHandle.css("borderTopWidth"), 10 ) || 0 ) -
|
290 |
+
( parseInt( closestHandle.css("borderBottomWidth"), 10 ) || 0) +
|
291 |
+
( parseInt( closestHandle.css("marginTop"), 10 ) || 0)
|
292 |
+
};
|
293 |
+
|
294 |
+
if ( !this.handles.hasClass( "ui-state-hover" ) ) {
|
295 |
+
this._slide( event, index, normValue );
|
296 |
+
}
|
297 |
+
this._animateOff = true;
|
298 |
+
return true;
|
299 |
+
},
|
300 |
+
|
301 |
+
_mouseStart: function( event ) {
|
302 |
+
return true;
|
303 |
+
},
|
304 |
+
|
305 |
+
_mouseDrag: function( event ) {
|
306 |
+
var position = { x: event.pageX, y: event.pageY },
|
307 |
+
normValue = this._normValueFromMouse( position );
|
308 |
+
|
309 |
+
this._slide( event, this._handleIndex, normValue );
|
310 |
+
|
311 |
+
return false;
|
312 |
+
},
|
313 |
+
|
314 |
+
_mouseStop: function( event ) {
|
315 |
+
this.handles.removeClass( "ui-state-active" );
|
316 |
+
this._mouseSliding = false;
|
317 |
+
|
318 |
+
this._stop( event, this._handleIndex );
|
319 |
+
this._change( event, this._handleIndex );
|
320 |
+
|
321 |
+
this._handleIndex = null;
|
322 |
+
this._clickOffset = null;
|
323 |
+
this._animateOff = false;
|
324 |
+
|
325 |
+
return false;
|
326 |
+
},
|
327 |
+
|
328 |
+
_detectOrientation: function() {
|
329 |
+
this.orientation = ( this.options.orientation === "vertical" ) ? "vertical" : "horizontal";
|
330 |
+
},
|
331 |
+
|
332 |
+
_normValueFromMouse: function( position ) {
|
333 |
+
var pixelTotal,
|
334 |
+
pixelMouse,
|
335 |
+
percentMouse,
|
336 |
+
valueTotal,
|
337 |
+
valueMouse;
|
338 |
+
|
339 |
+
if ( this.orientation === "horizontal" ) {
|
340 |
+
pixelTotal = this.elementSize.width;
|
341 |
+
pixelMouse = position.x - this.elementOffset.left - ( this._clickOffset ? this._clickOffset.left : 0 );
|
342 |
+
} else {
|
343 |
+
pixelTotal = this.elementSize.height;
|
344 |
+
pixelMouse = position.y - this.elementOffset.top - ( this._clickOffset ? this._clickOffset.top : 0 );
|
345 |
+
}
|
346 |
+
|
347 |
+
percentMouse = ( pixelMouse / pixelTotal );
|
348 |
+
if ( percentMouse > 1 ) {
|
349 |
+
percentMouse = 1;
|
350 |
+
}
|
351 |
+
if ( percentMouse < 0 ) {
|
352 |
+
percentMouse = 0;
|
353 |
+
}
|
354 |
+
if ( this.orientation === "vertical" ) {
|
355 |
+
percentMouse = 1 - percentMouse;
|
356 |
+
}
|
357 |
+
|
358 |
+
valueTotal = this._valueMax() - this._valueMin();
|
359 |
+
valueMouse = this._valueMin() + percentMouse * valueTotal;
|
360 |
+
|
361 |
+
return this._trimAlignValue( valueMouse );
|
362 |
+
},
|
363 |
+
|
364 |
+
_start: function( event, index ) {
|
365 |
+
var uiHash = {
|
366 |
+
handle: this.handles[ index ],
|
367 |
+
value: this.value()
|
368 |
+
};
|
369 |
+
if ( this.options.values && this.options.values.length ) {
|
370 |
+
uiHash.value = this.values( index );
|
371 |
+
uiHash.values = this.values();
|
372 |
+
}
|
373 |
+
return this._trigger( "start", event, uiHash );
|
374 |
+
},
|
375 |
+
|
376 |
+
_slide: function( event, index, newVal ) {
|
377 |
+
var otherVal,
|
378 |
+
newValues,
|
379 |
+
allowed;
|
380 |
+
|
381 |
+
if ( this.options.values && this.options.values.length ) {
|
382 |
+
otherVal = this.values( index ? 0 : 1 );
|
383 |
+
|
384 |
+
if ( ( this.options.values.length === 2 && this.options.range === true ) &&
|
385 |
+
( ( index === 0 && newVal > otherVal) || ( index === 1 && newVal < otherVal ) )
|
386 |
+
) {
|
387 |
+
newVal = otherVal;
|
388 |
+
}
|
389 |
+
|
390 |
+
if ( newVal !== this.values( index ) ) {
|
391 |
+
newValues = this.values();
|
392 |
+
newValues[ index ] = newVal;
|
393 |
+
// A slide can be canceled by returning false from the slide callback
|
394 |
+
allowed = this._trigger( "slide", event, {
|
395 |
+
handle: this.handles[ index ],
|
396 |
+
value: newVal,
|
397 |
+
values: newValues
|
398 |
+
} );
|
399 |
+
otherVal = this.values( index ? 0 : 1 );
|
400 |
+
if ( allowed !== false ) {
|
401 |
+
this.values( index, newVal, true );
|
402 |
+
}
|
403 |
+
}
|
404 |
+
} else {
|
405 |
+
if ( newVal !== this.value() ) {
|
406 |
+
// A slide can be canceled by returning false from the slide callback
|
407 |
+
allowed = this._trigger( "slide", event, {
|
408 |
+
handle: this.handles[ index ],
|
409 |
+
value: newVal
|
410 |
+
} );
|
411 |
+
if ( allowed !== false ) {
|
412 |
+
this.value( newVal );
|
413 |
+
}
|
414 |
+
}
|
415 |
+
}
|
416 |
+
},
|
417 |
+
|
418 |
+
_stop: function( event, index ) {
|
419 |
+
var uiHash = {
|
420 |
+
handle: this.handles[ index ],
|
421 |
+
value: this.value()
|
422 |
+
};
|
423 |
+
if ( this.options.values && this.options.values.length ) {
|
424 |
+
uiHash.value = this.values( index );
|
425 |
+
uiHash.values = this.values();
|
426 |
+
}
|
427 |
+
|
428 |
+
this._trigger( "stop", event, uiHash );
|
429 |
+
},
|
430 |
+
|
431 |
+
_change: function( event, index ) {
|
432 |
+
if ( !this._keySliding && !this._mouseSliding ) {
|
433 |
+
var uiHash = {
|
434 |
+
handle: this.handles[ index ],
|
435 |
+
value: this.value()
|
436 |
+
};
|
437 |
+
if ( this.options.values && this.options.values.length ) {
|
438 |
+
uiHash.value = this.values( index );
|
439 |
+
uiHash.values = this.values();
|
440 |
+
}
|
441 |
+
|
442 |
+
this._trigger( "change", event, uiHash );
|
443 |
+
}
|
444 |
+
},
|
445 |
+
|
446 |
+
value: function( newValue ) {
|
447 |
+
if ( arguments.length ) {
|
448 |
+
this.options.value = this._trimAlignValue( newValue );
|
449 |
+
this._refreshValue();
|
450 |
+
this._change( null, 0 );
|
451 |
+
return;
|
452 |
+
}
|
453 |
+
|
454 |
+
return this._value();
|
455 |
+
},
|
456 |
+
|
457 |
+
values: function( index, newValue ) {
|
458 |
+
var vals,
|
459 |
+
newValues,
|
460 |
+
i;
|
461 |
+
|
462 |
+
if ( arguments.length > 1 ) {
|
463 |
+
this.options.values[ index ] = this._trimAlignValue( newValue );
|
464 |
+
this._refreshValue();
|
465 |
+
this._change( null, index );
|
466 |
+
return;
|
467 |
+
}
|
468 |
+
|
469 |
+
if ( arguments.length ) {
|
470 |
+
if ( $.isArray( arguments[ 0 ] ) ) {
|
471 |
+
vals = this.options.values;
|
472 |
+
newValues = arguments[ 0 ];
|
473 |
+
for ( i = 0; i < vals.length; i += 1 ) {
|
474 |
+
vals[ i ] = this._trimAlignValue( newValues[ i ] );
|
475 |
+
this._change( null, i );
|
476 |
+
}
|
477 |
+
this._refreshValue();
|
478 |
+
} else {
|
479 |
+
if ( this.options.values && this.options.values.length ) {
|
480 |
+
return this._values( index );
|
481 |
+
} else {
|
482 |
+
return this.value();
|
483 |
+
}
|
484 |
+
}
|
485 |
+
} else {
|
486 |
+
return this._values();
|
487 |
+
}
|
488 |
+
},
|
489 |
+
|
490 |
+
_setOption: function( key, value ) {
|
491 |
+
var i,
|
492 |
+
valsLength = 0;
|
493 |
+
|
494 |
+
if ( $.isArray( this.options.values ) ) {
|
495 |
+
valsLength = this.options.values.length;
|
496 |
+
}
|
497 |
+
|
498 |
+
$.Widget.prototype._setOption.apply( this, arguments );
|
499 |
+
|
500 |
+
switch ( key ) {
|
501 |
+
case "disabled":
|
502 |
+
if ( value ) {
|
503 |
+
this.handles.filter( ".ui-state-focus" ).blur();
|
504 |
+
this.handles.removeClass( "ui-state-hover" );
|
505 |
+
this.handles.propAttr( "disabled", true );
|
506 |
+
this.element.addClass( "ui-disabled" );
|
507 |
+
} else {
|
508 |
+
this.handles.propAttr( "disabled", false );
|
509 |
+
this.element.removeClass( "ui-disabled" );
|
510 |
+
}
|
511 |
+
break;
|
512 |
+
case "orientation":
|
513 |
+
this._detectOrientation();
|
514 |
+
this.element
|
515 |
+
.removeClass( "ui-slider-horizontal ui-slider-vertical" )
|
516 |
+
.addClass( "ui-slider-" + this.orientation );
|
517 |
+
this._refreshValue();
|
518 |
+
break;
|
519 |
+
case "value":
|
520 |
+
this._animateOff = true;
|
521 |
+
this._refreshValue();
|
522 |
+
this._change( null, 0 );
|
523 |
+
this._animateOff = false;
|
524 |
+
break;
|
525 |
+
case "values":
|
526 |
+
this._animateOff = true;
|
527 |
+
this._refreshValue();
|
528 |
+
for ( i = 0; i < valsLength; i += 1 ) {
|
529 |
+
this._change( null, i );
|
530 |
+
}
|
531 |
+
this._animateOff = false;
|
532 |
+
break;
|
533 |
+
}
|
534 |
+
},
|
535 |
+
|
536 |
+
//internal value getter
|
537 |
+
// _value() returns value trimmed by min and max, aligned by step
|
538 |
+
_value: function() {
|
539 |
+
var val = this.options.value;
|
540 |
+
val = this._trimAlignValue( val );
|
541 |
+
|
542 |
+
return val;
|
543 |
+
},
|
544 |
+
|
545 |
+
//internal values getter
|
546 |
+
// _values() returns array of values trimmed by min and max, aligned by step
|
547 |
+
// _values( index ) returns single value trimmed by min and max, aligned by step
|
548 |
+
_values: function( index ) {
|
549 |
+
var val,
|
550 |
+
vals,
|
551 |
+
i;
|
552 |
+
|
553 |
+
if ( arguments.length ) {
|
554 |
+
val = this.options.values[ index ];
|
555 |
+
val = this._trimAlignValue( val );
|
556 |
+
|
557 |
+
return val;
|
558 |
+
} else {
|
559 |
+
// .slice() creates a copy of the array
|
560 |
+
// this copy gets trimmed by min and max and then returned
|
561 |
+
vals = this.options.values.slice();
|
562 |
+
for ( i = 0; i < vals.length; i+= 1) {
|
563 |
+
vals[ i ] = this._trimAlignValue( vals[ i ] );
|
564 |
+
}
|
565 |
+
|
566 |
+
return vals;
|
567 |
+
}
|
568 |
+
},
|
569 |
+
|
570 |
+
// returns the step-aligned value that val is closest to, between (inclusive) min and max
|
571 |
+
_trimAlignValue: function( val ) {
|
572 |
+
if ( val <= this._valueMin() ) {
|
573 |
+
return this._valueMin();
|
574 |
+
}
|
575 |
+
if ( val >= this._valueMax() ) {
|
576 |
+
return this._valueMax();
|
577 |
+
}
|
578 |
+
var step = ( this.options.step > 0 ) ? this.options.step : 1,
|
579 |
+
valModStep = (val - this._valueMin()) % step,
|
580 |
+
alignValue = val - valModStep;
|
581 |
+
|
582 |
+
if ( Math.abs(valModStep) * 2 >= step ) {
|
583 |
+
alignValue += ( valModStep > 0 ) ? step : ( -step );
|
584 |
+
}
|
585 |
+
|
586 |
+
// Since JavaScript has problems with large floats, round
|
587 |
+
// the final value to 5 digits after the decimal point (see #4124)
|
588 |
+
return parseFloat( alignValue.toFixed(5) );
|
589 |
+
},
|
590 |
+
|
591 |
+
_valueMin: function() {
|
592 |
+
return this.options.min;
|
593 |
+
},
|
594 |
+
|
595 |
+
_valueMax: function() {
|
596 |
+
return this.options.max;
|
597 |
+
},
|
598 |
+
|
599 |
+
_refreshValue: function() {
|
600 |
+
var oRange = this.options.range,
|
601 |
+
o = this.options,
|
602 |
+
self = this,
|
603 |
+
animate = ( !this._animateOff ) ? o.animate : false,
|
604 |
+
valPercent,
|
605 |
+
_set = {},
|
606 |
+
lastValPercent,
|
607 |
+
value,
|
608 |
+
valueMin,
|
609 |
+
valueMax;
|
610 |
+
|
611 |
+
if ( this.options.values && this.options.values.length ) {
|
612 |
+
this.handles.each(function( i, j ) {
|
613 |
+
valPercent = ( self.values(i) - self._valueMin() ) / ( self._valueMax() - self._valueMin() ) * 100;
|
614 |
+
_set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
|
615 |
+
$( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
|
616 |
+
if ( self.options.range === true ) {
|
617 |
+
if ( self.orientation === "horizontal" ) {
|
618 |
+
if ( i === 0 ) {
|
619 |
+
self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { left: valPercent + "%" }, o.animate );
|
620 |
+
}
|
621 |
+
if ( i === 1 ) {
|
622 |
+
self.range[ animate ? "animate" : "css" ]( { width: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
|
623 |
+
}
|
624 |
+
} else {
|
625 |
+
if ( i === 0 ) {
|
626 |
+
self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { bottom: ( valPercent ) + "%" }, o.animate );
|
627 |
+
}
|
628 |
+
if ( i === 1 ) {
|
629 |
+
self.range[ animate ? "animate" : "css" ]( { height: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
|
630 |
+
}
|
631 |
+
}
|
632 |
+
}
|
633 |
+
lastValPercent = valPercent;
|
634 |
+
});
|
635 |
+
} else {
|
636 |
+
value = this.value();
|
637 |
+
valueMin = this._valueMin();
|
638 |
+
valueMax = this._valueMax();
|
639 |
+
valPercent = ( valueMax !== valueMin ) ?
|
640 |
+
( value - valueMin ) / ( valueMax - valueMin ) * 100 :
|
641 |
+
0;
|
642 |
+
_set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
|
643 |
+
this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
|
644 |
+
|
645 |
+
if ( oRange === "min" && this.orientation === "horizontal" ) {
|
646 |
+
this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { width: valPercent + "%" }, o.animate );
|
647 |
+
}
|
648 |
+
if ( oRange === "max" && this.orientation === "horizontal" ) {
|
649 |
+
this.range[ animate ? "animate" : "css" ]( { width: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
|
650 |
+
}
|
651 |
+
if ( oRange === "min" && this.orientation === "vertical" ) {
|
652 |
+
this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { height: valPercent + "%" }, o.animate );
|
653 |
+
}
|
654 |
+
if ( oRange === "max" && this.orientation === "vertical" ) {
|
655 |
+
this.range[ animate ? "animate" : "css" ]( { height: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
|
656 |
+
}
|
657 |
+
}
|
658 |
+
}
|
659 |
+
|
660 |
+
});
|
661 |
+
|
662 |
+
$.extend( $.ui.slider, {
|
663 |
+
version: "1.8.16"
|
664 |
+
});
|
665 |
+
|
666 |
+
}(jQuery));
|
js/jquery.ui.slider.min.js
CHANGED
@@ -1,66 +1,66 @@
|
|
1 |
-
/*!
|
2 |
-
* jQuery UI Widget 1.8.16
|
3 |
-
*
|
4 |
-
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
5 |
-
* Dual licensed under the MIT or GPL Version 2 licenses.
|
6 |
-
* http://jquery.org/license
|
7 |
-
*
|
8 |
-
* http://docs.jquery.com/UI/Widget
|
9 |
-
*/
|
10 |
-
(function(b,j){if(b.cleanData){var k=b.cleanData;b.cleanData=function(a){for(var c=0,d;(d=a[c])!=null;c++)try{b(d).triggerHandler("remove")}catch(e){}k(a)}}else{var l=b.fn.remove;b.fn.remove=function(a,c){return this.each(function(){if(!c)if(!a||b.filter(a,[this]).length)b("*",this).add([this]).each(function(){try{b(this).triggerHandler("remove")}catch(d){}});return l.call(b(this),a,c)})}}b.widget=function(a,c,d){var e=a.split(".")[0],f;a=a.split(".")[1];f=e+"-"+a;if(!d){d=c;c=b.Widget}b.expr[":"][f]=
|
11 |
-
function(h){return!!b.data(h,a)};b[e]=b[e]||{};b[e][a]=function(h,g){arguments.length&&this._createWidget(h,g)};c=new c;c.options=b.extend(true,{},c.options);b[e][a].prototype=b.extend(true,c,{namespace:e,widgetName:a,widgetEventPrefix:b[e][a].prototype.widgetEventPrefix||a,widgetBaseClass:f},d);b.widget.bridge(a,b[e][a])};b.widget.bridge=function(a,c){b.fn[a]=function(d){var e=typeof d==="string",f=Array.prototype.slice.call(arguments,1),h=this;d=!e&&f.length?b.extend.apply(null,[true,d].concat(f)):
|
12 |
-
d;if(e&&d.charAt(0)==="_")return h;e?this.each(function(){var g=b.data(this,a),i=g&&b.isFunction(g[d])?g[d].apply(g,f):g;if(i!==g&&i!==j){h=i;return false}}):this.each(function(){var g=b.data(this,a);g?g.option(d||{})._init():b.data(this,a,new c(d,this))});return h}};b.Widget=function(a,c){arguments.length&&this._createWidget(a,c)};b.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",options:{disabled:false},_createWidget:function(a,c){b.data(c,this.widgetName,this);this.element=b(c);this.options=
|
13 |
-
b.extend(true,{},this.options,this._getCreateOptions(),a);var d=this;this.element.bind("remove."+this.widgetName,function(){d.destroy()});this._create();this._trigger("create");this._init()},_getCreateOptions:function(){return b.metadata&&b.metadata.get(this.element[0])[this.widgetName]},_create:function(){},_init:function(){},destroy:function(){this.element.unbind("."+this.widgetName).removeData(this.widgetName);this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+
|
14 |
-
"-disabled ui-state-disabled")},widget:function(){return this.element},option:function(a,c){var d=a;if(arguments.length===0)return b.extend({},this.options);if(typeof a==="string"){if(c===j)return this.options[a];d={};d[a]=c}this._setOptions(d);return this},_setOptions:function(a){var c=this;b.each(a,function(d,e){c._setOption(d,e)});return this},_setOption:function(a,c){this.options[a]=c;if(a==="disabled")this.widget()[c?"addClass":"removeClass"](this.widgetBaseClass+"-disabled ui-state-disabled").attr("aria-disabled",
|
15 |
-
c);return this},enable:function(){return this._setOption("disabled",false)},disable:function(){return this._setOption("disabled",true)},_trigger:function(a,c,d){var e=this.options[a];c=b.Event(c);c.type=(a===this.widgetEventPrefix?a:this.widgetEventPrefix+a).toLowerCase();d=d||{};if(c.originalEvent){a=b.event.props.length;for(var f;a;){f=b.event.props[--a];c[f]=c.originalEvent[f]}}this.element.trigger(c,d);return!(b.isFunction(e)&&e.call(this.element[0],c,d)===false||c.isDefaultPrevented())}}})(jQuery);
|
16 |
-
;/*!
|
17 |
-
* jQuery UI Mouse 1.8.16
|
18 |
-
*
|
19 |
-
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
20 |
-
* Dual licensed under the MIT or GPL Version 2 licenses.
|
21 |
-
* http://jquery.org/license
|
22 |
-
*
|
23 |
-
* http://docs.jquery.com/UI/Mouse
|
24 |
-
*
|
25 |
-
* Depends:
|
26 |
-
* jquery.ui.widget.js
|
27 |
-
*/
|
28 |
-
(function(b){var d=false;b(document).mouseup(function(){d=false});b.widget("ui.mouse",{options:{cancel:":input,option",distance:1,delay:0},_mouseInit:function(){var a=this;this.element.bind("mousedown."+this.widgetName,function(c){return a._mouseDown(c)}).bind("click."+this.widgetName,function(c){if(true===b.data(c.target,a.widgetName+".preventClickEvent")){b.removeData(c.target,a.widgetName+".preventClickEvent");c.stopImmediatePropagation();return false}});this.started=false},_mouseDestroy:function(){this.element.unbind("."+
|
29 |
-
this.widgetName)},_mouseDown:function(a){if(!d){this._mouseStarted&&this._mouseUp(a);this._mouseDownEvent=a;var c=this,f=a.which==1,g=typeof this.options.cancel=="string"&&a.target.nodeName?b(a.target).closest(this.options.cancel).length:false;if(!f||g||!this._mouseCapture(a))return true;this.mouseDelayMet=!this.options.delay;if(!this.mouseDelayMet)this._mouseDelayTimer=setTimeout(function(){c.mouseDelayMet=true},this.options.delay);if(this._mouseDistanceMet(a)&&this._mouseDelayMet(a)){this._mouseStarted=
|
30 |
-
this._mouseStart(a)!==false;if(!this._mouseStarted){a.preventDefault();return true}}true===b.data(a.target,this.widgetName+".preventClickEvent")&&b.removeData(a.target,this.widgetName+".preventClickEvent");this._mouseMoveDelegate=function(e){return c._mouseMove(e)};this._mouseUpDelegate=function(e){return c._mouseUp(e)};b(document).bind("mousemove."+this.widgetName,this._mouseMoveDelegate).bind("mouseup."+this.widgetName,this._mouseUpDelegate);a.preventDefault();return d=true}},_mouseMove:function(a){if(b.browser.msie&&
|
31 |
-
!(document.documentMode>=9)&&!a.button)return this._mouseUp(a);if(this._mouseStarted){this._mouseDrag(a);return a.preventDefault()}if(this._mouseDistanceMet(a)&&this._mouseDelayMet(a))(this._mouseStarted=this._mouseStart(this._mouseDownEvent,a)!==false)?this._mouseDrag(a):this._mouseUp(a);return!this._mouseStarted},_mouseUp:function(a){b(document).unbind("mousemove."+this.widgetName,this._mouseMoveDelegate).unbind("mouseup."+this.widgetName,this._mouseUpDelegate);if(this._mouseStarted){this._mouseStarted=
|
32 |
-
false;a.target==this._mouseDownEvent.target&&b.data(a.target,this.widgetName+".preventClickEvent",true);this._mouseStop(a)}return false},_mouseDistanceMet:function(a){return Math.max(Math.abs(this._mouseDownEvent.pageX-a.pageX),Math.abs(this._mouseDownEvent.pageY-a.pageY))>=this.options.distance},_mouseDelayMet:function(){return this.mouseDelayMet},_mouseStart:function(){},_mouseDrag:function(){},_mouseStop:function(){},_mouseCapture:function(){return true}})})(jQuery);
|
33 |
-
;/*
|
34 |
-
* jQuery UI Slider 1.8.16
|
35 |
-
*
|
36 |
-
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
37 |
-
* Dual licensed under the MIT or GPL Version 2 licenses.
|
38 |
-
* http://jquery.org/license
|
39 |
-
*
|
40 |
-
* http://docs.jquery.com/UI/Slider
|
41 |
-
*
|
42 |
-
* Depends:
|
43 |
-
* jquery.ui.core.js
|
44 |
-
* jquery.ui.mouse.js
|
45 |
-
* jquery.ui.widget.js
|
46 |
-
*/
|
47 |
-
(function(d){d.widget("ui.slider",d.ui.mouse,{widgetEventPrefix:"slide",options:{animate:false,distance:0,max:100,min:0,orientation:"horizontal",range:false,step:1,value:0,values:null},_create:function(){var a=this,b=this.options,c=this.element.find(".ui-slider-handle").addClass("ui-state-default ui-corner-all"),f=b.values&&b.values.length||1,e=[];this._mouseSliding=this._keySliding=false;this._animateOff=true;this._handleIndex=null;this._detectOrientation();this._mouseInit();this.element.addClass("ui-slider ui-slider-"+
|
48 |
-
this.orientation+" ui-widget ui-widget-content ui-corner-all"+(b.disabled?" ui-slider-disabled ui-disabled":""));this.range=d([]);if(b.range){if(b.range===true){if(!b.values)b.values=[this._valueMin(),this._valueMin()];if(b.values.length&&b.values.length!==2)b.values=[b.values[0],b.values[0]]}this.range=d("<div></div>").appendTo(this.element).addClass("ui-slider-range ui-widget-header"+(b.range==="min"||b.range==="max"?" ui-slider-range-"+b.range:""))}for(var j=c.length;j<f;j+=1)e.push("<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>");
|
49 |
-
this.handles=c.add(d(e.join("")).appendTo(a.element));this.handle=this.handles.eq(0);this.handles.add(this.range).filter("a").click(function(g){g.preventDefault()}).hover(function(){b.disabled||d(this).addClass("ui-state-hover")},function(){d(this).removeClass("ui-state-hover")}).focus(function(){if(b.disabled)d(this).blur();else{d(".ui-slider .ui-state-focus").removeClass("ui-state-focus");d(this).addClass("ui-state-focus")}}).blur(function(){d(this).removeClass("ui-state-focus")});this.handles.each(function(g){d(this).data("index.ui-slider-handle",
|
50 |
-
g)});this.handles.keydown(function(g){var k=true,l=d(this).data("index.ui-slider-handle"),i,h,m;if(!a.options.disabled){switch(g.keyCode){case d.ui.keyCode.HOME:case d.ui.keyCode.END:case d.ui.keyCode.PAGE_UP:case d.ui.keyCode.PAGE_DOWN:case d.ui.keyCode.UP:case d.ui.keyCode.RIGHT:case d.ui.keyCode.DOWN:case d.ui.keyCode.LEFT:k=false;if(!a._keySliding){a._keySliding=true;d(this).addClass("ui-state-active");i=a._start(g,l);if(i===false)return}break}m=a.options.step;i=a.options.values&&a.options.values.length?
|
51 |
-
(h=a.values(l)):(h=a.value());switch(g.keyCode){case d.ui.keyCode.HOME:h=a._valueMin();break;case d.ui.keyCode.END:h=a._valueMax();break;case d.ui.keyCode.PAGE_UP:h=a._trimAlignValue(i+(a._valueMax()-a._valueMin())/5);break;case d.ui.keyCode.PAGE_DOWN:h=a._trimAlignValue(i-(a._valueMax()-a._valueMin())/5);break;case d.ui.keyCode.UP:case d.ui.keyCode.RIGHT:if(i===a._valueMax())return;h=a._trimAlignValue(i+m);break;case d.ui.keyCode.DOWN:case d.ui.keyCode.LEFT:if(i===a._valueMin())return;h=a._trimAlignValue(i-
|
52 |
-
m);break}a._slide(g,l,h);return k}}).keyup(function(g){var k=d(this).data("index.ui-slider-handle");if(a._keySliding){a._keySliding=false;a._stop(g,k);a._change(g,k);d(this).removeClass("ui-state-active")}});this._refreshValue();this._animateOff=false},destroy:function(){this.handles.remove();this.range.remove();this.element.removeClass("ui-slider ui-slider-horizontal ui-slider-vertical ui-slider-disabled ui-widget ui-widget-content ui-corner-all").removeData("slider").unbind(".slider");this._mouseDestroy();
|
53 |
-
return this},_mouseCapture:function(a){var b=this.options,c,f,e,j,g;if(b.disabled)return false;this.elementSize={width:this.element.outerWidth(),height:this.element.outerHeight()};this.elementOffset=this.element.offset();c=this._normValueFromMouse({x:a.pageX,y:a.pageY});f=this._valueMax()-this._valueMin()+1;j=this;this.handles.each(function(k){var l=Math.abs(c-j.values(k));if(f>l){f=l;e=d(this);g=k}});if(b.range===true&&this.values(1)===b.min){g+=1;e=d(this.handles[g])}if(this._start(a,g)===false)return false;
|
54 |
-
this._mouseSliding=true;j._handleIndex=g;e.addClass("ui-state-active").focus();b=e.offset();this._clickOffset=!d(a.target).parents().andSelf().is(".ui-slider-handle")?{left:0,top:0}:{left:a.pageX-b.left-e.width()/2,top:a.pageY-b.top-e.height()/2-(parseInt(e.css("borderTopWidth"),10)||0)-(parseInt(e.css("borderBottomWidth"),10)||0)+(parseInt(e.css("marginTop"),10)||0)};this.handles.hasClass("ui-state-hover")||this._slide(a,g,c);return this._animateOff=true},_mouseStart:function(){return true},_mouseDrag:function(a){var b=
|
55 |
-
this._normValueFromMouse({x:a.pageX,y:a.pageY});this._slide(a,this._handleIndex,b);return false},_mouseStop:function(a){this.handles.removeClass("ui-state-active");this._mouseSliding=false;this._stop(a,this._handleIndex);this._change(a,this._handleIndex);this._clickOffset=this._handleIndex=null;return this._animateOff=false},_detectOrientation:function(){this.orientation=this.options.orientation==="vertical"?"vertical":"horizontal"},_normValueFromMouse:function(a){var b;if(this.orientation==="horizontal"){b=
|
56 |
-
this.elementSize.width;a=a.x-this.elementOffset.left-(this._clickOffset?this._clickOffset.left:0)}else{b=this.elementSize.height;a=a.y-this.elementOffset.top-(this._clickOffset?this._clickOffset.top:0)}b=a/b;if(b>1)b=1;if(b<0)b=0;if(this.orientation==="vertical")b=1-b;a=this._valueMax()-this._valueMin();return this._trimAlignValue(this._valueMin()+b*a)},_start:function(a,b){var c={handle:this.handles[b],value:this.value()};if(this.options.values&&this.options.values.length){c.value=this.values(b);
|
57 |
-
c.values=this.values()}return this._trigger("start",a,c)},_slide:function(a,b,c){var f;if(this.options.values&&this.options.values.length){f=this.values(b?0:1);if(this.options.values.length===2&&this.options.range===true&&(b===0&&c>f||b===1&&c<f))c=f;if(c!==this.values(b)){f=this.values();f[b]=c;a=this._trigger("slide",a,{handle:this.handles[b],value:c,values:f});this.values(b?0:1);a!==false&&this.values(b,c,true)}}else if(c!==this.value()){a=this._trigger("slide",a,{handle:this.handles[b],value:c});
|
58 |
-
a!==false&&this.value(c)}},_stop:function(a,b){var c={handle:this.handles[b],value:this.value()};if(this.options.values&&this.options.values.length){c.value=this.values(b);c.values=this.values()}this._trigger("stop",a,c)},_change:function(a,b){if(!this._keySliding&&!this._mouseSliding){var c={handle:this.handles[b],value:this.value()};if(this.options.values&&this.options.values.length){c.value=this.values(b);c.values=this.values()}this._trigger("change",a,c)}},value:function(a){if(arguments.length){this.options.value=
|
59 |
-
this._trimAlignValue(a);this._refreshValue();this._change(null,0)}else return this._value()},values:function(a,b){var c,f,e;if(arguments.length>1){this.options.values[a]=this._trimAlignValue(b);this._refreshValue();this._change(null,a)}else if(arguments.length)if(d.isArray(arguments[0])){c=this.options.values;f=arguments[0];for(e=0;e<c.length;e+=1){c[e]=this._trimAlignValue(f[e]);this._change(null,e)}this._refreshValue()}else return this.options.values&&this.options.values.length?this._values(a):
|
60 |
-
this.value();else return this._values()},_setOption:function(a,b){var c,f=0;if(d.isArray(this.options.values))f=this.options.values.length;d.Widget.prototype._setOption.apply(this,arguments);switch(a){case "disabled":if(b){this.handles.filter(".ui-state-focus").blur();this.handles.removeClass("ui-state-hover");this.handles.propAttr("disabled",true);this.element.addClass("ui-disabled")}else{this.handles.propAttr("disabled",false);this.element.removeClass("ui-disabled")}break;case "orientation":this._detectOrientation();
|
61 |
-
this.element.removeClass("ui-slider-horizontal ui-slider-vertical").addClass("ui-slider-"+this.orientation);this._refreshValue();break;case "value":this._animateOff=true;this._refreshValue();this._change(null,0);this._animateOff=false;break;case "values":this._animateOff=true;this._refreshValue();for(c=0;c<f;c+=1)this._change(null,c);this._animateOff=false;break}},_value:function(){var a=this.options.value;return a=this._trimAlignValue(a)},_values:function(a){var b,c;if(arguments.length){b=this.options.values[a];
|
62 |
-
return b=this._trimAlignValue(b)}else{b=this.options.values.slice();for(c=0;c<b.length;c+=1)b[c]=this._trimAlignValue(b[c]);return b}},_trimAlignValue:function(a){if(a<=this._valueMin())return this._valueMin();if(a>=this._valueMax())return this._valueMax();var b=this.options.step>0?this.options.step:1,c=(a-this._valueMin())%b;a=a-c;if(Math.abs(c)*2>=b)a+=c>0?b:-b;return parseFloat(a.toFixed(5))},_valueMin:function(){return this.options.min},_valueMax:function(){return this.options.max},_refreshValue:function(){var a=
|
63 |
-
this.options.range,b=this.options,c=this,f=!this._animateOff?b.animate:false,e,j={},g,k,l,i;if(this.options.values&&this.options.values.length)this.handles.each(function(h){e=(c.values(h)-c._valueMin())/(c._valueMax()-c._valueMin())*100;j[c.orientation==="horizontal"?"left":"bottom"]=e+"%";d(this).stop(1,1)[f?"animate":"css"](j,b.animate);if(c.options.range===true)if(c.orientation==="horizontal"){if(h===0)c.range.stop(1,1)[f?"animate":"css"]({left:e+"%"},b.animate);if(h===1)c.range[f?"animate":"css"]({width:e-
|
64 |
-
g+"%"},{queue:false,duration:b.animate})}else{if(h===0)c.range.stop(1,1)[f?"animate":"css"]({bottom:e+"%"},b.animate);if(h===1)c.range[f?"animate":"css"]({height:e-g+"%"},{queue:false,duration:b.animate})}g=e});else{k=this.value();l=this._valueMin();i=this._valueMax();e=i!==l?(k-l)/(i-l)*100:0;j[c.orientation==="horizontal"?"left":"bottom"]=e+"%";this.handle.stop(1,1)[f?"animate":"css"](j,b.animate);if(a==="min"&&this.orientation==="horizontal")this.range.stop(1,1)[f?"animate":"css"]({width:e+"%"},
|
65 |
-
b.animate);if(a==="max"&&this.orientation==="horizontal")this.range[f?"animate":"css"]({width:100-e+"%"},{queue:false,duration:b.animate});if(a==="min"&&this.orientation==="vertical")this.range.stop(1,1)[f?"animate":"css"]({height:e+"%"},b.animate);if(a==="max"&&this.orientation==="vertical")this.range[f?"animate":"css"]({height:100-e+"%"},{queue:false,duration:b.animate})}}});d.extend(d.ui.slider,{version:"1.8.16"})})(jQuery);
|
66 |
;
|
1 |
+
/*!
|
2 |
+
* jQuery UI Widget 1.8.16
|
3 |
+
*
|
4 |
+
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
5 |
+
* Dual licensed under the MIT or GPL Version 2 licenses.
|
6 |
+
* http://jquery.org/license
|
7 |
+
*
|
8 |
+
* http://docs.jquery.com/UI/Widget
|
9 |
+
*/
|
10 |
+
(function(b,j){if(b.cleanData){var k=b.cleanData;b.cleanData=function(a){for(var c=0,d;(d=a[c])!=null;c++)try{b(d).triggerHandler("remove")}catch(e){}k(a)}}else{var l=b.fn.remove;b.fn.remove=function(a,c){return this.each(function(){if(!c)if(!a||b.filter(a,[this]).length)b("*",this).add([this]).each(function(){try{b(this).triggerHandler("remove")}catch(d){}});return l.call(b(this),a,c)})}}b.widget=function(a,c,d){var e=a.split(".")[0],f;a=a.split(".")[1];f=e+"-"+a;if(!d){d=c;c=b.Widget}b.expr[":"][f]=
|
11 |
+
function(h){return!!b.data(h,a)};b[e]=b[e]||{};b[e][a]=function(h,g){arguments.length&&this._createWidget(h,g)};c=new c;c.options=b.extend(true,{},c.options);b[e][a].prototype=b.extend(true,c,{namespace:e,widgetName:a,widgetEventPrefix:b[e][a].prototype.widgetEventPrefix||a,widgetBaseClass:f},d);b.widget.bridge(a,b[e][a])};b.widget.bridge=function(a,c){b.fn[a]=function(d){var e=typeof d==="string",f=Array.prototype.slice.call(arguments,1),h=this;d=!e&&f.length?b.extend.apply(null,[true,d].concat(f)):
|
12 |
+
d;if(e&&d.charAt(0)==="_")return h;e?this.each(function(){var g=b.data(this,a),i=g&&b.isFunction(g[d])?g[d].apply(g,f):g;if(i!==g&&i!==j){h=i;return false}}):this.each(function(){var g=b.data(this,a);g?g.option(d||{})._init():b.data(this,a,new c(d,this))});return h}};b.Widget=function(a,c){arguments.length&&this._createWidget(a,c)};b.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",options:{disabled:false},_createWidget:function(a,c){b.data(c,this.widgetName,this);this.element=b(c);this.options=
|
13 |
+
b.extend(true,{},this.options,this._getCreateOptions(),a);var d=this;this.element.bind("remove."+this.widgetName,function(){d.destroy()});this._create();this._trigger("create");this._init()},_getCreateOptions:function(){return b.metadata&&b.metadata.get(this.element[0])[this.widgetName]},_create:function(){},_init:function(){},destroy:function(){this.element.unbind("."+this.widgetName).removeData(this.widgetName);this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+
|
14 |
+
"-disabled ui-state-disabled")},widget:function(){return this.element},option:function(a,c){var d=a;if(arguments.length===0)return b.extend({},this.options);if(typeof a==="string"){if(c===j)return this.options[a];d={};d[a]=c}this._setOptions(d);return this},_setOptions:function(a){var c=this;b.each(a,function(d,e){c._setOption(d,e)});return this},_setOption:function(a,c){this.options[a]=c;if(a==="disabled")this.widget()[c?"addClass":"removeClass"](this.widgetBaseClass+"-disabled ui-state-disabled").attr("aria-disabled",
|
15 |
+
c);return this},enable:function(){return this._setOption("disabled",false)},disable:function(){return this._setOption("disabled",true)},_trigger:function(a,c,d){var e=this.options[a];c=b.Event(c);c.type=(a===this.widgetEventPrefix?a:this.widgetEventPrefix+a).toLowerCase();d=d||{};if(c.originalEvent){a=b.event.props.length;for(var f;a;){f=b.event.props[--a];c[f]=c.originalEvent[f]}}this.element.trigger(c,d);return!(b.isFunction(e)&&e.call(this.element[0],c,d)===false||c.isDefaultPrevented())}}})(jQuery);
|
16 |
+
;/*!
|
17 |
+
* jQuery UI Mouse 1.8.16
|
18 |
+
*
|
19 |
+
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
20 |
+
* Dual licensed under the MIT or GPL Version 2 licenses.
|
21 |
+
* http://jquery.org/license
|
22 |
+
*
|
23 |
+
* http://docs.jquery.com/UI/Mouse
|
24 |
+
*
|
25 |
+
* Depends:
|
26 |
+
* jquery.ui.widget.js
|
27 |
+
*/
|
28 |
+
(function(b){var d=false;b(document).mouseup(function(){d=false});b.widget("ui.mouse",{options:{cancel:":input,option",distance:1,delay:0},_mouseInit:function(){var a=this;this.element.bind("mousedown."+this.widgetName,function(c){return a._mouseDown(c)}).bind("click."+this.widgetName,function(c){if(true===b.data(c.target,a.widgetName+".preventClickEvent")){b.removeData(c.target,a.widgetName+".preventClickEvent");c.stopImmediatePropagation();return false}});this.started=false},_mouseDestroy:function(){this.element.unbind("."+
|
29 |
+
this.widgetName)},_mouseDown:function(a){if(!d){this._mouseStarted&&this._mouseUp(a);this._mouseDownEvent=a;var c=this,f=a.which==1,g=typeof this.options.cancel=="string"&&a.target.nodeName?b(a.target).closest(this.options.cancel).length:false;if(!f||g||!this._mouseCapture(a))return true;this.mouseDelayMet=!this.options.delay;if(!this.mouseDelayMet)this._mouseDelayTimer=setTimeout(function(){c.mouseDelayMet=true},this.options.delay);if(this._mouseDistanceMet(a)&&this._mouseDelayMet(a)){this._mouseStarted=
|
30 |
+
this._mouseStart(a)!==false;if(!this._mouseStarted){a.preventDefault();return true}}true===b.data(a.target,this.widgetName+".preventClickEvent")&&b.removeData(a.target,this.widgetName+".preventClickEvent");this._mouseMoveDelegate=function(e){return c._mouseMove(e)};this._mouseUpDelegate=function(e){return c._mouseUp(e)};b(document).bind("mousemove."+this.widgetName,this._mouseMoveDelegate).bind("mouseup."+this.widgetName,this._mouseUpDelegate);a.preventDefault();return d=true}},_mouseMove:function(a){if(b.browser.msie&&
|
31 |
+
!(document.documentMode>=9)&&!a.button)return this._mouseUp(a);if(this._mouseStarted){this._mouseDrag(a);return a.preventDefault()}if(this._mouseDistanceMet(a)&&this._mouseDelayMet(a))(this._mouseStarted=this._mouseStart(this._mouseDownEvent,a)!==false)?this._mouseDrag(a):this._mouseUp(a);return!this._mouseStarted},_mouseUp:function(a){b(document).unbind("mousemove."+this.widgetName,this._mouseMoveDelegate).unbind("mouseup."+this.widgetName,this._mouseUpDelegate);if(this._mouseStarted){this._mouseStarted=
|
32 |
+
false;a.target==this._mouseDownEvent.target&&b.data(a.target,this.widgetName+".preventClickEvent",true);this._mouseStop(a)}return false},_mouseDistanceMet:function(a){return Math.max(Math.abs(this._mouseDownEvent.pageX-a.pageX),Math.abs(this._mouseDownEvent.pageY-a.pageY))>=this.options.distance},_mouseDelayMet:function(){return this.mouseDelayMet},_mouseStart:function(){},_mouseDrag:function(){},_mouseStop:function(){},_mouseCapture:function(){return true}})})(jQuery);
|
33 |
+
;/*
|
34 |
+
* jQuery UI Slider 1.8.16
|
35 |
+
*
|
36 |
+
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
37 |
+
* Dual licensed under the MIT or GPL Version 2 licenses.
|
38 |
+
* http://jquery.org/license
|
39 |
+
*
|
40 |
+
* http://docs.jquery.com/UI/Slider
|
41 |
+
*
|
42 |
+
* Depends:
|
43 |
+
* jquery.ui.core.js
|
44 |
+
* jquery.ui.mouse.js
|
45 |
+
* jquery.ui.widget.js
|
46 |
+
*/
|
47 |
+
(function(d){d.widget("ui.slider",d.ui.mouse,{widgetEventPrefix:"slide",options:{animate:false,distance:0,max:100,min:0,orientation:"horizontal",range:false,step:1,value:0,values:null},_create:function(){var a=this,b=this.options,c=this.element.find(".ui-slider-handle").addClass("ui-state-default ui-corner-all"),f=b.values&&b.values.length||1,e=[];this._mouseSliding=this._keySliding=false;this._animateOff=true;this._handleIndex=null;this._detectOrientation();this._mouseInit();this.element.addClass("ui-slider ui-slider-"+
|
48 |
+
this.orientation+" ui-widget ui-widget-content ui-corner-all"+(b.disabled?" ui-slider-disabled ui-disabled":""));this.range=d([]);if(b.range){if(b.range===true){if(!b.values)b.values=[this._valueMin(),this._valueMin()];if(b.values.length&&b.values.length!==2)b.values=[b.values[0],b.values[0]]}this.range=d("<div></div>").appendTo(this.element).addClass("ui-slider-range ui-widget-header"+(b.range==="min"||b.range==="max"?" ui-slider-range-"+b.range:""))}for(var j=c.length;j<f;j+=1)e.push("<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>");
|
49 |
+
this.handles=c.add(d(e.join("")).appendTo(a.element));this.handle=this.handles.eq(0);this.handles.add(this.range).filter("a").click(function(g){g.preventDefault()}).hover(function(){b.disabled||d(this).addClass("ui-state-hover")},function(){d(this).removeClass("ui-state-hover")}).focus(function(){if(b.disabled)d(this).blur();else{d(".ui-slider .ui-state-focus").removeClass("ui-state-focus");d(this).addClass("ui-state-focus")}}).blur(function(){d(this).removeClass("ui-state-focus")});this.handles.each(function(g){d(this).data("index.ui-slider-handle",
|
50 |
+
g)});this.handles.keydown(function(g){var k=true,l=d(this).data("index.ui-slider-handle"),i,h,m;if(!a.options.disabled){switch(g.keyCode){case d.ui.keyCode.HOME:case d.ui.keyCode.END:case d.ui.keyCode.PAGE_UP:case d.ui.keyCode.PAGE_DOWN:case d.ui.keyCode.UP:case d.ui.keyCode.RIGHT:case d.ui.keyCode.DOWN:case d.ui.keyCode.LEFT:k=false;if(!a._keySliding){a._keySliding=true;d(this).addClass("ui-state-active");i=a._start(g,l);if(i===false)return}break}m=a.options.step;i=a.options.values&&a.options.values.length?
|
51 |
+
(h=a.values(l)):(h=a.value());switch(g.keyCode){case d.ui.keyCode.HOME:h=a._valueMin();break;case d.ui.keyCode.END:h=a._valueMax();break;case d.ui.keyCode.PAGE_UP:h=a._trimAlignValue(i+(a._valueMax()-a._valueMin())/5);break;case d.ui.keyCode.PAGE_DOWN:h=a._trimAlignValue(i-(a._valueMax()-a._valueMin())/5);break;case d.ui.keyCode.UP:case d.ui.keyCode.RIGHT:if(i===a._valueMax())return;h=a._trimAlignValue(i+m);break;case d.ui.keyCode.DOWN:case d.ui.keyCode.LEFT:if(i===a._valueMin())return;h=a._trimAlignValue(i-
|
52 |
+
m);break}a._slide(g,l,h);return k}}).keyup(function(g){var k=d(this).data("index.ui-slider-handle");if(a._keySliding){a._keySliding=false;a._stop(g,k);a._change(g,k);d(this).removeClass("ui-state-active")}});this._refreshValue();this._animateOff=false},destroy:function(){this.handles.remove();this.range.remove();this.element.removeClass("ui-slider ui-slider-horizontal ui-slider-vertical ui-slider-disabled ui-widget ui-widget-content ui-corner-all").removeData("slider").unbind(".slider");this._mouseDestroy();
|
53 |
+
return this},_mouseCapture:function(a){var b=this.options,c,f,e,j,g;if(b.disabled)return false;this.elementSize={width:this.element.outerWidth(),height:this.element.outerHeight()};this.elementOffset=this.element.offset();c=this._normValueFromMouse({x:a.pageX,y:a.pageY});f=this._valueMax()-this._valueMin()+1;j=this;this.handles.each(function(k){var l=Math.abs(c-j.values(k));if(f>l){f=l;e=d(this);g=k}});if(b.range===true&&this.values(1)===b.min){g+=1;e=d(this.handles[g])}if(this._start(a,g)===false)return false;
|
54 |
+
this._mouseSliding=true;j._handleIndex=g;e.addClass("ui-state-active").focus();b=e.offset();this._clickOffset=!d(a.target).parents().andSelf().is(".ui-slider-handle")?{left:0,top:0}:{left:a.pageX-b.left-e.width()/2,top:a.pageY-b.top-e.height()/2-(parseInt(e.css("borderTopWidth"),10)||0)-(parseInt(e.css("borderBottomWidth"),10)||0)+(parseInt(e.css("marginTop"),10)||0)};this.handles.hasClass("ui-state-hover")||this._slide(a,g,c);return this._animateOff=true},_mouseStart:function(){return true},_mouseDrag:function(a){var b=
|
55 |
+
this._normValueFromMouse({x:a.pageX,y:a.pageY});this._slide(a,this._handleIndex,b);return false},_mouseStop:function(a){this.handles.removeClass("ui-state-active");this._mouseSliding=false;this._stop(a,this._handleIndex);this._change(a,this._handleIndex);this._clickOffset=this._handleIndex=null;return this._animateOff=false},_detectOrientation:function(){this.orientation=this.options.orientation==="vertical"?"vertical":"horizontal"},_normValueFromMouse:function(a){var b;if(this.orientation==="horizontal"){b=
|
56 |
+
this.elementSize.width;a=a.x-this.elementOffset.left-(this._clickOffset?this._clickOffset.left:0)}else{b=this.elementSize.height;a=a.y-this.elementOffset.top-(this._clickOffset?this._clickOffset.top:0)}b=a/b;if(b>1)b=1;if(b<0)b=0;if(this.orientation==="vertical")b=1-b;a=this._valueMax()-this._valueMin();return this._trimAlignValue(this._valueMin()+b*a)},_start:function(a,b){var c={handle:this.handles[b],value:this.value()};if(this.options.values&&this.options.values.length){c.value=this.values(b);
|
57 |
+
c.values=this.values()}return this._trigger("start",a,c)},_slide:function(a,b,c){var f;if(this.options.values&&this.options.values.length){f=this.values(b?0:1);if(this.options.values.length===2&&this.options.range===true&&(b===0&&c>f||b===1&&c<f))c=f;if(c!==this.values(b)){f=this.values();f[b]=c;a=this._trigger("slide",a,{handle:this.handles[b],value:c,values:f});this.values(b?0:1);a!==false&&this.values(b,c,true)}}else if(c!==this.value()){a=this._trigger("slide",a,{handle:this.handles[b],value:c});
|
58 |
+
a!==false&&this.value(c)}},_stop:function(a,b){var c={handle:this.handles[b],value:this.value()};if(this.options.values&&this.options.values.length){c.value=this.values(b);c.values=this.values()}this._trigger("stop",a,c)},_change:function(a,b){if(!this._keySliding&&!this._mouseSliding){var c={handle:this.handles[b],value:this.value()};if(this.options.values&&this.options.values.length){c.value=this.values(b);c.values=this.values()}this._trigger("change",a,c)}},value:function(a){if(arguments.length){this.options.value=
|
59 |
+
this._trimAlignValue(a);this._refreshValue();this._change(null,0)}else return this._value()},values:function(a,b){var c,f,e;if(arguments.length>1){this.options.values[a]=this._trimAlignValue(b);this._refreshValue();this._change(null,a)}else if(arguments.length)if(d.isArray(arguments[0])){c=this.options.values;f=arguments[0];for(e=0;e<c.length;e+=1){c[e]=this._trimAlignValue(f[e]);this._change(null,e)}this._refreshValue()}else return this.options.values&&this.options.values.length?this._values(a):
|
60 |
+
this.value();else return this._values()},_setOption:function(a,b){var c,f=0;if(d.isArray(this.options.values))f=this.options.values.length;d.Widget.prototype._setOption.apply(this,arguments);switch(a){case "disabled":if(b){this.handles.filter(".ui-state-focus").blur();this.handles.removeClass("ui-state-hover");this.handles.propAttr("disabled",true);this.element.addClass("ui-disabled")}else{this.handles.propAttr("disabled",false);this.element.removeClass("ui-disabled")}break;case "orientation":this._detectOrientation();
|
61 |
+
this.element.removeClass("ui-slider-horizontal ui-slider-vertical").addClass("ui-slider-"+this.orientation);this._refreshValue();break;case "value":this._animateOff=true;this._refreshValue();this._change(null,0);this._animateOff=false;break;case "values":this._animateOff=true;this._refreshValue();for(c=0;c<f;c+=1)this._change(null,c);this._animateOff=false;break}},_value:function(){var a=this.options.value;return a=this._trimAlignValue(a)},_values:function(a){var b,c;if(arguments.length){b=this.options.values[a];
|
62 |
+
return b=this._trimAlignValue(b)}else{b=this.options.values.slice();for(c=0;c<b.length;c+=1)b[c]=this._trimAlignValue(b[c]);return b}},_trimAlignValue:function(a){if(a<=this._valueMin())return this._valueMin();if(a>=this._valueMax())return this._valueMax();var b=this.options.step>0?this.options.step:1,c=(a-this._valueMin())%b;a=a-c;if(Math.abs(c)*2>=b)a+=c>0?b:-b;return parseFloat(a.toFixed(5))},_valueMin:function(){return this.options.min},_valueMax:function(){return this.options.max},_refreshValue:function(){var a=
|
63 |
+
this.options.range,b=this.options,c=this,f=!this._animateOff?b.animate:false,e,j={},g,k,l,i;if(this.options.values&&this.options.values.length)this.handles.each(function(h){e=(c.values(h)-c._valueMin())/(c._valueMax()-c._valueMin())*100;j[c.orientation==="horizontal"?"left":"bottom"]=e+"%";d(this).stop(1,1)[f?"animate":"css"](j,b.animate);if(c.options.range===true)if(c.orientation==="horizontal"){if(h===0)c.range.stop(1,1)[f?"animate":"css"]({left:e+"%"},b.animate);if(h===1)c.range[f?"animate":"css"]({width:e-
|
64 |
+
g+"%"},{queue:false,duration:b.animate})}else{if(h===0)c.range.stop(1,1)[f?"animate":"css"]({bottom:e+"%"},b.animate);if(h===1)c.range[f?"animate":"css"]({height:e-g+"%"},{queue:false,duration:b.animate})}g=e});else{k=this.value();l=this._valueMin();i=this._valueMax();e=i!==l?(k-l)/(i-l)*100:0;j[c.orientation==="horizontal"?"left":"bottom"]=e+"%";this.handle.stop(1,1)[f?"animate":"css"](j,b.animate);if(a==="min"&&this.orientation==="horizontal")this.range.stop(1,1)[f?"animate":"css"]({width:e+"%"},
|
65 |
+
b.animate);if(a==="max"&&this.orientation==="horizontal")this.range[f?"animate":"css"]({width:100-e+"%"},{queue:false,duration:b.animate});if(a==="min"&&this.orientation==="vertical")this.range.stop(1,1)[f?"animate":"css"]({height:e+"%"},b.animate);if(a==="max"&&this.orientation==="vertical")this.range[f?"animate":"css"]({height:100-e+"%"},{queue:false,duration:b.animate})}}});d.extend(d.ui.slider,{version:"1.8.16"})})(jQuery);
|
66 |
;
|
js/jquery.ui.widget.js
CHANGED
@@ -1,268 +1,268 @@
|
|
1 |
-
/*!
|
2 |
-
* jQuery UI Widget 1.8.16
|
3 |
-
*
|
4 |
-
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
5 |
-
* Dual licensed under the MIT or GPL Version 2 licenses.
|
6 |
-
* http://jquery.org/license
|
7 |
-
*
|
8 |
-
* http://docs.jquery.com/UI/Widget
|
9 |
-
*/
|
10 |
-
(function( $, undefined ) {
|
11 |
-
|
12 |
-
// jQuery 1.4+
|
13 |
-
if ( $.cleanData ) {
|
14 |
-
var _cleanData = $.cleanData;
|
15 |
-
$.cleanData = function( elems ) {
|
16 |
-
for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
|
17 |
-
try {
|
18 |
-
$( elem ).triggerHandler( "remove" );
|
19 |
-
// http://bugs.jquery.com/ticket/8235
|
20 |
-
} catch( e ) {}
|
21 |
-
}
|
22 |
-
_cleanData( elems );
|
23 |
-
};
|
24 |
-
} else {
|
25 |
-
var _remove = $.fn.remove;
|
26 |
-
$.fn.remove = function( selector, keepData ) {
|
27 |
-
return this.each(function() {
|
28 |
-
if ( !keepData ) {
|
29 |
-
if ( !selector || $.filter( selector, [ this ] ).length ) {
|
30 |
-
$( "*", this ).add( [ this ] ).each(function() {
|
31 |
-
try {
|
32 |
-
$( this ).triggerHandler( "remove" );
|
33 |
-
// http://bugs.jquery.com/ticket/8235
|
34 |
-
} catch( e ) {}
|
35 |
-
});
|
36 |
-
}
|
37 |
-
}
|
38 |
-
return _remove.call( $(this), selector, keepData );
|
39 |
-
});
|
40 |
-
};
|
41 |
-
}
|
42 |
-
|
43 |
-
$.widget = function( name, base, prototype ) {
|
44 |
-
var namespace = name.split( "." )[ 0 ],
|
45 |
-
fullName;
|
46 |
-
name = name.split( "." )[ 1 ];
|
47 |
-
fullName = namespace + "-" + name;
|
48 |
-
|
49 |
-
if ( !prototype ) {
|
50 |
-
prototype = base;
|
51 |
-
base = $.Widget;
|
52 |
-
}
|
53 |
-
|
54 |
-
// create selector for plugin
|
55 |
-
$.expr[ ":" ][ fullName ] = function( elem ) {
|
56 |
-
return !!$.data( elem, name );
|
57 |
-
};
|
58 |
-
|
59 |
-
$[ namespace ] = $[ namespace ] || {};
|
60 |
-
$[ namespace ][ name ] = function( options, element ) {
|
61 |
-
// allow instantiation without initializing for simple inheritance
|
62 |
-
if ( arguments.length ) {
|
63 |
-
this._createWidget( options, element );
|
64 |
-
}
|
65 |
-
};
|
66 |
-
|
67 |
-
var basePrototype = new base();
|
68 |
-
// we need to make the options hash a property directly on the new instance
|
69 |
-
// otherwise we'll modify the options hash on the prototype that we're
|
70 |
-
// inheriting from
|
71 |
-
// $.each( basePrototype, function( key, val ) {
|
72 |
-
// if ( $.isPlainObject(val) ) {
|
73 |
-
// basePrototype[ key ] = $.extend( {}, val );
|
74 |
-
// }
|
75 |
-
// });
|
76 |
-
basePrototype.options = $.extend( true, {}, basePrototype.options );
|
77 |
-
$[ namespace ][ name ].prototype = $.extend( true, basePrototype, {
|
78 |
-
namespace: namespace,
|
79 |
-
widgetName: name,
|
80 |
-
widgetEventPrefix: $[ namespace ][ name ].prototype.widgetEventPrefix || name,
|
81 |
-
widgetBaseClass: fullName
|
82 |
-
}, prototype );
|
83 |
-
|
84 |
-
$.widget.bridge( name, $[ namespace ][ name ] );
|
85 |
-
};
|
86 |
-
|
87 |
-
$.widget.bridge = function( name, object ) {
|
88 |
-
$.fn[ name ] = function( options ) {
|
89 |
-
var isMethodCall = typeof options === "string",
|
90 |
-
args = Array.prototype.slice.call( arguments, 1 ),
|
91 |
-
returnValue = this;
|
92 |
-
|
93 |
-
// allow multiple hashes to be passed on init
|
94 |
-
options = !isMethodCall && args.length ?
|
95 |
-
$.extend.apply( null, [ true, options ].concat(args) ) :
|
96 |
-
options;
|
97 |
-
|
98 |
-
// prevent calls to internal methods
|
99 |
-
if ( isMethodCall && options.charAt( 0 ) === "_" ) {
|
100 |
-
return returnValue;
|
101 |
-
}
|
102 |
-
|
103 |
-
if ( isMethodCall ) {
|
104 |
-
this.each(function() {
|
105 |
-
var instance = $.data( this, name ),
|
106 |
-
methodValue = instance && $.isFunction( instance[options] ) ?
|
107 |
-
instance[ options ].apply( instance, args ) :
|
108 |
-
instance;
|
109 |
-
// TODO: add this back in 1.9 and use $.error() (see #5972)
|
110 |
-
// if ( !instance ) {
|
111 |
-
// throw "cannot call methods on " + name + " prior to initialization; " +
|
112 |
-
// "attempted to call method '" + options + "'";
|
113 |
-
// }
|
114 |
-
// if ( !$.isFunction( instance[options] ) ) {
|
115 |
-
// throw "no such method '" + options + "' for " + name + " widget instance";
|
116 |
-
// }
|
117 |
-
// var methodValue = instance[ options ].apply( instance, args );
|
118 |
-
if ( methodValue !== instance && methodValue !== undefined ) {
|
119 |
-
returnValue = methodValue;
|
120 |
-
return false;
|
121 |
-
}
|
122 |
-
});
|
123 |
-
} else {
|
124 |
-
this.each(function() {
|
125 |
-
var instance = $.data( this, name );
|
126 |
-
if ( instance ) {
|
127 |
-
instance.option( options || {} )._init();
|
128 |
-
} else {
|
129 |
-
$.data( this, name, new object( options, this ) );
|
130 |
-
}
|
131 |
-
});
|
132 |
-
}
|
133 |
-
|
134 |
-
return returnValue;
|
135 |
-
};
|
136 |
-
};
|
137 |
-
|
138 |
-
$.Widget = function( options, element ) {
|
139 |
-
// allow instantiation without initializing for simple inheritance
|
140 |
-
if ( arguments.length ) {
|
141 |
-
this._createWidget( options, element );
|
142 |
-
}
|
143 |
-
};
|
144 |
-
|
145 |
-
$.Widget.prototype = {
|
146 |
-
widgetName: "widget",
|
147 |
-
widgetEventPrefix: "",
|
148 |
-
options: {
|
149 |
-
disabled: false
|
150 |
-
},
|
151 |
-
_createWidget: function( options, element ) {
|
152 |
-
// $.widget.bridge stores the plugin instance, but we do it anyway
|
153 |
-
// so that it's stored even before the _create function runs
|
154 |
-
$.data( element, this.widgetName, this );
|
155 |
-
this.element = $( element );
|
156 |
-
this.options = $.extend( true, {},
|
157 |
-
this.options,
|
158 |
-
this._getCreateOptions(),
|
159 |
-
options );
|
160 |
-
|
161 |
-
var self = this;
|
162 |
-
this.element.bind( "remove." + this.widgetName, function() {
|
163 |
-
self.destroy();
|
164 |
-
});
|
165 |
-
|
166 |
-
this._create();
|
167 |
-
this._trigger( "create" );
|
168 |
-
this._init();
|
169 |
-
},
|
170 |
-
_getCreateOptions: function() {
|
171 |
-
return $.metadata && $.metadata.get( this.element[0] )[ this.widgetName ];
|
172 |
-
},
|
173 |
-
_create: function() {},
|
174 |
-
_init: function() {},
|
175 |
-
|
176 |
-
destroy: function() {
|
177 |
-
this.element
|
178 |
-
.unbind( "." + this.widgetName )
|
179 |
-
.removeData( this.widgetName );
|
180 |
-
this.widget()
|
181 |
-
.unbind( "." + this.widgetName )
|
182 |
-
.removeAttr( "aria-disabled" )
|
183 |
-
.removeClass(
|
184 |
-
this.widgetBaseClass + "-disabled " +
|
185 |
-
"ui-state-disabled" );
|
186 |
-
},
|
187 |
-
|
188 |
-
widget: function() {
|
189 |
-
return this.element;
|
190 |
-
},
|
191 |
-
|
192 |
-
option: function( key, value ) {
|
193 |
-
var options = key;
|
194 |
-
|
195 |
-
if ( arguments.length === 0 ) {
|
196 |
-
// don't return a reference to the internal hash
|
197 |
-
return $.extend( {}, this.options );
|
198 |
-
}
|
199 |
-
|
200 |
-
if (typeof key === "string" ) {
|
201 |
-
if ( value === undefined ) {
|
202 |
-
return this.options[ key ];
|
203 |
-
}
|
204 |
-
options = {};
|
205 |
-
options[ key ] = value;
|
206 |
-
}
|
207 |
-
|
208 |
-
this._setOptions( options );
|
209 |
-
|
210 |
-
return this;
|
211 |
-
},
|
212 |
-
_setOptions: function( options ) {
|
213 |
-
var self = this;
|
214 |
-
$.each( options, function( key, value ) {
|
215 |
-
self._setOption( key, value );
|
216 |
-
});
|
217 |
-
|
218 |
-
return this;
|
219 |
-
},
|
220 |
-
_setOption: function( key, value ) {
|
221 |
-
this.options[ key ] = value;
|
222 |
-
|
223 |
-
if ( key === "disabled" ) {
|
224 |
-
this.widget()
|
225 |
-
[ value ? "addClass" : "removeClass"](
|
226 |
-
this.widgetBaseClass + "-disabled" + " " +
|
227 |
-
"ui-state-disabled" )
|
228 |
-
.attr( "aria-disabled", value );
|
229 |
-
}
|
230 |
-
|
231 |
-
return this;
|
232 |
-
},
|
233 |
-
|
234 |
-
enable: function() {
|
235 |
-
return this._setOption( "disabled", false );
|
236 |
-
},
|
237 |
-
disable: function() {
|
238 |
-
return this._setOption( "disabled", true );
|
239 |
-
},
|
240 |
-
|
241 |
-
_trigger: function( type, event, data ) {
|
242 |
-
var callback = this.options[ type ];
|
243 |
-
|
244 |
-
event = $.Event( event );
|
245 |
-
event.type = ( type === this.widgetEventPrefix ?
|
246 |
-
type :
|
247 |
-
this.widgetEventPrefix + type ).toLowerCase();
|
248 |
-
data = data || {};
|
249 |
-
|
250 |
-
// copy original event properties over to the new event
|
251 |
-
// this would happen if we could call $.event.fix instead of $.Event
|
252 |
-
// but we don't have a way to force an event to be fixed multiple times
|
253 |
-
if ( event.originalEvent ) {
|
254 |
-
for ( var i = $.event.props.length, prop; i; ) {
|
255 |
-
prop = $.event.props[ --i ];
|
256 |
-
event[ prop ] = event.originalEvent[ prop ];
|
257 |
-
}
|
258 |
-
}
|
259 |
-
|
260 |
-
this.element.trigger( event, data );
|
261 |
-
|
262 |
-
return !( $.isFunction(callback) &&
|
263 |
-
callback.call( this.element[0], event, data ) === false ||
|
264 |
-
event.isDefaultPrevented() );
|
265 |
-
}
|
266 |
-
};
|
267 |
-
|
268 |
-
})( jQuery );
|
1 |
+
/*!
|
2 |
+
* jQuery UI Widget 1.8.16
|
3 |
+
*
|
4 |
+
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
5 |
+
* Dual licensed under the MIT or GPL Version 2 licenses.
|
6 |
+
* http://jquery.org/license
|
7 |
+
*
|
8 |
+
* http://docs.jquery.com/UI/Widget
|
9 |
+
*/
|
10 |
+
(function( $, undefined ) {
|
11 |
+
|
12 |
+
// jQuery 1.4+
|
13 |
+
if ( $.cleanData ) {
|
14 |
+
var _cleanData = $.cleanData;
|
15 |
+
$.cleanData = function( elems ) {
|
16 |
+
for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
|
17 |
+
try {
|
18 |
+
$( elem ).triggerHandler( "remove" );
|
19 |
+
// http://bugs.jquery.com/ticket/8235
|
20 |
+
} catch( e ) {}
|
21 |
+
}
|
22 |
+
_cleanData( elems );
|
23 |
+
};
|
24 |
+
} else {
|
25 |
+
var _remove = $.fn.remove;
|
26 |
+
$.fn.remove = function( selector, keepData ) {
|
27 |
+
return this.each(function() {
|
28 |
+
if ( !keepData ) {
|
29 |
+
if ( !selector || $.filter( selector, [ this ] ).length ) {
|
30 |
+
$( "*", this ).add( [ this ] ).each(function() {
|
31 |
+
try {
|
32 |
+
$( this ).triggerHandler( "remove" );
|
33 |
+
// http://bugs.jquery.com/ticket/8235
|
34 |
+
} catch( e ) {}
|
35 |
+
});
|
36 |
+
}
|
37 |
+
}
|
38 |
+
return _remove.call( $(this), selector, keepData );
|
39 |
+
});
|
40 |
+
};
|
41 |
+
}
|
42 |
+
|
43 |
+
$.widget = function( name, base, prototype ) {
|
44 |
+
var namespace = name.split( "." )[ 0 ],
|
45 |
+
fullName;
|
46 |
+
name = name.split( "." )[ 1 ];
|
47 |
+
fullName = namespace + "-" + name;
|
48 |
+
|
49 |
+
if ( !prototype ) {
|
50 |
+
prototype = base;
|
51 |
+
base = $.Widget;
|
52 |
+
}
|
53 |
+
|
54 |
+
// create selector for plugin
|
55 |
+
$.expr[ ":" ][ fullName ] = function( elem ) {
|
56 |
+
return !!$.data( elem, name );
|
57 |
+
};
|
58 |
+
|
59 |
+
$[ namespace ] = $[ namespace ] || {};
|
60 |
+
$[ namespace ][ name ] = function( options, element ) {
|
61 |
+
// allow instantiation without initializing for simple inheritance
|
62 |
+
if ( arguments.length ) {
|
63 |
+
this._createWidget( options, element );
|
64 |
+
}
|
65 |
+
};
|
66 |
+
|
67 |
+
var basePrototype = new base();
|
68 |
+
// we need to make the options hash a property directly on the new instance
|
69 |
+
// otherwise we'll modify the options hash on the prototype that we're
|
70 |
+
// inheriting from
|
71 |
+
// $.each( basePrototype, function( key, val ) {
|
72 |
+
// if ( $.isPlainObject(val) ) {
|
73 |
+
// basePrototype[ key ] = $.extend( {}, val );
|
74 |
+
// }
|
75 |
+
// });
|
76 |
+
basePrototype.options = $.extend( true, {}, basePrototype.options );
|
77 |
+
$[ namespace ][ name ].prototype = $.extend( true, basePrototype, {
|
78 |
+
namespace: namespace,
|
79 |
+
widgetName: name,
|
80 |
+
widgetEventPrefix: $[ namespace ][ name ].prototype.widgetEventPrefix || name,
|
81 |
+
widgetBaseClass: fullName
|
82 |
+
}, prototype );
|
83 |
+
|
84 |
+
$.widget.bridge( name, $[ namespace ][ name ] );
|
85 |
+
};
|
86 |
+
|
87 |
+
$.widget.bridge = function( name, object ) {
|
88 |
+
$.fn[ name ] = function( options ) {
|
89 |
+
var isMethodCall = typeof options === "string",
|
90 |
+
args = Array.prototype.slice.call( arguments, 1 ),
|
91 |
+
returnValue = this;
|
92 |
+
|
93 |
+
// allow multiple hashes to be passed on init
|
94 |
+
options = !isMethodCall && args.length ?
|
95 |
+
$.extend.apply( null, [ true, options ].concat(args) ) :
|
96 |
+
options;
|
97 |
+
|
98 |
+
// prevent calls to internal methods
|
99 |
+
if ( isMethodCall && options.charAt( 0 ) === "_" ) {
|
100 |
+
return returnValue;
|
101 |
+
}
|
102 |
+
|
103 |
+
if ( isMethodCall ) {
|
104 |
+
this.each(function() {
|
105 |
+
var instance = $.data( this, name ),
|
106 |
+
methodValue = instance && $.isFunction( instance[options] ) ?
|
107 |
+
instance[ options ].apply( instance, args ) :
|
108 |
+
instance;
|
109 |
+
// TODO: add this back in 1.9 and use $.error() (see #5972)
|
110 |
+
// if ( !instance ) {
|
111 |
+
// throw "cannot call methods on " + name + " prior to initialization; " +
|
112 |
+
// "attempted to call method '" + options + "'";
|
113 |
+
// }
|
114 |
+
// if ( !$.isFunction( instance[options] ) ) {
|
115 |
+
// throw "no such method '" + options + "' for " + name + " widget instance";
|
116 |
+
// }
|
117 |
+
// var methodValue = instance[ options ].apply( instance, args );
|
118 |
+
if ( methodValue !== instance && methodValue !== undefined ) {
|
119 |
+
returnValue = methodValue;
|
120 |
+
return false;
|
121 |
+
}
|
122 |
+
});
|
123 |
+
} else {
|
124 |
+
this.each(function() {
|
125 |
+
var instance = $.data( this, name );
|
126 |
+
if ( instance ) {
|
127 |
+
instance.option( options || {} )._init();
|
128 |
+
} else {
|
129 |
+
$.data( this, name, new object( options, this ) );
|
130 |
+
}
|
131 |
+
});
|
132 |
+
}
|
133 |
+
|
134 |
+
return returnValue;
|
135 |
+
};
|
136 |
+
};
|
137 |
+
|
138 |
+
$.Widget = function( options, element ) {
|
139 |
+
// allow instantiation without initializing for simple inheritance
|
140 |
+
if ( arguments.length ) {
|
141 |
+
this._createWidget( options, element );
|
142 |
+
}
|
143 |
+
};
|
144 |
+
|
145 |
+
$.Widget.prototype = {
|
146 |
+
widgetName: "widget",
|
147 |
+
widgetEventPrefix: "",
|
148 |
+
options: {
|
149 |
+
disabled: false
|
150 |
+
},
|
151 |
+
_createWidget: function( options, element ) {
|
152 |
+
// $.widget.bridge stores the plugin instance, but we do it anyway
|
153 |
+
// so that it's stored even before the _create function runs
|
154 |
+
$.data( element, this.widgetName, this );
|
155 |
+
this.element = $( element );
|
156 |
+
this.options = $.extend( true, {},
|
157 |
+
this.options,
|
158 |
+
this._getCreateOptions(),
|
159 |
+
options );
|
160 |
+
|
161 |
+
var self = this;
|
162 |
+
this.element.bind( "remove." + this.widgetName, function() {
|
163 |
+
self.destroy();
|
164 |
+
});
|
165 |
+
|
166 |
+
this._create();
|
167 |
+
this._trigger( "create" );
|
168 |
+
this._init();
|
169 |
+
},
|
170 |
+
_getCreateOptions: function() {
|
171 |
+
return $.metadata && $.metadata.get( this.element[0] )[ this.widgetName ];
|
172 |
+
},
|
173 |
+
_create: function() {},
|
174 |
+
_init: function() {},
|
175 |
+
|
176 |
+
destroy: function() {
|
177 |
+
this.element
|
178 |
+
.unbind( "." + this.widgetName )
|
179 |
+
.removeData( this.widgetName );
|
180 |
+
this.widget()
|
181 |
+
.unbind( "." + this.widgetName )
|
182 |
+
.removeAttr( "aria-disabled" )
|
183 |
+
.removeClass(
|
184 |
+
this.widgetBaseClass + "-disabled " +
|
185 |
+
"ui-state-disabled" );
|
186 |
+
},
|
187 |
+
|
188 |
+
widget: function() {
|
189 |
+
return this.element;
|
190 |
+
},
|
191 |
+
|
192 |
+
option: function( key, value ) {
|
193 |
+
var options = key;
|
194 |
+
|
195 |
+
if ( arguments.length === 0 ) {
|
196 |
+
// don't return a reference to the internal hash
|
197 |
+
return $.extend( {}, this.options );
|
198 |
+
}
|
199 |
+
|
200 |
+
if (typeof key === "string" ) {
|
201 |
+
if ( value === undefined ) {
|
202 |
+
return this.options[ key ];
|
203 |
+
}
|
204 |
+
options = {};
|
205 |
+
options[ key ] = value;
|
206 |
+
}
|
207 |
+
|
208 |
+
this._setOptions( options );
|
209 |
+
|
210 |
+
return this;
|
211 |
+
},
|
212 |
+
_setOptions: function( options ) {
|
213 |
+
var self = this;
|
214 |
+
$.each( options, function( key, value ) {
|
215 |
+
self._setOption( key, value );
|
216 |
+
});
|
217 |
+
|
218 |
+
return this;
|
219 |
+
},
|
220 |
+
_setOption: function( key, value ) {
|
221 |
+
this.options[ key ] = value;
|
222 |
+
|
223 |
+
if ( key === "disabled" ) {
|
224 |
+
this.widget()
|
225 |
+
[ value ? "addClass" : "removeClass"](
|
226 |
+
this.widgetBaseClass + "-disabled" + " " +
|
227 |
+
"ui-state-disabled" )
|
228 |
+
.attr( "aria-disabled", value );
|
229 |
+
}
|
230 |
+
|
231 |
+
return this;
|
232 |
+
},
|
233 |
+
|
234 |
+
enable: function() {
|
235 |
+
return this._setOption( "disabled", false );
|
236 |
+
},
|
237 |
+
disable: function() {
|
238 |
+
return this._setOption( "disabled", true );
|
239 |
+
},
|
240 |
+
|
241 |
+
_trigger: function( type, event, data ) {
|
242 |
+
var callback = this.options[ type ];
|
243 |
+
|
244 |
+
event = $.Event( event );
|
245 |
+
event.type = ( type === this.widgetEventPrefix ?
|
246 |
+
type :
|
247 |
+
this.widgetEventPrefix + type ).toLowerCase();
|
248 |
+
data = data || {};
|
249 |
+
|
250 |
+
// copy original event properties over to the new event
|
251 |
+
// this would happen if we could call $.event.fix instead of $.Event
|
252 |
+
// but we don't have a way to force an event to be fixed multiple times
|
253 |
+
if ( event.originalEvent ) {
|
254 |
+
for ( var i = $.event.props.length, prop; i; ) {
|
255 |
+
prop = $.event.props[ --i ];
|
256 |
+
event[ prop ] = event.originalEvent[ prop ];
|
257 |
+
}
|
258 |
+
}
|
259 |
+
|
260 |
+
this.element.trigger( event, data );
|
261 |
+
|
262 |
+
return !( $.isFunction(callback) &&
|
263 |
+
callback.call( this.element[0], event, data ) === false ||
|
264 |
+
event.isDefaultPrevented() );
|
265 |
+
}
|
266 |
+
};
|
267 |
+
|
268 |
+
})( jQuery );
|
js/post-message-part-background-color.js
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
wp.customize( '@setting@', function( value ) {
|
2 |
+
value.bind( function( newval ) {
|
3 |
+
$('@selector@').css('background-color', newval );
|
4 |
+
} );
|
5 |
+
} );
|
js/post-message-part-border-color.js
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
wp.customize( '@setting@', function( value ) {
|
2 |
+
value.bind( function( newval ) {
|
3 |
+
$('@selector@').css('@property@', newval );
|
4 |
+
} );
|
5 |
+
} );
|
js/post-message-part-color.js
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
wp.customize( '@setting@', function( value ) {
|
2 |
+
value.bind( function( newval ) {
|
3 |
+
$('@selector@').css('color', newval );
|
4 |
+
} );
|
5 |
+
} );
|
js/post-message-part-text.js
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
wp.customize( '@setting_font_size@', function( value ) {
|
2 |
+
value.bind( function( newval ) {
|
3 |
+
$('@selector@').css('font-size', newval + 'px' );
|
4 |
+
} );
|
5 |
+
} );
|
js/styles-customize-controls.js
ADDED
@@ -0,0 +1,44 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
jQuery( document ).ready( function ( $ ) {
|
2 |
+
|
3 |
+
add_control_label_spans();
|
4 |
+
/**
|
5 |
+
* Wrap content after long-dash in span
|
6 |
+
*/
|
7 |
+
function add_control_label_spans() {
|
8 |
+
// Long dash, not hyphen
|
9 |
+
var delimeter = '::';
|
10 |
+
|
11 |
+
$( 'span.customize-control-title:contains(' + delimeter + ')' ).each( function(){
|
12 |
+
var html, parts;
|
13 |
+
|
14 |
+
html = $(this).html();
|
15 |
+
parts = html.split( delimeter );
|
16 |
+
|
17 |
+
if ( 2 == parts.length ) {
|
18 |
+
html = parts[0] + '<span class="styles-type">' + parts[1] + '</span>';
|
19 |
+
$(this).html( html );
|
20 |
+
}
|
21 |
+
|
22 |
+
});
|
23 |
+
}
|
24 |
+
|
25 |
+
populate_google_fonts();
|
26 |
+
/**
|
27 |
+
* Copy array of google fonts into font select element
|
28 |
+
* Doing it this cuts about 200kb off of page load size
|
29 |
+
*/
|
30 |
+
function populate_google_fonts() {
|
31 |
+
var google_families = { 'Abel': 'Abel', 'Aclonica': 'Aclonica', 'Actor': 'Actor', 'Allan': 'Allan:bold', 'Allerta': 'Allerta', 'Allerta Stencil': 'Allerta+Stencil', 'Amaranth': 'Amaranth:700,400,italic700,italic400', 'Andika': 'Andika', 'Angkor': 'Angkor', 'Annie Use Your Telescope': 'Annie+Use+Your+Telescope', 'Anonymous Pro': 'Anonymous+Pro:bold,italicbold,normal,italic', 'Anton': 'Anton', 'Architects Daughter': 'Architects+Daughter', 'Arimo': 'Arimo:italicbold,bold,normal,italic', 'Artifika': 'Artifika', 'Arvo': 'Arvo:italic,bold,italicbold,normal', 'Asset': 'Asset', 'Astloch': 'Astloch:normal,bold', 'Aubrey': 'Aubrey', 'Bangers': 'Bangers', 'Battambang': 'Battambang:bold,normal', 'Bayon': 'Bayon', 'Bentham': 'Bentham', 'Bevan': 'Bevan', 'Bigshot One': 'Bigshot+One', 'Black Ops One': 'Black+Ops+One', 'Bokor': 'Bokor', 'Bowlby One': 'Bowlby+One', 'Bowlby One SC': 'Bowlby+One+SC', 'Brawler': 'Brawler', 'Buda': 'Buda:300', 'Cabin': 'Cabin:italic600,500,italicbold,italic500,italic400,400,600,bold', 'Cabin Sketch': 'Cabin+Sketch:bold', 'Calligraffitti': 'Calligraffitti', 'Candal': 'Candal', 'Cantarell': 'Cantarell:italic,bold,italicbold,normal', 'Cardo': 'Cardo', 'Carme': 'Carme', 'Carter One': 'Carter+One', 'Caudex': 'Caudex:italic,italic700,400,700', 'Cedarville Cursive': 'Cedarville+Cursive', 'Chenla': 'Chenla', 'Cherry Cream Soda': 'Cherry+Cream+Soda', 'Chewy': 'Chewy', 'Coda': 'Coda:800', 'Coda Caption': 'Coda+Caption:800', 'Coming Soon': 'Coming+Soon', 'Content': 'Content:bold,normal', 'Copse': 'Copse', 'Corben': 'Corben:700', 'Comfortaa': 'Comfortaa', 'Cousine': 'Cousine:italic,normal,italicbold,bold', 'Covered By Your Grace': 'Covered+By+Your+Grace', 'Crafty Girls': 'Crafty+Girls', 'Crimson Text': 'Crimson+Text:700,italic400,400,italic600,italic700,600', 'Crushed': 'Crushed', 'Cuprum': 'Cuprum', 'Damion': 'Damion', 'Dancing Script': 'Dancing+Script:bold,normal', 'Dangrek': 'Dangrek', 'Dawning of a New Day': 'Dawning+of+a+New+Day', 'Delius': 'Delius:400', 'Delius Swash Caps': 'Delius+Swash+Caps:400', 'Delius Unicase': 'Delius+Unicase:400', 'Didact Gothic': 'Didact+Gothic', 'Droid Arabic Kufi': 'Droid+Arabic+Kufi:bold,normal', 'Droid Arabic Naskh': 'Droid+Arabic+Naskh:normal,bold', 'Droid Sans': 'Droid+Sans:bold,normal', 'Droid Sans Mono': 'Droid+Sans+Mono', 'Droid Sans Thai': 'Droid+Sans+Thai:bold,normal', 'Droid Serif': 'Droid+Serif:bold,normal,italicbold,italic', 'Droid Serif Thai': 'Droid+Serif+Thai:bold,normal', 'EB Garamond': 'EB+Garamond', 'Expletus Sans': 'Expletus+Sans:500,italic600,600,italic400,italic700,700,400,italic500', 'Federo': 'Federo', 'Fontdiner Swanky': 'Fontdiner+Swanky', 'Forum': 'Forum', 'Francois One': 'Francois+One', 'Freehand': 'Freehand', 'GFS Didot': 'GFS+Didot', 'GFS Neohellenic': 'GFS+Neohellenic:italic,italicbold,normal,bold', 'Gentium Basic': 'Gentium+Basic:italicbold,bold,normal,italic', 'Geo': 'Geo:normal,oblique', 'Geostar': 'Geostar', 'Geostar Fill': 'Geostar+Fill', 'Give You Glory': 'Give+You+Glory', 'Gloria Hallelujah': 'Gloria+Hallelujah', 'Goblin One': 'Goblin+One', 'Goudy Bookletter 1911': 'Goudy+Bookletter+1911', 'Gravitas One': 'Gravitas+One', 'Gruppo': 'Gruppo', 'Hammersmith One': 'Hammersmith+One', 'Hanuman': 'Hanuman:normal,bold', 'Holtwood One SC': 'Holtwood+One+SC', 'Homemade Apple': 'Homemade+Apple', 'IM Fell DW Pica': 'IM+Fell+DW+Pica:italic,normal', 'IM Fell DW Pica SC': 'IM+Fell+DW+Pica+SC', 'IM Fell Double Pica': 'IM+Fell+Double+Pica:normal,italic', 'IM Fell Double Pica SC': 'IM+Fell+Double+Pica+SC', 'IM Fell English': 'IM+Fell+English:italic,normal', 'IM Fell English SC': 'IM+Fell+English+SC', 'IM Fell French Canon': 'IM+Fell+French+Canon:italic,normal', 'IM Fell French Canon SC': 'IM+Fell+French+Canon+SC', 'IM Fell Great Primer': 'IM+Fell+Great+Primer:italic,normal', 'IM Fell Great Primer SC': 'IM+Fell+Great+Primer+SC', 'Inconsolata': 'Inconsolata', 'Indie Flower': 'Indie+Flower', 'Irish Grover': 'Irish+Grover', 'Irish Growler': 'Irish+Growler', 'Istok Web': 'Istok+Web:italic700,400,700,italic400', 'Josefin Sans': 'Josefin+Sans:italic600,italic100,600,italic400,700,italic700,100,italic300,400,300', 'Josefin Sans Std Light': 'Josefin+Sans+Std+Light', 'Josefin Slab': 'Josefin+Slab:100,italic600,700,italic400,600,italic100,italic300,300,400,italic700', 'Judson': 'Judson:700,italic400,400', 'Jura': 'Jura:400,500,600,300', 'Just Another Hand': 'Just+Another+Hand', 'Just Me Again Down Here': 'Just+Me+Again+Down+Here', 'Kameron': 'Kameron:400,700', 'Kelly Slab': 'Kelly+Slab', 'Kenia': 'Kenia', 'Khmer': 'Khmer', 'Koulen': 'Koulen', 'Kranky': 'Kranky', 'Kreon': 'Kreon:700,400,300', 'Kristi': 'Kristi', 'La Belle Aurore': 'La+Belle+Aurore', 'Lato': 'Lato:italic300,300,900,700,italic100,100,italic700,400,italic900,italic400', 'League Script': 'League+Script:400', 'Leckerli One': 'Leckerli+One', 'Lekton': 'Lekton:italic,400,700', 'Limelight': 'Limelight', 'Lobster': 'Lobster', 'Lobster Two': 'Lobster+Two:italic400,700,400,italic700', 'Lora': 'Lora:italic,normal,bold,italicbold', 'Love Ya Like A Sister': 'Love+Ya+Like+A+Sister', 'Loved by the King': 'Loved+by+the+King', 'Luckiest Guy': 'Luckiest+Guy', 'Maiden Orange': 'Maiden+Orange', 'Mako': 'Mako', 'Marvel': 'Marvel:400,700,italic700,italic400', 'Maven Pro': 'Maven+Pro:700,900,500,400', 'Meddon': 'Meddon', 'MedievalSharp': 'MedievalSharp', 'Megrim': 'Megrim', 'Merriweather': 'Merriweather:700,900,400,300', 'Metal': 'Metal', 'Metrophobic': 'Metrophobic', 'Miama': 'Miama', 'Michroma': 'Michroma', 'Miltonian': 'Miltonian', 'Miltonian Tattoo': 'Miltonian+Tattoo', 'Modern Antiqua': 'Modern+Antiqua', 'Molengo': 'Molengo', 'Monofett': 'Monofett', 'Moul': 'Moul', 'Moulpali': 'Moulpali', 'Mountains of Christmas': 'Mountains+of+Christmas', 'Muli': 'Muli:italic400,400,italic300,300', 'Nanum Brush Script': 'Nanum+Brush+Script', 'Nanum Gothic': 'Nanum+Gothic:800,700,normal', 'Nanum Gothic Coding': 'Nanum+Gothic+Coding:normal,700', 'Nanum Myeongjo': 'Nanum+Myeongjo:700,normal,800', 'Nanum Pen Script': 'Nanum+Pen+Script', 'Neucha': 'Neucha', 'Neuton': 'Neuton:italic,normal', 'Neuton Cursive': 'Neuton+Cursive', 'News Cycle': 'News+Cycle', 'Nixie One': 'Nixie+One', 'Nobile': 'Nobile:700,italic500,400,italic700,500,italic400', 'Nothing You Could Do': 'Nothing+You+Could+Do', 'Nova Cut': 'Nova+Cut', 'Nova Flat': 'Nova+Flat', 'Nova Mono': 'Nova+Mono', 'Nova Oval': 'Nova+Oval', 'Nova Round': 'Nova+Round', 'Nova Script': 'Nova+Script', 'Nova Slim': 'Nova+Slim', 'Nova Square': 'Nova+Square', 'Nunito': 'Nunito:700,300,400', 'OFL Sorts Mill Goudy TT': 'OFL+Sorts+Mill+Goudy+TT:italic,normal', 'OFL Sorts Mill Goudy TT': 'OFL+Sorts+Mill+Goudy+TT:italic,normal', 'Odor Mean Chey': 'Odor+Mean+Chey', 'Old Standard TT': 'Old+Standard+TT:italic,bold,normal', 'Open Sans': 'Open+Sans:italic300,italic800,600,300,italic400,italic600,italic700,700,800,400', 'Open Sans Condensed': 'Open+Sans+Condensed:italic300,300', 'Orbitron': 'Orbitron:500,900,400,700', 'Oswald': 'Oswald', 'Over the Rainbow': 'Over+the+Rainbow', 'Ovo': 'Ovo', 'PT Sans': 'PT+Sans:italic,bold,normal,italicbold', 'PT Sans Caption': 'PT+Sans+Caption:normal,bold', 'PT Sans Narrow': 'PT+Sans+Narrow:normal,bold', 'PT Serif': 'PT+Serif:italic,normal,bold,italicbold', 'PT Serif Caption': 'PT+Serif+Caption:normal,italic', 'Pacifico': 'Pacifico', 'Patrick Hand': 'Patrick+Hand', 'Paytone One': 'Paytone+One', 'Pecita': 'Pecita', 'Permanent Marker': 'Permanent+Marker', 'Philosopher': 'Philosopher:bold,normal,italic,italicbold', 'Play': 'Play:bold,normal', 'Playfair Display': 'Playfair+Display', 'Podkova': 'Podkova', 'Pompiere': 'Pompiere', 'Preahvihear': 'Preahvihear', 'Puritan': 'Puritan:bold,italic,italicbold,normal', 'Quattrocento': 'Quattrocento', 'Quattrocento Sans': 'Quattrocento+Sans', 'Radley': 'Radley', 'Raleway': 'Raleway:100', 'Rationale': 'Rationale', 'Redressed': 'Redressed', 'Reenie Beanie': 'Reenie+Beanie', 'Rochester': 'Rochester', 'Rock Salt': 'Rock+Salt', 'Rokkitt': 'Rokkitt:700,400', 'Rosario': 'Rosario', 'Ruslan Display': 'Ruslan+Display', 'Schoolbell': 'Schoolbell', 'Shadows Into Light': 'Shadows+Into+Light', 'Shanti': 'Shanti', 'Siamreap': 'Siamreap', 'Siemreap': 'Siemreap', 'Sigmar One': 'Sigmar+One', 'Six Caps': 'Six+Caps', 'Slackey': 'Slackey', 'Smokum': 'Smokum', 'Smythe': 'Smythe', 'Sniglet': 'Sniglet:800', 'Snippet': 'Snippet', 'Special Elite': 'Special+Elite', 'Stardos Stencil': 'Stardos+Stencil:normal,bold', 'Sue Ellen Francisco': 'Sue+Ellen+Francisco', 'Sunshiney': 'Sunshiney', 'Suwannaphum': 'Suwannaphum', 'Swanky and Moo Moo': 'Swanky+and+Moo+Moo', 'Syncopate': 'Syncopate:normal,bold', 'Tangerine': 'Tangerine:normal,bold', 'Taprom': 'Taprom', 'Tenor Sans': 'Tenor+Sans', 'Terminal Dosis Light': 'Terminal+Dosis+Light', 'Thabit': 'Thabit:italic,italicbold,normal,bold', 'The Girl Next Door': 'The+Girl+Next+Door', 'Tienne': 'Tienne:400,900,700', 'Tinos': 'Tinos:italicbold,normal,italic,bold', 'Tulpen One': 'Tulpen+One', 'Ubuntu': 'Ubuntu:bold,300,normal,italicbold,italic,italic500,500,italic300', 'Ultra': 'Ultra', 'UnifrakturCook': 'UnifrakturCook:bold', 'UnifrakturMaguntia': 'UnifrakturMaguntia', 'Unkempt': 'Unkempt', 'Unna': 'Unna', 'VT323': 'VT323', 'Varela': 'Varela', 'Varela Round': 'Varela+Round', 'Vibur': 'Vibur', 'Vollkorn': 'Vollkorn:bold,italic,italicbold,normal', 'Waiting for the Sunrise': 'Waiting+for+the+Sunrise', 'Wallpoet': 'Wallpoet', 'Walter Turncoat': 'Walter+Turncoat', 'Wire One': 'Wire+One', 'Yanone Kaffeesatz': 'Yanone+Kaffeesatz:700,200,400,300', 'Yellowtail': 'Yellowtail', 'Yeseva One': 'Yeseva+One', 'Zeyada': 'Zeyada', /*'jsMath cmbx10': 'jsMath+cmbx10', 'jsMath cmex10': 'jsMath+cmex10', 'jsMath cmmi10': 'jsMath+cmmi10', 'jsMath cmr10': 'jsMath+cmr10', 'jsMath cmsy10': 'jsMath+cmsy10', 'jsMath cmti10': 'jsMath+cmti10',*/ };
|
32 |
+
var google_options;
|
33 |
+
|
34 |
+
$.each( google_families, function( name, value ){
|
35 |
+
google_options += "<option value='" + name + "'>" + name + "</option>";
|
36 |
+
});
|
37 |
+
|
38 |
+
$( 'select.styles-font-family' ).append( google_options ).each( function(){
|
39 |
+
var selected = $(this).data('selected');
|
40 |
+
$(this).find( 'option[value="' + selected + '"]' ).attr('selected', 'selected');
|
41 |
+
} );
|
42 |
+
}
|
43 |
+
|
44 |
+
} );
|
phpunit.php
ADDED
@@ -0,0 +1,40 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<html>
|
2 |
+
<head>
|
3 |
+
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
|
4 |
+
<style>
|
5 |
+
body { margin: 20px; }
|
6 |
+
</style>
|
7 |
+
</head>
|
8 |
+
<body>
|
9 |
+
|
10 |
+
<pre><?php
|
11 |
+
|
12 |
+
$remove = array(
|
13 |
+
'[37;41m[2K',
|
14 |
+
'[0m[2K',
|
15 |
+
'[0m',
|
16 |
+
'[31;1m',
|
17 |
+
'[30;42m[2K',
|
18 |
+
'[41;37m',
|
19 |
+
);
|
20 |
+
|
21 |
+
$phpunit = '/Applications/MAMP/bin/php/php5.3.14/bin/phpunit';
|
22 |
+
$config = dirname( __FILE__ ) . '/phpunit.xml';
|
23 |
+
|
24 |
+
exec( "$phpunit -c '$config'", $output );
|
25 |
+
|
26 |
+
$start = false;
|
27 |
+
foreach ( $output as $line ) {
|
28 |
+
if ( false !== strpos($line, 'phpunit.xml') ) {
|
29 |
+
$start = true;
|
30 |
+
$line = trim($line);
|
31 |
+
}
|
32 |
+
if ( true || $start ) {
|
33 |
+
echo str_replace( $remove, '', $line) . '<br/>';
|
34 |
+
}
|
35 |
+
}
|
36 |
+
?>
|
37 |
+
</pre>
|
38 |
+
|
39 |
+
</body>
|
40 |
+
</html>
|
phpunit.xml
ADDED
@@ -0,0 +1,19 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?xml version="1.0" encoding="UTF-8"?>
|
2 |
+
|
3 |
+
<phpunit backupGlobals="false"
|
4 |
+
backupStaticAttributes="false"
|
5 |
+
colors="true"
|
6 |
+
convertErrorsToExceptions="true"
|
7 |
+
convertNoticesToExceptions="true"
|
8 |
+
convertWarningsToExceptions="true"
|
9 |
+
processIsolation="false"
|
10 |
+
stopOnFailure="false"
|
11 |
+
syntaxCheck="false"
|
12 |
+
bootstrap="tests/bootstrap.php"
|
13 |
+
>
|
14 |
+
<testsuites>
|
15 |
+
<testsuite name="Styles Test Suite">
|
16 |
+
<directory suffix=".php">tests</directory>
|
17 |
+
</testsuite>
|
18 |
+
</testsuites>
|
19 |
+
</phpunit>
|
readme.txt
CHANGED
@@ -1,128 +1,135 @@
|
|
1 |
-
=== Styles ===
|
2 |
-
Contributors: brainstormmedia, pdclark
|
3 |
-
Plugin URI: http://stylesplugin.com
|
4 |
-
Author URI: http://brainstormmedia.com
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
== Description ==
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
*
|
27 |
-
*
|
28 |
-
*
|
29 |
-
*
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
|
35 |
-
|
36 |
-
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
43 |
-
|
44 |
-
|
45 |
-
1.
|
46 |
-
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
|
56 |
-
|
57 |
-
|
58 |
-
|
59 |
-
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
|
65 |
-
|
66 |
-
|
67 |
-
|
68 |
-
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
-
|
75 |
-
|
76 |
-
|
77 |
-
|
78 |
-
|
79 |
-
=
|
80 |
-
|
81 |
-
|
82 |
-
|
83 |
-
|
84 |
-
|
85 |
-
= 0
|
86 |
-
*
|
87 |
-
|
88 |
-
|
89 |
-
*
|
90 |
-
*
|
91 |
-
|
92 |
-
|
93 |
-
|
94 |
-
|
95 |
-
|
96 |
-
|
97 |
-
*
|
98 |
-
*
|
99 |
-
|
100 |
-
|
101 |
-
*
|
102 |
-
|
103 |
-
|
104 |
-
*
|
105 |
-
|
106 |
-
|
107 |
-
*
|
108 |
-
*
|
109 |
-
*
|
110 |
-
* Fix
|
111 |
-
* Fix
|
112 |
-
|
113 |
-
|
114 |
-
|
115 |
-
|
116 |
-
|
117 |
-
|
118 |
-
|
119 |
-
*
|
120 |
-
|
121 |
-
= 0.
|
122 |
-
*
|
123 |
-
|
124 |
-
|
125 |
-
|
126 |
-
|
127 |
-
|
128 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
=== Styles ===
|
2 |
+
Contributors: brainstormmedia, pdclark, elusivelight
|
3 |
+
Plugin URI: http://stylesplugin.com
|
4 |
+
Author URI: http://brainstormmedia.com
|
5 |
+
Tags: css, stylesheet, styles, appearance, customize, customizer, colors, color picker, images, image upload, background, fonts, google fonts, user interface, twentyten, twentyeleven, twentytwelve, twentythirteen
|
6 |
+
Requires at least: 3.4
|
7 |
+
Tested up to: 3.5.2
|
8 |
+
Stable tag: 1.0.4
|
9 |
+
|
10 |
+
Be creative with colors and fonts. Styles changes everything.
|
11 |
+
|
12 |
+
|
13 |
+
== Description ==
|
14 |
+
|
15 |
+
WordPress has lots of beautiful themes, but personalizing a design can be difficult and time-intensive. Styles changes that. Styles gives you creative control in one consistent interface – the WordPress theme customizer. Styles lets you make your site your own. :)
|
16 |
+
|
17 |
+
[Try a demo in TwentyTwelve](http://demo.stylesplugin.com/twentytwelve).
|
18 |
+
|
19 |
+
**Features of the plugin include:**
|
20 |
+
|
21 |
+
* Instant previews
|
22 |
+
* Text size
|
23 |
+
* Google Fonts
|
24 |
+
* Text colors
|
25 |
+
* Border colors
|
26 |
+
* Background colors
|
27 |
+
* Hundreds of options
|
28 |
+
* Consistent interface and names in every theme
|
29 |
+
* Built on WordPress customizer, so Styles grows as WordPress grows
|
30 |
+
|
31 |
+
Styles and options for all built-in WordPress themes are free. More themes are available at [StylesPlugin.com](http://stylesplugin.com).
|
32 |
+
|
33 |
+
**Free Themes include:**
|
34 |
+
|
35 |
+
* TwentyTen: [Plugin](http://wordpress.org/extend/plugins/styles-twentyten), [Demo](http://demo.stylesplugin.com/twentyten)
|
36 |
+
* TwentyEleven: [Plugin](http://wordpress.org/extend/plugins/styles-twentyeleven), [Demo](http://demo.stylesplugin.com/twentyeleven)
|
37 |
+
* TwentyTwelve: [Plugin](http://wordpress.org/extend/plugins/styles-twentytwelve), [Demo](http://demo.stylesplugin.com/twentytwelve)
|
38 |
+
* TwentyThirteen: [Plugin](http://wordpress.org/extend/plugins/styles-twentythirteen), [Demo](http://demo.stylesplugin.com/twentythirteen)
|
39 |
+
|
40 |
+
== Installation ==
|
41 |
+
|
42 |
+
1. Upload the `styles` folder to the `/wp-content/plugins/` directory
|
43 |
+
1. Activate the plugin through the 'Plugins' menu in WordPress
|
44 |
+
1. Install an additional plugin for your current theme.
|
45 |
+
1. Edit your site under `Appearance > Customize`
|
46 |
+
|
47 |
+
== Screenshots ==
|
48 |
+
|
49 |
+
1. TwentyEleven header settings.
|
50 |
+
2. All TwentyEleven sections.
|
51 |
+
3. TwentyEleven menu settings.
|
52 |
+
|
53 |
+
== Frequently Asked Questions ==
|
54 |
+
|
55 |
+
= Why is this plugin free? =
|
56 |
+
|
57 |
+
We believe life is better when we work together. :) Support for WordPress default themes, like TwentyTwelve and TwentyThirteen, will always be free. Continued development in Styles will be supported by:
|
58 |
+
|
59 |
+
* Plugins for additional themes
|
60 |
+
* Plugins for add-on features
|
61 |
+
* Premium support and updates
|
62 |
+
* Documentation for using Styles in your own themes
|
63 |
+
|
64 |
+
= Does Styles support my theme? =
|
65 |
+
|
66 |
+
Maybe! We have additional themes available available at [StylesPlugin.com](http://stylesplugin.com). If you don't find your theme there, we also have documentation on how to create options using styles available for developers. Adding one option takes only one line of code.
|
67 |
+
|
68 |
+
= Will this plugin slow down my site? =
|
69 |
+
|
70 |
+
No! Styles is very careful about only loading what is needed to get its job done. Once you're done editing, stylesheets are cached and loaded for your sites users as quickly as possible.
|
71 |
+
|
72 |
+
== Changelog ==
|
73 |
+
= 1.0.4 =
|
74 |
+
* Fix: Correctly set outer background color
|
75 |
+
|
76 |
+
= 1.0.3 =
|
77 |
+
* Fix: Google fonts loading correctly once saved.
|
78 |
+
|
79 |
+
= 1.0.2 =
|
80 |
+
* Fix: Remove front-end PHP notice. (Minor; Only matters if WP_DEBUG is enabled.)
|
81 |
+
|
82 |
+
= 1.0.1 =
|
83 |
+
* Fix: Remove Customizer PHP notice. (Minor; Only matters if WP_DEBUG is enabled.)
|
84 |
+
|
85 |
+
= 1.0 =
|
86 |
+
* New: Completely rewrite Styles to use the WordPress Customizer API. Whew! That was a lot of work, but will allow us to grow closely with WordPress going forward.
|
87 |
+
* New: Styles 1.0 does not import 0.5.2 settings. However, you can always [reinstall Styles 0.5.3](http://downloads.wordpress.org/plugin/styles.0.5.3.zip) to get your old settings back.
|
88 |
+
* New: TwentyTwelve support.
|
89 |
+
* New: TwentyThirteen support.
|
90 |
+
* New: Remove gradients and background images. Sorry! We had to simpify and prioritize in the rewrite. If many users find Styles useful, we hope to bring these features back!
|
91 |
+
* New: Instant preview for many options using Customizer postMessage
|
92 |
+
|
93 |
+
= 0.5.2 =
|
94 |
+
* Fix: Display of icons in cases where WordPress is installed in a subdirectory or wp-content is moved. Fixes http://bit.ly/Jc7oyd
|
95 |
+
|
96 |
+
= 0.5.1.1 =
|
97 |
+
* Fix: Transparent background option
|
98 |
+
* Fix: Display of unavailable theme options
|
99 |
+
|
100 |
+
= 0.5.1 =
|
101 |
+
* Fix: Issue that would prevent Font styles from outputting if another option wasn't set on the same element.
|
102 |
+
|
103 |
+
= 0.5.0 =
|
104 |
+
* New: Load themes from API: Allows for theme support to be added without plugin updates.
|
105 |
+
* New: Data structure: Allow settings to migrate from theme to theme
|
106 |
+
* New: Automatically rebuild CSS when theme is switched
|
107 |
+
* New: Wrap font settings into other options. This sets the stage to simplify the user interface in a future version.
|
108 |
+
* New: Add option to hide text and replace with image on any element
|
109 |
+
* New: Expand TwentyTen options
|
110 |
+
* New: Gradient Picker: Fix add marker, drag to remove marker
|
111 |
+
* Fix: Massive code clean-up: Removed 1,198 lines of code; modified 2,488
|
112 |
+
* Fix: Minor UI tweaks
|
113 |
+
|
114 |
+
= 0.4.1 =
|
115 |
+
* Fix: Saved CSS being one update behind
|
116 |
+
* Fix: Initial values of fields & background color picker
|
117 |
+
* Fix: Preview update stall
|
118 |
+
* Fix: Background value when no image selected
|
119 |
+
* Fix: Background replacement matching
|
120 |
+
|
121 |
+
= 0.4.0 =
|
122 |
+
* Initial public release.
|
123 |
+
|
124 |
+
== Upgrade Notice ==
|
125 |
+
|
126 |
+
**1.0.4**
|
127 |
+
* Fix: Correctly set outer background color.
|
128 |
+
|
129 |
+
**1.0.3**
|
130 |
+
* Fix: Google fonts loading correctly once saved.
|
131 |
+
|
132 |
+
**1.0**
|
133 |
+
Completely rewrote Styles to use the WordPress Customizer API. Whew! That was a lot of work, but will allow us to grow closely with WordPress going forward.
|
134 |
+
|
135 |
+
Styles 1.0 does not import 0.5.2 settings. However, you can always [reinstall Styles 0.5.3](http://downloads.wordpress.org/plugin/styles.0.5.3.zip) to get your old settings back.
|
screenshot-1.png
CHANGED
Binary file
|
screenshot-2.png
CHANGED
Binary file
|
screenshot-3.png
CHANGED
Binary file
|
styles.php
CHANGED
@@ -1,73 +1,49 @@
|
|
1 |
-
<?php
|
2 |
-
/*
|
3 |
-
Plugin Name: Styles
|
4 |
-
Plugin URI: http://stylesplugin.com
|
5 |
-
Description: Change the appearance of your theme using the WordPress admin. Creates WordPress theme options for images, colors, gradients, and fonts.
|
6 |
-
Version: 0.
|
7 |
-
Author: Brainstorm Media
|
8 |
-
Author URI: http://brainstormmedia.com
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
*
|
14 |
-
*
|
15 |
-
*
|
16 |
-
*
|
17 |
-
*
|
18 |
-
*
|
19 |
-
*
|
20 |
-
*
|
21 |
-
*
|
22 |
-
*
|
23 |
-
*
|
24 |
-
*
|
25 |
-
*
|
26 |
-
*
|
27 |
-
*
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
|
35 |
-
|
36 |
-
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
if (
|
43 |
-
|
44 |
-
|
45 |
-
|
46 |
-
|
47 |
-
|
48 |
-
}
|
49 |
-
|
50 |
-
/**
|
51 |
-
* Instantiate the $StormStyles object
|
52 |
-
*/
|
53 |
-
function storm_styles_init() {
|
54 |
-
|
55 |
-
require dirname ( __FILE__ ) . '/classes/stormFirePHP/stormFirePHP.php';
|
56 |
-
require dirname ( __FILE__ ) . '/classes/storm-styles.php';
|
57 |
-
require dirname ( __FILE__ ) . '/classes/storm-wp-frontend.php';
|
58 |
-
|
59 |
-
if ( is_admin() || DOING_AJAX ) {
|
60 |
-
// Only load heavy files if we're in wp-admin or processing CSS over AJAX
|
61 |
-
require dirname ( __FILE__ ) . '/classes/storm-css-processor.php';
|
62 |
-
require dirname ( __FILE__ ) . '/classes/storm-wp-settings.php';
|
63 |
-
require dirname ( __FILE__ ) . '/classes/storm-wp-admin.php';
|
64 |
-
}
|
65 |
-
|
66 |
-
$storm_styles = new Storm_Styles();
|
67 |
-
|
68 |
-
}
|
69 |
-
add_action('init', 'storm_styles_init');
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
|
1 |
+
<?php
|
2 |
+
/*
|
3 |
+
Plugin Name: Styles
|
4 |
+
Plugin URI: http://stylesplugin.com
|
5 |
+
Description: Change the appearance of your theme using the WordPress admin. Creates WordPress theme options for images, colors, gradients, and fonts.
|
6 |
+
Version: 1.0.4
|
7 |
+
Author: Brainstorm Media
|
8 |
+
Author URI: http://brainstormmedia.com
|
9 |
+
Git URI: https://updates%40brainstormmedia.com:updates@bitbucket.org/brainstormmedia/styles.git
|
10 |
+
*/
|
11 |
+
|
12 |
+
/**
|
13 |
+
* Copyright 2013 Brainstorm Media
|
14 |
+
*
|
15 |
+
* This program is free software; you can redistribute it and/or modify
|
16 |
+
* it under the terms of the GNU General Public License as published by
|
17 |
+
* the Free Software Foundation; either version 2 of the License, or
|
18 |
+
* (at your option) any later version.
|
19 |
+
*
|
20 |
+
* This program is distributed in the hope that it will be useful,
|
21 |
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
22 |
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
23 |
+
* GNU General Public License for more details.
|
24 |
+
*
|
25 |
+
* You should have received a copy of the GNU General Public License
|
26 |
+
* along with this program; if not, write to the Free Software
|
27 |
+
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
|
28 |
+
*/
|
29 |
+
|
30 |
+
function styles_plugin_init() {
|
31 |
+
global $storm_styles;
|
32 |
+
|
33 |
+
if ( is_admin() ) {
|
34 |
+
global $wp_version;
|
35 |
+
$styles_exit_msg = esc_html__( 'Styles requires WordPress 3.4 or newer. <a href="http://codex.wordpress.org/Upgrading_WordPress">Please update.</a>', 'styles' );
|
36 |
+
if ( version_compare( $wp_version, "3.4", "<" ) ) {
|
37 |
+
exit( $styles_exit_msg );
|
38 |
+
}
|
39 |
+
}
|
40 |
+
|
41 |
+
if ( !defined( 'STYLES_BASENAME' ) ) define( 'STYLES_BASENAME', plugin_basename( __FILE__ ) );
|
42 |
+
if ( !defined( 'STYLES_DIR' ) ) define( 'STYLES_DIR', dirname( __FILE__ ) );
|
43 |
+
|
44 |
+
require dirname ( __FILE__ ) . '/classes/styles-plugin.php';
|
45 |
+
|
46 |
+
$storm_styles = new Styles_Plugin();
|
47 |
+
|
48 |
+
}
|
49 |
+
add_action( 'plugins_loaded', 'styles_plugin_init' );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
tests/bootstrap.php
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
// Load WordPress test environment
|
3 |
+
// https://github.com/nb/wordpress-tests
|
4 |
+
//
|
5 |
+
// The path to wordpress-tests
|
6 |
+
|
7 |
+
$wordpress_tests = dirname( dirname( dirname( dirname( dirname( dirname( __FILE__ ) ) ) ) ) ) . '/wordpress-tests/bootstrap.php';
|
8 |
+
|
9 |
+
if( file_exists( $wordpress_tests ) ) {
|
10 |
+
require_once $wordpress_tests;
|
11 |
+
} else {
|
12 |
+
exit( "Couldn't find path to wordpress-tests/bootstrap.php\n" );
|
13 |
+
}
|
tests/styles/init.php
ADDED
@@ -0,0 +1,30 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
/**
|
4 |
+
* Test basic setup, like whether plugin is activated in test environment ;)
|
5 |
+
*/
|
6 |
+
class Tests_Styles_Init extends WP_UnitTestCase {
|
7 |
+
/* Styles Object */
|
8 |
+
var $styles;
|
9 |
+
|
10 |
+
public function setUp() {
|
11 |
+
parent::setUp();
|
12 |
+
global $storm_styles;
|
13 |
+
$this->styles = $storm_styles;
|
14 |
+
}
|
15 |
+
|
16 |
+
public function test_is_plugin_active() {
|
17 |
+
include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
|
18 |
+
$this->assertTrue( is_plugin_active( STYLES_BASENAME ) );
|
19 |
+
}
|
20 |
+
|
21 |
+
public function test_is_plugin_initialized() {
|
22 |
+
$this->assertFalse( null == $this->styles );
|
23 |
+
}
|
24 |
+
|
25 |
+
public function test_styles_version_matches_plugin_header() {
|
26 |
+
$data = get_plugin_data( WP_PLUGIN_DIR .'/'. STYLES_BASENAME, false, false);
|
27 |
+
$this->assertEquals( $data['Version'], $this->styles->version );
|
28 |
+
}
|
29 |
+
|
30 |
+
}
|
tests/styles/tests-styles-customize.php
ADDED
@@ -0,0 +1,26 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class Tests_Styles_Customize extends WP_UnitTestCase {
|
4 |
+
|
5 |
+
public function setUp() {
|
6 |
+
parent::setUp();
|
7 |
+
if ( !class_exists( 'Styles_Customize' ) ) {
|
8 |
+
require_once WP_PLUGIN_DIR . '/' . dirname( STYLES_BASENAME ) . '/classes/styles-customize.php';
|
9 |
+
}
|
10 |
+
}
|
11 |
+
|
12 |
+
public function test_get_settings_not_empty() {
|
13 |
+
$settings = Styles_Customize::get_settings();
|
14 |
+
$this->assertFalse( empty( $settings ) );
|
15 |
+
}
|
16 |
+
|
17 |
+
/*
|
18 |
+
public function test_load_settings_from_theme_file() {
|
19 |
+
// Move customize.json if it exists
|
20 |
+
// Write a known customize.json
|
21 |
+
// Test that it reads
|
22 |
+
// Move original back
|
23 |
+
}
|
24 |
+
*/
|
25 |
+
|
26 |
+
}
|
tests/styles/tests-styles-plugin.php
ADDED
@@ -0,0 +1,16 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class Tests_Styles_Plugin extends WP_UnitTestCase {
|
4 |
+
|
5 |
+
/**
|
6 |
+
* Require that storm-styles appears in head
|
7 |
+
*/
|
8 |
+
public function test_wp_head_outputs_css() {
|
9 |
+
ob_start();
|
10 |
+
@do_action( 'wp_head' );
|
11 |
+
$wp_head = ob_get_clean();
|
12 |
+
|
13 |
+
$this->assertFalse( false === strpos( $wp_head, 'storm-styles') );
|
14 |
+
}
|
15 |
+
|
16 |
+
}
|
uninstall.php
CHANGED
@@ -1,21 +1,35 @@
|
|
1 |
-
<?php
|
2 |
-
/**
|
3 |
-
* Uninstalls the Styles options when an uninstall has been requested
|
4 |
-
* from the WordPress admin
|
5 |
-
*/
|
6 |
-
|
7 |
-
// If uninstall/delete not called from WordPress then exit
|
8 |
-
if( ! defined ( 'ABSPATH' ) && ! defined ( 'WP_UNINSTALL_PLUGIN' ) )
|
9 |
-
exit
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
$
|
20 |
-
if
|
21 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Uninstalls the Styles options when an uninstall has been requested
|
4 |
+
* from the WordPress admin
|
5 |
+
*/
|
6 |
+
|
7 |
+
// If uninstall/delete not called from WordPress then exit
|
8 |
+
if( ! defined ( 'ABSPATH' ) && ! defined ( 'WP_UNINSTALL_PLUGIN' ) )
|
9 |
+
exit;
|
10 |
+
|
11 |
+
|
12 |
+
global $wpdb;
|
13 |
+
|
14 |
+
$sql = "DELETE from $wpdb->options WHERE option_name LIKE 'storm-styles-%'";
|
15 |
+
|
16 |
+
if( is_multisite() ){
|
17 |
+
|
18 |
+
// Site network: remove options from each blog
|
19 |
+
$blog_ids = $wpdb->get_col( "SELECT blog_id FROM $wpdb->blogs" );
|
20 |
+
if( $blog_ids ){
|
21 |
+
|
22 |
+
foreach( $blog_ids as $id ) {
|
23 |
+
switch_to_blog( $id );
|
24 |
+
|
25 |
+
$wpdb->query( $sql );
|
26 |
+
|
27 |
+
restore_current_blog();
|
28 |
+
}
|
29 |
+
|
30 |
+
}
|
31 |
+
|
32 |
+
}else {
|
33 |
+
// Single site
|
34 |
+
$wpdb->query( $sql );
|
35 |
+
}
|
views/licenses.php
ADDED
@@ -0,0 +1,62 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<div class="wrap">
|
2 |
+
|
3 |
+
<h2><?php _e('Styles Licenses'); ?></h2>
|
4 |
+
|
5 |
+
<?php foreach ( apply_filters( 'styles_license_form_plugins', array() ) as $plugin ) : ?>
|
6 |
+
|
7 |
+
<?php
|
8 |
+
$name = $license_option_key = null;
|
9 |
+
extract( $plugin, EXTR_IF_EXISTS );
|
10 |
+
|
11 |
+
$license = get_option( $license_option_key );
|
12 |
+
$status = get_option( $license_option_key . '_status' );
|
13 |
+
?>
|
14 |
+
|
15 |
+
<h3><?php echo $name ?></h3>
|
16 |
+
<form method="post" action="options.php">
|
17 |
+
|
18 |
+
<?php settings_fields('styles_licenses'); ?>
|
19 |
+
|
20 |
+
<table class="form-table">
|
21 |
+
<tbody>
|
22 |
+
<tr valign="top">
|
23 |
+
<th scope="row" valign="top">
|
24 |
+
<?php _e('License Key'); ?>
|
25 |
+
</th>
|
26 |
+
<td>
|
27 |
+
<input id="<?php esc_attr_e( $license_option_key ); ?>" name="<?php esc_attr_e( $license_option_key ); ?>" type="text" class="regular-text" value="<?php esc_attr_e( $license ); ?>" />
|
28 |
+
<label class="description" for="<?php esc_attr_e( $license_option_key ); ?>"><?php _e('Enter your license key'); ?></label>
|
29 |
+
</td>
|
30 |
+
</tr>
|
31 |
+
<?php if( false !== $license ) : ?>
|
32 |
+
|
33 |
+
<tr valign="top">
|
34 |
+
<th scope="row" valign="top">
|
35 |
+
<?php _e('Activate License'); ?>
|
36 |
+
</th>
|
37 |
+
<td>
|
38 |
+
<?php if( $status !== false && $status == 'valid' ) : ?>
|
39 |
+
|
40 |
+
<?php wp_nonce_field( 'edd_sample_nonce', 'edd_sample_nonce' ); ?>
|
41 |
+
|
42 |
+
<span style="color:green;"><?php _e('active'); ?></span>
|
43 |
+
<input type="submit" class="button-secondary" name="edd_license_deactivate" value="<?php _e('Deactivate License'); ?>"/>
|
44 |
+
|
45 |
+
<?php else : ?>
|
46 |
+
|
47 |
+
<?php wp_nonce_field( 'edd_sample_nonce', 'edd_sample_nonce' ); ?>
|
48 |
+
|
49 |
+
<input type="submit" class="button-secondary" name="edd_license_activate" value="<?php _e('Activate License'); ?>"/>
|
50 |
+
|
51 |
+
<?php endif; ?>
|
52 |
+
</td>
|
53 |
+
</tr>
|
54 |
+
|
55 |
+
<?php endif; ?>
|
56 |
+
|
57 |
+
</tbody>
|
58 |
+
</table>
|
59 |
+
<?php submit_button(); ?>
|
60 |
+
</form>
|
61 |
+
|
62 |
+
<?php endforeach; ?>
|