Removing bad whitespaced css selectors

viT-1 · Nov 27, 2021 · 4bcecb8 · 4bcecb8
1 parent 642616b
commit 4bcecb8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 33 deletions.
diff --git a/v3/iam-select/iam-select.css b/v3/iam-select/iam-select.css
@@ -51,44 +51,33 @@
 	z-index: 2;
 }
 
-/* TODO: change bad "whitespaced" selector
-to have iam-select:is-open value or additional attribute iam-select="is-open" */
-[iam-select ~= is-open] [iam-select-ddbtn ~= toopen] {
-	display: none;
-}
-
-[iam-select-item]
-, [iam-select-placeholder]
+[iam-select-placeholder]
 , [iam-select-title]
+, [iam-select-item]
 , [iam-select-ddbtn] {
 	cursor: pointer;
 	line-height: 2em;
 }
 
-[iam-select-item]
-, [iam-select-placeholder]
-, [iam-select-title] {
+[iam-select-placeholder]
+, [iam-select-title]
+, [iam-select-item] {
 	display: none;
 	overflow: hidden;
 	padding: 0 2ex 0 1ex;
 	position: relative;
 	white-space: nowrap;
 }
 
-/* TODO: change bad "whitespaced" selector
-to have iam-select:is-open value or additional attribute iam-select="is-open" */
-[iam-select ~= is-open] [iam-select-val]:checked
+[iam-select-val~= iam-select-is-open]:checked
 + [iam-select-item] {
 	text-decoration: underline;
 }
 
-/* TODO: change bad "whitespaced" selector
-to have iam-select:is-open value or additional attribute iam-select="is-open" */
-[iam-select ~= is-open] [iam-select-placeholder]
-, [iam-select ~= is-open] [iam-select-item]
-, [iam-select ~= is-open] [iam-select-title]
-, [iam-select-val]:checked + [iam-select-item]
-, [iam-select ~= is-undef] [iam-select-placeholder] {
+[iam-select-placeholder]
+, [iam-select-title ~= iam-select-is-open]
+, [iam-select-item ~= iam-select-is-open]
+, [iam-select-val]:checked + [iam-select-item] {
 	display: block;
 }
 
@@ -106,9 +95,7 @@ to have iam-select:is-open value or additional attribute iam-select="is-open" */
 	background: var(--iam-select-c-back);
 }
 
-/* TODO: change bad "whitespaced" selector
-to have iam-select:is-open value or additional attribute iam-select="is-open" */
-[iam-select ~= is-open] [iam-select-item]:hover {
+[iam-select-item ~= iam-select-is-open]:hover {
 	background: var(--iam-select-c-2nd-back);
 	color: var(--iam-select-c-2nd-fore);;
 }

diff --git a/v3/iam-select/iam-select.js b/v3/iam-select/iam-select.js
@@ -35,12 +35,15 @@
 				return this.mods ? this.mods + ' ' + this.selectStates : this.selectStates;
 			},
 
+			iamModO: function () {
+				return this.isOpenState ? iamStates.optionsVisible : iamStates.optionsInvisible;
+			},
+
 			selectStates: function () {
-				var isOpen = this.isOpenState ? iamStates.optionsVisible : iamStates.optionsInvisible;
 				if (this.undef)
-					return isOpen + ' ' + iamStates.valUndefined;
+					return this.iamModO + ' ' + iamStates.valUndefined;
 
-				return isOpen
+				return this.iamModO;
 			},
 
 			ttl: function () {

diff --git a/v3/iam-select/index.htm b/v3/iam-select/index.htm
@@ -44,16 +44,18 @@
 	<script type="text/x-template" id="iam-select">
 		<div :iam-select="iamMods" :disabled="disabled" :title="ttl" :id="id" v-on-clickaway="away">
 			<div iam-select-frame>
-				<span iam-select-placeholder @click="toggleVisibility" v-html="placeholder || optPlaceholder" />
+				<span iam-select-placeholder v-if="isOpenState || undef"
+					@click="toggleVisibility" v-html="placeholder || optPlaceholder" />
 				<template v-for="(opt, i) in calcOptions">
-				<label iam-select-title	v-if="opt.groupTitle" :disabled="calcGroups[opt.groupIndex].disabled">{{opt.groupTitle}}</label>
-				<input iam-select-val type="radio" :name="name" :disabled="opt.disabled"
+				<label v-if="opt.groupTitle" :iam-select-title="'iam-select-' + iamModO"
+					:disabled="calcGroups[opt.groupIndex].disabled">{{opt.groupTitle}}</label>
+				<input :iam-select-val="'iam-select-' + iamModO" type="radio" :name="name" :disabled="opt.disabled"
 					:id="id+'['+i+']'" :value="opt.value" :checked="opt.selected" />
-				<label iam-select-item
+				<label :iam-select-item="'iam-select-' + iamModO"
 					:for="id+'['+i+']'" v-html="opt.html || opt.value" @[!opt.disabled && 'click']="onSelect(opt)" />
 				</template>
-				<label iam-select-ddbtn="toclose" @click="toggleVisibility">▲</label>
-				<label iam-select-ddbtn="toopen" @click="toggleVisibility">▼</label>
+				<label v-if="isOpenState" iam-select-ddbtn="toclose" @click="toggleVisibility">▲</label>
+				<label v-else iam-select-ddbtn="toopen" @click="toggleVisibility">▼</label>
 			</div>
 			<div iam-select-slot><slot></slot></div>
 		</div>