Fix player detector panel
This commit is contained in:
parent
b96227b07a
commit
d4f9ab9f37
@ -10,331 +10,340 @@
|
|||||||
<div class="flex flex-row">
|
<div class="flex flex-row">
|
||||||
<h1><mdicon name="television-play" :size="32" /> Player element</h1>
|
<h1><mdicon name="television-play" :size="32" /> Player element</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-panel-content">
|
<div class="flex flex-row">
|
||||||
<p>
|
<div class="sub-panel-content">
|
||||||
You're probably on this page because Ultrawidify doesn't crop the player correctly.
|
<p>
|
||||||
</p>
|
You're probably on this page because Ultrawidify doesn't crop the player correctly.
|
||||||
<p>
|
</p>
|
||||||
If you hover over the boxes below, the corresponding element will change (sepia filter + higher brightness + reduced contrast + it gets an outline). Player element
|
<p>
|
||||||
should be the closest element to the video element, for which the sepia/brightness effect covers the area you expect the video will cover.
|
If you hover over the boxes below, the corresponding element will change (sepia filter + higher brightness + reduced contrast + it gets an outline). Player element
|
||||||
</p>
|
should be the closest element to the video element, for which the sepia/brightness effect covers the area you expect the video will cover.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
You need to reload the page for changes to take effect.
|
||||||
|
</p>
|
||||||
|
|
||||||
<p>
|
<!-- <p>
|
||||||
<a @click="showAdvancedOptions = !showAdvancedOptions">
|
<a @click="showAdvancedOptions = !showAdvancedOptions">
|
||||||
<template v-if="showAdvancedOptions">Hide advanced options</template>
|
<template v-if="showAdvancedOptions">Hide advanced options</template>
|
||||||
<template v-else>Show advanced options</template>
|
<template v-else>Show advanced options</template>
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p> -->
|
||||||
|
|
||||||
<div v-if="showAdvancedOptions" style="display: flex; flex-direction: row">
|
<div v-if="showAdvancedOptions" style="display: flex; flex-direction: row">
|
||||||
<div style="display: flex; flex-direction: column">
|
<div style="display: flex; flex-direction: column">
|
||||||
<div>
|
|
||||||
<input :checked="playerManualQs"
|
|
||||||
@change="togglePlayerManualQs"
|
|
||||||
type="checkbox"
|
|
||||||
/>
|
|
||||||
<div>
|
<div>
|
||||||
Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">CSS selector</a> for player<br/>
|
<input :checked="playerManualQs"
|
||||||
<small>If defining multiple selectors, separate them with commas.</small>
|
@change="togglePlayerManualQs"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">CSS selector</a> for player<br/>
|
||||||
|
<small>If defining multiple selectors, separate them with commas.</small>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div>Selector</div>
|
||||||
|
<input type="text"
|
||||||
|
v-model="playerQs"
|
||||||
|
@change="updatePlayerQuerySelector"
|
||||||
|
@blur="updatePlayerQuerySelector"
|
||||||
|
:disabled="playerByNodeIndex || !playerManualQs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; flex-direction: column">
|
||||||
|
<b>Custom CSS for site</b>
|
||||||
|
<textarea></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div>Selector</div>
|
|
||||||
<input type="text"
|
|
||||||
v-model="playerQs"
|
|
||||||
@change="updatePlayerQuerySelector"
|
|
||||||
@blur="updatePlayerQuerySelector"
|
|
||||||
:disabled="playerByNodeIndex || !playerManualQs"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; flex-direction: column">
|
|
||||||
<b>Custom CSS for site</b>
|
|
||||||
<textarea></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex; flex-direction: row;">
|
<div style="display: flex; flex-direction: row;">
|
||||||
<div class="element-tree">
|
<div class="element-tree">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>
|
||||||
<div class="status-relative">
|
<div class="status-relative">
|
||||||
Status <mdicon name="help-circle" @click="showLegend = !showLegend" />
|
Status <mdicon name="help-circle" @click="showLegend = !showLegend" />
|
||||||
|
|
||||||
<div v-if="showLegend" class="element-symbol-legend">
|
<div v-if="showLegend" class="element-symbol-legend">
|
||||||
<b>Symbols:</b><br />
|
<b>Symbols:</b><br />
|
||||||
<mdicon name="alert-remove" class="invalid" /> Element of invalid dimensions<br />
|
<mdicon name="alert-remove" class="invalid" /> Element of invalid dimensions<br />
|
||||||
<mdicon name="refresh-auto" class="auto-match" /> Ultrawidify's player detection thinks this should be the player<br />
|
<mdicon name="refresh-auto" class="auto-match" /> Ultrawidify's player detection thinks this should be the player<br />
|
||||||
<mdicon name="bookmark" class="parent-offset-match" /> Site settings say this should be the player (based on counting parents)<br />
|
<mdicon name="bookmark" class="parent-offset-match" /> Site settings say this should be the player (based on counting parents)<br />
|
||||||
<mdicon name="crosshairs" class="qs-match" /> Site settings say this should be the player (based on query selectors)<br />
|
<mdicon name="crosshairs" class="qs-match" /> Site settings say this should be the player (based on query selectors)<br />
|
||||||
<mdicon name="check-circle" class="activePlayer" /> Element that is actually the player
|
<mdicon name="check-circle" class="activePlayer" /> Element that is actually the player
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th>Element</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
<!-- <th>Quick fixes</th> -->
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr
|
|
||||||
v-for="(element, index) of elementStack"
|
|
||||||
:key="index"
|
|
||||||
class="element-row"
|
|
||||||
>
|
|
||||||
<td>
|
|
||||||
<div class="status">
|
|
||||||
<div
|
|
||||||
v-if="element.heuristics?.invalidSize"
|
|
||||||
class="invalid"
|
|
||||||
>
|
|
||||||
<mdicon name="alert-remove" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="element.heuristics?.autoMatch"
|
|
||||||
class="auto-match"
|
|
||||||
>
|
|
||||||
<mdicon name="refresh-auto" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="element.heuristics?.qsMatch"
|
|
||||||
class="qs-match"
|
|
||||||
>
|
|
||||||
<mdicon name="crosshairs" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="element.heuristics?.manualElementByParentIndex"
|
|
||||||
class="parent-offset-match"
|
|
||||||
>
|
|
||||||
<mdicon name="bookmark" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="element.heuristics?.activePlayer"
|
|
||||||
class="activePlayer"
|
|
||||||
>
|
|
||||||
<mdicon name="check-circle" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div
|
|
||||||
class="element-data"
|
|
||||||
|
|
||||||
@mouseover="markElement(index, true)"
|
|
||||||
@mouseleave="markElement(index, false)"
|
|
||||||
|
|
||||||
@click="setPlayer(index)"
|
|
||||||
>
|
|
||||||
<div class="tag">
|
|
||||||
<b>{{element.tagName}}</b> <i class="id">{{element.id ? `#`:''}}{{element.id}}</i> @ <span class="dimensions">{{element.width}}</span>x<span class="dimensions">{{element.height}}</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div v-if="element.classList" class="class-list">
|
|
||||||
<div v-for="cls of element.classList" :key="cls">
|
|
||||||
{{cls}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</th>
|
||||||
</td>
|
<th>Element</th>
|
||||||
<td>
|
<!-- <th>Actions</th> -->
|
||||||
<div class="flex flex-row">
|
<!-- <th>Quick fixes</th> -->
|
||||||
<!-- <div @click="designatePlayer(index)">Set as player {{ index }}</div> -->
|
</tr>
|
||||||
</div>
|
</thead>
|
||||||
</td>
|
<tbody>
|
||||||
<!-- <td>
|
<tr
|
||||||
<div
|
v-for="(element, index) of elementStack"
|
||||||
class="css-fixes"
|
:key="index"
|
||||||
>
|
class="element-row"
|
||||||
<div style="width: 100%"><b>Quick fixes:</b></div>
|
>
|
||||||
|
<td>
|
||||||
|
<div class="status">
|
||||||
|
<div
|
||||||
|
v-if="element.heuristics?.invalidSize"
|
||||||
|
class="invalid"
|
||||||
|
>
|
||||||
|
<mdicon name="alert-remove" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="element.heuristics?.autoMatch"
|
||||||
|
class="auto-match"
|
||||||
|
>
|
||||||
|
<mdicon name="refresh-auto" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="element.heuristics?.qsMatch"
|
||||||
|
class="qs-match"
|
||||||
|
>
|
||||||
|
<mdicon name="crosshairs" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="element.heuristics?.manualElementByParentIndex"
|
||||||
|
class="parent-offset-match"
|
||||||
|
>
|
||||||
|
<mdicon name="bookmark" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="element.heuristics?.activePlayer"
|
||||||
|
class="activePlayer"
|
||||||
|
>
|
||||||
|
<mdicon name="check-circle" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
<div
|
<div
|
||||||
class="css-line"
|
class="element-data"
|
||||||
:class="{'active': cssStack[index]?.includes('width: 100%;')}"
|
|
||||||
@click="toggleCssForElement(index, 'width: 100%;')"
|
|
||||||
>
|
|
||||||
Width: 100%
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="css-line"
|
|
||||||
:class="{'active': cssStack[index]?.includes('height: 100%;')}"
|
|
||||||
@click="toggleCssForElement(index, 'height: 100%;')"
|
|
||||||
>
|
|
||||||
Height: 100%
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="css-line"
|
|
||||||
:class="{'active': cssStack[index]?.includes('display: flex;')}"
|
|
||||||
@click="toggleCssForElement(index, 'display: flex;')"
|
|
||||||
>
|
|
||||||
Display: flex
|
|
||||||
</div>
|
|
||||||
<div class="css-line">
|
|
||||||
Flex direction:
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('flex-direction: row;')}"
|
|
||||||
@click="toggleCssForElement(index, 'flex-direction', 'row')"
|
|
||||||
>
|
|
||||||
row
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('flex-direction: column;')}"
|
|
||||||
@click="toggleCssForElement(index, 'flex-direction', 'column')"
|
|
||||||
>
|
|
||||||
column
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="css-line">
|
|
||||||
Justify content:
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('justify-content: start;')}"
|
|
||||||
@click="toggleCssForElement(index, 'justify-content', 'start')"
|
|
||||||
>
|
|
||||||
start
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('justify-content: center;')}"
|
|
||||||
@click="toggleCssForElement(index, 'justify-content', 'center')"
|
|
||||||
>
|
|
||||||
center
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('justify-content: end;')}"
|
|
||||||
@click="toggleCssForElement(index, 'justify-content', 'end')"
|
|
||||||
>
|
|
||||||
end
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="css-line">
|
|
||||||
Align items:
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('align-items: start;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-items', 'start')"
|
|
||||||
>
|
|
||||||
start
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('align-items: center;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-items', 'center')"
|
|
||||||
>
|
|
||||||
center
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('align-items: end;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-items', 'end')"
|
|
||||||
>
|
|
||||||
end
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="css-line">
|
@mouseover="markElement(index, true)"
|
||||||
Justify self:
|
@mouseleave="markElement(index, false)"
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
@click="setPlayer(index)"
|
||||||
:class="{'active': cssStack[index]?.includes('justify-self: start;')}"
|
>
|
||||||
@click="toggleCssForElement(index, 'justify-self', 'start')"
|
<div class="tag">
|
||||||
>
|
<b>{{element.tagName}}</b> <i class="id">{{element.id ? `#`:''}}{{element.id}}</i> @ <span class="dimensions">{{element.width}}</span>x<span class="dimensions">{{element.height}}</span>
|
||||||
start
|
|
||||||
</span> |
|
</div>
|
||||||
<span
|
<div v-if="element.classList" class="class-list">
|
||||||
class="css-line-suboption"
|
<div v-for="cls of element.classList" :key="cls">
|
||||||
:class="{'active': cssStack[index]?.includes('justify-self: center;')}"
|
{{cls}}
|
||||||
@click="toggleCssForElement(index, 'justify-self', 'center')"
|
</div>
|
||||||
>
|
</div>
|
||||||
center
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('justify-self: end;')}"
|
|
||||||
@click="toggleCssForElement(index, 'justify-self', 'end')"
|
|
||||||
>
|
|
||||||
end
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="css-line">
|
</td>
|
||||||
Align self:
|
<td>
|
||||||
<span
|
<div class="flex flex-row">
|
||||||
class="css-line-suboption"
|
<!-- <div @click="designatePlayer(index)">Set as player {{ index }}</div> -->
|
||||||
:class="{'active': cssStack[index]?.includes('align-self: start;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-self', 'start')"
|
|
||||||
>
|
|
||||||
start
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('align-self: center;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-self', 'center')"
|
|
||||||
>
|
|
||||||
center
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('align-self: end;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-self', 'end')"
|
|
||||||
>
|
|
||||||
end
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="css-line">
|
</td>
|
||||||
Text-align:
|
<!-- <td>
|
||||||
<span
|
<div
|
||||||
class="css-line-suboption"
|
class="css-fixes"
|
||||||
:class="{'active': cssStack[index]?.includes('text-align: left;')}"
|
>
|
||||||
@click="toggleCssForElement(index, 'text-align', 'left')"
|
<div style="width: 100%"><b>Quick fixes:</b></div>
|
||||||
|
<div
|
||||||
|
class="css-line"
|
||||||
|
:class="{'active': cssStack[index]?.includes('width: 100%;')}"
|
||||||
|
@click="toggleCssForElement(index, 'width: 100%;')"
|
||||||
>
|
>
|
||||||
left
|
Width: 100%
|
||||||
</span> |
|
</div>
|
||||||
<span
|
<div
|
||||||
class="css-line-suboption"
|
class="css-line"
|
||||||
:class="{'active': cssStack[index]?.includes('text-align: center;')}"
|
:class="{'active': cssStack[index]?.includes('height: 100%;')}"
|
||||||
@click="toggleCssForElement(index, 'text-align', 'center')"
|
@click="toggleCssForElement(index, 'height: 100%;')"
|
||||||
>
|
>
|
||||||
center
|
Height: 100%
|
||||||
</span> |
|
</div>
|
||||||
<span
|
<div
|
||||||
class="css-line-suboption"
|
class="css-line"
|
||||||
:class="{'active': cssStack[index]?.find(x => x.includes('text-align: right'))}"
|
:class="{'active': cssStack[index]?.includes('display: flex;')}"
|
||||||
@click="toggleCssForElement(index, 'text-align', 'right')"
|
@click="toggleCssForElement(index, 'display: flex;')"
|
||||||
>
|
>
|
||||||
right
|
Display: flex
|
||||||
</span>
|
</div>
|
||||||
|
<div class="css-line">
|
||||||
|
Flex direction:
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('flex-direction: row;')}"
|
||||||
|
@click="toggleCssForElement(index, 'flex-direction', 'row')"
|
||||||
|
>
|
||||||
|
row
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('flex-direction: column;')}"
|
||||||
|
@click="toggleCssForElement(index, 'flex-direction', 'column')"
|
||||||
|
>
|
||||||
|
column
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="css-line">
|
||||||
|
Justify content:
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('justify-content: start;')}"
|
||||||
|
@click="toggleCssForElement(index, 'justify-content', 'start')"
|
||||||
|
>
|
||||||
|
start
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('justify-content: center;')}"
|
||||||
|
@click="toggleCssForElement(index, 'justify-content', 'center')"
|
||||||
|
>
|
||||||
|
center
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('justify-content: end;')}"
|
||||||
|
@click="toggleCssForElement(index, 'justify-content', 'end')"
|
||||||
|
>
|
||||||
|
end
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="css-line">
|
||||||
|
Align items:
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('align-items: start;')}"
|
||||||
|
@click="toggleCssForElement(index, 'align-items', 'start')"
|
||||||
|
>
|
||||||
|
start
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('align-items: center;')}"
|
||||||
|
@click="toggleCssForElement(index, 'align-items', 'center')"
|
||||||
|
>
|
||||||
|
center
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('align-items: end;')}"
|
||||||
|
@click="toggleCssForElement(index, 'align-items', 'end')"
|
||||||
|
>
|
||||||
|
end
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="css-line">
|
||||||
|
Justify self:
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('justify-self: start;')}"
|
||||||
|
@click="toggleCssForElement(index, 'justify-self', 'start')"
|
||||||
|
>
|
||||||
|
start
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('justify-self: center;')}"
|
||||||
|
@click="toggleCssForElement(index, 'justify-self', 'center')"
|
||||||
|
>
|
||||||
|
center
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('justify-self: end;')}"
|
||||||
|
@click="toggleCssForElement(index, 'justify-self', 'end')"
|
||||||
|
>
|
||||||
|
end
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="css-line">
|
||||||
|
Align self:
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('align-self: start;')}"
|
||||||
|
@click="toggleCssForElement(index, 'align-self', 'start')"
|
||||||
|
>
|
||||||
|
start
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('align-self: center;')}"
|
||||||
|
@click="toggleCssForElement(index, 'align-self', 'center')"
|
||||||
|
>
|
||||||
|
center
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('align-self: end;')}"
|
||||||
|
@click="toggleCssForElement(index, 'align-self', 'end')"
|
||||||
|
>
|
||||||
|
end
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="css-line">
|
||||||
|
Text-align:
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('text-align: left;')}"
|
||||||
|
@click="toggleCssForElement(index, 'text-align', 'left')"
|
||||||
|
>
|
||||||
|
left
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('text-align: center;')}"
|
||||||
|
@click="toggleCssForElement(index, 'text-align', 'center')"
|
||||||
|
>
|
||||||
|
center
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.find(x => x.includes('text-align: right'))}"
|
||||||
|
@click="toggleCssForElement(index, 'text-align', 'right')"
|
||||||
|
>
|
||||||
|
right
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="css-line">
|
||||||
|
Position:
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('position: relative;')}"
|
||||||
|
@click="toggleCssForElement(index, 'position', 'relative')"
|
||||||
|
>
|
||||||
|
relative
|
||||||
|
</span> |
|
||||||
|
<span
|
||||||
|
class="css-line-suboption"
|
||||||
|
:class="{'active': cssStack[index]?.includes('position: absolute;')}"
|
||||||
|
@click="toggleCssForElement(index, 'position', 'absolute')"
|
||||||
|
>
|
||||||
|
absolute
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="css-line">
|
</td> -->
|
||||||
Position:
|
</tr>
|
||||||
<span
|
</tbody>
|
||||||
class="css-line-suboption"
|
</table>
|
||||||
:class="{'active': cssStack[index]?.includes('position: relative;')}"
|
<div class="element-config">
|
||||||
@click="toggleCssForElement(index, 'position', 'relative')"
|
</div>
|
||||||
>
|
|
||||||
relative
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('position: absolute;')}"
|
|
||||||
@click="toggleCssForElement(index, 'position', 'absolute')"
|
|
||||||
>
|
|
||||||
absolute
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td> -->
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div class="element-config">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="css-preview">
|
<!-- <div class="css-preview">
|
||||||
{{cssStack}}
|
{{cssStack}}
|
||||||
</div> -->
|
</div> -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="sub-panel-content">
|
||||||
|
<h2>Advanced settings</h2>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -450,6 +459,10 @@ export default({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
p {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.element-tree {
|
.element-tree {
|
||||||
.element-row {
|
.element-row {
|
||||||
// display: flex;
|
// display: flex;
|
||||||
|
|||||||
@ -256,6 +256,12 @@ export class SiteSettings {
|
|||||||
|
|
||||||
//#region get
|
//#region get
|
||||||
/**
|
/**
|
||||||
|
* TODO: check what this function is really doing — implementation didn't make sense
|
||||||
|
* and didn't quite agree with the comment.
|
||||||
|
*
|
||||||
|
* specifically, this function used to always return currentDOMConfig, and the stuff
|
||||||
|
* done inside if block appeared to not be affected. It is also only used in one spot.
|
||||||
|
*
|
||||||
* Gets DOMConfig. If DOMConfig with given name doesn't exist, we create a new one.
|
* Gets DOMConfig. If DOMConfig with given name doesn't exist, we create a new one.
|
||||||
* @param configName We want to fetch this DOM config
|
* @param configName We want to fetch this DOM config
|
||||||
* @param copyFrom If DOMConfig data doesn't exist, we copy things from DOMConfig with
|
* @param copyFrom If DOMConfig data doesn't exist, we copy things from DOMConfig with
|
||||||
@ -264,10 +270,34 @@ export class SiteSettings {
|
|||||||
* @returns Current DOMConfig object for this site
|
* @returns Current DOMConfig object for this site
|
||||||
*/
|
*/
|
||||||
getDOMConfig(configName: string, copyFrom?: string) {
|
getDOMConfig(configName: string, copyFrom?: string) {
|
||||||
|
// NOTE: this was added because
|
||||||
|
// there are no DOMConfig objects for this site
|
||||||
|
if (!this.data.DOMConfig) {
|
||||||
|
this.data.DOMConfig = {
|
||||||
|
'original': {
|
||||||
|
type: undefined,
|
||||||
|
elements: {
|
||||||
|
player: undefined,
|
||||||
|
video: undefined,
|
||||||
|
other: undefined,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'modified': {
|
||||||
|
type: undefined,
|
||||||
|
elements: {
|
||||||
|
player: undefined,
|
||||||
|
video: undefined,
|
||||||
|
other: undefined,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: check what's with that and if this can be removed? This if looks rather useless
|
||||||
if (! this.data.DOMConfig[configName]) {
|
if (! this.data.DOMConfig[configName]) {
|
||||||
this.data.DOMConfig[configName] = _cp(this.data.DOMConfig[copyFrom ?? this.data.activeDOMConfig ?? 'original']);
|
this.data.DOMConfig[configName] = _cp(this.data.DOMConfig[copyFrom ?? this.data.activeDOMConfig ?? 'original']);
|
||||||
}
|
}
|
||||||
return this.data.currentDOMConfig[configName];
|
return this.data.DOMConfig[configName];
|
||||||
}
|
}
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user