/* ### wrapper sidebar ### */
.spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; }
+.spSidebarBox.pointer { position: relative; }
+.spSidebarBox.pointer::before { border: 10px solid transparent; border-right-color: rgb(217, 237, 247); content: ""; display: block; left: -20px; position: absolute; }
.spColor { align-items: center; }
.spColorBox { background-color: #fff; border: 1px solid #ccc; margin-right: 10px !important; padding: 1px; }
.spColorBox > span { display: block; height: 24px; width: 24px; }
.spVariable, .spDescription { display: block; font-size: 12px; }
.spVariable { font-family: Consolas, Courier, monospace; }
+
+/* ### style region marker ### */
+#stylePreviewRegionMarker { border: 3px solid rgba(255, 0, 0, .4); position: absolute; pointer-events: none; }
+#stylePreviewRegionMarkerBottom { height: 100%; }
+#stylePreviewRegionMarkerBottom::after, #stylePreviewRegionMarkerBottom::before, #stylePreviewRegionMarker::after, #stylePreviewRegionMarker::before { border: 3px solid red; content: ""; display: block; height: 20px; position: absolute; width: 20px; }
+#stylePreviewRegionMarker::after { border-width: 0 0 3px 3px; right: -20px; top: -20px; }
+#stylePreviewRegionMarker::before { border-width: 0 3px 3px 0; left: -20px; top: -20px; }
+#stylePreviewRegionMarkerBottom::after { border-width: 3px 0 0 3px; right: -20px; bottom: -20px; }
+#stylePreviewRegionMarkerBottom::before { border-width: 3px 3px 0 0; left: -20px; bottom: -20px; }
<div class="spHeadline">Tabular Box</div>
- <table id="spTable">
+ <table id="spTable" data-region="wcfTabularBox">
<thead>
<tr>
<th><a>Lorem</a></th>
<div class="spHeadline">Input</div>
- <dl>
+ <dl data-region="wcfInput">
<dt><label for="spInput">Lorem Ipsum</label></dt>
<dd><input type="text" id="spInput" class="long" value="Consetetur sadipscing elitr"></dd>
</dl>
- <dl>
+ <dl data-region="wcfInputDisabled">
<dt><label for="spInputDisabled">Dolor Sit Amet</label></dt>
<dd><input type="text" id="spInputDisabled" class="long" value="Disabled" disabled></dd>
</dl>
<div class="spHeadline">Dropdown</div>
<div style="position: relative">
- <ul class="dropdownMenu" id="spDropdown">
+ <ul class="dropdownMenu" id="spDropdown" data-region="wcfDropdown">
<li><a>Lorem Ipsum</a></li>
<li class="active"><a>Dolor Sit Amet</a></li>
<li><a>Consetetur Sadipscing</a></li>
</div>
<div id="spContentSidebar">
- <div class="spContentSidebarBox">
- <div class="spContentSidebarHeadline">Sidebar</div>
+ <div class="spContentSidebarBox" data-region="wcfSidebar">
+ <div class="spContentSidebarHeadline" data-region="wcfSidebarHeadline">Sidebar</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <a>sed diam nonumy eirmod tempor</a> invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam <a>et justo</a> duo dolores et ea rebum.
</div>
</div>
- <div id="spFooterBox">
+ <div id="spFooterBox" data-region="wcfFooterBox">
<div class="spBoundary">
<div class="spFooterBoxItem">
- <div class="spFooterBoxHeadline">Lorem Ipsum</div>
+ <div class="spFooterBoxHeadline" data-region="wcfFooterBoxHeadline">Lorem Ipsum</div>
<p>
Lorem ipsum dolor sit amet, consetetur <a>sadipscing elitr</a>, sed diam nonumy eirmod tempor <a>invidunt ut labore</a> et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
- <div id="spFooter">
+ <div id="spFooter" data-region="wcfFooter">
<div class="spBoundary">
Copyright © 1970-2038 <a>Example Company</a>
</div>
</div>
</div>
<div id="spSidebar">
- <div class="spSidebarBox">
- <label class="selectDropdown">
- <select id="spCategories">
- <option value="none" selected>{lang}wcf.global.noSelection{/lang}</option>
- {foreach from=$colorCategories key=spName item=spCategory}
- <optgroup label="{$spName}">
- {if $spCategory|is_array}
- {foreach from=$spCategory item=spChildCategory}
- <option value="{$spChildCategory}">{$spChildCategory}</option>
- {/foreach}
- {else}
- <option value="{$spCategory}">{$spCategory}</option>
- {/if}
- </optgroup>
- {/foreach}
- </select>
- </label>
- </div>
-
- <div class="spSidebarBox" data-category="none" style="display: none;">
- foo
- </div>
-
- {foreach from=$colors key=spCategory item=spColors}
- <div class="spSidebarBox" data-category="{$spCategory}" style="display: none;">
- <ul>
- {foreach from=$spColors item=spType}
- {capture assign=spColor}{$spCategory}{$spType|ucfirst}{/capture}
- <li class="box24 spColor">
- <div class="spColorBox">
- <span class="styleVariableColor jsColorPicker" style="background-color: {$variables[$spColor]};" data-color="{$variables[$spColor]}" data-store="{$spColor}_value"></span>
- <input type="hidden" id="{$spColor}_value" name="{$spColor}" value="{$variables[$spColor]}" />
- </div>
- <div>
- <span class="spVariable">${$spColor}</span>
- <span class="spDescription">{$spType}</span>
- </div>
- </li>
- {/foreach}
- </ul>
+ <div id="spVariablesWrapper">
+ <div class="spSidebarBox">
+ <label class="selectDropdown">
+ <select id="spCategories">
+ <option value="none" selected>{lang}wcf.global.noSelection{/lang}</option>
+ {foreach from=$colorCategories key=spName item=spCategory}
+ <optgroup label="{$spName}">
+ {if $spCategory|is_array}
+ {foreach from=$spCategory item=spChildCategory}
+ <option value="{$spChildCategory}">{$spChildCategory}</option>
+ {/foreach}
+ {else}
+ <option value="{$spCategory}">{$spCategory}</option>
+ {/if}
+ </optgroup>
+ {/foreach}
+ </select>
+ </label>
+ </div>
+
+ <div class="spSidebarBox" data-category="none">
+ foo
</div>
- {/foreach}
+
+ {foreach from=$colors key=spCategory item=spColors}
+ <div class="spSidebarBox" data-category="{$spCategory}" style="display: none;">
+ <ul>
+ {foreach from=$spColors item=spType}
+ {capture assign=spColor}{$spCategory}{$spType|ucfirst}{/capture}
+ <li class="box24 spColor">
+ <div class="spColorBox">
+ <span class="styleVariableColor jsColorPicker" style="background-color: {$variables[$spColor]};" data-color="{$variables[$spColor]}" data-store="{$spColor}_value"></span>
+ <input type="hidden" id="{$spColor}_value" name="{$spColor}" value="{$variables[$spColor]}" />
+ </div>
+ <div>
+ <span class="spVariable">${$spColor}</span>
+ <span class="spDescription">{$spType}</span>
+ </div>
+ </li>
+ {/foreach}
+ </ul>
+ </div>
+ {/foreach}
+ </div>
</div>
</div>
</div>
scrollToRegion(top);
}
- var variablesWrapper = elById('stylePreviewVariablesWrapper');
+ var variablesWrapper = elById('spVariablesWrapper');
function updateWrapperPosition(region) {
var fromTop = 0;
if (region !== null) {
+ console.debug(region.offsetTop + " | " + variablesWrapper.offsetTop);
fromTop = (region.offsetTop - variablesWrapper.offsetTop) - 10;
-
+ window.dtdesign = region;
var styles = window.getComputedStyle(region);
- if (styles.getPropertyValue('position') === 'absolute') {
+ if (styles.getPropertyValue('position') === 'absolute' || styles.getPropertyValue('position') === 'relative') {
fromTop += region.offsetParent.offsetTop;
}
+ console.debug(fromTop);
}
if (fromTop <= 0) {
if (wrapperHeight + fromTop > maxHeight) {
fromTop = maxHeight - wrapperHeight;
}
-
+ console.debug(fromTop);
variablesWrapper.style.setProperty('transform', 'translateY(' + fromTop + 'px)');
}
}
window.scrollTo(0, top);
}
- var selectContainer = elBySel('.stylePreviewVariablesContainer:first-child');
+ var selectContainer = elBySel('.spSidebarBox:first-child');
var element;
select.addEventListener('change', function() {
element = elBySel('.spSidebarBox[data-category="' + lastValue + '"]', container);
style.sheet.insertRule(rules[i], style.sheet.cssRules.length);
}
}
- console.debug(styleRuleMap);
+
var elements = elByClass('styleVariableColor', variablesWrapper);
[].forEach.call(elements, function(colorField) {
var variableName = elData(colorField, 'store').replace(/_value$/, '');
- console.debug(variableName);
+
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'style') {
projects / GitHub / WoltLab / WCF.git / commitdiff