Skip to content

Instantly share code, notes, and snippets.

@hhutch

hhutch/core.cljs

Created July 28, 2011 07:53
Show Gist options
  • Save hhutch/1111173 to your computer and use it in GitHub Desktop.
Save hhutch/1111173 to your computer and use it in GitHub Desktop.
Download ZIP
Goofing around with clojurescript. I actually forgot I was "writing javascript" at one point.
Raw
core.cljs
(ns cancan.core
(:require
[goog.dom :as dom]
[goog.graphics :as graphics]
[goog.graphics.Path :as Path]))
(defn style-elem
"Style an element"
[element attrs]
(dom/setProperties element
(.strobj {"style" (apply str (interpose ";"
(map #(str (name %1) ":" %2) (keys attrs) (vals attrs))))})))
(defn make-rotated-child
"create a child with the specified width, height and rotation"
[parent width height]
(let [horizon (dom/createDom "div")
content (dom/createDom "div")
greater-measurement (if (> width height) height width)]
(style-elem horizon {:width "100%" :height "1px" :overflow "visible" :display "block" :visibility "visible"
:top "50%" :left "0px" :position "absolute"})
(style-elem content {:width (str width "px")
:height (str height "px")
:margin-left "auto" :margin-right "auto"
:margin-top (str "-" (/ height 2) "px")
:background "green"
:-moz-box-shadow "4px 4px 7px #ffffff"
:-webkit-box-shadow "4px 4px 7px #ffffff"
:box-shadow "4px 4px 7px #ffffff"
:-moz-transform "rotate(2deg)" ; FF3.5+
:-o-transform "rotate(2deg)" ; Opera 10.5
:-webkit-transform "rotate(2deg)" ; Saf3.1+, Chrome
:-ms-transform "rotate(2deg)" ; IE9
:transform "rotate(2deg)"
:filter (str "progid:DXImageTransform.Microsoft.Matrix("
"M11=0.9993908270190958, M12=-0.03489949670250097, M21=0.03489949670250097, "
"M22=0.9993908270190958, sizingMethod='auto expand')")
:zoom "1"})
(dom/appendChild horizon content)
(dom/appendChild parent horizon)
(if (< 0 (- greater-measurement 70))
(make-rotated-child content (- width 70) (- height 70)))))
(let [window (dom/getWindow)
viewport-size (dom/getViewportSize window)
body (dom/getElement "body")]
(make-rotated-child body (- (.width viewport-size) 70) (- (.height viewport-size) 70)))
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#body { display: block; position: absolute; width: 100%; height: 100%; }
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="body"></div>
<script src="out/goog/base.js" type="text/javascript"></script>
<script src="cancan.js" type="text/javascript"></script>
<script type="text/javascript">
goog.require('cancan.core');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment