Comments (13)
Hi @LuisAverhoff thanks for your suggestion 👍
Do you have a specific use-case in mind where you can't work around it by using, for example, the index of the buttons?
from shortcut-buttons-flatpickr.
@jcsmorais Like for example if I was using a css framework like bootstrap, how would I pass in their css button class since I dont have direct access to the html button element?
You mentioned the index of the button. I'm assuming you are talking about fetching all buttons with the data-set-index
and applying the custom css class correct?
I think adding the class attribute as a supported attribute is a much better solution seeing that everyone using this plugin will more than likely want to customize the shortcut buttons and having a quick way to pass the class in versus doing a querySelectorAll
for the shortcut button class seems alot cleaner to me.
from shortcut-buttons-flatpickr.
You mentioned the index of the button. I'm assuming you are talking about fetching all buttons with the
data-set-index
and applying the custom css class correct?
Yes, I was suggesting something like the following:
.shortcut-buttons-flatpickr-button[data-index="0"] {
background-color: blue;
}
But I see what you're saying and it does make sense 🙂
Feel free to open a PR and I'll happily review it and get it in an upcoming release 😉
from shortcut-buttons-flatpickr.
Closing as this request has been fulfilled by #31
from shortcut-buttons-flatpickr.
@jcsmorais
I am using Bootstrap and to style button properly multiple classes are needed, for example:
btn btn-sm btn-outline-info
I tried:
attributes: { class: ['btn', 'btn-sm', 'btn-outline-info'], }
which resulted in class="btn,btn-sm,btn-outline-info"
and
attributes: { class: 'btn btn-sm btn-outline-info', }
which throws error.
Would be great if multiple classes are allowed, probably typed as array which almost works, for example this change works for me, but I don't know how to submit PR.
//this line
//button.classList.add(attributes[key]);
//into these lines
if (typeof attributes[key] === 'string') {
button.classList.add(attributes[key]);
}
else {
button.classList.add(...attributes[key]);
}
from shortcut-buttons-flatpickr.
Why not add your class array by using something like this:
attributes: { class: ['one', 'two', 'three'].join(' ') }
I don't think this plugin should handle the format in which your classes are provided. Or am I missing something?
from shortcut-buttons-flatpickr.
It does not work..
DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('btn btn-sm btn-outline-info') contains HTML space characters, which are not valid in tokens.
Problem is there is probably no way to provide more than one class with current code.
from shortcut-buttons-flatpickr.
Ah, okay. Quirky classList-add method there. I can add your functionality later today through a PR. But if you can run this plugin code (including the test suite) on your local machine, you could try to make your own PR. It's not that difficult and you already got there most of the way :) It's actually a very good first issue PR and on Google are many resources to teach you how to do it.
from shortcut-buttons-flatpickr.
I checked how to make a PR, I would be able to do that, but have no idea how to run tests. Would be glad if you can do it, and possibly make a version after it is merged so it can be used with npm|yarn.
from shortcut-buttons-flatpickr.
I checked how to make a PR, I would be able to do that, but have no idea how to run tests. Would be glad if you can do it, and possibly make a version after it is merged so it can be used with npm|yarn.
Hi @hracik you can run the tests by running the following commands:
yarn build
yarn start:server
yarn test
Your suggestion above looks good 👍
Feel free to submit a PR for it and I'll release a new version once that gets in 😉
from shortcut-buttons-flatpickr.
Thanks, I tried, but failed. I am not familiar with TypeScript, this line in index.ts is a problem:
export type Attributes = { [name: string]: string };
Because I proposed that attribute class can be string or array of strings, but that line expects only string for any attribute.
I tried
export type Attributes = { [name: string]: string | string[] };
let attribute: string;
attribute = Array.isArray(attributes[key]) ? ...attributes[key] : attributes[key];
button.setAttribute(key, attribute)
It does not work.. Type 'string | string[]' is not an array type or a string type. Also it would allow other attributes, different from class
to be arrays which does not make sense to me.
from shortcut-buttons-flatpickr.
I managed to create simpler pull request, which does not work with array but with string only.. maybe it is this way even better. {class: 'class1 class2'}
from shortcut-buttons-flatpickr.
@jcsmorais
Is it ok? Can it be merged?
from shortcut-buttons-flatpickr.
Related Issues (15)
- ISSUE WITH SHORTCUTS HOT 1
- Fails in chrome responsive mode HOT 1
- flatpickr ShortcutButtonsPlugin error fp.calendarContainer is undefined HOT 2
- latest version missing 'class' attribute at btn's options & TS errors HOT 1
- Publish latest version on npm HOT 3
- Register plugin to "loadedPlugins" HOT 1
- Unable to close calendar on button click with rangePlugin HOT 1
- Update CDN link in the readme to latest version HOT 1
- TypeError Angular14 HOT 1
- Accessibility and Keyboard controls HOT 1
- How to use in react HOT 1
- Error in production build HOT 5
- IE problem HOT 1
- Error when mobile HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shortcut-buttons-flatpickr.