code/franz
Archived
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finalized the layout color applying part, at least in terms of a POC. Now we have a solid base to work on auto-applying kickass color schemes that we build from the picture.

Browse source
This commit is contained in:
Veno Server 2009-08-26 03:12:25 -05:00
parent eebe7d1681
commit 18c87c2c16
3 changed files with 147 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

85
index.php
View file

@ -8,7 +8,14 @@
<script type="text/javascript" src="js/franz.js"></script>
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript">
var img_input;
var img_input,
layoutMods,
selectedColor,
previewMainBG,
previewBannerBG,
previewContentBG,
previewSidebarBG,
previewFooterBG;
/* Oh god a global function wrrrryyyy */
function lol() {
@ -18,6 +25,12 @@
}
$(document).ready(function() {
layoutMods = $("#layoutMods");
previewMainBG = $("#testLayout");
previewBannerBG = $("#testBanner");
previewContentBG = $("#testContent");
previewSidebarBG = $("#testSidebar");
previewFooterBG = $("#testFooter");
franz.init("lol");
img_input = document.getElementById("img_input");
@ -75,16 +88,72 @@
return false;
});
$(".color_boxd").live("click", function() {
// It's 4AM, and I'm tired. I'm not building a damn regular expression, so yeah, we'll multiple .replace() ;P
alert("This hex color: " + franz.RGBtoHex($(this)[0].style.backgroundColor.replace(")", "").replace("rgb(", "").replace(" ", "").split(",")));
$("#setMainBG").click(function() {
previewMainBG.css({"background-color": selectedColor});
return false;
});
$("#setHeaderBG").click(function() {
previewBannerBG.css({"background-color": selectedColor});
return false;
});
$("#setContentBG").click(function() {
previewContentBG.css({"background-color": selectedColor});
return false;
});
$("#setFooterBG").click(function() {
previewFooterBG.css({"background-color": selectedColor});
return false;
});
$("#setSidebarBG").click(function() {
previewSidebarBG.css({"background-color": selectedColor});
return false;
});
$(".color_boxd").live("mousedown", function(e) {
// Yes, this function is horribly un-optimized. It's 4AM, we'll clean it up later. ;P
selectedColor = franz.RGBtoHex($(this)[0].style.backgroundColor.replace(")", "").replace("rgb(", "").replace(" ", "").split(","));
var coords = {x: e.pageX, y: e.pageY};
layoutMods.hide();
layoutMods.css({"top": coords.y + "px", "left": coords.x + "px"});
layoutMods.fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="layoutMods">
<a href="#" id="setMainBG" title="Set as background color">Set as Main Background</a>
<a href="#" id="setHeaderBG" title="Set as Header BG">Set as Header Background</a>
<a href="#" id="setContentBG" title="Set as Content BG">Set as Content Background</a>
<a href="#" id="setSidebarBG" title="Set as Sidebar BG">Set as Sidebar Background</a>
<a href="#" id="setFooterBG" title="Set as Footer BG">Set as Footer Background</a>
</div>
<div id="testLayout">
<div id="testBanner">
This is an example layout
</div>
<div id="testContent">
<p>
This is an example layout to test colors with.
</p>
<p>
Click on a color to set it for one of these layout sections!
</p>
</div>
<div id="testSidebar">
Sidebar
</div>
<div id="testFooter">
&copy; lol enterprises
</div>
</div>
<h1>Franz - client side color swatches</h1>
<div id="container_top">
@ -113,12 +182,6 @@
</div>
<!-- might log colors later on
<ul id="logHSV">
<li><p id="logHue">Hue: </p></li>
<li><p id="logSat">Sat: </p></li>
<li><p id="logVal">Val: </p></li>
</ul> -->
</div>
<div id="options">