Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
BFTrick committed Nov 29, 2012
1 parent c0e6eb4 commit b6825f7
Show file tree
Hide file tree
Showing 6 changed files with 305 additions and 0 deletions.
42 changes: 42 additions & 0 deletions assets/script.js
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 );
17 changes: 17 additions & 0 deletions assets/style.css
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%;
}
60 changes: 60 additions & 0 deletions control.php
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
}
}
125 changes: 125 additions & 0 deletions google-font-collection.php
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
33 changes: 33 additions & 0 deletions google-font.php
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
28 changes: 28 additions & 0 deletions plugin.php
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' );
}

0 comments on commit b6825f7

Please sign in to comment.