080600
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
function dotweet(ele){
|
||||
window.open(jQuery("#"+ele.id).attr("action")+"?"+jQuery("#"+ele.id).serialize(), "_blank", "scrollbars=no, menubar=no, height=400, width=500, resizable=yes, toolbar=no, status=no");
|
||||
return false;
|
||||
}
|
||||
|
||||
function dotweet(ele){
|
||||
window.open(jQuery("#"+ele.id).attr("action")+"?"+jQuery("#"+ele.id).serialize(), "_blank", "scrollbars=no, menubar=no, height=400, width=500, resizable=yes, toolbar=no, status=no");
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,266 +1,266 @@
|
||||
jQuery( document ).ready(function($) {
|
||||
|
||||
/**
|
||||
* Alpha Color Picker Custom Control
|
||||
*
|
||||
* @author Braad Martin <http://braadmartin.com>
|
||||
* @license http://www.gnu.org/licenses/gpl-3.0.html
|
||||
* @link https://github.com/BraadMartin/components/tree/master/customizer/alpha-color-picker
|
||||
*/
|
||||
|
||||
// Loop over each control and transform it into our color picker.
|
||||
$( '.alpha-color-control' ).each( function() {
|
||||
|
||||
// Scope the vars.
|
||||
var $control, startingColor, paletteInput, showOpacity, defaultColor, palette,
|
||||
colorPickerOptions, $container, $alphaSlider, alphaVal, sliderOptions;
|
||||
|
||||
// Store the control instance.
|
||||
$control = $( this );
|
||||
|
||||
// Get a clean starting value for the option.
|
||||
startingColor = $control.val().replace( /\s+/g, '' );
|
||||
|
||||
// Get some data off the control.
|
||||
paletteInput = $control.attr( 'data-palette' );
|
||||
showOpacity = $control.attr( 'data-show-opacity' );
|
||||
defaultColor = $control.attr( 'data-default-color' );
|
||||
|
||||
// Process the palette.
|
||||
if ( paletteInput.indexOf( '|' ) !== -1 ) {
|
||||
palette = paletteInput.split( '|' );
|
||||
} else if ( 'false' == paletteInput ) {
|
||||
palette = false;
|
||||
} else {
|
||||
palette = true;
|
||||
}
|
||||
|
||||
// Set up the options that we'll pass to wpColorPicker().
|
||||
colorPickerOptions = {
|
||||
change: function( event, ui ) {
|
||||
var key, value, alpha, $transparency;
|
||||
|
||||
key = $control.attr( 'data-customize-setting-link' );
|
||||
value = $control.wpColorPicker( 'color' );
|
||||
|
||||
// Set the opacity value on the slider handle when the default color button is clicked.
|
||||
if ( defaultColor == value ) {
|
||||
alpha = pfx_acp_get_alpha_value_from_color( value );
|
||||
$alphaSlider.find( '.ui-slider-handle' ).text( alpha );
|
||||
}
|
||||
|
||||
// Send ajax request to wp.customize to trigger the Save action.
|
||||
wp.customize( key, function( obj ) {
|
||||
obj.set( value );
|
||||
});
|
||||
|
||||
$transparency = $container.find( '.transparency' );
|
||||
|
||||
// Always show the background color of the opacity slider at 100% opacity.
|
||||
$transparency.css( 'background-color', ui.color.toString( 'no-alpha' ) );
|
||||
},
|
||||
palettes: palette // Use the passed in palette.
|
||||
};
|
||||
|
||||
// Create the colorpicker.
|
||||
$control.wpColorPicker( colorPickerOptions );
|
||||
|
||||
$container = $control.parents( '.wp-picker-container:first' );
|
||||
|
||||
// Insert our opacity slider.
|
||||
$( '<div class="alpha-color-picker-container">' +
|
||||
'<div class="min-click-zone click-zone"></div>' +
|
||||
'<div class="max-click-zone click-zone"></div>' +
|
||||
'<div class="alpha-slider"></div>' +
|
||||
'<div class="transparency"></div>' +
|
||||
'</div>' ).appendTo( $container.find( '.wp-picker-holder' ) );
|
||||
|
||||
$alphaSlider = $container.find( '.alpha-slider' );
|
||||
|
||||
// If starting value is in format RGBa, grab the alpha channel.
|
||||
alphaVal = pfx_acp_get_alpha_value_from_color( startingColor );
|
||||
|
||||
// Set up jQuery UI slider() options.
|
||||
sliderOptions = {
|
||||
create: function( event, ui ) {
|
||||
var value = $( this ).slider( 'value' );
|
||||
|
||||
// Set up initial values.
|
||||
$( this ).find( '.ui-slider-handle' ).text( value );
|
||||
$( this ).siblings( '.transparency ').css( 'background-color', startingColor );
|
||||
},
|
||||
value: alphaVal,
|
||||
range: 'max',
|
||||
step: 1,
|
||||
min: 0,
|
||||
max: 100,
|
||||
animate: 300
|
||||
};
|
||||
|
||||
// Initialize jQuery UI slider with our options.
|
||||
$alphaSlider.slider( sliderOptions );
|
||||
|
||||
// Maybe show the opacity on the handle.
|
||||
if ( 'true' == showOpacity ) {
|
||||
$alphaSlider.find( '.ui-slider-handle' ).addClass( 'show-opacity' );
|
||||
}
|
||||
|
||||
// Bind event handlers for the click zones.
|
||||
$container.find( '.min-click-zone' ).on( 'click', function() {
|
||||
pfx_acp_update_alpha_value_on_color_control( 0, $control, $alphaSlider, true );
|
||||
});
|
||||
$container.find( '.max-click-zone' ).on( 'click', function() {
|
||||
pfx_acp_update_alpha_value_on_color_control( 100, $control, $alphaSlider, true );
|
||||
});
|
||||
|
||||
// Bind event handler for clicking on a palette color.
|
||||
$container.find( '.iris-palette' ).on( 'click', function() {
|
||||
var color, alpha;
|
||||
|
||||
color = $( this ).css( 'background-color' );
|
||||
alpha = pfx_acp_get_alpha_value_from_color( color );
|
||||
|
||||
pfx_acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
|
||||
// Sometimes Iris doesn't set a perfect background-color on the palette,
|
||||
// for example rgba(20, 80, 100, 0.3) becomes rgba(20, 80, 100, 0.298039).
|
||||
// To compensante for this we round the opacity value on RGBa colors here
|
||||
// and save it a second time to the color picker object.
|
||||
if ( alpha != 100 ) {
|
||||
color = color.replace( /[^,]+(?=\))/, ( alpha / 100 ).toFixed( 2 ) );
|
||||
}
|
||||
|
||||
$control.wpColorPicker( 'color', color );
|
||||
});
|
||||
|
||||
// Bind event handler for clicking on the 'Clear' button.
|
||||
$container.find( '.button.wp-picker-clear' ).on( 'click', function() {
|
||||
var key = $control.attr( 'data-customize-setting-link' );
|
||||
|
||||
// The #fff color is delibrate here. This sets the color picker to white instead of the
|
||||
// defult black, which puts the color picker in a better place to visually represent empty.
|
||||
$control.wpColorPicker( 'color', '#ffffff' );
|
||||
|
||||
// Set the actual option value to empty string.
|
||||
wp.customize( key, function( obj ) {
|
||||
obj.set( '' );
|
||||
});
|
||||
|
||||
pfx_acp_update_alpha_value_on_alpha_slider( 100, $alphaSlider );
|
||||
});
|
||||
|
||||
// Bind event handler for clicking on the 'Default' button.
|
||||
$container.find( '.button.wp-picker-default' ).on( 'click', function() {
|
||||
var alpha = pfx_acp_get_alpha_value_from_color( defaultColor );
|
||||
|
||||
pfx_acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
});
|
||||
|
||||
// Bind event handler for typing or pasting into the input.
|
||||
$control.on( 'input', function() {
|
||||
var value = $( this ).val();
|
||||
var alpha = pfx_acp_get_alpha_value_from_color( value );
|
||||
|
||||
pfx_acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
});
|
||||
|
||||
// Update all the things when the slider is interacted with.
|
||||
$alphaSlider.slider().on( 'slide', function( event, ui ) {
|
||||
var alpha = parseFloat( ui.value ) / 100.0;
|
||||
|
||||
pfx_acp_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, false );
|
||||
|
||||
// Change value shown on slider handle.
|
||||
$( this ).find( '.ui-slider-handle' ).text( ui.value );
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Override the stock color.js toString() method to add support for outputting RGBa or Hex.
|
||||
*/
|
||||
Color.prototype.toString = function( flag ) {
|
||||
|
||||
// If our no-alpha flag has been passed in, output RGBa value with 100% opacity.
|
||||
// This is used to set the background color on the opacity slider during color changes.
|
||||
if ( 'no-alpha' == flag ) {
|
||||
return this.toCSS( 'rgba', '1' ).replace( /\s+/g, '' );
|
||||
}
|
||||
|
||||
// If we have a proper opacity value, output RGBa.
|
||||
if ( 1 > this._alpha ) {
|
||||
return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' );
|
||||
}
|
||||
|
||||
// Proceed with stock color.js hex output.
|
||||
var hex = parseInt( this._color, 10 ).toString( 16 );
|
||||
if ( this.error ) { return ''; }
|
||||
if ( hex.length < 6 ) {
|
||||
for ( var i = 6 - hex.length - 1; i >= 0; i-- ) {
|
||||
hex = '0' + hex;
|
||||
}
|
||||
}
|
||||
|
||||
return '#' + hex;
|
||||
};
|
||||
|
||||
/**
|
||||
* Given an RGBa, RGB, or hex color value, return the alpha channel value.
|
||||
*/
|
||||
function pfx_acp_get_alpha_value_from_color( value ) {
|
||||
var alphaVal;
|
||||
|
||||
// Remove all spaces from the passed in value to help our RGBa regex.
|
||||
value = value.replace( / /g, '' );
|
||||
|
||||
if ( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ ) ) {
|
||||
alphaVal = parseFloat( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ )[1] ).toFixed(2) * 100;
|
||||
alphaVal = parseInt( alphaVal );
|
||||
} else {
|
||||
alphaVal = 100;
|
||||
}
|
||||
|
||||
return alphaVal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Force update the alpha value of the color picker object and maybe the alpha slider.
|
||||
*/
|
||||
function pfx_acp_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, update_slider ) {
|
||||
var iris, colorPicker, color;
|
||||
|
||||
iris = $control.data( 'a8cIris' );
|
||||
colorPicker = $control.data( 'wpWpColorPicker' );
|
||||
|
||||
// Set the alpha value on the Iris object.
|
||||
iris._color._alpha = alpha;
|
||||
|
||||
// Store the new color value.
|
||||
color = iris._color.toString();
|
||||
|
||||
// Set the value of the input.
|
||||
$control.val( color );
|
||||
|
||||
// Update the background color of the color picker.
|
||||
colorPicker.toggler.css({
|
||||
'background-color': color
|
||||
});
|
||||
|
||||
// Maybe update the alpha slider itself.
|
||||
if ( update_slider ) {
|
||||
pfx_acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
}
|
||||
|
||||
// Update the color value of the color picker object.
|
||||
$control.wpColorPicker( 'color', color );
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the slider handle position and label.
|
||||
*/
|
||||
function pfx_acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ) {
|
||||
$alphaSlider.slider( 'value', alpha );
|
||||
$alphaSlider.find( '.ui-slider-handle' ).text( alpha.toString() );
|
||||
}
|
||||
jQuery( document ).ready(function($) {
|
||||
|
||||
/**
|
||||
* Alpha Color Picker Custom Control
|
||||
*
|
||||
* @author Braad Martin <http://braadmartin.com>
|
||||
* @license http://www.gnu.org/licenses/gpl-3.0.html
|
||||
* @link https://github.com/BraadMartin/components/tree/master/customizer/alpha-color-picker
|
||||
*/
|
||||
|
||||
// Loop over each control and transform it into our color picker.
|
||||
$( '.alpha-color-control' ).each( function() {
|
||||
|
||||
// Scope the vars.
|
||||
var $control, startingColor, paletteInput, showOpacity, defaultColor, palette,
|
||||
colorPickerOptions, $container, $alphaSlider, alphaVal, sliderOptions;
|
||||
|
||||
// Store the control instance.
|
||||
$control = $( this );
|
||||
|
||||
// Get a clean starting value for the option.
|
||||
startingColor = $control.val().replace( /\s+/g, '' );
|
||||
|
||||
// Get some data off the control.
|
||||
paletteInput = $control.attr( 'data-palette' );
|
||||
showOpacity = $control.attr( 'data-show-opacity' );
|
||||
defaultColor = $control.attr( 'data-default-color' );
|
||||
|
||||
// Process the palette.
|
||||
if ( paletteInput.indexOf( '|' ) !== -1 ) {
|
||||
palette = paletteInput.split( '|' );
|
||||
} else if ( 'false' == paletteInput ) {
|
||||
palette = false;
|
||||
} else {
|
||||
palette = true;
|
||||
}
|
||||
|
||||
// Set up the options that we'll pass to wpColorPicker().
|
||||
colorPickerOptions = {
|
||||
change: function( event, ui ) {
|
||||
var key, value, alpha, $transparency;
|
||||
|
||||
key = $control.attr( 'data-customize-setting-link' );
|
||||
value = $control.wpColorPicker( 'color' );
|
||||
|
||||
// Set the opacity value on the slider handle when the default color button is clicked.
|
||||
if ( defaultColor == value ) {
|
||||
alpha = pfx_acp_get_alpha_value_from_color( value );
|
||||
$alphaSlider.find( '.ui-slider-handle' ).text( alpha );
|
||||
}
|
||||
|
||||
// Send ajax request to wp.customize to trigger the Save action.
|
||||
wp.customize( key, function( obj ) {
|
||||
obj.set( value );
|
||||
});
|
||||
|
||||
$transparency = $container.find( '.transparency' );
|
||||
|
||||
// Always show the background color of the opacity slider at 100% opacity.
|
||||
$transparency.css( 'background-color', ui.color.toString( 'no-alpha' ) );
|
||||
},
|
||||
palettes: palette // Use the passed in palette.
|
||||
};
|
||||
|
||||
// Create the colorpicker.
|
||||
$control.wpColorPicker( colorPickerOptions );
|
||||
|
||||
$container = $control.parents( '.wp-picker-container:first' );
|
||||
|
||||
// Insert our opacity slider.
|
||||
$( '<div class="alpha-color-picker-container">' +
|
||||
'<div class="min-click-zone click-zone"></div>' +
|
||||
'<div class="max-click-zone click-zone"></div>' +
|
||||
'<div class="alpha-slider"></div>' +
|
||||
'<div class="transparency"></div>' +
|
||||
'</div>' ).appendTo( $container.find( '.wp-picker-holder' ) );
|
||||
|
||||
$alphaSlider = $container.find( '.alpha-slider' );
|
||||
|
||||
// If starting value is in format RGBa, grab the alpha channel.
|
||||
alphaVal = pfx_acp_get_alpha_value_from_color( startingColor );
|
||||
|
||||
// Set up jQuery UI slider() options.
|
||||
sliderOptions = {
|
||||
create: function( event, ui ) {
|
||||
var value = $( this ).slider( 'value' );
|
||||
|
||||
// Set up initial values.
|
||||
$( this ).find( '.ui-slider-handle' ).text( value );
|
||||
$( this ).siblings( '.transparency ').css( 'background-color', startingColor );
|
||||
},
|
||||
value: alphaVal,
|
||||
range: 'max',
|
||||
step: 1,
|
||||
min: 0,
|
||||
max: 100,
|
||||
animate: 300
|
||||
};
|
||||
|
||||
// Initialize jQuery UI slider with our options.
|
||||
$alphaSlider.slider( sliderOptions );
|
||||
|
||||
// Maybe show the opacity on the handle.
|
||||
if ( 'true' == showOpacity ) {
|
||||
$alphaSlider.find( '.ui-slider-handle' ).addClass( 'show-opacity' );
|
||||
}
|
||||
|
||||
// Bind event handlers for the click zones.
|
||||
$container.find( '.min-click-zone' ).on( 'click', function() {
|
||||
pfx_acp_update_alpha_value_on_color_control( 0, $control, $alphaSlider, true );
|
||||
});
|
||||
$container.find( '.max-click-zone' ).on( 'click', function() {
|
||||
pfx_acp_update_alpha_value_on_color_control( 100, $control, $alphaSlider, true );
|
||||
});
|
||||
|
||||
// Bind event handler for clicking on a palette color.
|
||||
$container.find( '.iris-palette' ).on( 'click', function() {
|
||||
var color, alpha;
|
||||
|
||||
color = $( this ).css( 'background-color' );
|
||||
alpha = pfx_acp_get_alpha_value_from_color( color );
|
||||
|
||||
pfx_acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
|
||||
// Sometimes Iris doesn't set a perfect background-color on the palette,
|
||||
// for example rgba(20, 80, 100, 0.3) becomes rgba(20, 80, 100, 0.298039).
|
||||
// To compensante for this we round the opacity value on RGBa colors here
|
||||
// and save it a second time to the color picker object.
|
||||
if ( alpha != 100 ) {
|
||||
color = color.replace( /[^,]+(?=\))/, ( alpha / 100 ).toFixed( 2 ) );
|
||||
}
|
||||
|
||||
$control.wpColorPicker( 'color', color );
|
||||
});
|
||||
|
||||
// Bind event handler for clicking on the 'Clear' button.
|
||||
$container.find( '.button.wp-picker-clear' ).on( 'click', function() {
|
||||
var key = $control.attr( 'data-customize-setting-link' );
|
||||
|
||||
// The #fff color is delibrate here. This sets the color picker to white instead of the
|
||||
// defult black, which puts the color picker in a better place to visually represent empty.
|
||||
$control.wpColorPicker( 'color', '#ffffff' );
|
||||
|
||||
// Set the actual option value to empty string.
|
||||
wp.customize( key, function( obj ) {
|
||||
obj.set( '' );
|
||||
});
|
||||
|
||||
pfx_acp_update_alpha_value_on_alpha_slider( 100, $alphaSlider );
|
||||
});
|
||||
|
||||
// Bind event handler for clicking on the 'Default' button.
|
||||
$container.find( '.button.wp-picker-default' ).on( 'click', function() {
|
||||
var alpha = pfx_acp_get_alpha_value_from_color( defaultColor );
|
||||
|
||||
pfx_acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
});
|
||||
|
||||
// Bind event handler for typing or pasting into the input.
|
||||
$control.on( 'input', function() {
|
||||
var value = $( this ).val();
|
||||
var alpha = pfx_acp_get_alpha_value_from_color( value );
|
||||
|
||||
pfx_acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
});
|
||||
|
||||
// Update all the things when the slider is interacted with.
|
||||
$alphaSlider.slider().on( 'slide', function( event, ui ) {
|
||||
var alpha = parseFloat( ui.value ) / 100.0;
|
||||
|
||||
pfx_acp_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, false );
|
||||
|
||||
// Change value shown on slider handle.
|
||||
$( this ).find( '.ui-slider-handle' ).text( ui.value );
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Override the stock color.js toString() method to add support for outputting RGBa or Hex.
|
||||
*/
|
||||
Color.prototype.toString = function( flag ) {
|
||||
|
||||
// If our no-alpha flag has been passed in, output RGBa value with 100% opacity.
|
||||
// This is used to set the background color on the opacity slider during color changes.
|
||||
if ( 'no-alpha' == flag ) {
|
||||
return this.toCSS( 'rgba', '1' ).replace( /\s+/g, '' );
|
||||
}
|
||||
|
||||
// If we have a proper opacity value, output RGBa.
|
||||
if ( 1 > this._alpha ) {
|
||||
return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' );
|
||||
}
|
||||
|
||||
// Proceed with stock color.js hex output.
|
||||
var hex = parseInt( this._color, 10 ).toString( 16 );
|
||||
if ( this.error ) { return ''; }
|
||||
if ( hex.length < 6 ) {
|
||||
for ( var i = 6 - hex.length - 1; i >= 0; i-- ) {
|
||||
hex = '0' + hex;
|
||||
}
|
||||
}
|
||||
|
||||
return '#' + hex;
|
||||
};
|
||||
|
||||
/**
|
||||
* Given an RGBa, RGB, or hex color value, return the alpha channel value.
|
||||
*/
|
||||
function pfx_acp_get_alpha_value_from_color( value ) {
|
||||
var alphaVal;
|
||||
|
||||
// Remove all spaces from the passed in value to help our RGBa regex.
|
||||
value = value.replace( / /g, '' );
|
||||
|
||||
if ( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ ) ) {
|
||||
alphaVal = parseFloat( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ )[1] ).toFixed(2) * 100;
|
||||
alphaVal = parseInt( alphaVal );
|
||||
} else {
|
||||
alphaVal = 100;
|
||||
}
|
||||
|
||||
return alphaVal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Force update the alpha value of the color picker object and maybe the alpha slider.
|
||||
*/
|
||||
function pfx_acp_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, update_slider ) {
|
||||
var iris, colorPicker, color;
|
||||
|
||||
iris = $control.data( 'a8cIris' );
|
||||
colorPicker = $control.data( 'wpWpColorPicker' );
|
||||
|
||||
// Set the alpha value on the Iris object.
|
||||
iris._color._alpha = alpha;
|
||||
|
||||
// Store the new color value.
|
||||
color = iris._color.toString();
|
||||
|
||||
// Set the value of the input.
|
||||
$control.val( color );
|
||||
|
||||
// Update the background color of the color picker.
|
||||
colorPicker.toggler.css({
|
||||
'background-color': color
|
||||
});
|
||||
|
||||
// Maybe update the alpha slider itself.
|
||||
if ( update_slider ) {
|
||||
pfx_acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
}
|
||||
|
||||
// Update the color value of the color picker object.
|
||||
$control.wpColorPicker( 'color', color );
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the slider handle position and label.
|
||||
*/
|
||||
function pfx_acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ) {
|
||||
$alphaSlider.slider( 'value', alpha );
|
||||
$alphaSlider.find( '.ui-slider-handle' ).text( alpha.toString() );
|
||||
}
|
||||
|
||||
@@ -1,80 +1,80 @@
|
||||
/* global wp, jQuery */
|
||||
/**
|
||||
* File customizer.js.
|
||||
*
|
||||
* Theme Customizer enhancements for a better user experience.
|
||||
*
|
||||
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
||||
*/
|
||||
|
||||
( function( $ ) {
|
||||
// Site title and description.
|
||||
wp.customize( 'blogname', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '.site-title a' ).text( to );
|
||||
} );
|
||||
} );
|
||||
|
||||
wp.customize( 'blogdescription', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '.site-description' ).text( to );
|
||||
} );
|
||||
} );
|
||||
|
||||
// Header text color.
|
||||
wp.customize( 'header_textcolor', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
if ( 'blank' === to ) {
|
||||
$( '.site-title, .site-description' ).css( {
|
||||
clip: 'rect(1px, 1px, 1px, 1px)',
|
||||
position: 'absolute',
|
||||
} );
|
||||
} else {
|
||||
$( '.site-title, .site-description' ).css( {
|
||||
clip: 'auto',
|
||||
position: 'relative',
|
||||
} );
|
||||
$( '.site-title a, .site-description' ).css( {
|
||||
color: to,
|
||||
} );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
var custom_preview = {
|
||||
'pfx_scrolltop_position' : {'sel' : 'a#pfx-scroll-top', 'css' : "left" , 'val' : "{{val}}%"},
|
||||
'pfx_scrolltop_padding' : {'sel' : 'a#pfx-scroll-top', 'css' : "padding" , 'val' : "{{val}}px"},
|
||||
'pfx_scrolltop_borderwidth' : {'sel' : 'a#pfx-scroll-top', 'css' : "border" , 'val' : "{{val}}px solid"},
|
||||
'pfx_scrolltop_borderradius' : {'sel' : 'a#pfx-scroll-top', 'css' : "border-radius" , 'val' : "{{val}}px"},
|
||||
'pfx_scrolltop_bg_color' : {'sel' : 'a#pfx-scroll-top', 'css' : "background-color" , 'val' : "{{val}}"},
|
||||
'pfx_scrolltop_color' : {'sel' : "a#pfx-scroll-top span.dashicons.dashicons-arrow-up-alt2", 'css' : "color" , 'val' : "{{val}}"},
|
||||
'pfx_scrolltop_iconsize' : {'sel' : "a#pfx-scroll-top span.dashicons.dashicons-arrow-up-alt2", 'css' : ['width', 'height', 'font-size'] , 'val' : "{{val}}px"},
|
||||
};
|
||||
|
||||
$.each( custom_preview, function (i, value){
|
||||
|
||||
// Append & Apply scrolltop setting
|
||||
wp.customize( i, function(values) {
|
||||
values.bind( function( to ){
|
||||
|
||||
var sel = value.sel;
|
||||
var newVal = value.val;
|
||||
|
||||
newVal = newVal.split('{{val}}').join(to);
|
||||
|
||||
if(typeof value.css == 'object'){
|
||||
for( var kk in value.css){
|
||||
$( sel ).css( value.css[kk] , newVal );
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
$( sel ).css( value.css , newVal );
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}( jQuery ) );
|
||||
|
||||
|
||||
/* global wp, jQuery */
|
||||
/**
|
||||
* File customizer.js.
|
||||
*
|
||||
* Theme Customizer enhancements for a better user experience.
|
||||
*
|
||||
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
||||
*/
|
||||
|
||||
( function( $ ) {
|
||||
// Site title and description.
|
||||
wp.customize( 'blogname', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '.site-title a' ).text( to );
|
||||
} );
|
||||
} );
|
||||
|
||||
wp.customize( 'blogdescription', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '.site-description' ).text( to );
|
||||
} );
|
||||
} );
|
||||
|
||||
// Header text color.
|
||||
wp.customize( 'header_textcolor', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
if ( 'blank' === to ) {
|
||||
$( '.site-title, .site-description' ).css( {
|
||||
clip: 'rect(1px, 1px, 1px, 1px)',
|
||||
position: 'absolute',
|
||||
} );
|
||||
} else {
|
||||
$( '.site-title, .site-description' ).css( {
|
||||
clip: 'auto',
|
||||
position: 'relative',
|
||||
} );
|
||||
$( '.site-title a, .site-description' ).css( {
|
||||
color: to,
|
||||
} );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
var custom_preview = {
|
||||
'pfx_scrolltop_position' : {'sel' : 'a#pfx-scroll-top', 'css' : "left" , 'val' : "{{val}}%"},
|
||||
'pfx_scrolltop_padding' : {'sel' : 'a#pfx-scroll-top', 'css' : "padding" , 'val' : "{{val}}px"},
|
||||
'pfx_scrolltop_borderwidth' : {'sel' : 'a#pfx-scroll-top', 'css' : "border" , 'val' : "{{val}}px solid"},
|
||||
'pfx_scrolltop_borderradius' : {'sel' : 'a#pfx-scroll-top', 'css' : "border-radius" , 'val' : "{{val}}px"},
|
||||
'pfx_scrolltop_bg_color' : {'sel' : 'a#pfx-scroll-top', 'css' : "background-color" , 'val' : "{{val}}"},
|
||||
'pfx_scrolltop_color' : {'sel' : "a#pfx-scroll-top span.dashicons.dashicons-arrow-up-alt2", 'css' : "color" , 'val' : "{{val}}"},
|
||||
'pfx_scrolltop_iconsize' : {'sel' : "a#pfx-scroll-top span.dashicons.dashicons-arrow-up-alt2", 'css' : ['width', 'height', 'font-size'] , 'val' : "{{val}}px"},
|
||||
};
|
||||
|
||||
$.each( custom_preview, function (i, value){
|
||||
|
||||
// Append & Apply scrolltop setting
|
||||
wp.customize( i, function(values) {
|
||||
values.bind( function( to ){
|
||||
|
||||
var sel = value.sel;
|
||||
var newVal = value.val;
|
||||
|
||||
newVal = newVal.split('{{val}}').join(to);
|
||||
|
||||
if(typeof value.css == 'object'){
|
||||
for( var kk in value.css){
|
||||
$( sel ).css( value.css[kk] , newVal );
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
$( sel ).css( value.css , newVal );
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}( jQuery ) );
|
||||
|
||||
|
||||
|
||||
@@ -1,177 +1,177 @@
|
||||
/**
|
||||
* File navigation.js.
|
||||
*
|
||||
* Handles toggling the navigation menu for small screens and enables TAB key
|
||||
* navigation support for dropdown menus.
|
||||
*/
|
||||
( function() {
|
||||
var container, button, menu, links, i, len;
|
||||
|
||||
container = document.getElementById( 'site-navigation' );
|
||||
if ( ! container ) {
|
||||
return;
|
||||
}
|
||||
|
||||
button = document.getElementsByClassName( 'menu-toggle' )[0];
|
||||
if ( 'undefined' === typeof button ) {
|
||||
return;
|
||||
}
|
||||
|
||||
menu = container.getElementsByTagName( 'ul' )[0];
|
||||
|
||||
// Hide menu toggle button if menu is empty and return early.
|
||||
if ( 'undefined' === typeof menu ) {
|
||||
button.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
|
||||
menu.className += ' nav-menu';
|
||||
}
|
||||
|
||||
button.onclick = function() {
|
||||
|
||||
if(container.classList.contains('hidden-mobile') == true){
|
||||
container.className = container.className.replace( 'hidden-mobile', '' );
|
||||
|
||||
button.setAttribute( 'aria-expanded', 'false' );
|
||||
}else{
|
||||
container.className += ' hidden-mobile';
|
||||
button.setAttribute( 'aria-expanded', 'true' );
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// Close small menu when user clicks outside
|
||||
document.addEventListener( 'click', function( event ) {
|
||||
var isClickInside = container.contains( event.target );
|
||||
|
||||
if ( ! isClickInside ) {
|
||||
container.className = container.className.replace( ' toggled', '' );
|
||||
button.setAttribute( 'aria-expanded', 'false' );
|
||||
}
|
||||
} );
|
||||
|
||||
// Get all the link elements within the menu.
|
||||
links = menu.getElementsByTagName( 'a' );
|
||||
|
||||
// Each time a menu link is focused or blurred, toggle focus.
|
||||
for ( i = 0, len = links.length; i < len; i++ ) {
|
||||
links[i].addEventListener( 'focus', toggleFocus, true );
|
||||
links[i].addEventListener( 'blur', toggleFocus, true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets or removes .focus class on an element.
|
||||
*/
|
||||
function toggleFocus() {
|
||||
var self = this;
|
||||
|
||||
// Move up through the ancestors of the current link until we hit .nav-menu.
|
||||
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
|
||||
// On li elements toggle the class .focus.
|
||||
if ( 'li' === self.tagName.toLowerCase() ) {
|
||||
if ( -1 !== self.className.indexOf( 'focus' ) ) {
|
||||
self.className = self.className.replace( ' focus', '' );
|
||||
} else {
|
||||
self.className += ' focus';
|
||||
}
|
||||
}
|
||||
|
||||
self = self.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles `focus` class to allow submenu access on tablets.
|
||||
*/
|
||||
( function() {
|
||||
var touchStartFn,
|
||||
parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
|
||||
|
||||
if ( 'ontouchstart' in window ) {
|
||||
touchStartFn = function( e ) {
|
||||
var menuItem = this.parentNode;
|
||||
|
||||
if ( ! menuItem.classList.contains( 'focus' ) ) {
|
||||
e.preventDefault();
|
||||
for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
|
||||
if ( menuItem === menuItem.parentNode.children[i] ) {
|
||||
continue;
|
||||
}
|
||||
menuItem.parentNode.children[i].classList.remove( 'focus' );
|
||||
}
|
||||
menuItem.classList.add( 'focus' );
|
||||
} else {
|
||||
menuItem.classList.remove( 'focus' );
|
||||
}
|
||||
};
|
||||
|
||||
for ( i = 0; i < parentLink.length; ++i ) {
|
||||
parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
|
||||
}
|
||||
}
|
||||
}( container ) );
|
||||
}() );
|
||||
|
||||
/**
|
||||
* File skip-link-focus-fix.js.
|
||||
*
|
||||
* Helps with accessibility for keyboard only users.
|
||||
*
|
||||
* Learn more: https://git.io/vWdr2
|
||||
*/
|
||||
( function() {
|
||||
var isIe = /(trident|msie)/i.test( navigator.userAgent );
|
||||
|
||||
if ( isIe && document.getElementById && window.addEventListener ) {
|
||||
window.addEventListener( 'hashchange', function() {
|
||||
var id = location.hash.substring( 1 ),
|
||||
element;
|
||||
|
||||
if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
element = document.getElementById( id );
|
||||
|
||||
if ( element ) {
|
||||
if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
|
||||
element.tabIndex = -1;
|
||||
}
|
||||
|
||||
element.focus();
|
||||
}
|
||||
}, false );
|
||||
}
|
||||
}() );
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
|
||||
// Toggle Scroll to top icon
|
||||
pfx_toggle_scroll_top();
|
||||
|
||||
// Scroll handler
|
||||
jQuery(window).on("scroll.scroll_top", function(){
|
||||
pfx_toggle_scroll_top();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Scroll to TOP
|
||||
jQuery(document).on("click", "a.pfx-scroll-top", function(){
|
||||
jQuery("html, body").animate({scrollTop : 0}, 700);
|
||||
});
|
||||
|
||||
// Toggle Scroll to top icon
|
||||
function pfx_toggle_scroll_top(){
|
||||
|
||||
var jEle = jQuery("a.pfx-scroll-top");
|
||||
|
||||
if( jQuery(window).scrollTop() > 200){
|
||||
jEle.fadeIn();
|
||||
return;
|
||||
}
|
||||
|
||||
jEle.fadeOut();
|
||||
/**
|
||||
* File navigation.js.
|
||||
*
|
||||
* Handles toggling the navigation menu for small screens and enables TAB key
|
||||
* navigation support for dropdown menus.
|
||||
*/
|
||||
( function() {
|
||||
var container, button, menu, links, i, len;
|
||||
|
||||
container = document.getElementById( 'site-navigation' );
|
||||
if ( ! container ) {
|
||||
return;
|
||||
}
|
||||
|
||||
button = document.getElementsByClassName( 'menu-toggle' )[0];
|
||||
if ( 'undefined' === typeof button ) {
|
||||
return;
|
||||
}
|
||||
|
||||
menu = container.getElementsByTagName( 'ul' )[0];
|
||||
|
||||
// Hide menu toggle button if menu is empty and return early.
|
||||
if ( 'undefined' === typeof menu ) {
|
||||
button.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
|
||||
menu.className += ' nav-menu';
|
||||
}
|
||||
|
||||
button.onclick = function() {
|
||||
|
||||
if(container.classList.contains('hidden-mobile') == true){
|
||||
container.className = container.className.replace( 'hidden-mobile', '' );
|
||||
|
||||
button.setAttribute( 'aria-expanded', 'false' );
|
||||
}else{
|
||||
container.className += ' hidden-mobile';
|
||||
button.setAttribute( 'aria-expanded', 'true' );
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// Close small menu when user clicks outside
|
||||
document.addEventListener( 'click', function( event ) {
|
||||
var isClickInside = container.contains( event.target );
|
||||
|
||||
if ( ! isClickInside ) {
|
||||
container.className = container.className.replace( ' toggled', '' );
|
||||
button.setAttribute( 'aria-expanded', 'false' );
|
||||
}
|
||||
} );
|
||||
|
||||
// Get all the link elements within the menu.
|
||||
links = menu.getElementsByTagName( 'a' );
|
||||
|
||||
// Each time a menu link is focused or blurred, toggle focus.
|
||||
for ( i = 0, len = links.length; i < len; i++ ) {
|
||||
links[i].addEventListener( 'focus', toggleFocus, true );
|
||||
links[i].addEventListener( 'blur', toggleFocus, true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets or removes .focus class on an element.
|
||||
*/
|
||||
function toggleFocus() {
|
||||
var self = this;
|
||||
|
||||
// Move up through the ancestors of the current link until we hit .nav-menu.
|
||||
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
|
||||
// On li elements toggle the class .focus.
|
||||
if ( 'li' === self.tagName.toLowerCase() ) {
|
||||
if ( -1 !== self.className.indexOf( 'focus' ) ) {
|
||||
self.className = self.className.replace( ' focus', '' );
|
||||
} else {
|
||||
self.className += ' focus';
|
||||
}
|
||||
}
|
||||
|
||||
self = self.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles `focus` class to allow submenu access on tablets.
|
||||
*/
|
||||
( function() {
|
||||
var touchStartFn,
|
||||
parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
|
||||
|
||||
if ( 'ontouchstart' in window ) {
|
||||
touchStartFn = function( e ) {
|
||||
var menuItem = this.parentNode;
|
||||
|
||||
if ( ! menuItem.classList.contains( 'focus' ) ) {
|
||||
e.preventDefault();
|
||||
for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
|
||||
if ( menuItem === menuItem.parentNode.children[i] ) {
|
||||
continue;
|
||||
}
|
||||
menuItem.parentNode.children[i].classList.remove( 'focus' );
|
||||
}
|
||||
menuItem.classList.add( 'focus' );
|
||||
} else {
|
||||
menuItem.classList.remove( 'focus' );
|
||||
}
|
||||
};
|
||||
|
||||
for ( i = 0; i < parentLink.length; ++i ) {
|
||||
parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
|
||||
}
|
||||
}
|
||||
}( container ) );
|
||||
}() );
|
||||
|
||||
/**
|
||||
* File skip-link-focus-fix.js.
|
||||
*
|
||||
* Helps with accessibility for keyboard only users.
|
||||
*
|
||||
* Learn more: https://git.io/vWdr2
|
||||
*/
|
||||
( function() {
|
||||
var isIe = /(trident|msie)/i.test( navigator.userAgent );
|
||||
|
||||
if ( isIe && document.getElementById && window.addEventListener ) {
|
||||
window.addEventListener( 'hashchange', function() {
|
||||
var id = location.hash.substring( 1 ),
|
||||
element;
|
||||
|
||||
if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
element = document.getElementById( id );
|
||||
|
||||
if ( element ) {
|
||||
if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
|
||||
element.tabIndex = -1;
|
||||
}
|
||||
|
||||
element.focus();
|
||||
}
|
||||
}, false );
|
||||
}
|
||||
}() );
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
|
||||
// Toggle Scroll to top icon
|
||||
pfx_toggle_scroll_top();
|
||||
|
||||
// Scroll handler
|
||||
jQuery(window).on("scroll.scroll_top", function(){
|
||||
pfx_toggle_scroll_top();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Scroll to TOP
|
||||
jQuery(document).on("click", "a.pfx-scroll-top", function(){
|
||||
jQuery("html, body").animate({scrollTop : 0}, 700);
|
||||
});
|
||||
|
||||
// Toggle Scroll to top icon
|
||||
function pfx_toggle_scroll_top(){
|
||||
|
||||
var jEle = jQuery("a.pfx-scroll-top");
|
||||
|
||||
if( jQuery(window).scrollTop() > 200){
|
||||
jEle.fadeIn();
|
||||
return;
|
||||
}
|
||||
|
||||
jEle.fadeOut();
|
||||
}
|
||||
Reference in New Issue
Block a user