diff --git a/css/main.css b/css/main.css index 248c644..926e352 100644 --- a/css/main.css +++ b/css/main.css @@ -9,3 +9,21 @@ body { background-image: url("../images/wool.jpg"); } + +#build { + position: fixed; + border: 1px, solid , black; + border: solid; + border-color: white; + background-image: url(../images/fliesen.png); + overflow-y: auto; +} + +#info { + position: fixed; + border: 1px, solid , black; + border: solid; + border-color: white; + background-image: url(../images/fliesen.png); + overflow-y: auto; +} diff --git a/index.html b/index.html index 86b43f4..f948f34 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ + @@ -17,6 +18,18 @@ +
+ + + + + + + +
+
+ +
diff --git a/js/libs/copyCSS.js b/js/libs/copyCSS.js new file mode 100644 index 0000000..efa71ce --- /dev/null +++ b/js/libs/copyCSS.js @@ -0,0 +1,124 @@ +/* +Copyright 2014 Mike Dunn +http://upshots.org/ +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +*/ +(function($){ + + $.fn.getStyles = function(only, except) { + + // the map to return with requested styles and values as KVP + var product = {}; + + // the style object from the DOM element we need to iterate through + var style; + + // recycle the name of the style attribute + var name; + + // if it's a limited list, no need to run through the entire style object + if (only && only instanceof Array) { + + for (var i = 0, l = only.length; i < l; i++) { + // since we have the name already, just return via built-in .css method + name = only[i]; + product[name] = this.css(name); + } + + } else { + + // prevent from empty selector + if (this.length) { + + // otherwise, we need to get everything + var dom = this.get(0); + + // standards + if (window.getComputedStyle) { + + // convenience methods to turn css case ('background-image') to camel ('backgroundImage') + var pattern = /\-([a-z])/g; + var uc = function (a, b) { + return b.toUpperCase(); + }; + var camelize = function(string){ + return string.replace(pattern, uc); + }; + + // make sure we're getting a good reference + if (style = window.getComputedStyle(dom, null)) { + var camel, value; + // opera doesn't give back style.length - use truthy since a 0 length may as well be skipped anyways + if (style.length) { + for (var i = 0, l = style.length; i < l; i++) { + name = style[i]; + camel = camelize(name); + value = style.getPropertyValue(name); + product[camel] = value; + } + } else { + // opera + for (name in style) { + camel = camelize(name); + value = style.getPropertyValue(name) || style[name]; + product[camel] = value; + } + } + } + } + // IE - first try currentStyle, then normal style object - don't bother with runtimeStyle + else if (style = dom.currentStyle) { + for (name in style) { + product[name] = style[name]; + } + } + else if (style = dom.style) { + for (name in style) { + if (typeof style[name] != 'function') { + product[name] = style[name]; + } + } + } + } + } + + // remove any styles specified... + // be careful on blacklist - sometimes vendor-specific values aren't obvious but will be visible... e.g., excepting 'color' will still let '-webkit-text-fill-color' through, which will in fact color the text + if (except && except instanceof Array) { + for (var i = 0, l = except.length; i < l; i++) { + name = except[i]; + delete product[name]; + } + } + + // one way out so we can process blacklist in one spot + return product; + + }; + + // sugar - source is the selector, dom element or jQuery instance to copy from - only and except are optional + $.fn.copyCSS = function(source, only, except) { + var styles = $(source).getStyles(only, except); + this.css(styles); + + return this; + }; + +})(jQuery); diff --git a/js/resize.js b/js/resize.js index 1757269..acd55b9 100644 --- a/js/resize.js +++ b/js/resize.js @@ -9,4 +9,15 @@ $(document).ready(function() { function style() { $('#screen').css("margin-left", (window.innerWidth - 1200) / 2); $('#screen').css("margin-top", (window.innerHeight - 576) / 3); + $('#build').css("width", (1200/2)-8) + var topp = $('#screen').css("margin-top").substring(0,$('#screen').css("margin-top").length-2) + $('#build').css("height", window.innerHeight-topp-576-32) + $('#build').css("margin-left", $('#screen').css("margin-left")); + $('#build').css("margin-top", (parseInt(topp)+576+16)); + $('#info').copyCSS('#build') + $('#info').css("margin-left", pxToInt($('#screen').css("margin-left"))+16+(1200/2)-8) +} + +function pxToInt(px){ + return parseInt(px.substring(0,px.length-2)) } diff --git a/js/util.js b/js/util.js index d0fbd07..cb63902 100644 --- a/js/util.js +++ b/js/util.js @@ -22,12 +22,12 @@ var directions = { } //Umrechnung von Grad zu Bogenmaß -var TO_RADIANS = Math.PI/180; +var TO_RADIANS = Math.PI / 180; function drawRotatedImage(image, x, y, angle) { - ctx.save(); - ctx.translate(x, y); - ctx.rotate(angle * TO_RADIANS); - ctx.drawImage(image, -(image.width/2), -(image.height/2)); - ctx.restore(); + ctx.save(); + ctx.translate(x, y); + ctx.rotate(angle * TO_RADIANS); + ctx.drawImage(image, -(image.width / 2), -(image.height / 2)); + ctx.restore(); }