diff --git a/css/fonts.less b/css/fonts.less new file mode 100644 index 0000000..e92a90b --- /dev/null +++ b/css/fonts.less @@ -0,0 +1,16 @@ +@font-face { + font-family: 'MozTT-Regular'; + src: url('fonts/MozTT-Regular.ttf'); +} +@font-face { + font-family: 'MozTT-Light'; + src: url('fonts/MozTT-Light.ttf'); +} +@font-face { + font-family: 'MozTT-Medium'; + src: url('fonts/MozTT-Medium.ttf'); +} +@font-face { + font-family: 'MozTT-Bold'; + src: url('fonts/MozTT-Bold.ttf'); +} diff --git a/css/fonts/MozTT-Bold.ttf b/css/fonts/MozTT-Bold.ttf new file mode 100644 index 0000000..8ad5fab Binary files /dev/null and b/css/fonts/MozTT-Bold.ttf differ diff --git a/css/fonts/MozTT-Light.ttf b/css/fonts/MozTT-Light.ttf new file mode 100644 index 0000000..0553c17 Binary files /dev/null and b/css/fonts/MozTT-Light.ttf differ diff --git a/css/fonts/MozTT-Medium.ttf b/css/fonts/MozTT-Medium.ttf new file mode 100644 index 0000000..91466be Binary files /dev/null and b/css/fonts/MozTT-Medium.ttf differ diff --git a/css/fonts/MozTT-Regular.ttf b/css/fonts/MozTT-Regular.ttf new file mode 100644 index 0000000..e74e0b2 Binary files /dev/null and b/css/fonts/MozTT-Regular.ttf differ diff --git a/css/imgs/bg_overlay_pressed_1.png b/css/imgs/bg_overlay_pressed_1.png new file mode 100644 index 0000000..753e953 Binary files /dev/null and b/css/imgs/bg_overlay_pressed_1.png differ diff --git a/css/imgs/bg_overlay_pressed_2.png b/css/imgs/bg_overlay_pressed_2.png new file mode 100644 index 0000000..8db4bbf Binary files /dev/null and b/css/imgs/bg_overlay_pressed_2.png differ diff --git a/css/imgs/div_line_lg_black.png b/css/imgs/div_line_lg_black.png new file mode 100644 index 0000000..2fd663e Binary files /dev/null and b/css/imgs/div_line_lg_black.png differ diff --git a/css/imgs/div_line_sm_black.png b/css/imgs/div_line_sm_black.png new file mode 100644 index 0000000..c1b4c09 Binary files /dev/null and b/css/imgs/div_line_sm_black.png differ diff --git a/css/imgs/download.png b/css/imgs/download.png new file mode 100644 index 0000000..897c9f2 Binary files /dev/null and b/css/imgs/download.png differ diff --git a/css/imgs/header_bg_black.png b/css/imgs/header_bg_black.png new file mode 100644 index 0000000..5670021 Binary files /dev/null and b/css/imgs/header_bg_black.png differ diff --git a/css/imgs/settings.png b/css/imgs/settings.png new file mode 100644 index 0000000..6792c46 Binary files /dev/null and b/css/imgs/settings.png differ diff --git a/css/main.less b/css/main.less index a6fcb61..75e4be2 100644 --- a/css/main.less +++ b/css/main.less @@ -1,6 +1,10 @@ +@import 'fonts'; + + html, body { margin: 0; font-size: 10px; + overflow: hidden; } *::-moz-focus-inner { @@ -10,37 +14,161 @@ html, body { outline: none; } +.hidden { + display: none; + visibility: none; +} + div#container { position: absolute; } canvas { - border: 1px solid gray; position: absolute; top: 0; left: 0; } +.separator { + display: block; + height: 4.8rem; + width: 0.1rem; + &.long { + background: url('imgs/div_line_lg_black.png'); + } + &.small { + background: url('imgs/div_line_sm_black.png'); + } + &.left { + float: left; + } + &.right { + float: right; + } + &.menu { + position: relative; + left: -3rem; + } +} + +.overlay { + z-index: 9999; + position: absolute; + left: 0; + top: 5.3rem;; +} + +button { + -moz-appearance: none; + z-index: 1; + position: relative; + border: none; +} + + + + header { width: 100%; - height: 5rem; - background: #4d4d4d; - background: -moz-linear-gradient(top, #4d4d4d 0%, #333333 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#333333)); - background: -webkit-linear-gradient(top, #4d4d4d 0%,#333333 100%); - background: -o-linear-gradient(top, #4d4d4d 0%,#333333 100%); - background: -ms-linear-gradient(top, #4d4d4d 0%,#333333 100%); - background: linear-gradient(to bottom, #4d4d4d 0%,#333333 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#333333',GradientType=0 ); + height: 5.3rem; + background: url('imgs/header_bg_black.png'); - #menu { - width: 3rem; + button { + width: 5rem; height: 5rem; + } + + .menu { + background: url('imgs/menu.png') -12px center no-repeat; + float: left; + &:active { + background: url('imgs/menu.png') -12px center no-repeat, url('imgs/bg_overlay_pressed_1.png') left no-repeat; + } + } + + .save { + background: url('imgs/download.png') center center no-repeat; + float: right; + &:active { + background: url('imgs/download.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center; + } + } + + #title { + color: white; + font-size: 11pt; + font-family: 'MozTT-Regular'; + float: left; + margin: 1.5rem 0; position: relative; - lefT: -0.9rem; - background: url('imgs/menu.png') center center no-repeat, darken(#4d4d4d, 10%); - -moz-appearance: none; - border: none; + left: -2rem; + } +} + + +#menu { + height: 100%; + width: 15rem; + background: #262626; + display: block; + position: absolute; + left: -15rem; + top: 5rem; + color: white; + font-family: 'MozTT-Light'; + font-size: 8pt; + + &.pulled { + left: 0; + } + + button[id^='set'], p { + background: none; + display: block; + width: 75%; + color: white; + text-align: left; + margin: 1rem 2.5rem; + font-family: 'MozTT-Light'; + font-size: 8pt; + padding: 0 0.6rem; + } + span { + float: right; + font-size: 7pt; + } + div[role='slider'] { + width: 60%; + float: right; + margin: 0 2rem 0 0; + + div { + overflow: visible; + button { + margin-top: -3.4rem; + left: 0%; + } + } + } + .icon-settings { + display: block; + margin: 1rem 0.5rem; + + &:before { + content: ''; + background: url('imgs/settings.png') center center no-repeat; + background-size: 2rem; + width: 2rem; + height: 2rem; + display: block; + float: left; + margin: -0.3rem 0.5rem 0 0; + } + } + + .options { + display: block; + margin-top: 1rem; } } diff --git a/css/seekbars.css b/css/seekbars.css new file mode 100644 index 0000000..4717d37 --- /dev/null +++ b/css/seekbars.css @@ -0,0 +1,80 @@ +/* ---------------------------------- +* Seekbars +* ---------------------------------- */ +div[role="slider"] { + position: relative; + height: 3.5rem; +} + +div[role="slider"] > div { + display: block; + padding: 0; + overflow-y: hidden; + position: relative; + height: 100%; +} + +div[role="slider"] progress { + width: 100%; + background: #000; + border: none; + height: 0.1rem; + display: block; + border-radius: 0; + margin-top: 1.9rem; +} + +div[role="slider"] progress::-moz-progress-bar { + background: #01c5ed; + height: 0.6rem; + margin-top: -0.3rem; + border-radius: 0; +} + +div[role="slider"] > label { + font-size: 1.5rem; + line-height: 3.8rem; + font-family: sans-serif; + color: #00aacb; + float: right; + padding: 0 0 0 1rem; + height: 3.5rem; + width: auto; +} + +div[role="slider"] label:first-of-type { + float: left; + padding: 0 1rem 0 0; +} + +div[role="slider"] > label.icon { + width: 3rem; + height: 3rem; + margin-top: 0.5rem; + font-size: 0; + background: no-repeat right top / 3rem auto; +} + +div[role="slider"] > label.icon:first-of-type { + background-position: top left; +} + +div[role="slider"] button { + width: 3.2rem; + height: 3.2rem; + background: url(seekbars/images/ui/handler.png) no-repeat center center / 3rem auto; + font: 0/0 a; + position: absolute; + top: 50%; + left: 0; + margin: -1.5rem 0 0 -1.6rem; + border-radius: 3.2rem; + border: solid 0.1rem transparent; + transition: border 0.15s ease; + padding: 0; + z-index: 10; +} + +div[role="slider"] button:active { + border: solid 0.5rem #01c5ed; +} diff --git a/css/seekbars/images/ui/handler.png b/css/seekbars/images/ui/handler.png new file mode 100644 index 0000000..246b7b4 Binary files /dev/null and b/css/seekbars/images/ui/handler.png differ diff --git a/css/seekbars/images/ui/handler@1.5x.png b/css/seekbars/images/ui/handler@1.5x.png new file mode 100644 index 0000000..26a5092 Binary files /dev/null and b/css/seekbars/images/ui/handler@1.5x.png differ diff --git a/css/seekbars/images/ui/handler@2x.png b/css/seekbars/images/ui/handler@2x.png new file mode 100644 index 0000000..9a69e77 Binary files /dev/null and b/css/seekbars/images/ui/handler@2x.png differ diff --git a/css/seekbars/seekbars.css b/css/seekbars/seekbars.css new file mode 100644 index 0000000..a92a477 --- /dev/null +++ b/css/seekbars/seekbars.css @@ -0,0 +1,79 @@ +/* ---------------------------------- +* Seekbars +* ---------------------------------- */ +div[role="slider"] { + position: relative; + height: 3.5rem; +} + +div[role="slider"] > div { + display: block; + overflow: hidden; + padding: 0; + position: relative; + height: 100%; +} + +div[role="slider"] progress { + width: 100%; + background: #000; + border: none; + height: 0.1rem; + display: block; + border-radius: 0; + margin-top: 1.9rem; +} + +div[role="slider"] progress::-moz-progress-bar { + background: #01c5ed; + height: 0.6rem; + margin-top: -0.3rem; + border-radius: 0; +} + +div[role="slider"] > label { + font-size: 1.5rem; + line-height: 3.8rem; + font-family: sans-serif; + color: #00aacb; + float: right; + padding: 0 0 0 1rem; + height: 3.5rem; + width: auto; +} + +div[role="slider"] label:first-of-type { + float: left; + padding: 0 1rem 0 0; +} + +div[role="slider"] > label.icon { + width: 3rem; + height: 3rem; + margin-top: 0.5rem; + font-size: 0; + background: no-repeat right top / 3rem auto; +} + +div[role="slider"] > label.icon:first-of-type { + background-position: top left; +} + +div[role="slider"] button { + width: 3.2rem; + height: 3.2rem; + background: url(seekbars/images/ui/handler.png) no-repeat center center / 3rem auto; + font: 0/0 a; + position: absolute; + top: 50%; + left: 0; + margin: -1.5rem 0 0 -1.6rem; + border-radius: 3.2rem; + border: solid 0.1rem transparent; + transition: border 0.15s ease; + padding: 0; +} + +div[role="slider"] button:active { + border: solid 0.5rem #01c5ed; +} diff --git a/css/switches.css b/css/switches.css new file mode 100644 index 0000000..9025a22 --- /dev/null +++ b/css/switches.css @@ -0,0 +1,94 @@ +/* ---------------------------------- + * CHECKBOXES / RADIOS + * ---------------------------------- */ + +label.pack-checkbox, +label.pack-radio, +label.pack-switch { + display: inline-block; + vertical-align: middle; + width: 5rem; + height: 5rem; + position: relative; + background: none; +} + +label.pack-checkbox input, +label.pack-radio input, +label.pack-switch input { + margin: 0; + opacity: 0; + position: absolute; + top: 0; + left: 0; +} + +label.pack-checkbox input ~ span:after, +label.pack-radio input ~ span:after { + content: ''; + position: absolute; + left: 50%; + top: 50%; + margin: -1.1rem 0 0 -1.1rem; + width: 2.2rem; + height: 2.2rem; + pointer-events: none; +} + +label.pack-checkbox input ~ span:after { + background: url(switches/images/check/default.png) no-repeat center top / 2.2rem auto; +} + +label.pack-radio input ~ span:after { + background: url(switches/images/radio/default.png) no-repeat center top / 2.2rem auto; +} + +label.pack-checkbox input:checked ~ span:after, +label.pack-radio input:checked ~ span:after, +label.pack-switch input:checked ~ span:after { + background-position: center bottom; +} + +/* 'Dangerous' switches */ + +label.pack-checkbox.danger input ~ span:after { + background-image: url(switches/images/check/danger.png); +} + +label.pack-radio.danger input ~ span:after { + background-image: url(switches/images/radio/danger.png); +} + + +/* ---------------------------------- + * ON/OFF SWITCHES + * ---------------------------------- */ + +label.pack-switch input ~ span:after { + content: ''; + position: absolute; + right: 0; + top: 50%; + width: 6rem; + margin: -1.4rem 0rem 0rem; + height: 2.7rem; + pointer-events: none; + border-radius: 1.35rem; + overflow: hidden; + background: #e6e6e6 url(switches/images/switch/background_off.png) no-repeat -3.2rem 0rem / 9.2rem 2.7rem; + transition: background 0.2s ease; +} + +/* switch: 'ON' state */ +label.pack-switch input:checked ~ span:after { + background: #e6e6e6 url(switches/images/switch/background.png) no-repeat 0rem 0rem / 9.2rem 2.7rem; +} + +/* switch: disabled state */ +label.pack-switch input:disabled ~ span:after { + opacity: 0.4; +} + +label.pack-switch input.uninit ~ span:after { + transition: none; +} diff --git a/css/switches/images/check/danger.png b/css/switches/images/check/danger.png new file mode 100644 index 0000000..ed1f267 Binary files /dev/null and b/css/switches/images/check/danger.png differ diff --git a/css/switches/images/check/danger@1.5x.png b/css/switches/images/check/danger@1.5x.png new file mode 100644 index 0000000..8d4b61d Binary files /dev/null and b/css/switches/images/check/danger@1.5x.png differ diff --git a/css/switches/images/check/danger@2x.png b/css/switches/images/check/danger@2x.png new file mode 100644 index 0000000..7befd67 Binary files /dev/null and b/css/switches/images/check/danger@2x.png differ diff --git a/css/switches/images/check/default.png b/css/switches/images/check/default.png new file mode 100644 index 0000000..9f188bb Binary files /dev/null and b/css/switches/images/check/default.png differ diff --git a/css/switches/images/check/default@1.5x.png b/css/switches/images/check/default@1.5x.png new file mode 100644 index 0000000..8c25cae Binary files /dev/null and b/css/switches/images/check/default@1.5x.png differ diff --git a/css/switches/images/check/default@2x.png b/css/switches/images/check/default@2x.png new file mode 100644 index 0000000..3e19692 Binary files /dev/null and b/css/switches/images/check/default@2x.png differ diff --git a/css/switches/images/radio/danger.png b/css/switches/images/radio/danger.png new file mode 100644 index 0000000..d285887 Binary files /dev/null and b/css/switches/images/radio/danger.png differ diff --git a/css/switches/images/radio/danger@1.5x.png b/css/switches/images/radio/danger@1.5x.png new file mode 100644 index 0000000..3b6a7d2 Binary files /dev/null and b/css/switches/images/radio/danger@1.5x.png differ diff --git a/css/switches/images/radio/danger@2x.png b/css/switches/images/radio/danger@2x.png new file mode 100644 index 0000000..812f9a3 Binary files /dev/null and b/css/switches/images/radio/danger@2x.png differ diff --git a/css/switches/images/radio/default.png b/css/switches/images/radio/default.png new file mode 100644 index 0000000..086d61a Binary files /dev/null and b/css/switches/images/radio/default.png differ diff --git a/css/switches/images/radio/default@1.5x.png b/css/switches/images/radio/default@1.5x.png new file mode 100644 index 0000000..27ead41 Binary files /dev/null and b/css/switches/images/radio/default@1.5x.png differ diff --git a/css/switches/images/radio/default@2x.png b/css/switches/images/radio/default@2x.png new file mode 100644 index 0000000..a93f80b Binary files /dev/null and b/css/switches/images/radio/default@2x.png differ diff --git a/css/switches/images/switch/background.png b/css/switches/images/switch/background.png new file mode 100644 index 0000000..99bfe33 Binary files /dev/null and b/css/switches/images/switch/background.png differ diff --git a/css/switches/images/switch/background@1.5x.png b/css/switches/images/switch/background@1.5x.png new file mode 100644 index 0000000..d1c2bd5 Binary files /dev/null and b/css/switches/images/switch/background@1.5x.png differ diff --git a/css/switches/images/switch/background_off.png b/css/switches/images/switch/background_off.png new file mode 100644 index 0000000..963a0d1 Binary files /dev/null and b/css/switches/images/switch/background_off.png differ diff --git a/css/switches/images/switch/background_off@1.5x.png b/css/switches/images/switch/background_off@1.5x.png new file mode 100644 index 0000000..c7bb7f5 Binary files /dev/null and b/css/switches/images/switch/background_off@1.5x.png differ diff --git a/css/value_selector.css b/css/value_selector.css new file mode 100644 index 0000000..aebc7a7 --- /dev/null +++ b/css/value_selector.css @@ -0,0 +1,203 @@ +/* ---------------------------------- + * Value selector (Single & Multiple) + * ---------------------------------- */ + +/* Main dialog setup */ +form[role="dialog"][data-type="value-selector"] { + background: url(value_selector/images/ui/pattern.png) repeat left top, url(value_selector/images/ui/gradient.png) no-repeat left top / 100% 100%; + overflow: hidden; + position: absolute; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0 0 7rem; + color: #fff; + font-family: sans-serif; +} + +form[role="dialog"][data-type="value-selector"] > section { + padding: 0 1.5rem 0; + -moz-box-sizing: padding-box; + width: 100%; + height: 100%; +} + +form[role="dialog"][data-type="value-selector"] h1 { + font-weight: 400; + font-size: 1.9rem; + line-height: 4.8rem; + color: #fff; + border-bottom: 0.1rem solid #616262; + background: rgba(0 ,0, 0, .2); + margin: 0 -1.5rem; + padding: 0 3rem 1rem; + height: 4.8rem; + -moz-box-sizing: border-box; +} + +/* Specific component code */ +form[role="dialog"][data-type="value-selector"] [role="listbox"] { + position: relative; + padding: 0; + margin: 0 -1.5rem; + max-height: calc(100% - 5rem); + overflow: auto; + border-top: solid 0.1rem #222323; +} + +form[role="dialog"][data-type="value-selector"] .scrollable:before { + content: ""; + display: block; + position: absolute; + pointer-events: none; + top: 4.8rem; + left: 0; + right: 0; + bottom: 6.9rem; + background: url(value_selector/images/ui/shadow.png) repeat-x left top, url(value_selector/images/ui/shadow-invert.png) repeat-x left bottom; +} + +form[role="dialog"][data-type="value-selector"] [role="listbox"] li { + margin: 0; + padding: 0 1.5rem; + height: auto; + list-style: none; + position: relative; + font-weight: lighter; + font-size: 2.2rem; + line-height: 3.9rem; + color: #fff; + transition: background-color 0.2s ease; +} + +form[role="dialog"][data-type="value-selector"] [role="listbox"] li:first-child label { + border-top-color: transparent; +} + +form[role="dialog"][data-type="value-selector"] [role="listbox"] li label { + outline: none; + display: block; + color: #fff; + border-top: 0.1rem solid #666; + border-bottom: 0.1rem solid #000; +} + +form[role="dialog"][data-type="value-selector"] [role="listbox"] li:last-child label { + border-bottom-color: transparent; +} + +form[role="dialog"][data-type="value-selector"] [role="listbox"] li label span { + display: block; + padding: 1rem 1.5rem; + line-height: 4rem; + word-wrap: break-word; +} + +/* Pressed status */ +form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active { + background-color: #00ABCC; +} + +form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active label { + border-color: transparent; +} + +form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active + li label { + border-top-color: #000; +} + +form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active label span { + color: #fff !important; + background-image: none; +} + +/* Checked status */ +form[role="dialog"][data-type="value-selector"] [role="listbox"] li[aria-selected="true"] span { + padding-right: 2.6rem; + margin-right: 1.2rem; + color: #00abcd; + background: transparent url(value_selector/images/icons/checked.png) no-repeat 100% 50%; + background-size: 2rem; +} + + +/* Menu & buttons setup */ +form[role="dialog"][data-type="value-selector"] menu { + white-space: nowrap; + margin: 0; + padding: 1.5rem; + border-top: solid 0.1rem rgba(255, 255, 255, 0.1); + background: #2d2d2d url(value_selector/images/ui/pattern.png) repeat left top; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + +form[role="dialog"][data-type="value-selector"] menu button::-moz-focus-inner { + border: none; + outline: none; +} + +form[role="dialog"][data-type="value-selector"] menu button { + width: calc((100% - 1rem) / 2); + height: 3.8rem; + margin: 0 0 1rem; + padding: 0 1.5rem; + -moz-box-sizing: border-box; + display: inline-block; + vertical-align: middle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background: #fafafa url(value_selector/images/ui/default.png) repeat-x left bottom/ auto 100%; + border: 0.1rem solid #a6a6a6; + border-radius: 0.3rem; + font-weight: 500; + font-size: 1.6rem; + line-height: 3.8rem; + color: #333; + text-align: center; + text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3); + text-decoration: none; + outline: none; +} + +/* Press (default & affirmative) */ +form[role="dialog"][data-type="value-selector"] menu button:active, +form[role="dialog"][data-type="value-selector"] menu button.affirmative:active { + border-color: #008aaa; + background: #008aaa; + color: #333; +} + +/* affirmative */ +form[role="dialog"][data-type="value-selector"] menu button.affirmative { + background-image: url(value_selector/images/ui/affirmative.png); + background-color: #00caf2; + border-color: #008eab; +} + +form[role="dialog"][data-type="value-selector"] menu button:last-child { + margin-left: 1rem; +} + +form[role="dialog"][data-type="value-selector"] menu button, +form[role="dialog"][data-type="value-selector"] menu button:first-child { + margin: 0; +} + +form[role="dialog"][data-type="value-selector"] menu button.full { + width: 100%; +} + +/* Right to left tweaks */ +html[dir="rtl"] #value-selector li input:checked + span, +html[dir="rtl"] #value-selector li[aria-selected="true"] span { + padding-left: 2.6rem; + margin-left: 1.2rem; +} diff --git a/css/value_selector/images/icons/checked.png b/css/value_selector/images/icons/checked.png new file mode 100644 index 0000000..69d5c3d Binary files /dev/null and b/css/value_selector/images/icons/checked.png differ diff --git a/css/value_selector/images/icons/checked@1.5x.png b/css/value_selector/images/icons/checked@1.5x.png new file mode 100644 index 0000000..490dded Binary files /dev/null and b/css/value_selector/images/icons/checked@1.5x.png differ diff --git a/css/value_selector/images/icons/checked@2x.png b/css/value_selector/images/icons/checked@2x.png new file mode 100644 index 0000000..c1a6fbd Binary files /dev/null and b/css/value_selector/images/icons/checked@2x.png differ diff --git a/css/value_selector/images/ui/affirmative.png b/css/value_selector/images/ui/affirmative.png new file mode 100644 index 0000000..c1823eb Binary files /dev/null and b/css/value_selector/images/ui/affirmative.png differ diff --git a/css/value_selector/images/ui/default.png b/css/value_selector/images/ui/default.png new file mode 100644 index 0000000..a174b67 Binary files /dev/null and b/css/value_selector/images/ui/default.png differ diff --git a/css/value_selector/images/ui/gradient.png b/css/value_selector/images/ui/gradient.png new file mode 100644 index 0000000..d2e6f5b Binary files /dev/null and b/css/value_selector/images/ui/gradient.png differ diff --git a/css/value_selector/images/ui/gradient@1.5x.png b/css/value_selector/images/ui/gradient@1.5x.png new file mode 100644 index 0000000..0e420cd Binary files /dev/null and b/css/value_selector/images/ui/gradient@1.5x.png differ diff --git a/css/value_selector/images/ui/pattern.png b/css/value_selector/images/ui/pattern.png new file mode 100644 index 0000000..af03f56 Binary files /dev/null and b/css/value_selector/images/ui/pattern.png differ diff --git a/css/value_selector/images/ui/shadow-invert.png b/css/value_selector/images/ui/shadow-invert.png new file mode 100644 index 0000000..b1b905f Binary files /dev/null and b/css/value_selector/images/ui/shadow-invert.png differ diff --git a/css/value_selector/images/ui/shadow-invert@1.5x.png b/css/value_selector/images/ui/shadow-invert@1.5x.png new file mode 100644 index 0000000..ee2dc1c Binary files /dev/null and b/css/value_selector/images/ui/shadow-invert@1.5x.png differ diff --git a/css/value_selector/images/ui/shadow-invert@2x.png b/css/value_selector/images/ui/shadow-invert@2x.png new file mode 100644 index 0000000..15c95ed Binary files /dev/null and b/css/value_selector/images/ui/shadow-invert@2x.png differ diff --git a/css/value_selector/images/ui/shadow.png b/css/value_selector/images/ui/shadow.png new file mode 100644 index 0000000..728fe77 Binary files /dev/null and b/css/value_selector/images/ui/shadow.png differ diff --git a/css/value_selector/images/ui/shadow@1.5x.png b/css/value_selector/images/ui/shadow@1.5x.png new file mode 100644 index 0000000..44b35b4 Binary files /dev/null and b/css/value_selector/images/ui/shadow@1.5x.png differ diff --git a/css/value_selector/images/ui/shadow@2x.png b/css/value_selector/images/ui/shadow@2x.png new file mode 100644 index 0000000..f515eff Binary files /dev/null and b/css/value_selector/images/ui/shadow@2x.png differ diff --git a/img/icons/1.png b/img/icons/1.png deleted file mode 100644 index 9ece556..0000000 Binary files a/img/icons/1.png and /dev/null differ diff --git a/img/icons/MozillaFXOSIconTemplate1_overlay.png b/img/icons/MozillaFXOSIconTemplate1_overlay.png new file mode 100644 index 0000000..2389796 Binary files /dev/null and b/img/icons/MozillaFXOSIconTemplate1_overlay.png differ diff --git a/img/icons/demo1.png b/img/icons/demo1.png deleted file mode 100644 index 7d6998d..0000000 Binary files a/img/icons/demo1.png and /dev/null differ diff --git a/img/icons/icon120.png b/img/icons/icon120.png new file mode 100644 index 0000000..c22f12b Binary files /dev/null and b/img/icons/icon120.png differ diff --git a/img/icons/icon128.png b/img/icons/icon128.png new file mode 100644 index 0000000..559431b Binary files /dev/null and b/img/icons/icon128.png differ diff --git a/img/icons/icon16.png b/img/icons/icon16.png new file mode 100644 index 0000000..d143663 Binary files /dev/null and b/img/icons/icon16.png differ diff --git a/img/icons/icon2.png b/img/icons/icon2.png new file mode 100644 index 0000000..559431b Binary files /dev/null and b/img/icons/icon2.png differ diff --git a/img/icons/icon2.svg b/img/icons/icon2.svg new file mode 100644 index 0000000..bad2075 --- /dev/null +++ b/img/icons/icon2.svg @@ -0,0 +1,102 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/img/icons/icon32.png b/img/icons/icon32.png new file mode 100644 index 0000000..fab191f Binary files /dev/null and b/img/icons/icon32.png differ diff --git a/img/icons/icon48.png b/img/icons/icon48.png new file mode 100644 index 0000000..e7a530e Binary files /dev/null and b/img/icons/icon48.png differ diff --git a/img/icons/icon60.png b/img/icons/icon60.png new file mode 100644 index 0000000..212b26c Binary files /dev/null and b/img/icons/icon60.png differ diff --git a/img/icons/icon64.png b/img/icons/icon64.png new file mode 100644 index 0000000..53d27cf Binary files /dev/null and b/img/icons/icon64.png differ diff --git a/img/icons/icon90.png b/img/icons/icon90.png new file mode 100644 index 0000000..0b5d3c2 Binary files /dev/null and b/img/icons/icon90.png differ diff --git a/index.html b/index.html index df69f90..ba294b7 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,21 @@ + + + +
- + + +

Sketchy

+ +
@@ -19,6 +27,69 @@
+ + + + + + + + + diff --git a/js/events.js b/js/events.js new file mode 100644 index 0000000..0326d4b --- /dev/null +++ b/js/events.js @@ -0,0 +1,84 @@ + $('.menu').click(function() { + $('#menu').toggleClass('pulled'); + }) + $('.save').click(function() { + var data = $c[0].toDataURL(); + var img = $(''); + $('body').append(img); + }) + $c.last().bind('mousedown', function(e) { + e.preventDefault(); + var xy = relative(e.pageX, e.pageY); + startPoint(xy.x, xy.y); + window.active = true; + }).bind('mousemove', function(e) { + e.preventDefault(); + if (!window.active || settings.type == 'line') return; + var xy = relative(e.pageX, e.pageY); + drawPoint(xy.x, xy.y); + }).bind('mouseup mouseout', function(e) { + e.preventDefault(); + window.active = false; + + if(window.points.history.last < window.points.history.length-1) { + window.points.history.splice(window.points.history.last+1); + } + + window.points.history.push({ + data: c.getImageData(0, 0, $c.width(), $c.height()), + points: window.points.slice(0) + }) + window.points.history.last = window.points.history.length-1; + }) + + // Value Selector + + var $selector = $('form[data-type="value-selector"]'); + + $selector.find('li').on('mouseup', function(e) { + alert(e.type); + $(this).parent().find('li').removeAttr('aria-selected'); + $(this).attr('aria-selected', 'true'); + var prop = $(this).parents('form').attr('id'), + key = $(this).find('label span').html().toLowerCase(); + window.settings[prop] = key; + + $('button[id="set' + prop + '"] span').html(key[0].toUpperCase() + key.substr(1)); + + $(this).parents('form').addClass('hidden'); + }) + + $selector.submit(function(e) { + e.preventDefault(); + $(this).addClass('hidden'); + }) + + // Value Selector Callers + + var $btn = $('button[id^="set"]'); + $btn.each(function() { + var target = /set(.*)/.exec($(this).attr('id'))[1]; + $(this).on('mouseup', function(e) { + e.preventDefault(); + $('form[id="' + target + '"]').removeClass('hidden'); + }) + }) + + // Seekbar + + var sliderLeft = $('div[role="slider"] button').offset().left; + $('div[role="slider"] button').on('mousedown', function() { + $(this).attr('data-moving','true'); + }).on('mousemove', function(e) { + if( $(this).attr('data-moving') ) { + var x = e.pageX - sliderLeft - 15; + if( x <= 100 && x > 0 ) { + $(this).css('left', x+'%'); + $(this).parent().find('progress').attr('value', x); + settings.lineWidth = x / 10; + $('#lineWidth span').html(x); + } + } + }).on('mouseup mouseleave', function() { + $(this).removeAttr('data-moving'); + }) diff --git a/js/functions.js b/js/functions.js index de4ea5a..dfebb71 100644 --- a/js/functions.js +++ b/js/functions.js @@ -7,7 +7,7 @@ function sizeAndPos() { var w = $(window).width(), h = $(window).height(); $c.attr('width', w); - $c.attr('height',h - 50); + $c.attr('height',h - 53); c.clearRect(0,0, $c.width(), $c.height()); c.putImageData(data, 0, 0); } @@ -104,11 +104,6 @@ function startPoint(x, y) { points[points.length-1].start = undefined; return; } - - if(current.type == 'ribbon') { - settings.ribbonTimes = 1; - } - points.push(current); } @@ -116,7 +111,7 @@ function drawPoint(x,y) { var capture = points[points.length-1]; switch(capture.type) { - case 'draw': { + case 'pen': { line(capture.x, capture.y, x, y); var current = { @@ -160,7 +155,7 @@ function drawPoint(x,y) { points.push(current); for( var i = 0, len = points.length-1; i < len; i++ ) { - if(threshold(points[i].x, points[i].y, current.x, current.y, 40)) { + if(threshold(points[i].x, points[i].y, current.x, current.y, settings.lineWidth*20)) { var x = points[i].x - current.x, y = points[i].y - current.y; var l = settings.furLength || 0.2; diff --git a/js/libs/mobilebrowsers.js b/js/libs/mobilebrowsers.js new file mode 100644 index 0000000..3d8d819 --- /dev/null +++ b/js/libs/mobilebrowsers.js @@ -0,0 +1 @@ +(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.mobile=true})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile'); diff --git a/js/libs/two.min.js b/js/libs/two.min.js deleted file mode 100644 index fe0afa4..0000000 --- a/js/libs/two.min.js +++ /dev/null @@ -1,108 +0,0 @@ -(function(){var p=this,l=p._,e={},j=Array.prototype,m=Object.prototype,c=j.push,b=j.slice,h=j.concat,x=m.toString,a=m.hasOwnProperty,k=j.forEach,q=j.map,s=j.reduce,f=j.reduceRight,r=j.filter,B=j.every,w=j.some,u=j.indexOf,y=j.lastIndexOf,m=Array.isArray,n=Object.keys,t=Function.prototype.bind,d=function(g){if(g instanceof d)return g;if(!(this instanceof d))return new d(g);this._wrapped=g};"undefined"!==typeof exports?("undefined"!==typeof module&&module.exports&&(exports=module.exports=d),exports._= -d):p._=d;d.VERSION="1.5.1";var v=d.each=d.forEach=function(g,a,b){if(null!=g)if(k&&g.forEach===k)g.forEach(a,b);else if(g.length===+g.length)for(var f=0,c=g.length;fg.length)return Math.max.apply(Math,g);if(!a&&d.isEmpty(g))return-Infinity;var f={computed:-Infinity,value:-Infinity};v(g,function(g,d,c){d=a?a.call(b,g,d,c):g;d>f.computed&&(f={value:g,computed:d})});return f.value};d.min= -function(g,a,b){if(!a&&d.isArray(g)&&g[0]===+g[0]&&65535>g.length)return Math.min.apply(Math,g);if(!a&&d.isEmpty(g))return Infinity;var f={computed:Infinity,value:Infinity};v(g,function(g,d,c){d=a?a.call(b,g,d,c):g;db||void 0===a)return 1;if(a>>1;b.call(f,g[h])b?Math.max(0,c+b):b;else return f=d.sortedIndex(g,a),g[f]===a?f:-1;if(u&&g.indexOf===u)return g.indexOf(a,b);for(;f=arguments.length&&(d=g||0,g=0);a=arguments[2]||1;for(var b=Math.max(Math.ceil((d-g)/a),0),f=0,c=Array(b);f=m?(clearTimeout(h),h=null,k=e,n=a.apply(f,c)):!h&&!1!==b.trailing&&(h=setTimeout(t,m));return n}};d.debounce=function(a,d,b){var f,c=null;return function(){var n=this,h=arguments,k=b&&!c;clearTimeout(c);c=setTimeout(function(){c=null;b||(f=a.apply(n,h))},d);k&&(f=a.apply(n,h));return f}};d.once=function(a){var d=!1,b;return function(){if(d)return b;d=!0;b=a.apply(this,arguments);a=null;return b}};d.wrap=function(a,d){return function(){var b= -[a];c.apply(b,arguments);return d.apply(this,b)}};d.compose=function(){var a=arguments;return function(){for(var d=arguments,b=a.length-1;0<=b;b--)d=[a[b].apply(this,d)];return d[0]}};d.after=function(a,d){return function(){if(1>--a)return d.apply(this,arguments)}};d.keys=n||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var b=[],f;for(f in a)d.has(a,f)&&b.push(f);return b};d.values=function(a){var b=[],f;for(f in a)d.has(a,f)&&b.push(a[f]);return b};d.pairs=function(a){var b= -[],f;for(f in a)d.has(a,f)&&b.push([f,a[f]]);return b};d.invert=function(a){var b={},f;for(f in a)d.has(a,f)&&(b[a[f]]=f);return b};d.functions=d.methods=function(a){var b=[],f;for(f in a)d.isFunction(a[f])&&b.push(f);return b.sort()};d.extend=function(a){v(b.call(arguments,1),function(d){if(d)for(var b in d)a[b]=d[b]});return a};d.pick=function(a){var d={},f=h.apply(j,b.call(arguments,1));v(f,function(b){b in a&&(d[b]=a[b])});return d};d.omit=function(a){var f={},c=h.apply(j,b.call(arguments,1)), -n;for(n in a)d.contains(c,n)||(f[n]=a[n]);return f};d.defaults=function(a){v(b.call(arguments,1),function(d){if(d)for(var b in d)void 0===a[b]&&(a[b]=d[b])});return a};d.clone=function(a){return!d.isObject(a)?a:d.isArray(a)?a.slice():d.extend({},a)};d.tap=function(a,d){d(a);return a};var M=function(a,b,f,c){if(a===b)return 0!==a||1/a==1/b;if(null==a||null==b)return a===b;a instanceof d&&(a=a._wrapped);b instanceof d&&(b=b._wrapped);var n=x.call(a);if(n!=x.call(b))return!1;switch(n){case "[object String]":return a== -String(b);case "[object Number]":return a!=+a?b!=+b:0==a?1/a==1/b:a==+b;case "[object Date]":case "[object Boolean]":return+a==+b;case "[object RegExp]":return a.source==b.source&&a.global==b.global&&a.multiline==b.multiline&&a.ignoreCase==b.ignoreCase}if("object"!=typeof a||"object"!=typeof b)return!1;for(var h=f.length;h--;)if(f[h]==a)return c[h]==b;var h=a.constructor,k=b.constructor;if(h!==k&&(!d.isFunction(h)||!(h instanceof h&&d.isFunction(k)&&k instanceof k)))return!1;f.push(a);c.push(b);h= -0;k=!0;if("[object Array]"==n){if(h=a.length,k=h==b.length)for(;h--&&(k=M(a[h],b[h],f,c)););}else{for(var t in a)if(d.has(a,t)&&(h++,!(k=d.has(b,t)&&M(a[t],b[t],f,c))))break;if(k){for(t in b)if(d.has(b,t)&&!h--)break;k=!h}}f.pop();c.pop();return k};d.isEqual=function(a,d){return M(a,d,[],[])};d.isEmpty=function(a){if(null==a)return!0;if(d.isArray(a)||d.isString(a))return 0===a.length;for(var b in a)if(d.has(a,b))return!1;return!0};d.isElement=function(a){return!!(a&&1===a.nodeType)};d.isArray=m|| -function(a){return"[object Array]"==x.call(a)};d.isObject=function(a){return a===Object(a)};v("Arguments Function String Number Date RegExp".split(" "),function(a){d["is"+a]=function(d){return x.call(d)=="[object "+a+"]"}});d.isArguments(arguments)||(d.isArguments=function(a){return!(!a||!d.has(a,"callee"))});"function"!==typeof/./&&(d.isFunction=function(a){return"function"===typeof a});d.isFinite=function(a){return isFinite(a)&&!isNaN(parseFloat(a))};d.isNaN=function(a){return d.isNumber(a)&&a!= -+a};d.isBoolean=function(a){return!0===a||!1===a||"[object Boolean]"==x.call(a)};d.isNull=function(a){return null===a};d.isUndefined=function(a){return void 0===a};d.has=function(d,b){return a.call(d,b)};d.noConflict=function(){p._=l;return this};d.identity=function(a){return a};d.times=function(a,d,b){for(var f=Array(Math.max(0,a)),c=0;c":">", -'"':""","'":"'","/":"/"}};K.unescape=d.invert(K.escape);var S={escape:RegExp("["+d.keys(K.escape).join("")+"]","g"),unescape:RegExp("("+d.keys(K.unescape).join("|")+")","g")};d.each(["escape","unescape"],function(a){d[a]=function(d){return null==d?"":(""+d).replace(S[a],function(d){return K[a][d]})}});d.result=function(a,b){if(null!=a){var f=a[b];return d.isFunction(f)?f.call(a):f}};d.mixin=function(a){v(d.functions(a),function(b){var f=d[b]=a[b];d.prototype[b]=function(){var a=[this._wrapped]; -c.apply(a,arguments);a=f.apply(d,a);return this._chain?d(a).chain():a}})};var T=0;d.uniqueId=function(a){var d=++T+"";return a?a+d:d};d.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var N=/(.)^/,U={"'":"'","\\":"\\","\r":"r","\n":"n","\t":"t","\u2028":"u2028","\u2029":"u2029"},G=/\\|'|\r|\n|\t|\u2028|\u2029/g;d.template=function(a,b,f){var c;f=d.defaults({},f,d.templateSettings);var n=RegExp([(f.escape||N).source,(f.interpolate||N).source,(f.evaluate|| -N).source].join("|")+"|$","g"),h=0,k="__p+='";a.replace(n,function(d,b,f,c,n){k+=a.slice(h,n).replace(G,function(a){return"\\"+U[a]});b&&(k+="'+\n((__t=("+b+"))==null?'':_.escape(__t))+\n'");f&&(k+="'+\n((__t=("+f+"))==null?'':__t)+\n'");c&&(k+="';\n"+c+"\n__p+='");h=n+d.length;return d});k+="';\n";f.variable||(k="with(obj||{}){\n"+k+"}\n");k="var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};\n"+k+"return __p;\n";try{c=new Function(f.variable||"obj","_",k)}catch(t){throw t.source= -k,t;}if(b)return c(b,d);b=function(a){return c.call(this,a,d)};b.source="function("+(f.variable||"obj")+"){\n"+k+"}";return b};d.chain=function(a){return d(a).chain()};d.mixin(d);v("pop push reverse shift sort splice unshift".split(" "),function(a){var b=j[a];d.prototype[a]=function(){var f=this._wrapped;b.apply(f,arguments);("shift"==a||"splice"==a)&&0===f.length&&delete f[0];return this._chain?d(f).chain():f}});v(["concat","join","slice"],function(a){var b=j[a];d.prototype[a]=function(){var a=b.apply(this._wrapped, -arguments);return this._chain?d(a).chain():a}});d.extend(d.prototype,{chain:function(){this._chain=!0;return this},value:function(){return this._wrapped}})}).call(this);var Backbone=Backbone||{}; -(function(){var p=[].slice,l=function(e,m,c){var b;e=-1;var h=m.length;switch(c.length){case 0:for(;++e=b?a:"m"+a});a[0]="M"+a[0];return a})),d=new f.Vector,c=new f.Vector,b=_.map(b,function(b){var h,k=!1,e=!1;b=_.flatten(_.map(b.match(/[a-z][^a-z]*/ig),function(a){var b,n,m=a[0],t=m.toLowerCase();h=a.slice(1).trim().split(/[\s,]+|(?=[+\-])/);k=m===t;var q,j,s;switch(t){case "z":e=!0;break;case "m":case "l":n=parseFloat(h[0]);b=parseFloat(h[1]); -b=new f.Vector(n,b);k&&b.addSelf(d);d.copy(b);break;case "h":case "v":n="h"===t?"x":"y";a="x"===n?"y":"x";b=new f.Vector;b[n]=parseFloat(h[0]);b[a]=d[a];k&&(b[n]+=d[n]);d.copy(b);break;case "s":case "c":b=d.x;a=d.y;"c"===t?(m=parseFloat(h[0]),n=parseFloat(h[1]),t=parseFloat(h[2]),q=parseFloat(h[3]),j=parseFloat(h[4]),s=parseFloat(h[5])):(q=f.Utils.getReflection(d,c,k),m=q.x,n=q.y,t=parseFloat(h[0]),q=parseFloat(h[1]),j=parseFloat(h[2]),s=parseFloat(h[3]));k&&(m+=b,n+=a,t+=b,q+=a,j+=b,s+=a);b=f.Utils.subdivide(b, -a,m,n,t,q,j,s);d.set(j,s);c.set(t,q);(n=b[b.length-1])&&!n.equals(d)&&b.push(d.clone());break;case "t":case "q":b=d.x;a=d.y;c.isZero()?(m=b,n=a):(m=c.x,a=c.y);"q"===t?(t=parseFloat(h[0]),q=parseFloat(h[1]),j=parseFloat(h[1]),s=parseFloat(h[2])):(q=f.Utils.getReflection(d,c,k),t=q.x,q=q.y,j=parseFloat(h[0]),s=parseFloat(h[1]));k&&(m+=b,n+=a,t+=b,q+=a,j+=b,s+=a);b=f.Utils.subdivide(b,a,m,n,t,q,j,s);d.set(j,s);c.set(t,q);n=b[b.length-1];n.equals(d)||b.push(d.clone());break;case "a":throw new f.Utils.Error("not yet able to interpret Elliptical Arcs."); -}return b}));if(!(1>=b.length))return b=_.compact(b),b=(new f.Polygon(b,e)).noStroke(),f.Utils.applySvgAttributes(a,b)});return _.compact(b)},circle:function(b){var c=parseFloat(b.getAttribute("cx")),d=parseFloat(b.getAttribute("cy")),h=parseFloat(b.getAttribute("r")),k=f.Resolution,e=_.map(_.range(k),function(b){var d=b/k*a;b=h*m(d);d=h*j(d);return new f.Vector(b,d)},this),e=(new f.Polygon(e,!0,!0)).noStroke();e.translation.set(c,d);return f.Utils.applySvgAttributes(b,e)},ellipse:function(b){var c= -parseFloat(b.getAttribute("cx")),d=parseFloat(b.getAttribute("cy")),h=parseFloat(b.getAttribute("rx")),k=parseFloat(b.getAttribute("ry")),e=f.Resolution,q=_.map(_.range(e),function(b){var d=b/e*a;b=h*m(d);d=k*j(d);return new f.Vector(b,d)},this),q=(new f.Polygon(q,!0,!0)).noStroke();q.translation.set(c,d);return f.Utils.applySvgAttributes(b,q)},rect:function(a){var b=parseFloat(a.getAttribute("x")),d=parseFloat(a.getAttribute("y")),c=parseFloat(a.getAttribute("width")),h=parseFloat(a.getAttribute("height")), -c=c/2,h=h/2,k=[new f.Vector(c,h),new f.Vector(-c,h),new f.Vector(-c,-h),new f.Vector(c,-h)],k=(new f.Polygon(k,!0)).noStroke();k.translation.set(b+c,d+h);return f.Utils.applySvgAttributes(a,k)},line:function(a){var b=parseFloat(a.getAttribute("x1")),d=parseFloat(a.getAttribute("y1")),c=parseFloat(a.getAttribute("x2")),h=parseFloat(a.getAttribute("y2")),c=(c-b)/2,h=(h-d)/2,k=[new f.Vector(-c,-h),new f.Vector(c,h)],k=(new f.Polygon(k)).noFill();k.translation.set(b+c,d+h);return f.Utils.applySvgAttributes(a, -k)}},subdivide:function(b,k,d,e,m,q,j,s,l){var r=f.Utils.Curve.CollinearityEpsilon,B=f.Utils.Curve.RecursionLimit,u=f.Utils.Curve.CuspLimit,w=f.Utils.Curve.Tolerance,p;l=l||0;if(l>B)return[];var B=(b+d)/2,y=(k+e)/2,G=(d+m)/2,g=(e+q)/2,O=(m+j)/2,P=(q+s)/2,Q=(B+G)/2,R=(y+g)/2,G=(G+O)/2,g=(g+P)/2,E=(Q+G)/2,F=(R+g)/2;p=j-b;var A=s-k,H=h((d-j)*A-(e-s)*p),I=h((m-j)*A-(q-s)*p);if(0r&&I>r&&(H+I)*(H+I)<=w.distance*(p*p+A*A)){if(w.angle=x&&(r=a-r);p>=x&&(p=a-p);if(r+pu)return[new f.Vector(d,e)];if(p>u)return[new f.Vector(m,q)]}}}else if(H>r)if(H*H<=w.distance*(p*p+A*A)){if(w.angle=x&&(r=a-r);if(ru)return[new f.Vector(d,e)]}else if(I>r){if(I*I<=w.distance*(p*p+A*A)){if(w.angle=x&&(r=a-r);if(ru)return[new f.Vector2(m,q)]}}else if(p=E-(b+j)/2,A=F-(k+s)/2,p*p+A*A<=w.distance)return[new f.Vector(E,F)];return f.Utils.subdivide(b,k,B,y,Q,R,E,F,l+1).concat(f.Utils.subdivide(E,F,G,g,O,P,j,s,l+1))},getCurveFromPoints:function(a,b){for(var d=[],f=a.length,c=f-1,h=0;ha||1E-4>d)return b.u={x:b.x,y:b.y},b.v={x:b.x,y:b.y},b;a*=0.33;d*=0.33;h=c=c)return d?new f.Vector:a.clone();b=w(a,b);return new f.Vector(c*Math.cos(b)+(d?0:a.x),c*Math.sin(b)+(d? -0:a.y))},angleBetween:function(a,b){return c(a.y-b.y,a.x-b.x)},distanceBetweenSquared:function(a,b){var d=a.x-b.x,f=a.y-b.y;return d*d+f*f},distanceBetween:function(a,f){return b(B(a,f))},mod:function(a,b){for(;0>a;)a+=b;return a%b},Collection:function(){Array.call(this);1this.distanceTo(e)},lerp:function(e,j){return this.set((e.x-this.x)* -j+this.x,(e.y-this.y)*j+this.y)},isZero:function(){return 1E-4>this.length()}});var l={set:function(e,j){this._x=e;this._y=j;return this.trigger(Two.Events.change)},copy:function(e){this._x=e.x;this._y=e.y;return this.trigger(Two.Events.change)},clear:function(){this._y=this._x=0;return this.trigger(Two.Events.change)},clone:function(){return new p(this._x,this._y)},add:function(e,j){this._x=e.x+j.x;this._y=e.y+j.y;return this.trigger(Two.Events.change)},addSelf:function(e){this._x+=e.x;this._y+= -e.y;return this.trigger(Two.Events.change)},sub:function(e,j){this._x=e.x-j.x;this._y=e.y-j.y;return this.trigger(Two.Events.change)},subSelf:function(e){this._x-=e.x;this._y-=e.y;return this.trigger(Two.Events.change)},multiplySelf:function(e){this._x*=e.x;this._y*=e.y;return this.trigger(Two.Events.change)},multiplyScalar:function(e){this._x*=e;this._y*=e;return this.trigger(Two.Events.change)},divideScalar:function(e){return e?(this._x/=e,this._y/=e,this.trigger(Two.Events.change)):this.clear()}, -negate:function(){return this.multiplyScalar(-1)},dot:function(e){return this._x*e.x+this._y*e.y},lengthSquared:function(){return this._x*this._x+this._y*this._y},length:function(){return Math.sqrt(this.lengthSquared())},normalize:function(){return this.divideScalar(this.length())},distanceTo:function(e){return Math.sqrt(this.distanceToSquared(e))},distanceToSquared:function(e){var j=this._x-e.x;e=this._y-e.y;return j*j+e*e},setLength:function(e){return this.normalize().multiplyScalar(e)},equals:function(e){return 1E-4> -this.distanceTo(e)},lerp:function(e,j){return this.set((e.x-this._x)*j+this._x,(e.y-this._y)*j+this._y)},isZero:function(){return 1E-4>this.length()}};Two.Vector.prototype.bind=Two.Vector.prototype.on=function(){this._bound||(Two.Vector.MakeGetterSetter(this,"x",this.x),Two.Vector.MakeGetterSetter(this,"y",this.y),_.extend(this,l),this._bound=!0);Backbone.Events.bind.apply(this,arguments);return this}})();(function(){_.range(6);var p=Math.cos,l=Math.sin,e=Math.tan,j=Two.Matrix=function(e,c,b,h,j,a){this.elements=new Two.Array(9);var k=e;_.isArray(k)||(k=_.toArray(arguments));this.identity().set(k)};_.extend(j,{Identity:[1,0,0,0,1,0,0,0,1],Multiply:function(e,c){if(3>=c.length){var b=c[0]||0,h=c[1]||0,j=c[2]||0;return{x:e[0]*b+e[1]*h+e[2]*j,y:e[3]*b+e[4]*h+e[5]*j,z:e[6]*b+e[7]*h+e[8]*j}}var b=e[0],h=e[1],j=e[2],a=e[3],k=e[4],q=e[5],s=e[6],f=e[7],r=e[8],l=c[0],p=c[1],u=c[2],y=c[3],n=c[4],t=c[5],d=c[6], -v=c[7],z=c[8];return[b*l+h*y+j*d,b*p+h*n+j*v,b*u+h*t+j*z,a*l+k*y+q*d,a*p+k*n+q*v,a*u+k*t+q*z,s*l+f*y+r*d,s*p+f*n+r*v,s*u+f*t+r*z]}});_.extend(j.prototype,Backbone.Events,{set:function(e,c,b,h,j,a){var k=e;_.isArray(k)||(k=_.toArray(arguments));_.each(k,function(a,b){_.isNumber(a)&&(this.elements[b]=a)},this);return this.trigger(Two.Events.change)},identity:function(){this.set(j.Identity);return this},multiply:function(e,c,b,h,j,a,k,q,s){var f=arguments,r=f.length;if(1>=r)return _.each(this.elements, -function(a,b){this.elements[b]=a*e},this),this.trigger(Two.Events.change);if(3>=r)return e=e||0,c=c||0,b=b||0,j=this.elements,{x:j[0]*e+j[1]*c+j[2]*b,y:j[3]*e+j[4]*c+j[5]*b,z:j[6]*e+j[7]*c+j[8]*b};r=this.elements;A0=r[0];A1=r[1];A2=r[2];A3=r[3];A4=r[4];A5=r[5];A6=r[6];A7=r[7];A8=r[8];B0=f[0];B1=f[1];B2=f[2];B3=f[3];B4=f[4];B5=f[5];B6=f[6];B7=f[7];B8=f[8];this.elements[0]=A0*B0+A1*B3+A2*B6;this.elements[1]=A0*B1+A1*B4+A2*B7;this.elements[2]=A0*B2+A1*B5+A2*B8;this.elements[3]=A3*B0+A4*B3+A5*B6;this.elements[4]= -A3*B1+A4*B4+A5*B7;this.elements[5]=A3*B2+A4*B5+A5*B8;this.elements[6]=A6*B0+A7*B3+A8*B6;this.elements[7]=A6*B1+A7*B4+A8*B7;this.elements[8]=A6*B2+A7*B5+A8*B8;return this.trigger(Two.Events.change)},inverse:function(e){var c=this.elements;e=e||new Two.Matrix;var b=c[0],h=c[1],j=c[2],a=c[3],k=c[4],q=c[5],s=c[6],f=c[7],c=c[8],r=c*k-q*f,l=-c*a+q*s,p=f*a-k*s,u=b*r+h*l+j*p;if(!u)return null;u=1/u;e.elements[0]=r*u;e.elements[1]=(-c*h+j*f)*u;e.elements[2]=(q*h-j*k)*u;e.elements[3]=l*u;e.elements[4]=(c*b- -j*s)*u;e.elements[5]=(-q*b+j*a)*u;e.elements[6]=p*u;e.elements[7]=(-f*b+h*s)*u;e.elements[8]=(k*b-h*a)*u;return e},scale:function(e,c){1>=arguments.length&&(c=e);return this.multiply(e,0,0,0,c,0,0,0,1)},rotate:function(e){var c=p(e);e=l(e);return this.multiply(c,-e,0,e,c,0,0,0,1)},translate:function(e,c){return this.multiply(1,0,e,0,1,c,0,0,1)},skewX:function(j){j=e(j);return this.multiply(1,j,0,0,1,0,0,0,1)},skewY:function(j){j=e(j);return this.multiply(1,0,0,j,1,0,0,0,1)},toString:function(){return this.toArray().join(" ")}, -toArray:function(e){var c=this.elements,b=parseFloat(c[0].toFixed(3)),h=parseFloat(c[1].toFixed(3)),j=parseFloat(c[2].toFixed(3)),a=parseFloat(c[3].toFixed(3)),k=parseFloat(c[4].toFixed(3)),q=parseFloat(c[5].toFixed(3));if(e){e=parseFloat(c[6].toFixed(3));var s=parseFloat(c[7].toFixed(3)),c=parseFloat(c[8].toFixed(3));return[b,a,e,h,k,s,j,q,c]}return[b,a,h,k,j,q]},clone:function(){return new Two.Matrix(this.elements[0],this.elements[1],this.elements[2],this.elements[3],this.elements[4],this.elements[5], -this.elements[6],this.elements[7],this.elements[8])}})})();(function(){function p(c){var b={},e=c.id,l=c.translation,a=c.rotation,k=c.scale,q=c.stroke,s=c.linewidth,f=c.fill,r=c.opacity,p=c.visible,w=c.cap,u=c.join,y=c.miter,n=c.curved,t=c.closed,d=c.vertices;e&&(b.id=m.Identifier+e);l&&(_.isNumber(k)&&_.isNumber(a))&&(b.transform="matrix("+c._matrix.toString()+")");q&&(b.stroke=q);f&&(b.fill=f);r&&(b["stroke-opacity"]=b["fill-opacity"]=r);b.visibility=p?"visible":"hidden";w&&(b["stroke-linecap"]=w);u&&(b["stroke-linejoin"]=u);y&&(b["stroke-miterlimit"]= -y);s&&(b["stroke-width"]=s);d&&(b.d=j.toString(d,t,n));return b}var l=Two.Utils.getCurveFromPoints,e=Two.Utils.mod,j={version:1.1,ns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",createElement:function(c,b){var e=document.createElementNS(this.ns,c);"svg"===c&&(b=_.defaults(b||{},{version:this.version}));_.isObject(b)&&this.setAttributes(e,b);return e},setAttributes:function(c,b){_.each(b,function(b,c){this.setAttribute(c,b)},c);return this},removeAttributes:function(c,b){_.each(b, -function(b){this.removeAttribute(b)},c);return this},toString:function(c,b,h){var j=c.length,a=j-1;if(!h)return _.map(c,function(c,e){var f;f=(0>=e?"M":"L")+(" "+c.x.toFixed(3)+" "+c.y.toFixed(3));e>=a&&b&&(f+=" Z");return f}).join(" ");var k=l(c,b);return _.map(k,function(c,h){var f,m=b?e(h-1,j):Math.max(h-1,0),l=b?e(h+1,j):Math.min(h+1,a);f=k[m];var l=k[l],m=f.v.x.toFixed(3),p=f.v.y.toFixed(3),u=c.u.x.toFixed(3),y=c.u.y.toFixed(3),n=c.x.toFixed(3),t=c.y.toFixed(3);f=0>=h?"M "+n+" "+t:"C "+m+" "+ -p+" "+u+" "+y+" "+n+" "+t;h>=a&&b&&(m=c.v.x.toFixed(3),p=c.v.y.toFixed(3),u=l.u.x.toFixed(3),y=l.u.y.toFixed(3),n=l.x.toFixed(3),t=l.y.toFixed(3),f=f+(" C "+m+" "+p+" "+u+" "+y+" "+n+" "+t)+" Z");return f}).join(" ")}},m=Two[Two.Types.svg]=function(){this.count=0;this.domElement=j.createElement("svg");this.elements=[];this.domElement.style.visibility="hidden";this.unveil=_.once(_.bind(function(){this.domElement.style.visibility="visible"},this))};_.extend(m,{Identifier:"two-",Utils:j});_.extend(m.prototype, -Backbone.Events,{setSize:function(c,b){this.width=c;this.height=b;j.setAttributes(this.domElement,{width:c,height:b});return this},add:function(c){var b=c,e=this.elements,m=this.domElement;_.isArray(c)||(b=_.map(arguments,function(a){return a}));_.each(b,function(a){var b;b=a instanceof Two.Group;if(_.isUndefined(a.id)){var c=this.count;this.count++;a.id=c}b?(b="g",_.isUndefined(a.parent)&&(a.parent=this,a.unbind(Two.Events.change).bind(Two.Events.change,_.bind(this.update,this))),a=p(a),delete a.stroke, -delete a.fill,delete a["fill-opacity"],delete a["stroke-opacity"],delete a["stroke-linecap"],delete a["stroke-linejoin"],delete a["stroke-miterlimit"],delete a["stroke-width"]):(b="path",a=p(a));a=j.createElement(b,a);m.appendChild(a);e.push(a)},this);return this},update:function(c,b,e,m,a){var k=this.elements,q=k[c];switch(b){case Two.Properties.hierarchy:_.each(e,function(a){q.appendChild(k[a])});break;case Two.Properties.demotion:_.each(e,function(a){q.removeChild(k[a])});break;default:a:{c=b; -switch(c){case "matrix":c="transform";e="matrix("+e.toString()+")";break;case "visible":c="visibility";e=e?"visible":"hidden";break;case "cap":c="stroke-linecap";break;case "join":c="stroke-linejoin";break;case "miter":c="stroke-miterlimit";break;case "linewidth":c="stroke-width";break;case "vertices":c="d";e=j.toString(e,m,a);break;case "opacity":j.setAttributes(q,{"stroke-opacity":e,"fill-opacity":e});break a}q.setAttribute(c,e)}}return this},render:function(){this.unveil();return this}})})();(function(){var p=Two.Utils.getCurveFromPoints,l=Two.Utils.mod,e=function(b){_.each(b,function(b,c){this[c]=b},this);this.children=[]};_.extend(e.prototype,{appendChild:function(b){var c=b.parent;_.isUndefined(c)||c.removeChild(b);this.children.push(b);b.parent=this;return this},removeChild:function(b){b=_.indexOf(this.children,b);return 0>b?this:this.children.splice(b,1)[0]},render:function(b){var c=this.matrix;b.save();b.transform(c[0],c[1],c[2],c[3],c[4],c[5]);_.each(this.children,function(c){c.render(b)}); -b.restore();return this}});var j=function(b){_.each(b,function(b,c){this[c]=b},this)};_.extend(j.prototype,{render:function(b){var c=this.matrix,e=this.stroke,a=this.linewidth,k=this.fill,j=this.opacity,m=this.cap,f=this.join,r=this.miter,p=this.curved,w=this.closed,u=this.commands,y=u.length,n=y-1;if(!this.visible)return this;b.save();c&&b.transform(c[0],c[1],c[2],c[3],c[4],c[5]);k&&(b.fillStyle=k);e&&(b.strokeStyle=e);a&&(b.lineWidth=a);r&&(b.miterLimit=r);f&&(b.lineJoin=f);m&&(b.lineCap=m);_.isNumber(j)&& -(b.globalAlpha=j);b.beginPath();_.each(u,function(a,d){var f=a.x.toFixed(3),c=a.y.toFixed(3);if(p){var e=w?l(d-1,y):Math.max(d-1,0),h=w?l(d+1,y):Math.min(d+1,n),k=u[e],h=u[h],e=k.v.x.toFixed(3),k=k.v.y.toFixed(3),j=a.u.x.toFixed(3),q=a.u.y.toFixed(3);0>=d?b.moveTo(f,c):(b.bezierCurveTo(e,k,j,q,f,c),d>=n&&w&&(e=a.v.x.toFixed(3),k=a.v.y.toFixed(3),j=h.u.x.toFixed(3),q=h.u.y.toFixed(3),f=h.x.toFixed(3),c=h.y.toFixed(3),b.bezierCurveTo(e,k,j,q,f,c)))}else 0>=d?b.moveTo(f,c):b.lineTo(f,c)});w&&!p&&b.closePath(); -b.fill();b.stroke();b.restore()}});var m={devicePixelRatio:this.devicePixelRatio||1,getBackingStoreRatio:function(b){return b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1},getRatio:function(b){return this.devicePixelRatio/this.getBackingStoreRatio(b)},toArray:function(b,c,e){return!c?_.map(b,function(a){return{x:a.x,y:a.y}}):p(b,e)}},c=Two[Two.Types.canvas]=function(){this.count=0;this.domElement=document.createElement("canvas"); -this.ctx=this.domElement.getContext("2d");this.overdraw=!1;this.elements=[];this.stage=null};_.extend(c,{Group:e,Element:j,getStyles:function(b){var c={},e=b.id,a=b._matrix,k=b.stroke,j=b.linewidth,s=b.fill,f=b.opacity,l=b.visible,p=b.cap,w=b.join,u=b.miter,y=b.curved,n=b.closed;b=b.vertices;e&&(c.id=e);_.isObject(a)&&(c.matrix=a.toArray());k&&(c.stroke=k);s&&(c.fill=s);_.isNumber(f)&&(c.opacity=f);p&&(c.cap=p);w&&(c.join=w);u&&(c.miter=u);j&&(c.linewidth=j);b&&(c.commands=m.toArray(b,y,n));c.visible= -!!l;c.curved=!!y;c.closed=!!n;return c},setStyles:function(b,c,e,a,k){switch(c){case "matrix":c="matrix";e=e.toArray();break;case "vertices":c="commands",b.curved=k,b.closed=a,e=m.toArray(e,b.curved,b.closed)}b[c]=e},Utils:m});_.extend(c.prototype,Backbone.Events,{setSize:function(b,c,e){this.width=b;this.height=c;this.ratio=_.isUndefined(e)?m.getRatio(this.ctx):e;this.domElement.width=b*this.ratio;this.domElement.height=c*this.ratio;_.extend(this.domElement.style,{width:b+"px",height:c+"px"});return this}, -add:function(b){constructor=Object.getPrototypeOf(this).constructor;var c=b,e=this.elements,a=constructor.Group,k=constructor.Element,j=constructor.getStyles;_.isArray(b)||(c=_.map(arguments,function(a){return a}));_.each(c,function(b){var c;c=b instanceof Two.Group;var h=_.isNull(this.stage);if(_.isUndefined(b.id)){var m=this.count;this.count++;b.id=m}c?(c=j.call(this,b),delete c.stroke,delete c.fill,delete c.opacity,delete c.cap,delete c.join,delete c.miter,delete c.linewidth,c=new a(c),h&&(this.stage= -c,this.stage.object=b,b.parent=this,b.unbind(Two.Events.change).bind(Two.Events.change,_.bind(this.update,this)))):c=new k(j.call(this,b));e.push(c);h||this.stage.appendChild(c)},this);return this},update:function(b,c,e,a,k,j){var m=Object.getPrototypeOf(this).constructor,f=this.elements,l=f[b];switch(c){case Two.Properties.hierarchy:_.each(e,function(a){l.appendChild(f[a])});break;case Two.Properties.demotion:_.each(e,function(a){l.removeChild(f[a]);this.elements[a]=null},this);break;default:m.setStyles.call(this, -l,c,e,a,k,j)}return this},render:function(){if(_.isNull(this.stage))return this;1!==this.ratio&&(this.ctx.save(),this.ctx.scale(this.ratio,this.ratio));this.overdraw||this.ctx.clearRect(0,0,this.width,this.height);this.stage.render(this.ctx);1!==this.ratio&&this.ctx.restore();return this}})})();(function(){function p(a,b){var c=Math.min(a.top,b.top),e=Math.min(a.left,b.left),f=Math.max(a.right,b.right),h=Math.max(a.bottom,b.bottom);return{top:c,left:e,right:f,bottom:h,width:f-e,height:h-c,centroid:{x:-e,y:-c}}}var l=Two[Two.Types.canvas],e=Two.Matrix.Multiply,j=Two[Two.Types.canvas].Utils.toArray,m=Two.Utils.mod,c=function(a){l.Group.call(this,a)};_.extend(c.prototype,l.Group.prototype,{appendChild:function(){l.Group.prototype.appendChild.apply(this,arguments);this.updateMatrix();return this}, -updateTexture:function(a){_.each(this.children,function(b){b.updateTexture(a)});return this},updateMatrix:function(a){var b=a&&a._matrix||this.parent&&this.parent._matrix;a=a&&a._scale||this.parent&&this.parent._scale;if(!b)return this;this._matrix=e(this.matrix,b);this._scale=this.scale*a;_.each(this.children,function(a){a.updateMatrix(this)},this);return this},render:function(a,b){_.each(this.children,function(c){c.render(a,b)})}});var b=function(a){l.Element.call(this,a)};_.extend(b.prototype, -l.Element.prototype,{updateMatrix:function(a){var b=a&&a._matrix||this.parent&&this.parent._matrix;a=a&&a._scale||this.parent&&this.parent._scale;if(!b)return this;this._matrix=e(this.matrix,b);this._scale=this.scale*a;return this},updateTexture:function(a){h.updateTexture(a,this);return this},render:function(a,b){if(!this.visible||!this.opacity||!this.buffer)return this;a.bindBuffer(a.ARRAY_BUFFER,this.textureCoordsBuffer);a.vertexAttribPointer(b.textureCoords,2,a.FLOAT,!1,0,0);a.bindTexture(a.TEXTURE_2D, -this.texture);a.uniformMatrix3fv(b.matrix,!1,this._matrix);a.bindBuffer(a.ARRAY_BUFFER,this.buffer);a.vertexAttribPointer(b.position,2,a.FLOAT,!1,0,0);a.drawArrays(a.TRIANGLES,0,6);return this}});var h={canvas:document.createElement("canvas"),uv:new Two.Array([0,0,1,0,0,1,0,1,1,0,1,1]),getBoundingClientRect:function(a,b,c){var e=Infinity,f=-Infinity,h=Infinity,j=-Infinity;_.each(a,function(a){var b=a.x,k=a.y,m;h=Math.min(k,h);e=Math.min(b,e);f=Math.max(b,f);j=Math.max(k,j);c&&(b=a.u.x,k=a.u.y,m=a.v.x, -a=a.v.y,h=Math.min(k,a,h),e=Math.min(b,m,e),f=Math.max(b,m,f),j=Math.max(k,a,j))});_.isNumber(b)&&(h-=b,e-=b,f+=b,j+=b);return{top:h,left:e,right:f,bottom:j,width:f-e,height:j-h,centroid:{x:-e,y:-h}}},getTriangles:function(a){var b=a.top,c=a.left,e=a.right;a=a.bottom;return new Two.Array([c,b,e,b,c,a,c,a,e,b,e,a])},updateCanvas:function(a){var b=a.commands,c=this.canvas,e=this.ctx,f=a._scale,h=a.stroke,j=a.linewidth*f,l=a.fill,p=a.opacity,x=a.cap,n=a.join,t=a.miter,d=a.curved,v=a.closed,z=b.length, -J=z-1;c.width=Math.max(Math.ceil(a.rect.width*f),1);c.height=Math.max(Math.ceil(a.rect.height*f),1);a=a.rect.centroid;var C=a.x*f,D=a.y*f;e.clearRect(0,0,c.width,c.height);l&&(e.fillStyle=l);h&&(e.strokeStyle=h);j&&(e.lineWidth=j);t&&(e.miterLimit=t);n&&(e.lineJoin=n);x&&(e.lineCap=x);_.isNumber(p)&&(e.globalAlpha=p);e.beginPath();_.each(b,function(a,c){var h=(a.x*f+C).toFixed(3),j=(a.y*f+D).toFixed(3);if(d){var l=v?m(c-1,z):Math.max(c-1,0),q=v?m(c+1,z):Math.min(c+1,J),n=b[l],q=b[q],l=(n.v.x*f+C).toFixed(3), -n=(n.v.y*f+D).toFixed(3),p=(a.u.x*f+C).toFixed(3),g=(a.u.y*f+D).toFixed(3);0>=c?e.moveTo(h,j):(e.bezierCurveTo(l,n,p,g,h,j),c>=J&&v&&(l=(a.v.x*f+C).toFixed(3),n=(a.v.y*f+D).toFixed(3),p=(q.u.x*f+C).toFixed(3),g=(q.u.y*f+D).toFixed(3),h=(q.x*f+C).toFixed(3),j=(q.y*f+D).toFixed(3),e.bezierCurveTo(l,n,p,g,h,j)))}else 0>=c?e.moveTo(h,j):e.lineTo(h,j)});v&&!d&&e.closePath();e.fill();e.stroke()},updateTexture:function(a,b){this.updateCanvas(b);b.texture&&a.deleteTexture(b.texture);a.bindBuffer(a.ARRAY_BUFFER, -b.textureCoordsBuffer);b.texture=a.createTexture();a.bindTexture(a.TEXTURE_2D,b.texture);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_S,a.CLAMP_TO_EDGE);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MIN_FILTER,a.LINEAR);0>=this.canvas.width||0>=this.canvas.height||a.texImage2D(a.TEXTURE_2D,0,a.RGBA,a.RGBA,a.UNSIGNED_BYTE,this.canvas)},updateBuffer:function(a,b,c){_.isObject(b.buffer)&&a.deleteBuffer(b.buffer);b.buffer=a.createBuffer();a.bindBuffer(a.ARRAY_BUFFER, -b.buffer);a.enableVertexAttribArray(c.position);a.bufferData(a.ARRAY_BUFFER,b.triangles,a.STATIC_DRAW);_.isObject(b.textureCoordsBuffer)&&a.deleteBuffer(b.textureCoordsBuffer);b.textureCoordsBuffer=a.createBuffer();a.bindBuffer(a.ARRAY_BUFFER,b.textureCoordsBuffer);a.enableVertexAttribArray(c.textureCoords);a.bufferData(a.ARRAY_BUFFER,this.uv,a.STATIC_DRAW)},program:{create:function(a,b){var c=a.createProgram();_.each(b,function(b){a.attachShader(c,b)});a.linkProgram(c);if(!a.getProgramParameter(c, -a.LINK_STATUS))throw error=a.getProgramInfoLog(c),a.deleteProgram(c),new Two.Utils.Error("unable to link program: "+error);return c}},shaders:{create:function(a,b,c){c=a.createShader(a[c]);a.shaderSource(c,b);a.compileShader(c);if(!a.getShaderParameter(c,a.COMPILE_STATUS))throw b=a.getShaderInfoLog(c),a.deleteShader(c),new Two.Utils.Error("unable to compile shader "+c+": "+b);return c},types:{vertex:"VERTEX_SHADER",fragment:"FRAGMENT_SHADER"},vertex:"attribute vec2 a_position;\nattribute vec2 a_textureCoords;\n\nuniform mat3 u_matrix;\nuniform vec2 u_resolution;\n\nvarying vec2 v_textureCoords;\n\nvoid main() {\n vec2 projected = (u_matrix * vec3(a_position, 1)).xy;\n vec2 normal = projected / u_resolution;\n vec2 clipspace = (normal * 2.0) - 1.0;\n\n gl_Position = vec4(clipspace * vec2(1.0, -1.0), 0.0, 1.0);\n v_textureCoords = a_textureCoords;\n}", -fragment:"precision mediump float;\n\nuniform sampler2D u_image;\nvarying vec2 v_textureCoords;\n\nvoid main() {\n gl_FragColor = texture2D(u_image, v_textureCoords);\n}"}};h.ctx=h.canvas.getContext("2d");var x=Two[Two.Types.webgl]=function(a){this.count=0;this.domElement=document.createElement("canvas");this.elements=[];this.stage=null;a=_.defaults(a||{},{antialias:!1,alpha:!0,premultipliedAlpha:!0,stencil:!0,preserveDrawingBuffer:!1});a=this.ctx=this.domElement.getContext("webgl",a)||this.domElement.getContext("experimental-webgl", -a);if(!this.ctx)throw new Two.Utils.Error("unable to create a webgl context. Try using another renderer.");var b=h.shaders.create(a,h.shaders.vertex,h.shaders.types.vertex),c=h.shaders.create(a,h.shaders.fragment,h.shaders.types.fragment);this.program=h.program.create(a,[b,c]);a.useProgram(this.program);this.program.position=a.getAttribLocation(this.program,"a_position");this.program.matrix=a.getUniformLocation(this.program,"u_matrix");this.program.textureCoords=a.getAttribLocation(this.program,"a_textureCoords"); -a.disable(a.DEPTH_TEST);a.enable(a.BLEND);a.blendEquationSeparate(a.FUNC_ADD,a.FUNC_ADD);a.blendFuncSeparate(a.SRC_ALPHA,a.ONE_MINUS_SRC_ALPHA,a.ONE,a.ONE_MINUS_SRC_ALPHA)};_.extend(x,{Group:c,Element:b,getStyles:function(a){var c={},e=a.id,m=a._matrix,f=a.stroke,l=a.linewidth,p=a.fill,x=a.opacity,u=a.visible,y=a.cap,n=a.join,t=a.miter,d=a.curved,v=a.closed,z=a.vertices;e&&(c.id=e);_.isObject(m)&&(c.matrix=c._matrix=m.toArray(!0),c.scale=c._scale=1);f&&(c.stroke=f);p&&(c.fill=p);_.isNumber(x)&&(c.opacity= -x);y&&(c.cap=y);n&&(c.join=n);t&&(c.miter=t);l&&(c.linewidth=l);z&&(c.vertices=j(z,d,v),c.commands=c.vertices,c.rect=h.getBoundingClientRect(c.commands,c.linewidth,c.curved),c.triangles=h.getTriangles(c.rect));c.visible=!!u;c.curved=!!d;c.closed=!!v;a instanceof Two.Polygon&&(h.updateBuffer(this.ctx,c,this.program),b.prototype.updateTexture.call(c,this.ctx));return c},setStyles:function(a,b,c,e,f,m){var l=!1;/matrix/.test(b)?(a[b]=c.toArray(!0),_.isNumber(e)&&(l=a.scale!==e,a.scale=e),a.updateMatrix()): -/(stroke|fill|opacity|cap|join|miter|linewidth)/.test(b)?(a[b]=c,a.rect=p(h.getBoundingClientRect(a.commands,a.linewidth,a.curved),a.rect),a.triangles=h.getTriangles(a.rect),h.updateBuffer(this.ctx,a,this.program),l=!0):"vertices"===b?(_.isUndefined(e)||(a.closed=e),_.isUndefined(f)||(a.curved=f),m?a.commands=j(c,a.curved,a.closed):(a.vertices=j(c,a.curved,a.closed),a.commands=a.vertices),a.rect=p(h.getBoundingClientRect(a.vertices,a.linewidth,a.curved),a.rect),a.triangles=h.getTriangles(a.rect), -h.updateBuffer(this.ctx,a,this.program),l=!0):a[b]=c;l&&a.updateTexture(this.ctx)}});_.extend(x.prototype,Backbone.Events,l.prototype,{setSize:function(a,b){l.prototype.setSize.apply(this,arguments);this.ratio=1;this.domElement.width=a;this.domElement.height=b;this.ctx.viewport(0,0,a,b);var c=this.ctx.getUniformLocation(this.program,"u_resolution");this.ctx.uniform2f(c,a,b);return this},render:function(){if(_.isNull(this.stage))return this;this.stage.render(this.ctx,this.program);return this}})})();(function(){var p=Two.Shape=function(l){this._matrix=new Two.Matrix;var e=_.debounce(_.bind(function(){var e=this._matrix.identity().translate(this.translation.x,this.translation.y).scale(this.scale).rotate(this.rotation);this.trigger(Two.Events.change,this.id,"matrix",e,this.scale)},this),0);this._rotation=0;Object.defineProperty(this,"rotation",{get:function(){return this._rotation},set:function(j){this._rotation=j;e()}});this._scale="scale";Object.defineProperty(this,"scale",{get:function(){return this._scale}, -set:function(j){this._scale=j;e()}});this.translation=new Two.Vector;this.rotation=0;this.scale=1;this.translation.bind(Two.Events.change,e);if(l)return this;p.MakeGetterSetter(this,p.Properties);this.fill="#fff";this.stroke="#000";this.opacity=this.linewidth=1;this.visible=!0;this.join=this.cap="round";this.miter=1};_.extend(p,{Properties:"fill stroke linewidth opacity visible cap join miter".split(" "),MakeGetterSetter:function(l,e){_.isArray(e)||(e=[e]);_.each(e,function(e){var m="_"+e;Object.defineProperty(l, -e,{get:function(){return this[m]},set:function(c){this[m]=c;this.trigger(Two.Events.change,this.id,e,c,this)}})})}});_.extend(p.prototype,Backbone.Events,{addTo:function(l){l.add(this);return this},noFill:function(){this.fill="transparent";return this},noStroke:function(){this.stroke="transparent";return this},clone:function(){var l=new p;l.translation.copy(this.translation);_.each(p.Properties,function(e){l[e]=this[e]},this);return this}})})();(function(){var p=Two.Group=function(){Two.Shape.call(this,!0);delete this.stroke;delete this.fill;delete this.linewidth;delete this.opacity;delete this.cap;delete this.join;delete this.miter;p.MakeGetterSetter(this,Two.Shape.Properties);this.children={}};_.extend(p,{MakeGetterSetter:function(l,e){_.isArray(e)||(e=[e]);_.each(e,function(e){var m="_"+e;Object.defineProperty(l,e,{get:function(){return this[m]},set:function(c){this[m]=c;_.each(this.children,function(b){b[e]=c})}})})}});_.extend(p.prototype, -Two.Shape.prototype,{clone:function(l){l=l||this.parent;var e=_.map(this.children,function(e){return e.clone(l)}),j=new p;l.add(j);j.add(e);j.translation.copy(this.translation);j.rotation=this.rotation;j.scale=this.scale;return j},corner:function(){var l=this.getBoundingClientRect(!0),e={x:l.left,y:l.top};_.each(this.children,function(j){j.translation.subSelf(e)});return this},center:function(){var l=this.getBoundingClientRect(!0);l.centroid={x:l.left+l.width/2,y:l.top+l.height/2};_.each(this.children, -function(e){e.translation.subSelf(l.centroid)});return this},add:function(l){var e=l,j=this.children,m=this.parent,c=[];_.isArray(l)||(e=_.toArray(arguments));var b=_.bind(function(b,c,a,e,j,m){this.trigger(Two.Events.change,b,c,a,e,j,m)},this);_.each(e,function(e){if(e){var l=e.id,a=e.parent;_.isUndefined(l)&&(m.add(e),l=e.id);_.isUndefined(j[l])&&(a&&delete a.children[l],j[l]=e,e.parent=this,e.unbind(Two.Events.change).bind(Two.Events.change,b),c.push(l))}},this);0=arguments.length&&m)return m.remove(this),this;_.isArray(l)||(e=_.toArray(arguments));_.each(e,function(b){var e=b.id;e in j&&(delete j[e],delete b.parent,b.unbind(Two.Events.change),c.push(e))});0'); + $('body').append(img); + var share = new MozActivity({ + name: 'share', + data: { + type: 'image/*' + } + }) + }) + $c.last().bind('touchstart', function(e) { + e.preventDefault(); + var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY); + startPoint(xy.x, xy.y); + window.active = true; + }).bind('touchmove', function(e) { + e.preventDefault(); + if (!window.active || settings.type == 'line') return; + var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY); + drawPoint(xy.x, xy.y); + }).bind('touchend', function(e) { + e.preventDefault(); + window.active = false; + + if(window.points.history.last < window.points.history.length-1) { + window.points.history.splice(window.points.history.last+1); + } + + window.points.history.push({ + data: c.getImageData(0, 0, $c.width(), $c.height()), + points: window.points.slice(0) + }) + window.points.history.last = window.points.history.length-1; + }) + + // Value Selector + + var $selector = $('form[data-type="value-selector"]'); + + $selector.find('li').on('touchend', function(e) { + $(this).parent().find('li').removeAttr('aria-selected'); + $(this).attr('aria-selected', 'true'); + var prop = $(this).parents('form').attr('id'), + key = $(this).find('label span').html().toLowerCase(); + window.settings[prop] = key; + + $('button[id="set' + prop + '"] span').html(key[0].toUpperCase() + key.substr(1)); + + $(this).parents('form').addClass('hidden'); + }) + + $selector.submit(function(e) { + e.preventDefault(); + $(this).addClass('hidden'); + }) + + // Value Selector Callers + + var $btn = $('button[id^="set"]'); + $btn.each(function() { + var target = /set(.*)/.exec($(this).attr('id'))[1]; + $(this).on('touchend', function(e) { + e.preventDefault(); + $('form[id="' + target + '"]').removeClass('hidden'); + }) + }) + + // Seekbar + + var sliderLeft = $('div[role="slider"] button').offset().left; + $('div[role="slider"] button').on('touchstart', function() { + $(this).attr('data-moving','true'); + }).on('touchmove', function(e) { + if( $(this).attr('data-moving') ) { + var x = e.changedTouches[0].pageX - sliderLeft - 15; + if( x <= 100 && x > 0 ) { + $(this).css('left', x+'%'); + $(this).parent().find('progress').attr('value', x); + settings.lineWidth = x / 10; + $('#lineWidth span').html(x); + } + } + }).on('touchend', function() { + $(this).removeAttr('data-moving'); + }) diff --git a/manifest.webapp b/manifest.webapp index ea81b9b..6b2289c 100644 --- a/manifest.webapp +++ b/manifest.webapp @@ -4,14 +4,14 @@ "version": 1, "launch_path": "/index.html", "icons": { - "16": "/images/logo16.png", - "32": "/images/logo32.png", - "48": "/images/logo48.png", - "60": "/images/logo60.png", - "64": "/images/logo64.png", - "90": "/images/logo90.png", - "120": "/images/logo120.png", - "128": "/images/logo128.png" + "16": "/img/icons/icon16.png", + "32": "/img/icons/icon32.png", + "48": "/img/icons/icon48.png", + "60": "/img/icons/icon60.png", + "64": "/img/icons/icon64.png", + "90": "/img/icons/icon90.png", + "120": "/img/icons/icon120.png", + "128": "/img/icons/icon128.png" }, "developer": { "name": "Mahdi Dibaiee",