<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div style="padding: 0 40px;">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label>Available Fonts:</label>
</div>
</div>
<div class="row" style="margin-bottom: 10px; ">
<div class="col-md-3">
<label>Types:</label>
<select name="fontType" id="fontType" class="form-control">
<option value="">All Types</option>
</select>
</div>
<div class="col-md-3">
<label>Styles:</label>
<select name="fontVariant" id="fontVariant" class="form-control">
<option value="">All Styles</option>
</select>
</div>
<div class="col-md-3">
<label>Search:</label>
<input id="searchText" type="text" value="" name="searchText" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-12">
<select name="googleFont" id="googleFont" class="form-control" size="5">
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>Font Color</label>
<input type="text" class="form-control" id="fontColor" value="#000000">
</div>
<div class="col-md-2">
<label>Background Color</label>
<input type="text" class="form-control" id="fontBGColor" value="#ffffff">
</div>
<div class="col-md-2">
<label>Font Size</label>
<input id="fontSize" type="text" value="18" name="fontSize" class="form-control">
</div>
<div class="col-md-2">
<label>Font Weight</label>
<select name="font-weight" id="font-weight" class="form-control">
<option value="normal">normal</option>
<option value="bold">bold</option>
</select>
</div>
<div class="col-md-1">
<label>Italic</label><br />
<input type="checkbox" name="italic" id="italic" value="1" class="btn btn-info" style="height: 28px; width: 28px;">
</div>
<div class="col-md-1">
<label> </label><br />
<input type="button" name="addfont" id="addfont" value="Add" class="btn btn-info">
</div>
</div>
</div>
<div class="form-group">
<div class="row" style="padding: 10px 15px;">
<label>Preview Text:</label><br />
<textarea id="font-preview" class="form-control" style="font-size: 18px; font-weight: normal;">Pack my box with five dozen liquor jugs</textarea>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label>Selected Fonts:</label>
</div>
</div>
<div class="row">
<div class="col-md-11">
<select name="Fonts" id="Fonts" size="10" class="form-control" multiple></select>
</div>
<div class="col-md-1">
<i class="fa fa-arrow-up fa-2x btn btn-primary" id="upBtn" style="margin-bottom: 5px;" data-toggle="tooltip" title="Move Up">↑</i>
<br />
<i class="fa fa-arrow-down fa-2x btn btn-primary" id="downBtn" style="margin-bottom: 5px;" data-toggle="tooltip" title="Move Down">↓</i>
<br />
<i class="fa fa-times fa-2x btn btn-primary" id="removeBtn" style="margin-bottom: 5px;" data-toggle="tooltip" title="Remove From Page">X</i>
<br />
<i class="fa fa-times fa-2x btn btn-primary" id="genCSSBtn" style="margin-bottom: 5px;" data-toggle="tooltip" title="Generate CSS Code">CSS</i>
<br />
<i class="fa fa-times fa-2x btn btn-primary" id="genJSBtn" style="margin-bottom: 5px;" data-toggle="tooltip" title="Generate JavaScript Code">JS</i>
</div>
</div>
</div>
</div>
var fonts = {};
function loadCSS(href) {
var cssLink = $("<link rel='stylesheet' type='text/css' href='"+href+"'>");
$("head").append(cssLink);
}
function loadJS(src) {
var jsLink = $("<script type='text/javascript' src='"+src+"'>");
$("head").append(jsLink);
}
function getFont(fontName) {
var ret = null;
$.each(fonts.items, function(idx, font) {
if (font.family == fontName) {
ret = font;
}
});
return ret;
}
function loadFont(fontName) {
loadCSS('http://fonts.googleapis.com/css?family=' + fontName);
$('#font-preview').css('font-family', fontName);
doesSupportItalics(fontName);
populateWeights(getFont(fontName));
}
function doesSupportItalics(fontName) {
if (fontSupports(getFont(fontName), "variants", "italic")) {
$("#italic").removeAttr("disabled");
} else {
$("#italic").prop('checked', false);
$("#italic").attr("disabled", "disabled");
$('#font-preview').css('font-style', 'normal');
}
}
function populateWeights(font) {
var pos = 2;
$('#font-weight option').remove();
$('#font-weight').empty();
$("#font-weight").append(
$("<option></option>", {
"id": "weight-0"
})
.attr("value", "normal")
.text("normal")
);
$.each(font.variants, function(idx, variant) {
if ($.isNumeric(variant)) {
$("#font-weight").append(
$("<option></option>", {
"id": "weight-" + pos++
})
.attr("value", variant)
.text(variant)
);
}
});
$('#font-weight option:first-child').attr("selected", "selected");
}
function searchFonts(txt, cat, variant) {
$('#googleFont option').remove();
$('#googleFont').empty();
var pos=0;
$.each(fonts.items, function(idx, font) {
if ((font.category == cat || cat == "") && (font.family.toLowerCase().indexOf(txt) > -1 || txt == "") && (font.variants.indexOf(variant) > -1 || variant == "")) {
$('#googleFont')
.append(
$("<option></option>", {
"id": "font-" + pos++,
"data-title": font.family,
"data-content": "<b>Type: </b>" + font.category + "<br /><b>Variants: </b><br />" + font.variants.toString().replace(/,/g, ", ") + "<br /><b>Date:</b> " + font.lastModified + "<br /><b>Version:</b> " + font.version
})
.attr("value", font.family)
.text(font.family)
);
}
});
$('#googleFont option:first-child').attr("selected", "selected");
$('#googleFont option:first-child').removeAttr("selected");
}
function getFontTypes(fonts) {
var types = [];
var pos=0;
$.each(fonts.items, function(idx, font) {
if ($.inArray(font.category, types) == -1) {
types.push(font.category);
$('#fontType')
.append(
$("<option></option>", {
"id": "font-" + pos++,
"data-title": font.category
})
.attr("value", font.category)
.text(font.category)
);
}
});
}
function getFontVariants(fonts) {
var variants = [];
var pos = 0;
$.each(fonts.items, function(idx, font) {
$.each(font.variants, function(vIdx, variant) {
if ($.inArray(variant, variants) == -1) {
variants.push(variant);
$('#fontVariant')
.append(
$("<option></option>", {
"id": "variant-" + pos++,
"data-title": variant
})
.attr("value", variant)
.text(variant)
);
}
});
});
}
function fontSupports(font, what, supports) {
var ret = false;
$.each(font[what], function(idx, whatItem) {
if (whatItem.toLowerCase().indexOf(supports.toLowerCase()) != -1) {
ret = true;
}
});
return ret;
}
$(document).ready(function () {
$.ajax({
url: "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyBEWdu2IGQZ2dE2BK8v3BzEe2-Msb2jipA"
}).done(function(data, status) {
fonts = data;
getFontTypes(fonts);
getFontVariants(fonts);
searchFonts("", "", "");
});
$('#googleFont').on('change', function() {
loadFont($(this).val());
});
$("input#fontColor").on("keyup", function() {
$('#font-preview').css('color', $(this).val());
});
$("input#fontBGColor").on("keyup", function() {
$('#font-preview').css('background-color', $(this).val());
});
$('#fontSize').on('keyup', function() {
$('#font-preview').css('font-size', $(this).val()+'px');
});
$('#italic').on('change', function() {
if ($(this).prop('checked') == true) {
$('#font-preview').css('font-style', 'italic');
} else {
$('#font-preview').css('font-style', 'normal');
}
});
$('#addfont').on('click', function() {
$('#Fonts')
.append($("<option></option>")
.attr("value",$('#googleFont').val())
.text($('#googleFont').val()));
});
$('#font-weight').on('change', function() {
$('#font-preview').css('font-weight', $(this).val());
});
$('#fontType').on('change', function() {
var cat = $('#fontType').val();
var txt = $('#searchText').val();
var variant = $('#fontVariant').val();
searchFonts(txt, cat, variant);
});
$('#searchText').on('keyup', function() {
var cat = $('#fontType').val();
var txt = $('#searchText').val();
var variant = $('#fontVariant').val();
searchFonts(txt, cat, variant);
});
$('#fontVariant').on('change', function() {
var cat = $('#fontType').val();
var txt = $('#searchText').val();
var variant = $('#fontVariant').val();
searchFonts(txt, cat, variant);
});
$('#Fonts').selectManager({
dst: '#Fonts'
});
$("#googleFont").on('mouseleave', function(e) {
$('#googleFont').popover('destroy');
});
$("#googleFont").on('mouseover', function(e) {
var $e = $(e.target);
if ($e.is('option')) {
$('#googleFont').popover('destroy');
$("#googleFont").popover({
trigger: 'manual',
placement: 'bottom',
title: $e.attr("data-title"),
content: $e.attr("data-content"),
html: true
}).popover('show');
}
});
});
// jQuery Plugin Boilerplate
// A boilerplate for jumpstarting jQuery plugins development
// version 1.1, May 14th, 2011
// by Stefan Gabos
// remember to change every instance of "pluginName" to the name of your plugin!
(function($) {
// here we go!
$.selectManager = function(element, options) {
// plugin's default options
// this is private property and is accessible only from inside the plugin
var defaults = {
src: null,
dst: null,
max: null,
addBtn: '#addBtn',
removeBtn: '#removeBtn',
upBtn: '#upBtn',
downBtn: '#downBtn',
// if your plugin is event-driven, you may provide callback capabilities
// for its events. execute these functions before or after events of your
// plugin, so that users may customize those particular events without
// changing the plugin's code
onFoo: function() {}
};
// to avoid confusions, use "plugin" to reference the
// current instance of the object
var plugin = this;
// this will hold the merged default, and user-provided options
// plugin's properties will be available through this object like:
// plugin.settings.propertyName from inside the plugin or
// element.data('selectManager').settings.propertyName from outside the plugin,
// where "element" is the element the plugin is attached to;
plugin.settings = {};
var $element = $(element), // reference to the jQuery version of DOM element
element = element; // reference to the actual DOM element
// the "constructor" method that gets called when the object is created
plugin.init = function() {
// the plugin's final properties are the merged default and
// user-provided options (if any)
plugin.settings = $.extend({}, defaults, options);
plugin.settings.form = $(plugin.settings.src).closest("form");
//console.log(plugin.settings.form);
$(plugin.settings.form).on('submit', function() {
$(plugin.settings.dst + ' option').attr('selected', 'selected');
});
if (plugin.settings.src) {
$(plugin.settings.addBtn).bind('click', moveToDst);
$(plugin.settings.src).bind('dblclick', moveToDst);
$(plugin.settings.removeBtn).on('click', moveToSrc);
}
$(plugin.settings.dst).on('dblclick', moveToSrc);
$(plugin.settings.upBtn).on('click', moveUp);
$(plugin.settings.downBtn).on('click', moveDown);
$(plugin.settings.removeBtn).on('click', remove);
};
// public methods
// these methods can be called like:
// plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
// element.data('selectManager').publicMethod(arg1, arg2, ... argn) from outside
// the plugin, where "element" is the element the plugin is attached to;
// a public method. for demonstration purposes only - remove it!
plugin.foo_public_method = function() {
// code goes here
};
// private methods
// these methods can be called only from inside the plugin like:
// methodName(arg1, arg2, ... argn)
// a private method. for demonstration purposes only - remove it!
var foo_private_method = function() {
// code goes here
};
var moveToDst = function() {
if (!plugin.settings.max || $(plugin.settings.dst + ' option').length + $(plugin.settings.src + ' option:selected').length <= plugin.settings.max) {
return !$(plugin.settings.src + ' option:selected').remove().appendTo(plugin.settings.dst);
}
}
var moveToSrc = function() {
return !$(plugin.settings.dst + ' option:selected').remove().appendTo(plugin.settings.src);
}
var moveUp = function() {
$(plugin.settings.dst + ' option:selected:first-child').prop("selected", false);
before = $(plugin.settings.dst + ' option:selected:first').prev();
$(plugin.settings.dst + ' option:selected').detach().insertBefore(before);
}
var moveDown = function() {
$(plugin.settings.dst + ' option:selected:last-child').prop("selected", false);
after = $(plugin.settings.dst + ' option:selected:last').next();
$(plugin.settings.dst + ' option:selected').detach().insertAfter(after);
}
var remove = function() {
var action_list = $(plugin.settings.dst + ' option:selected').remove();
}
// fire up the plugin!
// call the "constructor" method
plugin.init();
};
// add the plugin to the jQuery.fn object
$.fn.selectManager = function(options) {
// iterate through the DOM elements we are attaching the plugin to
return this.each(function() {
// if plugin has not already been attached to the element
if (undefined == $(this).data('selectManager')) {
// create a new instance of the plugin
// pass the DOM element and the user-provided options as arguments
var plugin = new $.selectManager(this, options);
// in the jQuery version of the element
// store a reference to the plugin object
// you can later access the plugin and its methods and properties like
// element.data('selectManager').publicMethod(arg1, arg2, ... argn) or
// element.data('selectManager').settings.propertyName
$(this).data('selectManager', plugin);
}
});
};
})(jQuery);