diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:45:38 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:45:38 +0100 |
| commit | 4ab365b110f2f1f2b736326b7059244a32115089 (patch) | |
| tree | c3c7c0219f728ade49a78c238c51cc0c8d06ebd6 /files/de/web/css/css_boxmodell/box-shadow_generator/index.html | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-4ab365b110f2f1f2b736326b7059244a32115089.tar.gz translated-content-4ab365b110f2f1f2b736326b7059244a32115089.tar.bz2 translated-content-4ab365b110f2f1f2b736326b7059244a32115089.zip | |
unslug de: move
Diffstat (limited to 'files/de/web/css/css_boxmodell/box-shadow_generator/index.html')
| -rw-r--r-- | files/de/web/css/css_boxmodell/box-shadow_generator/index.html | 2884 |
1 files changed, 0 insertions, 2884 deletions
diff --git a/files/de/web/css/css_boxmodell/box-shadow_generator/index.html b/files/de/web/css/css_boxmodell/box-shadow_generator/index.html deleted file mode 100644 index b087898d03..0000000000 --- a/files/de/web/css/css_boxmodell/box-shadow_generator/index.html +++ /dev/null @@ -1,2884 +0,0 @@ ---- -title: Box-shadow Generator -slug: Web/CSS/CSS_Boxmodell/Box-shadow_generator -tags: - - CSS3 - - Werkzeuge - - box-shadow -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -<p>Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.</p> - -<div style="display: none;"> -<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><div id="container"> - <div class="group section"> - <div id="layer_manager"> - <div class="group section"> - <div class="button" data-type="add"> </div> - <div class="button" data-type="move-up"> </div> - <div class="button" data-type="move-down"> </div> - </div> - <div id="stack_container"></div> - </div> - - <div id="preview_zone"> - <div id="layer_menu" class="col span_12"> - <div class="button" id="element" data-type="subject" data-title="element"> element </div> - <div class="button" id="before" data-type="subject" data-title=":before"> - :before - <span class="delete" data-type="disable"></span> - </div> - <div class="button" id="after" data-type="subject" data-title=":after"> - :after - <span class="delete" data-type="disable"></span> - </div> - <div class="ui-checkbox" data-topic='before' data-label=":before"></div> - <div class="ui-checkbox" data-topic='after' data-label=":after"></div> - </div> - - <div id="preview"> - <div id="obj-element"> - <div class="content"> </div> - <div id="obj-before"> </div> - <div id="obj-after"> </div> - </div> - </div> - </div> - </div> - - <div id="controls" class="group section"> - <div class="wrap-left"> - <div class="colorpicker category"> - <div class="title"> </div> - <div id="colorpicker" class="group"> - <div id="gradient" class="gradient"> - <div id="gradient_picker"> </div> - </div> - <div id="hue" data-topic="hue" class="hue"> - <div id="hue_selector"> </div> - </div> - <div class="info"> - <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div> - <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div> - <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div> - </div> - <div class="alpha"> - <div id="alpha" data-topic="alpha"> - <div id="alpha_selector"> </div> - </div> - </div> - <div class="info"> - <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div> - <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div> - <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div> - </div> - <div class="preview block"> - <div id="output_color"> </div> - </div> - <div class="block info"> - <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> - <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> - </div> - </div> - </div> - </div> - - <div class="wrap-right"> - - <div id="shadow_properties" class="category"> - <div class="title"> Shadow properties </div> - <div class="group"> - <div class="group property"> - <div class="ui-slider-name"> inset </div> - <div class="ui-checkbox" data-topic='inset'></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Position x </div> - <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div> - <div class="ui-slider" data-topic="posX" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div> - <div class="ui-slider-input" data-topic="posX" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Position y </div> - <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div> - <div class="ui-slider" data-topic="posY" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div> - <div class="ui-slider-input" data-topic="posY" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Blur </div> - <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> - <div class="ui-slider" data-topic="blur" - data-min="0" data-max="200" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div> - <div class="ui-slider-input" data-topic="blur" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Spread </div> - <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div> - <div class="ui-slider" data-topic="spread" - data-min="-100" data-max="100" data-step="1" data-value="50"> - </div> - <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div> - <div class="ui-slider-input" data-topic="spread" data-unit="px"></div> - </div> - </div> - </div> - - <div id="element_properties" class="category"> - <div class="title"> Class element properties </div> - <div class="group"> - <div class="group property"> - <div class="ui-slider-name"> border </div> - <div class="ui-checkbox" data-topic='border-state' data-state="true"></div> - </div> - <div id="z-index" class="slidergroup"> - <div class="ui-slider-name"> z-index </div> - <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> - <div class="ui-slider" data-topic="z-index" - data-min="-10" data-max="10" data-step="1"></div> - <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div> - <div class="ui-slider-input" data-topic="z-index"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> top </div> - <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div> - <div class="ui-slider" data-topic="top" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div> - <div class="ui-slider-input" data-topic="top" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> left </div> - <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div> - <div class="ui-slider" data-topic="left" - data-min="-300" data-max="700" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> - <div class="ui-slider-input" data-topic="left" data-unit="px"></div> - </div> - <div id="transform_rotate" class="slidergroup"> - <div class="ui-slider-name"> Rotate </div> - <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> - <div class="ui-slider" data-topic="rotate" - data-min="-360" data-max="360" data-step="1" data-value="0"> - </div> - <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> - <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Width </div> - <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> - <div class="ui-slider" data-topic="width" - data-min="0" data-max="1000" data-step="1" data-value="200"> - </div> - <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> - <div class="ui-slider-input" data-topic="width" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Height </div> - <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div> - <div class="ui-slider" data-topic="height" - data-min="0" data-max="400" data-step="1" data-value="200"> - </div> - <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> - <div class="ui-slider-input" data-topic="height" data-unit="px"></div> - </div> - </div> - </div> - - <div id="output" class="category"> - <div id="menu" class="menu"></div> - <div class="title"> CSS Code </div> - <div class="group" style="border-top-left-radius: 0;"> - <div class="output" data-topic="element" data-name="element" - data-prop="width height background-color position=[relative] box-shadow"> - </div> - <div class="output" data-topic="before" data-name="element:before" - data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - <div class="output" data-topic="after" data-name="element:after" - data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - </div> - </div> - </div> - </div> -</div> -</pre> - -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">/* GRID OF TWELVE - * ========================================================================== */ - -.span_12 { - width: 100%; -} - -.span_11 { - width: 91.46%; -} - -.span_10 { - width: 83%; -} - -.span_9 { - width: 74.54%; -} - -.span_8 { - width: 66.08%; -} - -.span_7 { - width: 57.62%; -} - -.span_6 { - width: 49.16%; -} - -.span_5 { - width: 40.7%; -} - -.span_4 { - width: 32.24%; -} - -.span_3 { - width: 23.78%; -} - -.span_2 { - width: 15.32%; -} - -.span_1 { - width: 6.86%; -} - - -/* SECTIONS - * ========================================================================== */ - -.section { - clear: both; - padding: 0px; - margin: 0px; -} - -/* GROUPING - * ========================================================================== */ - - -.group:before, .group:after { - content: ""; - display: table; -} - -.group:after { - clear:both; -} - -.group { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ -} - -/* GRID COLUMN SETUP - * ========================================================================== */ - -.col { - display: block; - float:left; - margin: 1% 0 1% 1.6%; -} - -.col:first-child { - margin-left: 0; -} /* all browsers except IE6 and lower */ - -/* - * UI Slider - */ - -.slidergroup { - height: 20px; - margin: 10px 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.slidergroup * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Slider */ - -.ui-slider { - height: 10px; - width: 200px; - margin: 4px 10px; - display: block; - border: 1px solid #999; - border-radius: 3px; - background: #EEE; -} - -.ui-slider:hover { - cursor: pointer; -} - -.ui-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-slider-pointer { - width: 13px; - height: 13px; - background-color: #EEE; - border: 1px solid #2C9FC9; - border-radius: 3px; - position: relative; - top: -3px; - left: 0%; -} - -.ui-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 3px; - color: #FFF; - font-weight: bold; - text-align: center; -} - -.ui-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -.ui-slider-input > input { - margin: 0 10px; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -/* - * UI Button - */ - -/* Checkbox */ - -.ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-checkbox > input { - display: none; -} - -.ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; - - background-color: #888; - background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); - background-position: center center; - background-repeat: no-repeat; - - color: #FFF; - border-radius: 3px; - font-weight: bold; - float: left; -} - -.ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; -} - -.ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; -} - -.ui-checkbox > label:hover { - cursor: pointer; -} - -.ui-checkbox > input:checked + label { - background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); - background-color: #379B4A; -} - -/* - * BOX SHADOW GENERATOR TOOL - */ - -body { - max-width: 1000px; - height: 800px; - margin: 20px auto 0; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} - -#container { - width: 100%; - padding: 2px; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* container with shadows stacks */ -#stack_container { - height: 400px; - overflow: hidden; - position: relative; - border: 1px solid #CCC; - border-radius: 3px; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#stack_container .container { - height: 100%; - width: 100%; - position: absolute; - left: 100%; - transition-property: left; - transition-duration: 0.5s; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -#stack_container .title { - text-align: center; - font-weight: bold; - line-height: 2em; - border-bottom: 1px solid #43A6E1; - color: #666; -} - - -/* - * Stack of Layers for shadow - */ - -#layer_manager { - width: 17%; - background-color: #FEFEFE; - margin: 0 1% 0 0; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; -} - - -#layer_manager .button { - width: 30%; - height: 25px; - margin:0 0 10px; - color: #333; - background-color: #EEE; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - border: 1px solid #CCC; - border-radius: 3px; - - display: block; - background-position: center center; - background-repeat: no-repeat; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; -} - -#layer_manager .button:hover { - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; -} - -#layer_manager [data-type='add'] { - background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); -} - -#layer_manager [data-type='add']:hover { - background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); -} - -#layer_manager [data-type='move-up'] { - background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); - margin-left: 5%; - margin-right: 5%; -} - -#layer_manager [data-type='move-up']:hover { - background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png"); -} - -#layer_manager [data-type='move-down'] { - background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png"); -} - -#layer_manager [data-type='move-down']:hover { - background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png"); -} - -/* shadows classes */ - -#layer_manager .node { - width: 100%; - margin: 5px 0; - padding: 5px; - text-align: center; - background-color: #EEE; - border: 1px solid #DDD; - font-size: 0.75em; - line-height: 1.5em; - color: #333; - border-radius: 3px; - - position: relative; - display: block; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_manager .node:hover { - color: #FFF; - background-color: #3380C4; - cursor: pointer; -} - -/* active element styling */ - -#layer_manager [data-active='layer'] { - color: #FFF; - border: none; - background-color: #379B4A; -} - -#layer_manager [data-active='subject'] { - color: #FFF; - background-color: #467FC9; -} - -/* delete button */ - -#layer_manager .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 10px; - display: none; -} - -#layer_manager .delete:hover { - background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); -} - -#layer_manager .node:hover .delete { - display: block; -} - - -#layer_manager .stack { - padding: 0 5px; - max-height: 90%; - overflow: auto; - overflow-x: hidden; -} - - -/* - * Layer Menu - */ - -#layer_menu { - margin: 0 0 10px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_menu .button { - width: 100px; - margin: 0 5px 0 0; - padding: 2.5px; - color: #333; - background-color: #EEE; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - - position: relative; - display: block; - float: left; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_menu .button:hover { - color: #FFF; - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; -} - -#layer_menu .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 5px; - display: none; -} - -#layer_menu .delete:hover { - background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); -} - -#layer_menu .button:hover .delete { - display: block; -} - - -/* - * active element styling - */ - -#layer_menu [data-active='subject'] { - color: #FFF; - background-color: #379B4A; - border: 1px solid #379B4A; -} - - -/* Checkbox */ - -#layer_menu .ui-checkbox > label { - height: 15px; - line-height: 17px; - font-weight: normal; - width: 46px; - margin: 0 5px 0 0; -} - -#layer_menu .ui-checkbox > input:checked + label { - display: none; -} - - -/******************************************************************************/ -/******************************************************************************/ -/* - * Preview Area - */ - -#preview_zone { - width: 82%; - float: left; - -} - - -#preview { - width: 100%; - height: 400px; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - cursor: move; - float: left; -} - -#preview .content { - width: 100%; - height: 100%; - display: block; -} - -#obj-element { - width: 300px; - height: 100px; - border: 1px solid #CCC; - background: #FFF; - position: relative; -} - - -#obj-before { - height: 100%; - width: 100%; - background: #999; - border: 1px solid #CCC; - text-align: left; - display : block; - position: absolute; - z-index: -1; -} - -#obj-after { - height: 100%; - width: 100%; - background: #DDD; - border: 1px solid #CCC; - text-align: right; - display : block; - position: absolute; - z-index: -1; -} - - -/******************************************************************************/ -/******************************************************************************/ - -/** - * Controls - */ - -.wrap-left { - float: left; - overflow: hidden; -} - -.wrap-right { - float: right; - overflow: hidden; -} - -.wrap-left > * { - float: left; -} - -.wrap-right > * { - float: right; -} - -@media (min-width: 960px) { - - .wrap-left { - width: 45%; - } - - .wrap-right { - width: 55%; - } -} - - -@media (max-width: 959px) { - - .wrap-left { - width: 30%; - } - - .wrap-right { - width: 70%; - } -} - - -#controls { - color: #444; - margin: 10px 0 0 0; -} - - -#controls .category { - width: 500px; - margin: 0 auto 20px; - padding: 0; - -} - -#controls .category .title { - width: 100%; - height: 1.5em; - line-height: 1.5em; - color: #AAA; - text-align: right; -} - -#controls .category > .group { - border: 1px solid #CCC; - border-radius: 3px; -} - - -/** - * Color Picker - */ - -@media (min-width: 960px) { - #controls .colorpicker { - width: 420px; - } -} - -@media (max-width: 959px) { - #controls .colorpicker { - width: 210px; - } -} - -#colorpicker { - width: 100%; - margin: 0 auto; -} - -#colorpicker .gradient { - width: 200px; - height: 200px; - margin: 5px; - background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); - background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background-color: #F00; - float: left; -} - -#colorpicker .hue { - width: 200px; - height: 30px; - margin: 5px; - background: url("https://mdn.mozillademos.org/files/5701/hue.png"); - background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - float: left; -} - -#colorpicker .alpha { - width: 200px; - height: 30px; - margin: 5px; - border: 1px solid #CCC; - float: left; - background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#colorpicker #alpha { - width: 100%; - height: 100%; - background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png"); - background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%); -} - -#colorpicker #gradient_picker { - width: 0.5em; - height: 0.5em; - border-radius: 0.4em; - border: 2px solid #CCC; - position: relative; - top: 20%; - left: 20%; -} - -#colorpicker #hue_selector, -#colorpicker #alpha_selector { - width: 3px; - height: 100%; - border: 1px solid #777; - background-color: #FFF; - position: relative; - top: -1px; - left: 0%; -} - -/* input HSV and RGB */ -#colorpicker .info { - width: 200px; - margin: 5px; - float: left; -} - -#colorpicker .info * { - float: left; -} - -#colorpicker .info input { - margin: 0; - text-align: center; - width: 30px; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -#colorpicker .info span { - height: 20px; - width: 30px; - text-align: center; - line-height: 20px; - display: block; -} - -/* Preview color */ -#colorpicker .block { - width: 95px; - height: 54px; - float: left; - position: relative; -} - -#colorpicker .preview { - margin: 5px; - border: 1px solid #CCC; - background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#colorpicker .preview:before { - height: 100%; - width: 50%; - left: 50%; - content: ""; - background: #FFF; - position: absolute; - z-index: 1; -} - -#colorpicker .preview > * { - width: 50%; - height: 100%; -} - -#colorpicker #output_color { - width: 100%; - height: 100%; - position: absolute; - z-index: 2; -} - -#colorpicker .block .input { - float: right; -} - -#colorpicker [data-topic="a"] > span { - width: 50px; -} - -#colorpicker [data-topic="hexa"] { - float: right; - margin: 10px 0 0 0; -} - -#colorpicker [data-topic="hexa"] > span { - display: none; -} - -#colorpicker [data-topic="hexa"] > input { - width: 85px; - padding: 2px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* - * UI Components - */ - -/* Property */ - -.property { - height: 20px; - margin: 10px 0; -} - -.property * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Slider */ - -#controls .ui-slider-name { - margin: 0 10px 0 0; -} - -/* - * Output code styling - */ - -#output { - position: relative; -} - -#output .menu { - max-width: 70%; - height: 20px; - position: absolute; - top: 2px; -} - -#output .button { - width: 90px; - height: 22px; - margin: 0 5px 0 0; - text-align: center; - line-height: 20px; - font-size: 14px; - color: #FFF; - background-color: #999; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - bottom: -5px; - float:left; -} - -#output .button:hover { - color: #FFF; - background-color: #666; - cursor: pointer; -} - -#output .menu [data-active="true"] { - color: #777; - background-color: #FFF; - border: 1px solid #CCC; - border-bottom: none; -} - -#output .menu [data-topic="before"] { - left: 100px; -} - -#output .menu [data-topic="after"] { - left: 200px; -} - -#output .output { - width: 480px; - margin: 10px; - padding: 10px; - overflow: hidden; - color: #555; - font-size: 14px; - border: 1px dashed #CCC; - border-radius: 3px; - display: none; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -#output .css-property { - width: 100%; - float: left; - white-space: pre; -} - -#output .name { - width: 35%; - float: left; -} - -#output .value { - width: 65%; - float: left; -} - -</pre> - -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js"><code class="language-js"> - -'use strict'; - -/** - * UI-SlidersManager - */ - -var SliderManager = (function SliderManager() { - - var subscribers = {}; - var sliders = []; - - var Slider = function(node) { - var min = node.getAttribute('data-min') | 0; - var max = node.getAttribute('data-max') | 0; - var step = node.getAttribute('data-step') | 0; - var value = node.getAttribute('data-value') | 0; - var snap = node.getAttribute('data-snap'); - var topic = node.getAttribute('data-topic'); - - this.min = min; - this.max = max > 0 ? max : 100; - this.step = step === 0 ? 1 : step; - this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; - this.snap = snap === "true" ? true : false; - this.topic = topic; - this.node = node; - - var pointer = document.createElement('div'); - pointer.className = 'ui-slider-pointer'; - node.appendChild(pointer); - this.pointer = pointer; - - setMouseTracking(node, updateSlider.bind(this)); - - sliders[topic] = this; - setValue(topic, this.value); - } - - var setButtonComponent = function setButtonComponent(node) { - var type = node.getAttribute('data-type'); - var topic = node.getAttribute('data-topic'); - if (type === "sub") { - node.textContent = '-'; - node.addEventListener("click", function() { - decrement(topic); - }); - } - if (type === "add") { - node.textContent = '+'; - node.addEventListener("click", function() { - increment(topic); - }); - } - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var unit_type = node.getAttribute('data-unit'); - - var input = document.createElement('input'); - var unit = document.createElement('span'); - unit.textContent = unit_type; - - input.setAttribute('type', 'text'); - node.appendChild(input); - node.appendChild(unit); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - setValue(topic, e.target.value | 0); - }); - - subscribe(topic, function(value) { - node.children[0].value = value; - }); - } - - var increment = function increment(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value + slider.step <= slider.max) { - slider.value += slider.step; - setValue(slider.topic, slider.value) - notify.call(slider); - } - }; - - var decrement = function decrement(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value - slider.step >= slider.min) { - slider.value -= slider.step; - setValue(topic, slider.value) - notify.call(slider); - } - } - - // this = Slider object - var updateSlider = function updateSlider(e) { - var node = this.node; - var pos = e.pageX - node.offsetLeft; - var width = node.clientWidth; - var delta = this.max - this.min; - var offset = this.pointer.clientWidth + 4; // border width * 2 - - if (pos < 0) pos = 0; - if (pos > width) pos = width; - - var value = pos * delta / width | 0; - var precision = value % this.step; - value = value - precision + this.min; - if (precision > this.step / 2) - value = value + this.step; - - if (this.snap) - pos = (value - this.min) * width / delta; - - this.pointer.style.left = pos - offset/2 + "px"; - this.value = value; - node.setAttribute('data-value', value); - notify.call(this); - } - - var setValue = function setValue(topic, value) { - var slider = sliders[topic]; - - if (value > slider.max || value < slider.min) - return; - - var delta = slider.max - slider.min; - var width = slider.node.clientWidth; - var offset = slider.pointer.clientWidth; - var pos = (value - slider.min) * width / delta; - slider.value = value; - slider.pointer.style.left = pos - offset / 2 + "px"; - slider.node.setAttribute('data-value', value); - notify.call(slider); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - } - - var init = function init() { - var elem, size; - - elem = document.querySelectorAll('.ui-slider-btn-set'); - size = elem.length; - for (var i = 0; i < size; i++) - setButtonComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider-input'); - size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider'); - size = elem.length; - for (var i = 0; i < size; i++) - new Slider(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - -/** - * UI-ButtonManager - */ - -var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - } - - var getNode = function getNode(topic) { - return buttons[topic].node; - } - - var setValue = function setValue(topic, value) { - try { - buttons[topic].checkbox.checked = value; - notify.call(buttons[topic]); - } - catch(error) { - console.log(error, topic, value); - } - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - } - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - - -window.addEventListener("load", function(){ - BoxShadow.init(); -}); - -var BoxShadow = (function BoxShadow() { - - function getElemById(id) { - return document.getElementById(id); - } - - /** - * RGBA Color class - */ - - function Color() { - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 1; - this.hue = 0; - this.saturation = 0; - this.value = 0; - } - - Color.prototype.copy = function copy(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - - this.r = obj.r; - this.g = obj.g; - this.b = obj.b; - this.a = obj.a; - this.hue = obj.hue; - this.saturation = obj.saturation; - this.value = obj.value; - } - - Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { - if (red != undefined) - this.r = red | 0; - if (green != undefined) - this.g = green | 0; - if (blue != undefined) - this.b = blue | 0; - if (alpha != undefined) - this.a = alpha | 0; - } - - /** - * HSV/HSB (hue, saturation, value / brightness) - * @param hue 0-360 - * @param saturation 0-100 - * @param value 0-100 - */ - Color.prototype.setHSV = function setHSV(hue, saturation, value) { - this.hue = hue; - this.saturation = saturation; - this.value = value; - this.updateRGB(); - } - - Color.prototype.updateRGB = function updateRGB() { - var sat = this.saturation / 100; - var value = this.value / 100; - var C = sat * value; - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = value - C; - var precision = 255; - - C = (C + m) * precision; - X = (X + m) * precision; - m = m * precision; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - } - - Color.prototype.updateHSV = function updateHSV() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / cmax; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.value = (cmax * 100) | 0; - } - - Color.prototype.setHexa = function setHexa(value) { - var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value) - if (valid !== true) - return; - - if (value[0] === '#') - value = value.slice(1, value.length); - - if (value.length === 3) - value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3"); - - this.r = parseInt(value.substr(0, 2), 16); - this.g = parseInt(value.substr(2, 2), 16); - this.b = parseInt(value.substr(4, 2), 16); - - this.alpha = 1; - } - - Color.prototype.getHexa = function getHexa() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (this.r < 16) r = '0' + r; - if (this.g < 16) g = '0' + g; - if (this.b < 16) b = '0' + b; - var value = '#' + r + g + b; - return value.toUpperCase(); - } - - Color.prototype.getRGBA = function getRGBA() { - - var rgb = "(" + this.r + ", " + this.g + ", " + this.b; - var a = ''; - var v = ''; - if (this.a !== 1) { - a = 'a'; - v = ', ' + this.a; - } - - var value = "rgb" + a + rgb + v + ")"; - return value; - } - - Color.prototype.getColor = function getColor() { - if (this.a | 0 === 1) - return this.getHexa(); - return this.getRGBA(); - } - - /** - * Shadow Object - */ - function Shadow() { - this.inset = false; - this.posX = 5; - this.posY = -5; - this.blur = 5; - this.spread = 0; - this.color = new Color(); - - var hue = (Math.random() * 360) | 0; - var saturation = (Math.random() * 75) | 0; - var value = (Math.random() * 50 + 50) | 0; - this.color.setHSV(hue, saturation, value, 1); - } - - Shadow.prototype.computeCSS = function computeCSS() { - var value = ""; - if (this.inset === true) - value += "inset "; - value += this.posX + "px "; - value += this.posY + "px "; - value += this.blur + "px "; - value += this.spread + "px "; - value += this.color.getColor(); - - return value; - } - - Shadow.prototype.toggleInset = function toggleInset(value) { - if (value !== undefined || typeof value === "boolean") - this.inset = value; - else - this.inset = this.inset === true ? false : true; - } - - Shadow.prototype.copy = function copy(obj) { - if(obj instanceof Shadow !== true) { - console.log("Typeof instance not Shadow"); - return; - } - - this.inset = obj.inset; - this.posX = obj.posX; - this.posY = obj.posY; - this.blur = obj.blur; - this.spread = obj.spread; - this.color.copy(obj.color); - } - - /** - * Color Picker - */ - var ColoPicker = (function ColoPicker() { - - var colorpicker; - var hue_area; - var gradient_area; - var alpha_area; - var gradient_picker; - var hue_selector; - var alpha_selector; - var pick_object; - var info_rgb; - var info_hsv; - var info_hexa; - var output_color; - var color = new Color(); - var subscribers = []; - - var updateColor = function updateColor(e) { - var x = e.pageX - gradient_area.offsetLeft; - var y = e.pageY - gradient_area.offsetTop; - - // width and height should be the same - var size = gradient_area.clientWidth; - - if (x > size) - x = size; - if (y > size) - y = size; - - if (x < 0) x = 0; - if (y < 0) y = 0; - - var value = 100 - (y * 100 / size) | 0; - var saturation = x * 100 / size | 0; - - color.setHSV(color.hue, saturation, value); - // should update just - // color pointer location - updateUI(); - notify("color", color); - } - - var updateHue = function updateHue(e) { - var x = e.pageX - hue_area.offsetLeft; - var width = hue_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - var hue = ((360 * x) / width) | 0; - if (hue === 360) hue = 359; - - color.setHSV(hue, color.saturation, color.value); - - // should update just - // hue pointer location - // picker area background - // alpha area background - updateUI(); - notify("color", color); - } - - var updateAlpha = function updateAlpha(e) { - var x = e.pageX - alpha_area.offsetLeft; - var width = alpha_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - color.a = (x / width).toFixed(2); - - // should update just - // alpha pointer location - updateUI(); - notify("color", color); - } - - var setHueGfx = function setHueGfx(hue) { - var sat = color.saturation; - var val = color.value; - var alpha = color.a; - - color.setHSV(hue, 100, 100); - gradient_area.style.backgroundColor = color.getHexa(); - - color.a = 0; - var start = color.getRGBA(); - color.a = 1; - var end = color.getRGBA(); - color.a = alpha; - - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - } - - var updateUI = function updateUI() { - var x, y; // coordinates - var size; // size of the area - var offset; // pointer graphic selector offset - - // Set color pointer location - size = gradient_area.clientWidth; - offset = gradient_picker.clientWidth / 2 + 2; - - x = (color.saturation * size / 100) | 0; - y = size - (color.value * size / 100) | 0; - - gradient_picker.style.left = x - offset + "px"; - gradient_picker.style.top = y - offset + "px"; - - // Set hue pointer location - size = hue_area.clientWidth; - offset = hue_selector.clientWidth/2; - x = (color.hue * size / 360 ) | 0; - hue_selector.style.left = x - offset + "px"; - - // Set alpha pointer location - size = alpha_area.clientWidth; - offset = alpha_selector.clientWidth/2; - x = (color.a * size) | 0; - alpha_selector.style.left = x - offset + "px"; - - // Set picker area background - var nc = new Color(); - nc.copy(color); - if (nc.hue === 360) nc.hue = 0; - nc.setHSV(nc.hue, 100, 100); - gradient_area.style.backgroundColor = nc.getHexa(); - - // Set alpha area background - nc.copy(color); - nc.a = 0; - var start = nc.getRGBA(); - nc.a = 1; - var end = nc.getRGBA(); - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - - // Update color info - notify("color", color); - notify("hue", color.hue); - notify("saturation", color.saturation); - notify("value", color.value); - notify("r", color.r); - notify("g", color.g); - notify("b", color.b); - notify("a", color.a); - notify("hexa", color.getHexa()); - output_color.style.backgroundColor = color.getRGBA(); - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var title = node.getAttribute('data-title'); - var action = node.getAttribute('data-action'); - title = title === null ? '' : title; - - var input = document.createElement('input'); - var info = document.createElement('span'); - info.textContent = title; - - input.setAttribute('type', 'text'); - input.setAttribute('data-action', 'set-' + action + '-' + topic); - node.appendChild(info); - node.appendChild(input); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - if (action === 'HSV') - inputChangeHSV(topic); - if (action === 'RGB') - inputChangeRGB(topic); - if (action === 'alpha') - inputChangeAlpha(topic); - if (action === 'hexa') - inputChangeHexa(topic); - }); - - subscribe(topic, function(value) { - node.children[1].value = value; - }); - } - - var inputChangeHSV = function actionHSV(topic) { - var selector = "[data-action='set-HSV-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value < 360) - color[topic] = value; - - color.updateRGB(); - updateUI(); - } - - var inputChangeRGB = function inputChangeRGB(topic) { - var selector = "[data-action='set-RGB-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 255) - color[topic] = value; - - color.updateHSV(); - updateUI(); - } - - var inputChangeAlpha = function inputChangeAlpha(topic) { - var selector = "[data-action='set-alpha-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseFloat(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) - color.a = value.toFixed(2); - - updateUI(); - } - - var inputChangeHexa = function inputChangeHexa(topic) { - var selector = "[data-action='set-hexa-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = node.value; - color.setHexa(value); - color.updateHSV(); - updateUI(); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - /* - * Observer - */ - var setColor = function setColor(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - color.copy(obj); - updateUI(); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(topic, value) { - for (var i in subscribers[topic]) - subscribers[topic][i](value); - } - - var init = function init() { - colorpicker = getElemById("colorpicker"); - hue_area = getElemById("hue"); - gradient_area = getElemById("gradient"); - alpha_area = getElemById("alpha"); - gradient_picker = getElemById("gradient_picker"); - hue_selector = getElemById("hue_selector"); - alpha_selector = getElemById("alpha_selector"); - output_color = getElemById("output_color"); - - var elem = document.querySelectorAll('#colorpicker .input'); - var size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - setMouseTracking(gradient_area, updateColor); - setMouseTracking(hue_area, updateHue); - setMouseTracking(alpha_area, updateAlpha); - - } - - return { - init : init, - setColor : setColor, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /** - * Shadow dragging - */ - var PreviewMouseTracking = (function Drag() { - var active = false; - var lastX = 0; - var lastY = 0; - var subscribers = []; - - var init = function init(id) { - var elem = getElemById(id); - elem.addEventListener('mousedown', dragStart, false); - document.addEventListener('mouseup', dragEnd, false); - } - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - active = true; - lastX = e.clientX; - lastY = e.clientY; - document.addEventListener('mousemove', mouseDrag, false); - } - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - if (active === true) { - active = false; - document.removeEventListener('mousemove', mouseDrag, false); - } - } - - var mouseDrag = function mouseDrag(e) { - notify(e.clientX - lastX, e.clientY - lastY); - lastX = e.clientX; - lastY = e.clientY; - } - - var subscribe = function subscribe(callback) { - subscribers.push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - var index = subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(deltaX, deltaY) { - for (var i in subscribers) - subscribers[i](deltaX, deltaY); - } - - return { - init : init, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /* - * Element Class - */ - var CssClass = function CssClass(id) { - this.left = 0; - this.top = 0; - this.rotate = 0; - this.width = 300; - this.height = 100; - this.display = true; - this.border = true; - this.zIndex = -1; - this.bgcolor = new Color(); - this.id = id; - this.node = getElemById('obj-' + id); - this.object = getElemById(id); - this.shadowID = null; - this.shadows = [] - this.render = []; - this.init(); - } - - CssClass.prototype.init = function init() { - this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; - this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; - - this.setTop(this.top); - this.setLeft(this.left); - this.setHeight(this.height); - this.setWidth(this.width); - this.bgcolor.setHSV(0, 0, 100); - this.updateBgColor(this.bgcolor); - } - - CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { - this.left += deltaX; - this.top += deltaY; - this.node.style.top = this.top + "px"; - this.node.style.left = this.left + "px"; - SliderManager.setValue("left", this.left); - SliderManager.setValue("top", this.top); - } - - CssClass.prototype.setLeft = function setLeft(value) { - this.left = value; - this.node.style.left = this.left + "px"; - OutputManager.updateProperty(this.id, 'left', this.left + 'px'); - } - - CssClass.prototype.setTop = function setTop(value) { - this.top = value; - this.node.style.top = this.top + 'px'; - OutputManager.updateProperty(this.id, 'top', this.top + 'px'); - } - - CssClass.prototype.setWidth = function setWidth(value) { - this.width = value; - this.node.style.width = this.width + 'px'; - OutputManager.updateProperty(this.id, 'width', this.width + 'px'); - } - - CssClass.prototype.setHeight = function setHeight(value) { - this.height = value; - this.node.style.height = this.height + 'px'; - OutputManager.updateProperty(this.id, 'height', this.height + 'px'); - } - - // Browser support - CssClass.prototype.setRotate = function setRotate(value) { - var cssvalue = 'rotate(' + value +'deg)'; - - this.node.style.transform = cssvalue; - this.node.style.webkitTransform = cssvalue; - this.node.style.msTransform = cssvalue; - - if (value !== 0) { - if (this.rotate === 0) { - OutputManager.toggleProperty(this.id, 'transform', true); - OutputManager.toggleProperty(this.id, '-webkit-transform', true); - OutputManager.toggleProperty(this.id, '-ms-transform', true); - } - } - else { - OutputManager.toggleProperty(this.id, 'transform', false); - OutputManager.toggleProperty(this.id, '-webkit-transform', false); - OutputManager.toggleProperty(this.id, '-ms-transform', false); - } - - OutputManager.updateProperty(this.id, 'transform', cssvalue); - OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue); - OutputManager.updateProperty(this.id, '-ms-transform', cssvalue); - this.rotate = value; - } - - CssClass.prototype.setzIndex = function setzIndex(value) { - this.node.style.zIndex = value; - OutputManager.updateProperty(this.id, 'z-index', value); - this.zIndex = value; - } - - CssClass.prototype.toggleDisplay = function toggleDisplay(value) { - if (typeof value !== "boolean" || this.display === value) - return; - - this.display = value; - var display = this.display === true ? "block" : "none"; - this.node.style.display = display; - this.object.style.display = display; - } - - CssClass.prototype.toggleBorder = function toggleBorder(value) { - if (typeof value !== "boolean" || this.border === value) - return; - - this.border = value; - var border = this.border === true ? "1px solid #CCC" : "none"; - this.node.style.border = border; - } - - CssClass.prototype.updateBgColor = function updateBgColor(color) { - this.bgcolor.copy(color); - this.node.style.backgroundColor = color.getColor(); - OutputManager.updateProperty(this.id, 'background-color', color.getColor()); - } - - CssClass.prototype.updateShadows = function updateShadows() { - if (this.render.length === 0) - OutputManager.toggleProperty(this.id, 'box-shadow', false); - if (this.render.length === 1) - OutputManager.toggleProperty(this.id, 'box-shadow', true); - - this.node.style.boxShadow = this.render.join(", "); - OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n")); - - } - - - /** - * Tool Manager - */ - var Tool = (function Tool() { - - var preview; - var classes = []; - var active = null; - var animate = false; - - /* - * Toll actions - */ - var addCssClass = function addCssClass(id) { - classes[id] = new CssClass(id); - } - - var setActiveClass = function setActiveClass(id) { - active = classes[id]; - active.shadowID = null; - ColoPicker.setColor(classes[id].bgcolor); - SliderManager.setValue("top", active.top); - SliderManager.setValue("left", active.left); - SliderManager.setValue("rotate", active.rotate); - SliderManager.setValue("z-index", active.zIndex); - SliderManager.setValue("width", active.width); - SliderManager.setValue("height", active.height); - ButtonManager.setValue("border-state", active.border); - active.updateShadows(); - } - - var disableClass = function disableClass(topic) { - classes[topic].toggleDisplay(false); - ButtonManager.setValue(topic, false); - } - - var addShadow = function addShadow(position) { - if (animate === true) - return -1; - - active.shadows.splice(position, 0, new Shadow()); - active.render.splice(position, 0, null); - } - - var swapShadow = function swapShadow(id1, id2) { - var x = active.shadows[id1]; - active.shadows[id1] = active.shadows[id2]; - active.shadows[id2] = x; - updateShadowCSS(id1); - updateShadowCSS(id2); - } - - var deleteShadow = function deleteShadow(position) { - active.shadows.splice(position, 1); - active.render.splice(position, 1); - active.updateShadows(); - } - - var setActiveShadow = function setActiveShadow(id, glow) { - active.shadowID = id; - ColoPicker.setColor(active.shadows[id].color); - ButtonManager.setValue("inset", active.shadows[id].inset); - SliderManager.setValue("blur", active.shadows[id].blur); - SliderManager.setValue("spread", active.shadows[id].spread); - SliderManager.setValue("posX", active.shadows[id].posX); - SliderManager.setValue("posY", active.shadows[id].posY); - if (glow === true) - addGlowEffect(id); - } - - var addGlowEffect = function addGlowEffect(id) { - if (animate === true) - return; - - animate = true; - var store = new Shadow(); - var shadow = active.shadows[id]; - - store.copy(shadow); - shadow.color.setRGBA(40, 125, 200, 1); - shadow.blur = 10; - shadow.spread = 10; - - active.node.style.transition = "box-shadow 0.2s"; - updateShadowCSS(id); - - setTimeout(function() { - shadow.copy(store); - updateShadowCSS(id); - setTimeout(function() { - active.node.style.removeProperty("transition"); - animate = false; - }, 100); - }, 200); - } - - var updateActivePos = function updateActivePos(deltaX, deltaY) { - if (active.shadowID === null) - active.updatePos(deltaX, deltaY); - else - updateShadowPos(deltaX, deltaY); - } - - /* - * Shadow properties - */ - var updateShadowCSS = function updateShadowCSS(id) { - active.render[id] = active.shadows[id].computeCSS(); - active.updateShadows(); - } - - var toggleShadowInset = function toggleShadowInset(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].toggleInset(value); - updateShadowCSS(active.shadowID); - } - - var updateShadowPos = function updateShadowPos(deltaX, deltaY) { - var shadow = active.shadows[active.shadowID]; - shadow.posX += deltaX; - shadow.posY += deltaY; - SliderManager.setValue("posX", shadow.posX); - SliderManager.setValue("posY", shadow.posY); - updateShadowCSS(active.shadowID); - } - - var setShadowPosX = function setShadowPosX(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posX = value; - updateShadowCSS(active.shadowID); - } - - var setShadowPosY = function setShadowPosY(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posY = value; - updateShadowCSS(active.shadowID); - } - - var setShadowBlur = function setShadowBlur(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].blur = value; - updateShadowCSS(active.shadowID); - } - - var setShadowSpread = function setShadowSpread(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].spread = value; - updateShadowCSS(active.shadowID); - } - - var updateShadowColor = function updateShadowColor(color) { - active.shadows[active.shadowID].color.copy(color); - updateShadowCSS(active.shadowID); - } - - /* - * Element Properties - */ - var updateColor = function updateColor(color) { - if (active.shadowID === null) - active.updateBgColor(color); - else - updateShadowColor(color); - } - - var init = function init() { - preview = getElemById("preview"); - - ColoPicker.subscribe("color", updateColor); - PreviewMouseTracking.subscribe(updateActivePos); - - // Affects shadows - ButtonManager.subscribe("inset", toggleShadowInset); - SliderManager.subscribe("posX", setShadowPosX); - SliderManager.subscribe("posY", setShadowPosY); - SliderManager.subscribe("blur", setShadowBlur); - SliderManager.subscribe("spread", setShadowSpread); - - // Affects element - SliderManager.subscribe("top", function(value){ - active.setTop(value); - }); - SliderManager.subscribe("left", function(value){ - active.setLeft(value); - }); - SliderManager.subscribe("rotate", function(value) { - if (active == classes["element"]) - return; - active.setRotate(value); - }); - - SliderManager.subscribe("z-index", function(value) { - if (active == classes["element"]) - return; - active.setzIndex(value); - }); - - SliderManager.subscribe("width", function(value) { - active.setWidth(value) - }); - - SliderManager.subscribe("height", function(value) { - active.setHeight(value) - }); - - // Actions - classes['before'].top = -30; - classes['before'].left = -30; - classes['after'].top = 30; - classes['after'].left = 30; - classes['before'].toggleDisplay(false); - classes['after'].toggleDisplay(false); - ButtonManager.setValue('before', false); - ButtonManager.setValue('after', false); - - ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before'])); - ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after'])); - - ButtonManager.subscribe("border-state", function(value) { - active.toggleBorder(value); - }); - - } - - return { - init : init, - addShadow : addShadow, - swapShadow : swapShadow, - addCssClass : addCssClass, - disableClass : disableClass, - deleteShadow : deleteShadow, - setActiveClass : setActiveClass, - setActiveShadow : setActiveShadow - } - - })(); - - /** - * Layer Manager - */ - var LayerManager = (function LayerManager() { - var stacks = []; - var active = { - node : null, - stack : null - } - var elements = {}; - - var mouseEvents = function mouseEvents(e) { - var node = e.target; - var type = node.getAttribute('data-type'); - - if (type === 'subject') - setActiveStack(stacks[node.id]); - - if (type === 'disable') { - Tool.disableClass(node.parentNode.id); - setActiveStack(stacks['element']); - } - - if (type === 'add') - active.stack.addLayer(); - - if (type === 'layer') - active.stack.setActiveLayer(node); - - if (type === 'delete') - active.stack.deleteLayer(node.parentNode); - - if (type === 'move-up') - active.stack.moveLayer(1); - - if (type === 'move-down') - active.stack.moveLayer(-1); - } - - var setActiveStack = function setActiveStack(stackObj) { - active.stack.hide(); - active.stack = stackObj; - active.stack.show(); - } - - /* - * Stack object - */ - var Stack = function Stack(subject) { - var S = document.createElement('div'); - var title = document.createElement('div'); - var stack = document.createElement('div'); - - S.className = 'container'; - stack.className = 'stack'; - title.className = 'title'; - title.textContent = subject.getAttribute('data-title'); - S.appendChild(title); - S.appendChild(stack); - - this.id = subject.id; - this.container = S; - this.stack = stack; - this.subject = subject; - this.order = []; - this.uid = 0; - this.count = 0; - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.addLayer = function addLayer() { - if (Tool.addShadow(this.layerID) == -1) - return; - - var uid = this.getUID(); - var layer = this.createLayer(uid); - - if (this.layer === null && this.stack.children.length >= 1) - this.layer = this.stack.children[0]; - - this.stack.insertBefore(layer, this.layer); - this.order.splice(this.layerID, 0, uid); - this.count++; - this.setActiveLayer(layer); - } - - Stack.prototype.createLayer = function createLayer(uid) { - var layer = document.createElement('div'); - var del = document.createElement('span'); - - layer.className = 'node'; - layer.setAttribute('data-shid', uid); - layer.setAttribute('data-type', 'layer'); - layer.textContent = 'shadow ' + uid; - - del.className = 'delete'; - del.setAttribute('data-type', 'delete'); - - layer.appendChild(del); - return layer; - } - - Stack.prototype.getUID = function getUID() { - return this.uid++; - } - - // SOLVE IE BUG - Stack.prototype.moveLayer = function moveLayer(direction) { - if (this.count <= 1 || this.layer === null) - return; - if (direction === -1 && this.layerID === (this.count - 1) ) - return; - if (direction === 1 && this.layerID === 0 ) - return; - - if (direction === -1) { - var before = null; - Tool.swapShadow(this.layerID, this.layerID + 1); - this.swapOrder(this.layerID, this.layerID + 1); - this.layerID += 1; - - if (this.layerID + 1 !== this.count) - before = this.stack.children[this.layerID + 1]; - - this.stack.insertBefore(this.layer, before); - Tool.setActiveShadow(this.layerID, false); - } - - if (direction === 1) { - Tool.swapShadow(this.layerID, this.layerID - 1); - this.swapOrder(this.layerID, this.layerID - 1); - this.layerID -= 1; - this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); - Tool.setActiveShadow(this.layerID, false); - } - } - - Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { - var x = this.order[pos1]; - this.order[pos1] = this.order[pos2]; - this.order[pos2] = x; - } - - Stack.prototype.deleteLayer = function deleteLayer(node) { - var shadowID = node.getAttribute('data-shid') | 0; - var index = this.order.indexOf(shadowID); - this.stack.removeChild(this.stack.children[index]); - this.order.splice(index, 1); - this.count--; - - Tool.deleteShadow(index); - - if (index > this.layerID) - return; - - if (index == this.layerID) { - if (this.count >= 1) { - this.layerID = 0; - this.setActiveLayer(this.stack.children[0], true); - } - else { - this.layer = null; - this.show(); - } - } - - if (index < this.layerID) { - this.layerID--; - Tool.setActiveShadow(this.layerID, true); - } - - } - - Stack.prototype.setActiveLayer = function setActiveLayer(node) { - elements.shadow_properties.style.display = 'block'; - elements.element_properties.style.display = 'none'; - - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = node; - this.layer.setAttribute('data-active', 'layer'); - - var shadowID = node.getAttribute('data-shid') | 0; - this.layerID = this.order.indexOf(shadowID); - Tool.setActiveShadow(this.layerID, true); - } - - Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.hide = function hide() { - this.unsetActiveLayer(); - this.subject.removeAttribute('data-active'); - var style = this.container.style; - style.left = '100%'; - style.zIndex = '0'; - } - - Stack.prototype.show = function show() { - elements.shadow_properties.style.display = 'none'; - elements.element_properties.style.display = 'block'; - - if (this.id === 'element') { - elements.zIndex.style.display = 'none'; - elements.transform_rotate.style.display = 'none'; - } - else { - elements.zIndex.style.display = 'block'; - elements.transform_rotate.style.display = 'block'; - } - - this.subject.setAttribute('data-active', 'subject'); - var style = this.container.style; - style.left = '0'; - style.zIndex = '10'; - Tool.setActiveClass(this.id); - } - - function init() { - - var elem, size; - var layerManager = getElemById("layer_manager"); - var layerMenu = getElemById("layer_menu"); - var container = getElemById("stack_container"); - - elements.shadow_properties = getElemById('shadow_properties'); - elements.element_properties = getElemById('element_properties'); - elements.transform_rotate = getElemById('transform_rotate'); - elements.zIndex = getElemById('z-index'); - - elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); - size = elem.length; - - for (var i = 0; i < size; i++) { - var S = new Stack(elem[i]); - stacks[elem[i].id] = S; - container.appendChild(S.container); - Tool.addCssClass(elem[i].id); - } - - active.stack = stacks['element']; - stacks['element'].show(); - - layerManager.addEventListener("click", mouseEvents); - layerMenu.addEventListener("click", mouseEvents); - - ButtonManager.subscribe("before", function(value) { - if (value === false && active.stack === stacks['before']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['before']) - setActiveStack(stacks['before']) - }); - - ButtonManager.subscribe("after", function(value) { - if (value === false && active.stack === stacks['after']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['after']) - setActiveStack(stacks['after']) - }); - } - - return { - init : init - } - })(); - - /* - * OutputManager - */ - var OutputManager = (function OutputManager() { - var classes = []; - var buttons = []; - var active = null; - var menu = null; - var button_offset = 0; - - var crateOutputNode = function(topic, property) { - - var prop = document.createElement('div'); - var name = document.createElement('span'); - var value = document.createElement('span'); - - var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); - - name.textContent = '\t' + pmatch[4]; - - if (pmatch[3] !== undefined) { - name.textContent = '\t' + pmatch[2]; - value.textContent = pmatch[3] + ';'; - } - - name.textContent += ': '; - prop.className = 'css-property'; - name.className = 'name'; - value.className = 'value'; - prop.appendChild(name); - prop.appendChild(value); - - classes[topic].node.appendChild(prop); - classes[topic].line[property] = prop; - classes[topic].prop[property] = value; - } - - var OutputClass = function OutputClass(node) { - var topic = node.getAttribute('data-topic'); - var prop = node.getAttribute('data-prop'); - var name = node.getAttribute('data-name'); - var properties = prop.split(' '); - - classes[topic] = {}; - classes[topic].node = node; - classes[topic].prop = []; - classes[topic].line = []; - classes[topic].button = new Button(topic); - - var open_decl = document.createElement('div'); - var end_decl = document.createElement('div'); - - open_decl.textContent = name + ' {'; - end_decl.textContent = '}'; - node.appendChild(open_decl); - - for (var i in properties) - crateOutputNode(topic, properties[i]); - - node.appendChild(end_decl); - } - - var Button = function Button(topic) { - var button = document.createElement('div'); - - button.className = 'button'; - button.textContent = topic; - button.style.left = button_offset + 'px'; - button_offset += 100; - - button.addEventListener("click", function() { - toggleDisplay(topic); - }) - - menu.appendChild(button); - return button; - } - - var toggleDisplay = function toggleDisplay(topic) { - active.button.removeAttribute('data-active'); - active.node.style.display = 'none'; - active = classes[topic]; - active.node.style.display = 'block'; - active.button.setAttribute('data-active', 'true'); - } - - var toggleButton = function toggleButton(topic, value) { - var display = (value === true) ? 'block' : 'none'; - classes[topic].button.style.display = display; - - if (value === true) - toggleDisplay(topic); - else - toggleDisplay('element'); - } - - var updateProperty = function updateProperty(topic, property, data) { - try { - classes[topic].prop[property].textContent = data + ';'; - } - catch(error) { - // console.log("ERROR undefined : ", topic, property, data); - } - } - - var toggleProperty = function toggleProperty(topic, property, value) { - var display = (value === true) ? 'block' : 'none'; - try { - classes[topic].line[property].style.display = display; - } - catch(error) { - // console.log("ERROR undefined : ",classes, topic, property, value); - } - } - - var init = function init() { - - menu = getElemById('menu'); - - var elem = document.querySelectorAll('#output .output'); - var size = elem.length; - for (var i = 0; i < size; i++) - OutputClass(elem[i]); - - active = classes['element']; - toggleDisplay('element'); - - ButtonManager.subscribe("before", function(value) { - toggleButton('before', value); - }); - - ButtonManager.subscribe("after", function(value) { - toggleButton('after', value); - }); - } - - return { - init : init, - updateProperty : updateProperty, - toggleProperty : toggleProperty - } - - })(); - - - /** - * Init Tool - */ - var init = function init() { - ButtonManager.init(); - OutputManager.init(); - ColoPicker.init(); - SliderManager.init(); - LayerManager.init(); - PreviewMouseTracking.init("preview"); - Tool.init(); - } - - return { - init : init - } - -})(); - - -</code></pre> -</div> - -<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div> - -<p><strong>Related Tool: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></p> |