-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
305 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/** | ||
* Hide default select box, replace with fancy font picker | ||
*/ | ||
jQuery(document).ready(function($) { | ||
// initialize the custom control for the font picker | ||
$(".fontPickerCustomControl").fontPickerCustomControl(); | ||
}); | ||
|
||
/** | ||
* A small jquery plugin that does all of the hard work | ||
*/ | ||
(function( $ ) { | ||
$.fn.fontPickerCustomControl = function() { | ||
|
||
//return the 'this' selector to maintain jquery chainability | ||
return this.each(function() { | ||
|
||
// cache this selector for further use | ||
thisFontPickerCustomControl = this; | ||
|
||
// hide select box | ||
$("select", this).hide(); | ||
|
||
// show fancy content | ||
$(".fancyDisplay", this).show(); | ||
|
||
// add event listeners to fancy display | ||
$(".fancyDisplay ul li").on("click", function(event){ | ||
// get index of clicked element | ||
var index = $(".fancyDisplay ul li", thisFontPickerCustomControl).index(this); | ||
|
||
// change the selected option in the select box | ||
$('select', thisFontPickerCustomControl).val(index); | ||
|
||
// simulate a change on the select box | ||
$("select", thisFontPickerCustomControl).change(); | ||
}); | ||
|
||
}); | ||
|
||
}; | ||
})( jQuery ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
.fontPickerCustomControl .fancyDisplay{ | ||
display: none; | ||
} | ||
.fontPickerCustomControl .fancyDisplay ul{ | ||
list-style: none; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
.fontPickerCustomControl .fancyDisplay ul li{ | ||
cursor: pointer; | ||
float: left; | ||
font-size:1.6em; | ||
margin: .3em 5% .3em 0; | ||
padding: 2% 0; | ||
padding-right: 2%; | ||
width: 40%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
<?php | ||
/** | ||
* Google_Font_Picker_Custom_Control Class | ||
**/ | ||
class Google_Font_Picker_Custom_Control extends WP_Customize_Control | ||
{ | ||
public $fonts; | ||
|
||
/** | ||
* Enqueue the styles and scripts | ||
**/ | ||
public function enqueue() | ||
{ | ||
wp_register_script( 'font-picker-custom-control', plugins_url( 'assets/script.js', __FILE__ )); | ||
wp_enqueue_script( 'font-picker-custom-control' ); | ||
wp_register_style( 'font-picker-custom-control', plugins_url( 'assets/style.css', __FILE__ )); | ||
wp_enqueue_style( 'font-picker-custom-control' ); | ||
} | ||
|
||
/** | ||
* Render the content on the theme customizer page | ||
**/ | ||
public function render_content() | ||
{ | ||
if ( empty( $this->choices ) ) | ||
{ | ||
// if there are no choices then don't print anything | ||
return; | ||
} | ||
|
||
//print links to css files | ||
$this->fonts->printThemeCustomizerCssLocations(); | ||
|
||
//print css to display individual fonts | ||
$this->fonts->printThemeCustomizerCssClasses(); | ||
?> | ||
<div class="fontPickerCustomControl"> | ||
<select <?php $this->link(); ?>> | ||
<?php | ||
foreach ( $this->choices as $value => $label ) | ||
echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>'; | ||
?> | ||
</select> | ||
<div class="fancyDisplay"> | ||
<ul> | ||
<?php | ||
$getTotalNumberOfFonts = $this->fonts->getTotalNumberOfFonts(); | ||
for ($i=0; $i<=$getTotalNumberOfFonts-1; $i++) | ||
{ | ||
?> | ||
<li class="<?= $this->fonts->getCssClass($i); ?>">Mulliganz</li> | ||
<?php | ||
} | ||
?> | ||
</ul> | ||
</div> | ||
</div> | ||
<?php | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,125 @@ | ||
<?php | ||
/** | ||
* Google Font_Collection Class | ||
**/ | ||
// this file controls all of the data for the custom fonts used in the theme customizer | ||
|
||
// the Google_Font_Collection object is a wrapper that holds all of the individual custom fonts | ||
class Google_Font_Collection | ||
{ | ||
private $fonts; | ||
|
||
/** | ||
* Constructor | ||
**/ | ||
public function __construct($fonts) | ||
{ | ||
if(empty($fonts)) | ||
{ | ||
//we didn't get the required data | ||
return false; | ||
} | ||
|
||
// create fonts | ||
foreach ($fonts as $key => $value) | ||
{ | ||
$this->fonts[] = new Google_Font($value["title"], $value["location"], $value["cssDeclaration"], $value["cssClass"]); | ||
} | ||
} | ||
|
||
/** | ||
* getFontFamilyNameArray Function | ||
* this function returns an array containing all of the font family names | ||
**/ | ||
function getFontFamilyNameArray() | ||
{ | ||
$result; | ||
foreach ($this->fonts as $key => $value) | ||
{ | ||
$result[] = $value->__get("title"); | ||
} | ||
return $result; | ||
} | ||
|
||
/** | ||
* Custom Font Class | ||
* this function returns the font title | ||
**/ | ||
function getTitle($key) | ||
{ | ||
return $this->fonts[$key]->__get("title"); | ||
} | ||
|
||
/** | ||
* Custom Font Class | ||
* this function returns the font location | ||
**/ | ||
function getLocation($key) | ||
{ | ||
return $this->fonts[$key]->__get("location"); | ||
} | ||
|
||
/** | ||
* Custom Font Class | ||
* this function returns the font css declaration | ||
**/ | ||
function getCssDeclaration($key) | ||
{ | ||
return $this->fonts[$key]->__get("cssDeclaration"); | ||
} | ||
|
||
/** | ||
* Custom Font Class | ||
* this function returns the font css class | ||
**/ | ||
function getCssClass($key) | ||
{ | ||
return $this->fonts[$key]->__get("cssClass"); | ||
} | ||
|
||
/** | ||
* Custom Font Class | ||
* this function returns the total number of fonts | ||
**/ | ||
function getTotalNumberOfFonts() | ||
{ | ||
return count($this->fonts); | ||
} | ||
|
||
/** | ||
* Custom Font Class | ||
* this function prints the links to the css files for the theme customizer | ||
**/ | ||
function printThemeCustomizerCssLocations() | ||
{ | ||
foreach ($this->fonts as $key => $value) | ||
{ | ||
?> | ||
<link href="http://fonts.googleapis.com/css?family=<?= $value->__get("location"); ?>" rel='stylesheet' type='text/css'> | ||
<?php | ||
} | ||
} | ||
|
||
/** | ||
* Custom Font Class | ||
* this function prints the theme customizer css classes necessary to display all of the fonts | ||
**/ | ||
function printThemeCustomizerCssClasses() | ||
{ | ||
?> | ||
<style type="text/css"> | ||
<?php | ||
foreach ($this->fonts as $key => $value) | ||
{ | ||
?> | ||
.<?=$value->__get("cssClass")?>{ | ||
font-family: <?= $value->__get("cssDeclaration"); ?>; | ||
} | ||
<?php | ||
} | ||
?> | ||
</style> | ||
<?php | ||
} | ||
|
||
} // Font_Collection |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
<?php | ||
/** | ||
* Google_Font Class | ||
**/ | ||
class Google_Font | ||
{ | ||
private $title; // the name of the font | ||
private $location; // the http location of the font file | ||
private $cssDeclaration; // the css declaration used to reference the font | ||
private $cssClass; // the css class used in the theme customizer to preview the font | ||
|
||
/** | ||
* Constructor | ||
**/ | ||
public function __construct($title, $location, $cssDeclaration, $cssClass) | ||
{ | ||
$this->title = $title; | ||
$this->location = $location; | ||
$this->cssDeclaration = $cssDeclaration; | ||
$this->cssClass = $cssClass; | ||
} | ||
|
||
/** | ||
* Getters | ||
* taken from: http://stackoverflow.com/questions/4478661/getter-and-setter | ||
**/ | ||
public function __get($property) | ||
{ | ||
if (property_exists($this, $property)) { | ||
return $this->$property; | ||
} | ||
} | ||
} // Custom_Font |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
<?php | ||
/* | ||
Plugin Name: Google Font Picker Control | ||
Plugin URI: | ||
Description: This plugin creates a new control in the theme customizer to help users pick Google Web Fonts. | ||
Version: 1.0 | ||
Author: Patrick Rauland | ||
Author URI: http://www.patrickrauland.com | ||
Copyright (C) 2012 Patrick Rauland | ||
*/ | ||
|
||
/** | ||
* Include font classes | ||
**/ | ||
require_once( 'google-font.php' ); | ||
require_once( 'google-font-collection.php' ); | ||
|
||
/** | ||
* Include control | ||
* only load this class when the theme customizer is loaded | ||
**/ | ||
add_action( 'customize_register', 'google_font_picker_control_customize_register' ); | ||
function google_font_picker_control_customize_register() | ||
{ | ||
require_once( 'control.php' ); | ||
} |