<h2>Cytoplasm Settings</h2>
<form id="site_settings_form" action="" method="post">
<p class="callback_message" id="success_message"></p>
<p class="callback_message" id="status_message"></p>
<p class="callback_message" id="error_message"></p>
<table id="layout_settings_table" class='cytoTable' cellpadding=0 cellspacing=0>
<tr><td class='headercell' colspan=2><h3>General</h3></td></tr>
<tr>
<td class='labelcell'>Layout Mode:</td>
<td>
<input type="radio" name="layout_mode" value="fluid" data-label="Fluid" class="cytoRadio" />
<input type="radio" name="layout_mode" value="boxed" data-label="Boxed" />
</td>
</tr>
<tr>
<td class='labelcell'>Layout Padding:</td>
<td><input type="hidden" name="layout_padding" class="cytoSlider" value="20" data-max="200" data-unit="px" data-label="Amount of padding for your content" /></td>
</tr>
<tr>
<td class='labelcell'>jQuery-UI Theme:</td>
<td>
<select name="layout_jqueryui_theme" class="cytoSelect">
<option value="ui-lightness">UI lightness</option>
<option value="ui-darkness">UI darkness</option>
<option value="smoothness">Smoothness</option>
<option value="start">Start</option>
<option value="redmond">Redmond</option>
<option value="sunny">Sunny</option>
<option value="overcast">Overcast</option>
<option value="le-frog">Le Frog</option>
<option value="flick">Flick</option>
<option value="pepper-grinder">Pepper Grinder</option>
<option value="eggplant">Eggplant</option>
<option value="dark-hive">Dark Hive</option>
<option value="cupertino">Cupertino</option>
<option value="south-street">South Street</option>
<option value="blitzer">Blitzer</option>
<option value="humanity">Humanity</option>
<option value="hot-sneaks">Hot Sneaks</option>
<option value="excite-bike">Excite Bike</option>
<option value="vader">Vader</option>
<option value="dot-luv">Dot Luv</option>
<option value="mint-choc">Mint Choc</option>
<option value="black-tie">Black Tie</option>
<option value="trontastic">Trontastic</option>
<option value="swanky-purse">Swanky Purse</option>
</select>
</td>
</tr>
<tr><td class='headercell' colspan=2><h3>Logo</h3></td></tr>
<tr>
<td class='labelcell'>Logo Image:</td>
<td><input type="file" name="logo_image" class="cytoUpload" /></td>
</tr>
<tr>
<td class='labelcell'>Logo Position:</td>
<td>
<input type="radio" name="logo_position" data-label="Badge" value="badge" class="cytoRadio" />
<input type="radio" name="logo_position" data-label="Inside NavBar" value="nav" />
<input type="radio" name="logo_position" data-label="Custom..." value="custom" />
<div id="logo_position_custom_settings">
<h4>Advanced Logo Settings</h4>
<div class="inline-input">
<label for="logo_position_mode">Logo Position Mode:</label>
<input type="radio" name="logo_position_mode" data-label="Static" value="static" class="cytoRadio" />
<input type="radio" name="logo_position_mode" data-label="Relative" value="relative" />
<input type="radio" name="logo_position_mode" data-label="Absolute" value="absolute" />
<input type="radio" name="logo_position_mode" data-label="Fixed" value="fixed" />
</div>
<input type="hidden" name="logo_x_offset" class="cytoSlider" data-label="Logo X Offset" data-unit="px" />
<input type="hidden" name="logo_y_offset" class="cytoSlider" data-label="Logo Y Offset" data-unit="px" />
</div>
</td>
</tr>
<tr>
<td class='labelcell'>Logo Side:</td>
<td>
<input type="radio" name="logo_side" data-label="Left" value="left" class="cytoRadio" />
<input type="radio" name="logo_side" data-label="Center" value="center" />
<input type="radio" name="logo_side" data-label="Right" value="right" />
</td>
</tr>
<tr><td class='headercell' colspan=2><h3>Navigation</h3></td></tr>
<tr>
<td class='labelcell'>Alignment:</td>
<td>
<input type="radio" name="nav_side" data-label="Left" value="left" class="cytoRadio" />
<input type="radio" name="nav_side" data-label="Center" value="center" />
<input type="radio" name="nav_side" data-label="Right" value="right" />
</td>
</tr>
<tr>
<td class='labelcell'>Background:</td>
<td>
<div class="inline-input">
<input type="radio" name="nav_background_mode" data-label="Transparent" value="transparent" class="cytoRadio" />
<input type="radio" name="nav_background_mode" data-label="Color..." value="color" />
<input type="radio" name="nav_background_mode" data-label="Gradient..." value="gradient" />
<input type="radio" name="nav_background_mode" data-label="Image..." value="image" />
</div>
<div class="inline-input nav-mode-wrapper" data-mode="color">
<input type="colorpicker" name="nav_background_color" class="cytoColorPicker" />
</div>
<div class="inline-input nav-mode-wrapper" data-mode="gradient">
<input type="colorpicker" name="nav_background_gradient_start" class="cytoColorPicker" />
<input type="colorpicker" name="nav_background_gradient_stop" class="cytoColorPicker" />
</div>
<div class="inline-input nav-mode-wrapper" data-mode="image">
<input type="file" name="nav_background_file" class="cytoUpload" />
</div>
</td>
</tr>
<tr><td class='headercell' colspan=2><h3>Fonts</h3></td></tr>
<tr>
<td class='labelcell'>Font Directory:</td>
<td>
<input type="radio" name="fonts_directory" data-label="Standard Web Fonts" value="standard" data-exclude="true" class="cytoRadio" />
<input type="radio" name="fonts_directory" data-label="Font Squirrel API" value="fontsquirrel" data-exclude="true" />
<input type="radio" name="fonts_directory" data-label="Google Web Fonts" value="googlewebfonts" data-exclude="true" />
</td>
</tr>
<tr>
<td class='labelcell'>Font Family:</td>
<td>
<select name="fonts_family" id="fontfamilyselect" data-exclude="true" class="cytoSelect"></select>
<button id="font_import_button" class="cytoButton large">Import Font Family</button>
</td>
</tr>
<tr><td class='infocell' colspan=2>Select individual fonts below if desired.</td></tr>
<% ['Light','Regular','Bold'].each do |style| %>
<tr>
<td class='labelcell'><%=style%>:</td>
<td>
<a href="#" target="_blank" class="font-preview"><img src="" style="display:none" /></a>
<select data-exclude="true" name="fonts_<%=style.downcase%>_family" class="ind_font_fam_select cytoSelect">
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="Arial Black, Gadget, sans-serif">Arial Black</option>
<option value="Comic Sans MS, cursive">Comic Sans MS</option>
<option value="Courier New, monospace">Courier New</option>
<option value="Georgia, serif">Georgia</option>
<option value="Impact, Charcoal">Impact</option>
<option value="Lucida Console, Monaco, monospace">Lucida Console</option>
<option value="Lucida Sans Unicode, Lucida Grande, sans-serif">Lucida Sans Unicode</option>
<option value="Palatino Linotype, Book Antiqua, Palatino, serif">Palatino Linotype</option>
<option value="Tahoma, Geneva, sans-serif">Tahoma</option>
<option value="Times New Roman, Times, serif">Times New Roman</option>
<option value="Trebuchet MS, sans-serif">Trebuchet MS</option>
<option value="Verdana, Geneva, sans-serif">Verdana</option>
</select>
<select name="fonts_<%=style.downcase%>" id="fontselect_<%=style.downcase%>" class="ind_font_select cytoSelect" data-style="<%=style%>"></select>
</td>
</tr>
<% end %>
<tr>
<td class='labelcell'>Font Sizes:</td>
<td>
<input type="hidden" name="fonts_sizes_huge" class="cytoSlider" data-label="Huge" data-unit="px" />
</td>
</tr>
<tr><td class='headercell' colspan=2><h3>Color Palette</h3></td></tr>
<% ['Background','Text','Accent'].each do |color| %>
<tr>
<td class='labelcell'><%=color%> Color:</td>
<td><input type="colorpicker" name="colors_<%=color.downcase%>" class="cytoColorPicker" /></td>
</tr>
<% end %>
<tr><td class='headercell' colspan=2><h3>Table Settings</h3></td></tr>
<tr>
<td class='labelcell'>Background Colors:</td>
<td>
<input type="hidden" name="colors_table_background_offset" class="cytoSlider" data-label="Background Offset" data-unit="%" data-min=-100 data-max=100 />
<input type="hidden" name="colors_table_opacity_offset" class="cytoSlider" data-label="Table Opacity" data-unit="%" />
<input type="hidden" name="colors_table_border_offset" class="cytoSlider" data-min=-100 data-max=100 data-label="Border Offset" data-unit="%" />
</td>
</tr>
<tr>
<td class='labelcell'>Button Settings:</td>
<td>
<input type="hidden" name="button_gradient_amount" class="cytoSlider" data-label="Gradient Amount" data-unit="%" />
<input type="hidden" name="button_border_offset" class="cytoSlider" data-label="Border Offset" data-unit="%" data-min=-100 data-max=100 />
</td>
</tr>
<tr><td colspan=2><button class="cytoButton large">Save Settings</button></td></tr>
</table>
</form>
<script type="text/javascript">
(function($){
$.Cytoplasm("ready",function(){
// Get data about what we're editing from PHP
var _editing = "<%=params[:editing]%>";
// Layout
// Layout Mode
$('input[name=layout_mode]').cytoRadio("value",$.Cytoplasm("vars","layout.mode"));
// Main Content Padding
$('input[name=layout_padding]').cytoSlider("options",{widget:{slider:{options:{change:function(e,ui){
$('#main_content').css("padding",$(this).slider("value"));
setTimeout(function(){$(window).trigger("resize");},1000);
}}}}});
// jQuery UI Theme
$('select[name=layout_jqueryui_theme]').cytoSelect("value",$.Cytoplasm("conf","jqueryui.theme"));
// Logo
// Logo Position
var top;
var custom_settings = $('#logo_position_custom_settings').hide().children('h4:first-child').css({margin:"10px 0px",padding:0}).end();
$('input[name=logo_position]').cytoRadio("options",{
events:{
change:function(e){
switch ($(this).cytoRadio("value")) {
case "badge":
top = 10;
if (custom_settings.is(':visible')) custom_settings.hide(400);
break;
case "nav":
top = -66;
if (custom_settings.is(':visible')) custom_settings.hide(400);
break;
case "custom":
custom_settings.show(400,function(){$('input[name=logo_position_mode]').cytoRadio("refresh");});
break;
default:return false;
}
$('#logo').css({top:top});
}
}
}).cytoRadio("value",$.Cytoplasm("vars","layout.header.logo.position"));
$('input[name=logo_position_mode]').cytoRadio("options",{events:{change:function(e){$('#logo').css('position',$(this).cytoRadio('value'));}}}).cytoRadio("value",$.Cytoplasm("vars","layout.header.logo.position"));
$('input[name=logo_x_offset]').cytoSlider("value",$.Cytoplasm("vars","layout.header.logo.x"));
$('input[name=logo_y_offset]').cytoSlider("value",$.Cytoplasm("vars","layout.header.logo.y"));
// Logo Side
$('input[name=logo_side]').cytoRadio("options",{
events:{
change:function(e){
switch ($(this).cytoRadio("value")) {
case "left":
$('#logo').css({left:10,right:''});
break;
case "center":
$('#logo').css({left:($(window).width()/2)-($('#logo').width()/2),right:''});
break;
case "right":
$('#logo').css({right:10,left:''});
break;
default:return false;
}
}
}
}).cytoRadio("value",$.Cytoplasm("vars","layout.header.logo.align"));
// Offset sliders
$('input[name=logo_x_offset]').cytoSlider("options",{
widget:{
slider:{
options:{
min:-($(window).width()-$('#logo').outerWidth(true)),
max:($(window).width()-$('#logo').outerWidth(true))
}
}
},
events:{
change:function(e){
var side = $('input[name=logo_side]').cytoRadio("value");
var invert = (side == "right") ? -1 : 1;
$('#logo').css(side,parseInt($(this).val())*invert);
}
}
});
$('input[name=logo_y_offset]').cytoSlider("options",{
widget:{
slider:{
options:{
min:-($(window).height()-$('#logo').outerHeight(true)),
max:($(window).height()-$('#logo').outerHeight(true))
}
}
},
events:{change:function(e){$('#logo').css("top",$(this).val());}}
});
// Nav
// Nav Side
$('input[name=nav_side]').cytoRadio("options",{events:{change:function(e){$('header > nav > ul').css("text-align",$(this).cytoRadio("value"));}}}).cytoRadio("value",$.Cytoplasm("vars","layout.header.nav.align"));
// Nav Background
$('input[name=nav_background_mode]').cytoRadio("options",{
events:{
change:function(e){
var $this = $(this);
var showIt = function(){$(".nav-mode-wrapper[data-mode='"+$this.cytoRadio("value")+"']").show(400,function(){$(this).find('input[type=colorpicker]').cytoColorPicker("resize");});};
if ($('.nav-mode-wrapper:visible').length) $('.nav-mode-wrapper:visible').hide(400,showIt);
else showIt();
}
}
}).cytoRadio("value",$.Cytoplasm("vars","layout.header.nav.background"));
$('input[name=nav_background_color],input[name=nav_background_gradient_start],input[name=nav_background_gradient_stop]').cytoColorPicker("options",{widget:{wrapper:{css:{'margin-top':10}}}});
$('input[name=nav_background_color]').cytoColorPicker("value",$.Cytoplasm("vars","layout.header.nav.background"));
// Fetch fonts
$.cytoAjax("/cytoplasm/fonts/fetch_all",function(data){
console.log(data);
// Directory select
var fds = $('input[name=fonts_directory]');
var ffs = $('#fontfamilyselect');
var iffs = $('.ind_font_fam_select');
var ifs = $('.ind_font_select');
/*
// Fetch family details
$.cytoAjax("settings/fs_fetch_family.php",{family:f.family_urlname},function(data){
ifs.each(function(){
var select = $(this);
// Populate list
var fam = {};
$.each(data.family,function(i,member){
fam[member.fontface_name] = member;
select.append($('<option />').val(member.fontface_name).html(member.fontface_name+" ("+member.style_name+")"));
});
// Try to select defaults
var font = _page.less["fonts_"+select.data('style').toLowerCase()]
if (font.charAt(0)=='"') font = font.slice(1,-1);
if (fam[font] != null) select.val(font);
else $.each(fam,function(ffname,member){
if (member.style_name.indexOf(select.data('style'))>-1 || member.style_name.indexOf(select.data('style').toLowerCase())>-1) {
select.val(ffname);
return false;
}
});
// Set preview image and refresh cytoSelect
select.parent().siblings('a.font-preview').css({background:'white',display:'block',width:"100%","text-align":"center","padding-top":5,"border-top-left-radius":5,"border-top-right-radius":5,"box-shadow":"0px 0px 10px rgba(0,0,0,0.5)"}).children('img').attr("src",fam[select.val()].listing_image).show();
select.cytoSelect("refresh").data('font',fam[select.val()]);
});
});
*/
fds.cytoRadio("value",$.Cytoplasm("conf","fontloader.directory")).cytoRadio("options",{
events:{
change:$.debounce(100,true,function(e){
var fonts = {};
var imported = {};
switch ($(this).cytoRadio("value")) {
case "fontsquirrel":
if (!$('#font_import_button').is(':visible')) $('#font_import_button').show(400);
var importedFamily = {};
$.each(data.fontsquirrel,function(fam,f){fonts[fam] = f.family_name;});
if (data.imported.length>0) {
$.each(data.imported,function(fam,f){imported[fam] = fam;});
iffs.cytoSelect("update",imported);
}
break;
case "googlewebfonts":
if ($('#font_import_button').is(':visible')) $('#font_import_button').hide(400);
$.each(data.googlewebfonts,function(fam,f){fonts[fam] = fam;});
break;
default:return false;
}
ffs.cytoSelect("update",fonts);
})
}
});
ffs.cytoSelect("options",{
events:{
change:function(cy,e){
var dir = fds.cytoRadio("value");
var f = data[dir][$(this).cytoSelect("value")];
if (f!=null) switch (dir) {
case "fontsquirrel":
// Check if font has already been imported
if (data.imported.length>0 && data.imported[f.family_urlname] != null) $('#font_import_button').addClass('active').html("Font Family Imported");
else $('#font_import_button').removeClass('active').html("Import Font Family");
break;
case "googlewebfonts":
break;
}
}
}
});
// Font Import Button
$('#font_import_button').css({"margin-top":10}).click(function(e){
e.preventDefault();
var $this = $(this);
var f = data[fds.cytoRadio("value")][ffs.cytoSelect("value")];
if (!$this.hasClass('active')) {
// Import font
$.cytoAjax("settings/fs_import.php",{family:f},function(data){
$.cytoAjaxResponse('Font "'+f.family_name+'" has been imported successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
$this.addClass('active').html("Font Family Imported");
});
} else {
// Remove font
if (confirm("Are you sure you want to remove this font from your fonts library?")) $.cytoAjax("settings/fs_remove.php",{family:f},function(data){
$.cytoAjaxResponse('Font "'+f.family_name+'" has been removed successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
$this.removeClass('active').html("Import Font Family");
});
}
});
// Individual font selects
$('.font-preview').css({background:'white',display:'block',width:"100%","text-align":"center","padding-top":5,"border-top-left-radius":5,"border-top-right-radius":5,"box-shadow":"0px 0px 10px rgba(0,0,0,0.5)"});
iffs.cytoSelect("options",{
widget:{
valueButton:{
css:{
'border-top-left-radius':0,
'border-bottom-left-radius':0
}
},
arrowButton:{
css:{
'border-top-right-radius':0,
'border-bottom-right-radius':0
}
}
},
events:{
change:function(cy,e){
if (data.imported[$(this).cytoSelect("value")] == undefined) return;
var subsets = {};
var fs = $('select[name="'+$(this).attr('name').split("_").slice(0,-1).join("_")+'"]');
$.each(data.imported[$(this).cytoSelect("value")],function(i,f){subsets[f.fontface_name] = f.fontface_name;});
fs.cytoSelect("update",subsets).cytoSelect("value",$.Cytoplasm("vars","fonts.faces."+fs.data('style').toLowerCase()));
}
}
});
ifs.cytoSelect("options",{
widget:{
valueButton:{css:{'border-top-left-radius':0}},
arrowButton:{css:{'border-top-right-radius':0}},
optionsList:{
li:{
hover:function(cy,e){
var $this = cy.widget.wrapper.element.children('select.cytoSelect');
var fs = $('select[name="'+$this.attr('name')+'_family"]');
$(this).css({background:$.Cytoplasm("vars","colors.global.accent")});
if (data.imported.length>0) {
var font = data.imported[fs.cytoSelect("value")][$this.cytoSelect("value")];
cy.widget.wrapper.element.siblings('a.font-preview').attr('href',"http://www.fontsquirrel.com/fonts/"+font.family_urlname).children('img').attr("src",font.listing_image).show();
} else {
}
}
}
}
},
events:{
change:function(cy,e){
var fs = $('select[name="'+$(this).attr('name')+'_family"]');
if (data.imported>0) {
var font = data.imported[fs.cytoSelect("value")][$(this).cytoSelect("value")];
cy.widget.wrapper.element.siblings('a.font-preview').attr('href',"http://www.fontsquirrel.com/fonts/"+font.family_urlname).children('img').attr("src",font.listing_image).show();
} else {
}
}
}
});
});
// Font size sliders
$.each(['fonts_small','fonts_normal','fonts_huge'],function(i,prop){$('input[name='+prop+']').cytoSlider("options",{events:{change:function(cy){cy.widget.label.element.css("font-size",$(this).val());}}});});
// Color Pickers
var colorTweak = function(color,h,s,l,a) {
if (color==null || h==null) return color;
if (s==null) s=0;
if (l==null) l=0;
if (a==null) a=1;
color = color.hue(color.hue()+h).saturation(color.saturation()+s).lightness(color.lightness()+l).alpha(a);
return color.toHslaString();
};
var percentToDecimal = function(percent) {return parseInt(percent)/100;};
var layoutColorUpdate = function() {
var color = $('input[name=colors_background]').val();
try {
color = $.Color(color);
var l = (color.lightness!=null) ? parseFloat(color.lightness()) : 0;
$('body').css({
"background-color":color,
color:$('input[name=colors_text]').val()
});
$('.formTable td').css({
"background-color":colorTweak(color,0,0,percentToDecimal($('input[name=colors_table_background_offset]').val()),percentToDecimal($('input[name=colors_table_opacity_offset]').val())),
"border-color":colorTweak(color,0,0,percentToDecimal($('input[name=colors_table_border_offset]').val()))
});
/*$('button').css({
"border-color":"1px solid "+((l<0.5)?colorTweak(color,0,0,percentToDecimal($('input[name=button_border_offset]').val())):"#333333"),
"background":"linear-gradient(to bottom,"+colorTweak(color,0,0,percentToDecimal($('input[name=button_gradient_amount]').val()))+" 0%,"+colorTweak(color,0,0,-percentToDecimal($('input[name=button_gradient_amount]').val()))+" 100%) no-repeat scroll 0 0 transparent",
"color":((l<0.5)?"white":"black")
});*/
} catch (e) {
console.warn("There was an error updating the layout! "+e);
return false;
}
};
$('input[name=colors_background]').cytoColorPicker("value",$.Cytoplasm("vars","colors.global.background"));
$('input[type=colorpicker]').cytoColorPicker("options",{events:{change:layoutColorUpdate}});
// Set up sliders
$.each(['colors_table_background_offset','colors_table_opacity_offset','colors_table_border_offset','button_gradient_amount','button_border_offset'],function(i,prop){$('input[name="'+prop+'"]').cytoSlider("options",{events:{change:layoutColorUpdate}});});
// Form Submission
$('#site_settings_form').submit(function(e){
e.preventDefault();
$.cytoAjax("settings/save_layout.php",{form:$(':input:not([data-exclude=true])',this).serializeArray()},function(data){
$.cytoAjaxResponse("Your settings were saved successfully.<br /><a href='dash'>Return to dashboard</a>");
});
});
});
})(jQuery);
</script>