Support
Quality
Security
License
Reuse
kandi has reviewed Aria and discovered the below as its top functions. This is intended to give you an instant insight into Aria implemented functionality, and help decide if they suit your requirements.
下载可以很简单
引入库
repositories {
google()
mavenCentral()
}
dependencies {
implementation 'me.laoyuyu.aria:core:3.8.16'
annotationProcessor 'me.laoyuyu.aria:compiler:3.8.16'
implementation 'me.laoyuyu.aria:ftp:3.8.16' # 如果需要使用ftp,请增加该组件
implementation 'me.laoyuyu.aria:sftp:3.8.16' # 如果需要使用ftp,请增加该组件
implementation 'me.laoyuyu.aria:m3u8:3.8.16' # 如果需要使用m3u8下载功能,请增加该组件
}
使用
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
基本使用
long taskId = Aria.download(this)
.load(DOWNLOAD_URL) //读取下载地址
.setFilePath(DOWNLOAD_PATH) //设置文件保存的完整路径
.create(); //创建并启动下载
任务状态的获取
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Aria.download(this).register();
}
混淆配置
-dontwarn com.arialyy.aria.**
-keep class com.arialyy.aria.**{*;}
-keep class **$$DownloadListenerProxy{ *; }
-keep class **$$UploadListenerProxy{ *; }
-keep class **$$DownloadGroupListenerProxy{ *; }
-keep class **$$DGSubListenerProxy{ *; }
-keepclasseswithmembernames class * {
@Download.* <methods>;
@Upload.* <methods>;
@DownloadGroup.* <methods>;
}
License
Copyright 2016 AriaLyy(https://github.com/AriaLyy/Aria)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Javascript dynamically inserted later on: how to make it run?
const addScript = () => {
const script = document.createElement("script");
script.src = '<url-of-the-script>';
script.async = true;
script.onload = function() {
// Do something
};
document.head.appendChild(script);
}
useEffect(() => {
addScript();
return () => {
// remove the script on component unmount
};
}, []);
-----------------------
const addScript = () => {
const script = document.createElement("script");
script.src = '<url-of-the-script>';
script.async = true;
script.onload = function() {
// Do something
};
document.head.appendChild(script);
}
useEffect(() => {
addScript();
return () => {
// remove the script on component unmount
};
}, []);
-----------------------
const [dbData,setDbData] = useState([]);
useEffect(()=>{
const dbReqFunc = async () => {
// req your dynamic data here and set the data fetched to dbData
// using setDbData(...)
};
dbReqFunc();
},[]); // Making the call on component loading (Modify accordingly based on
// needs)
useEffect(()=>{
if(dbData.length>0){
const elem = document.createElement('div');
dbData.map(data=> {
// based on data returned modify accordingly
const script = document.createElement("script");
script.src = '...script-url...';
script.async = true;
script.onload = function() {
// Do something
};
//...other script fields...
elem.appendChild(script);
});
// attach elem to body
document.body.appendChild(elem);
return ()=>{
// clean-up function
document.body.removeChild(elem);
};
}
},[dbData]);
-----------------------
const [dbData,setDbData] = useState([]);
useEffect(()=>{
const dbReqFunc = async () => {
// req your dynamic data here and set the data fetched to dbData
// using setDbData(...)
};
dbReqFunc();
},[]); // Making the call on component loading (Modify accordingly based on
// needs)
useEffect(()=>{
if(dbData.length>0){
const elem = document.createElement('div');
dbData.map(data=> {
// based on data returned modify accordingly
const script = document.createElement("script");
script.src = '...script-url...';
script.async = true;
script.onload = function() {
// Do something
};
//...other script fields...
elem.appendChild(script);
});
// attach elem to body
document.body.appendChild(elem);
return ()=>{
// clean-up function
document.body.removeChild(elem);
};
}
},[dbData]);
-----------------------
function App() {
const ref = useRef();
useEffect(() => {
/* convert your HTML string into DocumentFragment*/
const node = document.createRange().createContextualFragment(HTML);
ref.current.appendChild(node);
}, []);
return (
<div>
<h1>HTML String</h1>
<div>
<div ref={ref}></div>
</div>
</div>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
componentDidMount() {
const node = document.createRange().createContextualFragment(HTML);
this.ref.current.appendChild(node);
}
render() {
return (
<div>
<h1>HTML String</h1>
<div>
<div ref={this.ref}></div>
</div>
</div>
);
}
}
-----------------------
function App() {
const ref = useRef();
useEffect(() => {
/* convert your HTML string into DocumentFragment*/
const node = document.createRange().createContextualFragment(HTML);
ref.current.appendChild(node);
}, []);
return (
<div>
<h1>HTML String</h1>
<div>
<div ref={ref}></div>
</div>
</div>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
componentDidMount() {
const node = document.createRange().createContextualFragment(HTML);
this.ref.current.appendChild(node);
}
render() {
return (
<div>
<h1>HTML String</h1>
<div>
<div ref={this.ref}></div>
</div>
</div>
);
}
}
How can I make a Shiny app W3C compliant?
# Reprex adapted from https://shiny.rstudio.com/gallery/tabsets.html
library(shiny)
library(htmltools)
# Define UI for random distribution app ----
ui <- fluidPage(
# App title ----
titlePanel("Tabsets"),
# Sidebar layout with input and output definitions ----
sidebarLayout(
# Sidebar panel for inputs ----
{querySidebarPanel <- tagQuery(sidebarPanel(
# Input: Select the random distribution type ----
radioButtons("dist", "Distribution type:",
c("Normal" = "norm",
"Uniform" = "unif",
"Log-normal" = "lnorm",
"Exponential" = "exp")),
# br() element to introduce extra vertical spacing ----
br(),
# Input: Slider for the number of observations to generate ----
sliderInput("n",
"Number of observations:",
value = 500,
min = 1,
max = 1000)
))
querySidebarPanel$find(".well")$removeAttrs("role")$addAttrs("role" = "none")$allTags()},
# Main panel for displaying outputs ----
mainPanel(
# Output: Tabset w/ plot, summary, and table ----
tabsetPanel(type = "tabs",
tabPanel("Plot", plotOutput("plot")),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"))
)
)
)
)
# Define server logic for random distribution app ----
server <- function(input, output) {
# Reactive expression to generate the requested distribution ----
d <- reactive({
dist <- switch(input$dist,
norm = rnorm,
unif = runif,
lnorm = rlnorm,
exp = rexp,
rnorm)
dist(input$n)
})
# Generate a plot of the data ----
output$plot <- renderPlot({
dist <- input$dist
n <- input$n
hist(d(),
main = paste("r", dist, "(", n, ")", sep = ""),
col = "#75AADB", border = "white")
})
}
# Create Shiny app ----
shinyApp(ui, server)
pass data from multiple checkbox to api only when a submit button is clicked :react js
import React from "react";
import axios from "axios";
import moment from "moment";
import "./styles.css";
// function to get data from API, taken it out since it
// does not depend on state as such, we can pass date a param
const getData = (date) => {
const config = {
headers: {
// can be taken from localStorage
Authorization: `token 67f023b5e798b8e7217bffc4b74a23b40666c589`
}
};
return axios
.get(
`https://shebirth.herokuapp.com/customer/Symptoms-GET/?date=${date}`,
config
)
.then((res) => res.data)
.catch((err) => {
console.error("error ocurred while fetching data", err);
return null;
});
};
const SYMPTOMS_CATEGORIES = [
{ key: "Head", label: "Head" },
{ key: "Pelvis", label: "Pelvis" },
{ key: "Legs", label: "Legs" },
{ key: "Other", label: "Other" },
{ key: "Abdomen", label: "Abdomen" },
{ key: "Mental", label: "Mental Health" },
{ key: "Custom", label: "User Defined" }
];
const styles = {
trgrid: {
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr 1fr"
},
module: {
position: "relative",
// background: "rgb(76, 0, 61) none repeat scroll 0% 0%",
background: "#ffffff1c 0% 0% no-repeat padding-box",
margin: "0px 30px",
borderRadius: "10px",
padding: "0px 0px 20px 0px",
height: "40rem",
overflowY: "scroll",
scrollbarWidth: "thin",
marginbottom: "10px"
},
txt: {
textAlign: "left"
},
btn: {
border: "1px solid #974cae",
padding: "5px 30px",
background: "#974cae",
fontSize: "12px"
},
left: {
textAlign: "left"
},
boxstyle: {
background: "#ffffff1c 0% 0% no-repeat padding-box",
marginTop: "10px"
},
flex: {
background: "#ffffff1c 0% 0% no-repeat padding-box",
marginTop: "10px",
display: "flex"
// justifyContent: "space-evenly",
//background: "#971cae",
},
subbtn: {
background: "linear-gradient(90deg, #3a51a7 30%, #b53899)",
padding: "10px 30px",
border: "none",
borderRadius: "10px",
color: "#fff",
cursor: "pointer",
margin: "10px"
},
// NOTE: just for demo styling purpose for separate headings a bit!!
// use your own styles!!!
accordionItem: {
marginTop: "10px",
marginBottom: "10px"
},
accordionHeader: {
fontWeight: "bold",
cursor: "pointer",
backgroundColor: "#7986cb",
color: "#000",
padding: "2px 4px"
}
// demo styles ends
};
const SymptomTracker = () => {
const [state, setState] = React.useState({
medicineOpen: true,
medicineReady: true,
symptomReady: false,
items: [],
dateState: [],
custom: [],
Head: false,
Pelvis: false,
Legs: false,
Mental: false,
Other: false,
Custom: false,
today: moment().format("YYYY-MM-DD"),
report: [],
allValues: {
others: "",
bloodSugar: "",
bloodPressure: ""
}
});
// const closeMedicine = () => {
// setState((prevState) => ({
// ...prevState,
// medicineOpen: !state.medicineOpen
// }));
// };
// const addMedicine = () => {
// setState((prevState) => ({
// ...prevState,
// medicineReady: !state.medicineReady
// }));
// };
const addSymptom = () => {
setState((prevState) => ({
...prevState,
symptomReady: !state.symptomReady
}));
};
const navClose = (e) => {
setState((prevState) => ({
...prevState,
[e]: !prevState[e]
}));
};
const onDateChange = (e) => {
var dateSelected = e.target.value;
var date = moment(dateSelected).format("YYYY-MM-DD");
console.log({ date });
setState((prevState) => ({ ...prevState, today: date }));
};
const handleCheckboxChange = (e, stateKey, itemId) => {
const stateItems = state[stateKey];
console.table(stateItems);
console.log({ stateKey });
const index = stateItems.findIndex((item) => item.id === itemId);
console.log({ item: stateItems[index] });
setState((prevState) => ({
...prevState,
[stateKey]: [
...stateItems.slice(0, index),
{
...stateItems[index],
positive: e.target.checked
},
...stateItems.slice(index + 1)
]
}));
};
const changeHandler = (e) => {
setState((prevState) => ({
...prevState,
allValues: {
...prevState.allValues,
[e.target.name]: e.target.value
}
}));
};
const getAccordionItem = ({ key, label }) => {
const source = key === "Custom" ? "custom" : "items";
return (
<div className="accordion-item" style={styles.accordionItem} key={key}>
<div
className="accordion-title gradiantblur"
style={styles.accordionHeader}
onClick={() => navClose(key)}
>
{/* // onClick={setActiveCurrentIndex(item[0].date)}> */}
<span>{label}</span>
<i className="fa fa-plus" aria-hidden="true"></i>
</div>
{state[key] ? (
<div className="accordion-content tableforsymtm">
{(source !== "custom"
? state[source].filter(
(item) => item.category === label || item.category === key
)
: state[source]
).map((item, index) => {
const itemId = `${key}__${item.name}__${item.id}__${index}`;
return (
<span key={itemId} className="trforsymtm">
<td>
<input
// className="invinsiveinput"
data-id={item.id}
type="checkbox"
id={itemId}
checked={item && item.positive}
onChange={(e) => handleCheckboxChange(e, source, item.id)}
/>
</td>
<td className="tdoneline">
<label htmlFor={itemId}>{item.name}</label>
</td>
</span>
);
})}
</div>
) : null}
</div>
);
};
// handle checked items submission
const chekbox = (e) => {
e.preventDefault();
const headers = {
// Authorization: `token ` + localStorage.getItem("token")
Authorization: `token 67f023b5e798b8e7217bffc4b74a23b40666c589`
// Authorization: `token 67f023b5e798b8e7217bffc4b74a23b40666c589`,
};
const data = [...state.items]
// keep all items
// .filter((item) => item.positive)
.map((item) => ({
date: state.today,
symptom: item.id,
positive: item.positive
}));
const custom = [...state.custom]
// keep all items
//.filter((item) => item.positive)
.map((item) => ({
date: state.today,
symptom: item.id,
positive: item.positive
}));
console.log(custom);
// submit both requests parallelly and once both gets done
// then only reload the page.
Promise.all([
axios.post(
"https://shebirth.herokuapp.com/customer/symptoms-submit-multiple/",
data,
{
headers: headers
}
),
axios.post(
"https://shebirth.herokuapp.com/customer/submit-custom-symptom-multiple/",
custom,
{
headers: headers
}
)
])
.then(() => {
alert("symptoms are submitted");
window.location.reload();
})
.catch((error) => {
alert("Cannot add symptoms again");
console.error(error);
});
};
const onSubmit = (e) => {
e.preventDefault();
const headers = {
// Authorization: `token ` + localStorage.getItem("token")
Authorization: `token 67f023b5e798b8e7217bffc4b74a23b40666c589`
};
// prepare data object
const data = {
others: state.allValues.others,
bloodSugar: state.allValues.bloodSugar,
bloodPressure: state.allValues.bloodPressure,
date: state.today,
// combining custom and normal items together, can be separated if you want
// in their each keys
items: [...state.items, ...state.custom]
// keep all items
// .filter((item) => item.positive)
.map((item) => ({
date: state.today,
symptom: item.id,
positive: item.positive
}))
};
axios
.patch("customer/submit-symptoms-with-input/", data, {
headers: headers
})
.then(() => {
alert("symptom was submitted");
window.location.reload();
})
.catch((error) => {
alert("Cannot add symptoms again");
});
};
// this effect will fire once the component is mounted, and on `state.date` changes.
React.useEffect(() => {
(async () => {
const data = await getData(state.today);
// console.log({ data });
if (data) {
setState((prevState) => ({
...prevState,
items: data.Symptoms,
custom: data.customSymptom,
allValues: data.symptomsWithIputs,
report: data.last_week_symptom_report
}));
}
})();
}, [state.today]);
return state.medicineOpen ? (
<div className="symptom-container" style={styles.module}>
<h2
className="lightgradient"
style={{
borderBottom: "1px solid #fff",
padding: "10px",
margin: "0px",
fontSize: "24px",
// background: "#6f1f6d",
borderTopLeftRadius: "10px",
borderTopRightRadius: "10px"
}}
>
Symptom Tracker
</h2>
<div style={styles.boxstyle}>
<span style={{ fontSize: "16px" }}> Enter Date</span>
<input
type="date"
className="calanderbutton"
value={state.today}
onChange={onDateChange}
/>
{/* accordion */}
<div className="accordion">
{SYMPTOMS_CATEGORIES.map(getAccordionItem)}
</div>
<button type="Button" className="pinkbutton" onClick={chekbox}>
submit check boxes
</button>
{/* form */}
<form onSubmit={onSubmit}>
<div style={styles.flex}>
<div
className="marign-5"
style={{
transform: "rotate(90deg)",
fontSize: "4rem",
padding: "15px"
}}
>
{/* <img src={img1} /> */}
{/* <i className="fa fa-pencil"></i> */}
</div>
<div className="marign-5" style={{ padding: "10px" }}>
<strong>Enter your weight</strong>
<br />
<br />
<input
className="inputofsymtum"
style={{ float: "left" }}
name="others"
placeholder="Kg"
onChange={changeHandler}
defaultValue={state.allValues && state.allValues.others}
type="text"
// placeholder="Description"
/>
</div>
</div>
<div style={styles.flex}>
<div
className="marign-5"
style={{ fontSize: "4rem", padding: "15px" }}
>
{/* <img src={img2} /> */}
{/* <i className="fa fa-level-up"></i> */}
</div>
<div className="marign-5" style={{ padding: "10px" }}>
<strong>Enter your blood sugar level</strong>
<br />
<br />
<input
className="inputofsymtum"
style={{ float: "left" }}
type="text"
name="bloodSugar"
placeholder="(mg/dL)"
onChange={changeHandler}
defaultValue={state.allValues && state.allValues.bloodSugar}
/>
</div>
</div>
<div style={styles.flex}>
<div
className="marign-5"
style={{ fontSize: "4rem", padding: "15px" }}
>
{/* <img src={img3} /> */}
{/* <i className="fa fa-area-chart"></i> */}
</div>
<div className="marign-5" style={{ padding: "10px" }}>
<strong>Enter your blood pressure level</strong>
<br />
<br />
<input
className="inputofsymtum"
style={{ float: "left" }}
type="text"
placeholder="(mmHg)"
name="bloodPressure"
onChange={changeHandler}
defaultValue={state.allValues && state.allValues.bloodPressure}
// onChange={changeHandler}
// value={state.allValues.bloodPressure}
/>
</div>
</div>
<div style={styles.flex}>
<div
className="marign-5"
style={{
transform: "rotate(90deg)",
fontSize: "4rem",
padding: "15px"
}}
>
{/* <img src={img4} /> */}
{/* <i className="fa fa-pie-chart"></i> */}
</div>
<div className="marign-5" style={{ padding: "10px" }}>
<strong>Last week report</strong>
<br />
<br />
<p className="fontin12">
Last week you have experienced
{state.report.map((personData, key) => {
return (
<span key={key}>
{personData.count} times
{personData.symptom} ,
</span>
);
})}
</p>
</div>
</div>
<div>
<button type="submit" className="pinkbutton">
Submit
</button>
</div>
<br />
{/* {state.symptomReady ? <AddSymptom /> : null} */}
<span
onClick={addSymptom}
// style={styles.subbtn}
className="pinkbutton"
style={{ cursor: "pointer", fontSize: "16px" }}
>
Add User Defined Symptom
</span>
<hr />
</form>
</div>
</div>
) : null;
};
export default SymptomTracker;
What aria label should I use for 'inactive' items in a list that the user can still interact with?
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
body {
display: grid;
grid-template: auto auto / auto auto;
grid-auto-flow: column;
}
form,
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
fieldset {
display: grid;
grid-template: auto/auto auto;
}
input,
label {
cursor: pointer;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
<label for="input-B4">B4</label>
</fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
</figure>
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
items.forEach(item => {
item.addEventListener('click', e => {
let inputId = 'input-' + e.target.id.split('-')[1]
document.getElementById(inputId).click()
})
})
.sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
cursor: pointer;
}
li:hover {
opacity: 0.6;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<div class="sr-only">
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
<label for="input-B4">B4</label>
</fieldset>
</form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
</figure>
-----------------------
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
body {
display: grid;
grid-template: auto auto / auto auto;
grid-auto-flow: column;
}
form,
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
fieldset {
display: grid;
grid-template: auto/auto auto;
}
input,
label {
cursor: pointer;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
<label for="input-B4">B4</label>
</fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
</figure>
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
items.forEach(item => {
item.addEventListener('click', e => {
let inputId = 'input-' + e.target.id.split('-')[1]
document.getElementById(inputId).click()
})
})
.sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
cursor: pointer;
}
li:hover {
opacity: 0.6;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<div class="sr-only">
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
<label for="input-B4">B4</label>
</fieldset>
</form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
</figure>
-----------------------
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
body {
display: grid;
grid-template: auto auto / auto auto;
grid-auto-flow: column;
}
form,
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
fieldset {
display: grid;
grid-template: auto/auto auto;
}
input,
label {
cursor: pointer;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
<label for="input-B4">B4</label>
</fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
</figure>
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
items.forEach(item => {
item.addEventListener('click', e => {
let inputId = 'input-' + e.target.id.split('-')[1]
document.getElementById(inputId).click()
})
})
.sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
cursor: pointer;
}
li:hover {
opacity: 0.6;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<div class="sr-only">
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
<label for="input-B4">B4</label>
</fieldset>
</form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
</figure>
-----------------------
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
body {
display: grid;
grid-template: auto auto / auto auto;
grid-auto-flow: column;
}
form,
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
fieldset {
display: grid;
grid-template: auto/auto auto;
}
input,
label {
cursor: pointer;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
<label for="input-B4">B4</label>
</fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
</figure>
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
items.forEach(item => {
item.addEventListener('click', e => {
let inputId = 'input-' + e.target.id.split('-')[1]
document.getElementById(inputId).click()
})
})
.sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
cursor: pointer;
}
li:hover {
opacity: 0.6;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<div class="sr-only">
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
<label for="input-B4">B4</label>
</fieldset>
</form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
</figure>
-----------------------
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
body {
display: grid;
grid-template: auto auto / auto auto;
grid-auto-flow: column;
}
form,
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
fieldset {
display: grid;
grid-template: auto/auto auto;
}
input,
label {
cursor: pointer;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
<label for="input-B4">B4</label>
</fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
</figure>
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
items.forEach(item => {
item.addEventListener('click', e => {
let inputId = 'input-' + e.target.id.split('-')[1]
document.getElementById(inputId).click()
})
})
.sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
cursor: pointer;
}
li:hover {
opacity: 0.6;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<div class="sr-only">
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
<label for="input-B4">B4</label>
</fieldset>
</form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
</figure>
-----------------------
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
body {
display: grid;
grid-template: auto auto / auto auto;
grid-auto-flow: column;
}
form,
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
fieldset {
display: grid;
grid-template: auto/auto auto;
}
input,
label {
cursor: pointer;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
<label for="input-B4">B4</label>
</fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
</ul>
</figure>
const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
input.addEventListener('change', e => {
let targets = e.target.dataset.controls.split(' ')
items.forEach(item => {
let index = targets.indexOf(item.id)
if (-1 === index) item.dataset.state = 'inactive'
else if (0 === index) item.dataset.state = 'selected'
else item.dataset.state = 'highlighted'
})
})
})
items.forEach(item => {
item.addEventListener('click', e => {
let inputId = 'input-' + e.target.id.split('-')[1]
document.getElementById(inputId).click()
})
})
.sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
figure {
display: grid;
grid-template: auto/auto auto 1fr;
gap: 1ch;
}
figure,
ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
margin: 1ch 0 0 1ch;
padding: 1ch;
cursor: pointer;
}
li:hover {
opacity: 0.6;
}
li[data-state="inactive"] {
background: #ddd;
}
li[data-state="selected"] {
background: #aaffaa;
}
li[data-state="highlighted"] {
background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
display: inline;
}
<div class="sr-only">
<h2>Controls</h2>
<form>
<fieldset>
<legend>List A</legend>
<input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
<label for="input-A1">A1</label>
<input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
<label for="input-A2">A2</label>
<input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
<label for="input-A3">A3</label>
<input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
<label for="input-A4">A4</label>
</fieldset>
<fieldset>
<legend>List B</legend>
<input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
<label for="input-B1">B1</label>
<input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
<label for="input-B2">B2</label>
<input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
<label for="input-B3">B3</label>
<input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
<label for="input-B4">B4</label>
</fieldset>
</form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
<ul aria-label="List A">
<li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
<ul aria-label="List B">
<li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
<li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
</ul>
</figure>
How to use bootstrap-icons with Rails 7.0?
@font-face {
font-family: "bootstrap-icons";
src: font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"), font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
}
-----------------------
npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
@import "bootstrap-icons/font/bootstrap-icons";
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
npm i bootstrap-icons
@import "bootstrap-icons/font/bootstrap-icons";
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
npm install --save @fortawesome/fontawesome-free
import "@fortawesome/fontawesome-free/js/all"
<i class="fas fa-arrow-right"></i>
-----------------------
npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
@import "bootstrap-icons/font/bootstrap-icons";
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
npm i bootstrap-icons
@import "bootstrap-icons/font/bootstrap-icons";
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
npm install --save @fortawesome/fontawesome-free
import "@fortawesome/fontawesome-free/js/all"
<i class="fas fa-arrow-right"></i>
-----------------------
npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
@import "bootstrap-icons/font/bootstrap-icons";
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
npm i bootstrap-icons
@import "bootstrap-icons/font/bootstrap-icons";
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
npm install --save @fortawesome/fontawesome-free
import "@fortawesome/fontawesome-free/js/all"
<i class="fas fa-arrow-right"></i>
-----------------------
npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
@import "bootstrap-icons/font/bootstrap-icons";
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
npm i bootstrap-icons
@import "bootstrap-icons/font/bootstrap-icons";
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
npm install --save @fortawesome/fontawesome-free
import "@fortawesome/fontawesome-free/js/all"
<i class="fas fa-arrow-right"></i>
-----------------------
npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
@import "bootstrap-icons/font/bootstrap-icons";
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
npm i bootstrap-icons
@import "bootstrap-icons/font/bootstrap-icons";
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
npm install --save @fortawesome/fontawesome-free
import "@fortawesome/fontawesome-free/js/all"
<i class="fas fa-arrow-right"></i>
-----------------------
npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
@import "bootstrap-icons/font/bootstrap-icons";
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
npm i bootstrap-icons
@import "bootstrap-icons/font/bootstrap-icons";
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
npm install --save @fortawesome/fontawesome-free
import "@fortawesome/fontawesome-free/js/all"
<i class="fas fa-arrow-right"></i>
-----------------------
npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
@import "bootstrap-icons/font/bootstrap-icons";
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
npm i bootstrap-icons
@import "bootstrap-icons/font/bootstrap-icons";
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
npm install --save @fortawesome/fontawesome-free
import "@fortawesome/fontawesome-free/js/all"
<i class="fas fa-arrow-right"></i>
-----------------------
npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
@import "bootstrap-icons/font/bootstrap-icons";
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
npm i bootstrap-icons
@import "bootstrap-icons/font/bootstrap-icons";
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
npm install --save @fortawesome/fontawesome-free
import "@fortawesome/fontawesome-free/js/all"
<i class="fas fa-arrow-right"></i>
-----------------------
npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
@import "bootstrap-icons/font/bootstrap-icons";
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
npm i bootstrap-icons
@import "bootstrap-icons/font/bootstrap-icons";
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
npm install --save @fortawesome/fontawesome-free
import "@fortawesome/fontawesome-free/js/all"
<i class="fas fa-arrow-right"></i>
How to make login form responsiveness using Bootstrap grid system?
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-7 mx-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">my legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center mb-0">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
register
</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
.page-wrapper {
min-height: 100vh;
}
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="container page-wrapper d-flex flex-column">
<div class="row my-auto">
<div class="col-md-7 mx-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">my legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center mb-0">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
register
</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
-----------------------
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-7 mx-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">my legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center mb-0">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
register
</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
.page-wrapper {
min-height: 100vh;
}
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="container page-wrapper d-flex flex-column">
<div class="row my-auto">
<div class="col-md-7 mx-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">my legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center mb-0">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
register
</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
-----------------------
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-7 mx-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">my legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center mb-0">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
register
</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
.page-wrapper {
min-height: 100vh;
}
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="container page-wrapper d-flex flex-column">
<div class="row my-auto">
<div class="col-md-7 mx-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">my legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center mb-0">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
register
</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
-----------------------
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-7 mx-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">my legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center mb-0">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
register
</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
.page-wrapper {
min-height: 100vh;
}
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="container page-wrapper d-flex flex-column">
<div class="row my-auto">
<div class="col-md-7 mx-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">my legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center mb-0">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
register
</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
-----------------------
html, body {
height: 100%;
}
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex h-100">
<div class="m-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">my legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
register
</button>
</div>
</fieldset>
</form>
</div>
</div>
-----------------------
html, body {
height: 100%;
}
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex h-100">
<div class="m-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">my legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
register
</button>
</div>
</fieldset>
</form>
</div>
</div>
-----------------------
html, body {
height: 100%;
}
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex h-100">
<div class="m-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">My legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
Register
</button>
</div>
</fieldset>
</form>
</div>
</div>
-----------------------
html, body {
height: 100%;
}
.txtbox::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
.scheduler-legend {
font-size: 1.2em !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin: -20px 0 0 0;
background-color: white;
color: black;
}
.txtbox {
border: none;
outline: 0px;
height: 27px;
margin-top: 33px;
border: solid 2px black !important;
border-radius: 0 !important;
}
fieldset.scheduler-border {
border: 2px groove #000 !important;
padding: 0px 2rem 1.4rem 2rem !important;
margin: 0 0 1.5em 0 !important;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
.bt {
line-height: 30px;
background: white;
border: none;
color: #fff;
font-size: 14px;
color: black;
border: 2px solid black !important;
border-radius: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex h-100">
<div class="m-auto">
<form>
<fieldset class="scheduler-border">
<legend class="scheduler-legend">My legend</legend>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
</div>
<div class="form-group text-center">
<button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
Register
</button>
</div>
</fieldset>
</form>
</div>
</div>
Bootstrap popover content not getting changed with JavaScript
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
document.getElementsByClassName("adcart")[0].addEventListener('click', addcart);
document.getElementsByClassName("btnminus")[0].addEventListener('click', decrement);
document.getElementsByClassName("btnplus")[0].addEventListener('click', increment);
/*** These two functions (increment ,decrement) are for working of plus and minus buttons***/
function decrement() {
var x = parseInt(document.getElementsByClassName("form-control")[0].value);
if (x != 0) {
document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) - 1;
}
}
function increment() {
document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) + 1;
}
/** This is the function I have written to update the content of popover**/
function addcart() {
document.getElementsByClassName("poper")[0].dataset.bsContent = "YOUR total bill is " + parseInt(document.getElementsByClassName("form-control")[0].value) * 125;
popoverTriggerList.map(function(popoverTriggerEl) {
popover = bootstrap.Popover.getOrCreateInstance(popoverTriggerEl);
popover.hide();// hide, in case that it is opening.
popover.disable();
new bootstrap.Popover(popoverTriggerEl);
})
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" class="btn btn-lg poper" data-bs-toggle="popover" title="CART" data-html="true" data-bs-Content="Your cart is empty"> popover</button>
<div class="quantity d-inline-block">
<input class="btn btnminus d-inline" type="button" value="-">
<input class="form-control d-inline itemnumber" value='0' aria-label="Username" aria-describedby="addon-wrapping">
<input class="btn btnplus d-inline" type="button" value="+">
</div>
<button type="button" class="btn btn-lg adcart">Add to cart</button>
-----------------------
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
document.getElementsByClassName("adcart")[0].addEventListener('click', addcart);
document.getElementsByClassName("btnminus")[0].addEventListener('click', decrement);
document.getElementsByClassName("btnplus")[0].addEventListener('click', increment);
/*** These two functions (increment ,decrement) are for working of plus and minus buttons***/
function decrement() {
var x = parseInt(document.getElementsByClassName("form-control")[0].value);
if (x != 0) {
document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) - 1;
}
}
function increment() {
document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) + 1;
}
/** This is the function I have written to update the content of popover**/
function addcart() {
document.getElementsByClassName("poper")[0].dataset.bsContent = "YOUR total bill is " + parseInt(document.getElementsByClassName("form-control")[0].value) * 125;
popoverTriggerList.map(function(popoverTriggerEl) {
popover = bootstrap.Popover.getOrCreateInstance(popoverTriggerEl);
popover.hide();// hide, in case that it is opening.
popover.disable();
new bootstrap.Popover(popoverTriggerEl);
})
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" class="btn btn-lg poper" data-bs-toggle="popover" title="CART" data-html="true" data-bs-Content="Your cart is empty"> popover</button>
<div class="quantity d-inline-block">
<input class="btn btnminus d-inline" type="button" value="-">
<input class="form-control d-inline itemnumber" value='0' aria-label="Username" aria-describedby="addon-wrapping">
<input class="btn btnplus d-inline" type="button" value="+">
</div>
<button type="button" class="btn btn-lg adcart">Add to cart</button>
reload=true not working in @click function
methods: {
setCurrency(newcurrency, reload) {
this.$cookies.set(`usercurrency`, newcurrency, {
path: '/',
maxAge: 60 * 60 * 24 * 7
})
if (reload) window.location.href = '/'
}
}
Function change text does not work if I add font awesome
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>
if ($('#modal_button_text').html().includes("Add")) {
$('#modal_button_text').html("Update");
}
-----------------------
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>
if ($('#modal_button_text').html().includes("Add")) {
$('#modal_button_text').html("Update");
}
-----------------------
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>
if ($('#modal_button_text').html().includes("Add")) {
$('#modal_button_text').html("Update");
}
-----------------------
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>
if(document.getElementById("modal_button_span").innerHTML === "Add") document.getElementById("modal_button_span").innerHTML = "Update";
document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";
if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");
$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");
-----------------------
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>
if(document.getElementById("modal_button_span").innerHTML === "Add") document.getElementById("modal_button_span").innerHTML = "Update";
document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";
if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");
$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");
-----------------------
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>
if(document.getElementById("modal_button_span").innerHTML === "Add") document.getElementById("modal_button_span").innerHTML = "Update";
document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";
if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");
$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");
-----------------------
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>
if(document.getElementById("modal_button_span").innerHTML === "Add") document.getElementById("modal_button_span").innerHTML = "Update";
document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";
if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");
$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");
-----------------------
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>
if(document.getElementById("modal_button_span").innerHTML === "Add") document.getElementById("modal_button_span").innerHTML = "Update";
document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";
if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");
$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");
MUI createTheme is not properly passing theme to MUI components
import { ThemeProvider } from "@mui/styles";
import { ThemeProvider } from "@mui/material/styles";
const theme = useTheme();
return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />
return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />
-----------------------
import { ThemeProvider } from "@mui/styles";
import { ThemeProvider } from "@mui/material/styles";
const theme = useTheme();
return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />
return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />
-----------------------
import { ThemeProvider } from "@mui/styles";
import { ThemeProvider } from "@mui/material/styles";
const theme = useTheme();
return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />
return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />
-----------------------
import { ThemeProvider } from "@mui/styles";
import { ThemeProvider } from "@mui/material/styles";
const theme = useTheme();
return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />
return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />
QUESTION
Javascript dynamically inserted later on: how to make it run?
Asked 2022-Apr-17 at 14:12I have scripts In my React app that are inserted dynamically later on. The scripts don't load.
In my database there is a field called content
, which contains data that includes html and javascript. There are many records and each record can include multiple scripts in the content
field. So it's not really an option to statically specify each of the script-urls in my React app. The field for a record could for example look like:
<p>Some text and html</p>
<div id="xxx_hype_container">
<script type="text/javascript" charset="utf-8" src="https://example.com/uploads/hype_generated_script.js?499892"></script>
</div>
<div style="display: none;" aria-hidden="true">
<div>Some text.</div>
Etc…
I call on this field in my React app using dangerouslySetInnerHTML
:
render() {
return (
<div data-page="clarifies">
<div className="container">
<div dangerouslySetInnerHTML={{ __html: post.content }} />
... some other data
</div>
</div>
);
}
It correctly loads the data from the database and displays the html from that data. However, the Javascript does not get executed. I think the script doesn't work because it is dynamically inserted later on. How can I make these scripts work/run?
This post suggest a solution for dynamically inserted scripts, but I don't think I can apply this solution because in my case the script/code is inserted from a database (so how to then use nodeScriptReplace
on the code...?). Any suggestions how I might make my scripts work?
Update in response to @lissettdm their answer:
constructor(props) {
this.ref = React.createRef();
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.postData !== this.props.postData) {
this.setState({
loading: false,
post: this.props.postData.data,
//etc
});
setTimeout(() => parseElements());
console.log(this.props.postData.data.content);
// returns html string like: `<div id="hype_container" style="margin: auto; etc.`
const node = document.createRange().createContextualFragment(this.props.postData.data.content);
console.log(JSON.stringify(this.ref));
// returns {"current":null}
console.log(node);
// returns [object DocumentFragment]
this.ref.current.appendChild(node);
// produces error "Cannot read properties of null"
}
}
render() {
const { history } = this.props;
/etc.
return (
{loading ? (
some code
) : (
<div data-page="clarifies">
<div className="container">
<div ref={this.ref}></div>
... some other data
</div>
</div>
);
);
}
The this.ref.current.appendChild(node);
line produces the error:
TypeError: Cannot read properties of null (reading 'appendChild')
ANSWER
Answered 2022-Apr-14 at 19:05Rendering raw HTML without React recommended method is not a good practice. React recommends method dangerouslySetInnerHTML to render raw HTML.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Save this library and start creating your kit
Explore Related Topics
Save this library and start creating your kit