Skip to content

Commit

Permalink
no dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@aurovrata
aurovrata committed Sep 20, 2021
1 parent 61b11f3 commit 201b209
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 17 deletions.
35 changes: 33 additions & 2 deletions hybrid-dropdown.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
cursor: pointer;
background:inherit;
}
.hybriddd-none {
width: unset;
padding: 0;
}
select.hybridddised{
visibility:hidden !important;
width:0 !important;
Expand Down Expand Up @@ -41,14 +45,24 @@ select.hybridddised{
display: none;
background-color: inherit;
}
.hybrid-dropdown.hybriddd-none .hybriddd-wrapper {
display: block;
position: static;
max-width: 100%;
max-height: none;
min-width: auto;
}
.hybrid-dropdown.hybriddd-none .hybriddd-options > li {
display: inline-block;
}
.hybrid-dropdown.hybriddd-top .hybriddd-wrapper{
bottom:var(--hybriddd-top);
}
.hybrid-dropdown.hybriddd-right .hybriddd-wrapper{
right:0;
left:auto;
}
.hybrid-dropdown ul.hybriddd-options {
.hybrid-dropdown:not() ul.hybriddd-options {
border: 1px solid #6f6f6f;
border-radius: 0.25em;
list-style: none !important;
Expand All @@ -60,6 +74,17 @@ select.hybridddised{
background-color: inherit;
overscroll-behavior:contain;
}
.hybrid-dropdown:not(.hybriddd-none) ul.hybriddd-options {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.hybrid-dropdown.hybriddd-none .hybriddd-options {
display: block;
width: auto;
margin: 0;
padding: 0;
}
.hybrid-dropdown.active > .hybriddd-wrapper{
display: block;
}
Expand All @@ -84,7 +109,9 @@ select.hybridddised{
display: inline-block;
z-index: 7;
}

.hybriddd-none .hybriddd-selected {
display: none;
}
.hybriddd-selected::after {
border-bottom: 2px solid #90a1b5;
border-right: 2px solid #90a1b5;
Expand Down Expand Up @@ -166,6 +193,10 @@ ul.hybriddd-options::-webkit-scrollbar-track {
-webkit-user-select: none; /* Webkit (Safari, Chrome) */
display:block;
}
.hybriddd-none .hybriddd-option label {
padding: 0;
position: relative;
}
.hybriddd-option label > *{
display: inline-block;
}
Expand Down
39 changes: 24 additions & 15 deletions hybrid-dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,12 @@ class HybridDDError extends Error {
return elm;
}

let _ = this, lim=1, cb=true, tabIdx = elm.getAttribute('tabindex');
_.isDS = false, cnfg = Object.assign({}, elm.dataset); //get any initial settings.
let _ = this, //main hybrid object.
lim=1, cb=true, //selection limit / whether to have visible checkboxes on options.
tabIdx = elm.getAttribute('tabindex');
_.isDS = false; //flag if dropdown built using json dataset
_.hasDd = true ; //flag is field has dropdown menu.
cnfg = Object.assign({}, elm.dataset); //get any initial settings.

['class','id','name'].forEach(a=>{
if(elm.hasAttribute(a)){
Expand Down Expand Up @@ -157,6 +161,7 @@ class HybridDDError extends Error {
settings, //user settings.
cnfg //element data attribtues, precede over others to allow HTML script overrides.
);
if('none' == _.opt.dropdown) _.hasDd = false;
//make sure selectedValues are strings...
if(_.opt.selectedValues.length>0) _.opt.selectedValues = _.opt.selectedValues.map(String);
//nake sure we have proper functions
Expand Down Expand Up @@ -257,20 +262,22 @@ class HybridDDError extends Error {
_.event(_.hdd.ddlist,'add',{
change: _.change
});
//listen for click and down arrow events.
_.open = _.openSelect.bind(_);
_.event(_.hdd, 'add',{
click: _.open
});
if(_.hasDd){//listen for click and down arrow events.
_.open = _.openSelect.bind(_);
_.event(_.hdd, 'add',{
click: _.open
});
}
//listen for form reset.
let f = _.el.closest('form');
if(f){
_.event(f,'add',{
reset:_.reset.bind(_)
})
}
//create a close function.
_.close = _.closeSelect.bind(_, true);
if(_.hasDd){//create a close function.
_.close = _.closeSelect.bind(_, true);
}
//blur function
_.blur = _.blurField.bind(_);
//trach hover for multi fields.
Expand All @@ -283,7 +290,7 @@ class HybridDDError extends Error {
});
//refresh fn.
_.refresh = _.refreshHybrid.bind(_);
//ctril + click event handling.
//ctrl + click event handling.
_.modClick = _.optionModClick.bind(_);
//fire init event.
_.emit('hybrid-dd-init');
Expand Down Expand Up @@ -597,7 +604,7 @@ class HybridDDError extends Error {
if(1==_.opt.limitSelection){ //select the next value.
v = _.nextOption(_.sindex);
_.toggleValue([v], true);
}else{ //open the dropdown.
}else if(_.hasDd){ //open the dropdown.
_.hdd.classList.remove('focus');
_.open();
}
Expand All @@ -617,21 +624,23 @@ class HybridDDError extends Error {
if(1==_.opt.limitSelection){ //select the next value.
let v = _.prevOption(_.sindex);
_.toggleValue([v], true);
}else{ //open the dropdown.
}else if(_.hasDd){ //open the dropdown.
_.hdd.classList.remove('focus');
_.open();
}
}
break;
case 13==e.keyCode && 'keydown' == e.type: //enter.
case 32==e.keyCode && 'keydown' == e.type: //spacebar.
if(_.hdd.classList.contains('active') === false){//open the list.
if(_.hdd.classList.contains('active') === false && _.hasDd){//open the list.
_.hdd.classList.remove('focus');
_.open();
}else{
if(_.hindex.length>0) _.toggleValue(_.hindex, true);
_.closeSelect(false);
_.hdd.classList.add('focus');
if(_.hasDd){
_.closeSelect(false);
_.hdd.classList.add('focus');
}
}
break;
case 27==e.keyCode && 'keydown' == e.type: //esc
Expand Down
15 changes: 15 additions & 0 deletions test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,14 @@ <h1 class="title">Custom Select: "Hybrid Select"</h1>
}
</script>
</div>
<div id="grid-layout" data-dropdown="none">
<script type="application/json">
{"1":{"label":["Auguste Renoir","Flowers In A Vase","auguste-renoir","1866","./img/Auguste-Renoir-flowers_in_a_vase_1866-150x150.jpg"]},"2":{"label":["Auguste Renoir","Mademoiselle Sicot","auguste-renoir","1865","./img/Auguste-Renoir-mademoiselle_sicot_1865-150x150.jpg"]},"3":{"label":["Berthe Morisot","The Artists Sister At A Window","berthe-morisot","1869","./img/Berthe-Morisot-the_artists_sister_at_a_window_1869-150x150.jpg"]},"4":{"label":["Camille Pissarro","A Creek In St. Thomas Virgin Islands","camille-pissarro","1856","./img/Camille_Pissarro-a_creek_in_st._thomas_virgin_islands_1856-150x150.jpg"]},"5":{"label":["Camille Pissarro","Two Women Chatting By The Sea St. Thomas","camille-pissarro","1856","./img/Camille_Pissarro-two_women_chatting_by_the_sea_st._thomas_1856-150x150.jpg"]},"6":{"label":["Claude Monet","Bazille And Camille Study For Dejeuner Sur Lherbe","claude-monet","1865","./img/Claude-Monet-bazille_and_camille_study_for__dejeuner_sur_lherbe__1865-150x150.jpg"]},"7":{"label":["Claude Monet","Interior After Dinner","claude-monet","1868","./img/Claude-Monet-interior_after_dinner_1868-150x150.jpg"]},"8":{"label":["Claude Monet","Still Life With Bottle Carafe Bread And Wine","claude-monet","1863","./img/Claude-Monet-still_life_with_bottle_carafe_bread_and_wine_1863-150x150.jpg"]},"9":{"label":["Edgar Degas","Achille De Gas In The Uniform Of A Cadet","edgar-degas","1856","./img/Edgar_Degas-achille_de_gas_in_the_uniform_of_a_cadet_1856-150x150.jpg"]},"10":{"label":["Edgar Degas","Girl In Red","edgar-degas","1866","./img/Edgar-Degas-girl_in_red_1866-150x150.jpg"]},"11":{"label":["Edgar Degas","Rene De Gas","edgar-degas","1855","./img/Edgar_Degas-rene_de_gas_1855-150x150.jpg"]},"12":{"label":["Edgar Degas","Scene From The Steeplechase The Fallen Jockey","edgar-degas","1866","./img/Edgar-Degas-scene_from_the_steeplechase__the_fallen_jockey_1866-150x150.jpg"]},"13":{"label":["Edgar Degas","Self-Portrait With White Collar","edgar-degas","1857","./img/Edgar_Degas-self-portrait_with_white_collar_1857-150x150.jpg"]},"14":{"label":["Edgar Degas","The Dance Class","edgar-degas","1873","./img/Edgar-Degas-the_dance_class_1873-150x150.jpg"]},"15":{"label":["Edouard Manet","Oysters","edouard-manet","1862","./img/Edouard-Manet-oysters_1862-150x150.jpg"]},"16":{"label":["Edouard Manet","The Dead Toreador","edouard-manet","1864","./img/Edouard-Manet-the_dead_toreador_1864-150x150.jpg"]},"17":{"label":["Edouard Manet","The Old Musician","edouard-manet","1862","./img/Edouard-Manet-the_old_musician_1862-150x150.jpg"]},"18":{"label":["Eugene Boudin","Bathing Time At Deauville","eugene-boudin","1865","./img/Eugene-Boudin-bathing_time_at_deauville_1865-150x150.jpg"]},"19":{"label":["Eugene Boudin","Beach At Trouville","eugene-boudin","1865","./img/Eugene-Boudin-beach_at_trouville_1865-150x150.jpg"]},"20":{"label":["Eugene Boudin","Beach Scene","eugene-boudin","1862","./img/Eugene-Boudin-beach_scene_1862-150x150.jpg"]},"21":{"label":["Eugene Boudin","Beach Scene At Trouville","eugene-boudin","1863","./img/Eugene-Boudin-beach_scene_at_trouville_1863-150x150.jpg"]},"22":{"label":["Eugene Boudin","Concert At The Casino Of Deauville","eugene-boudin","1865","./img/Eugene-Boudin-concert_at_the_casino_of_deauville_1865-150x150.jpg"]},"23":{"label":["Eugene Boudin","Jetty And Wharf At Trouville","eugene-boudin","1863","./img/Eugene-Boudin-jetty_and_wharf_at_trouville_1863-150x150.jpg"]},"24":{"label":["Eugene Boudin","The Beach At Villerville","eugene-boudin","1864","./img/Eugene-Boudin-the_beach_at_villerville_1864-150x150.jpg"]},"25":{"label":["Frederic Bazille","Edmond Maitre","frederic-bazille","1869","./img/Frederic-Bazille-edmond_maitre_1869-150x150.jpg"]},"26":{"label":["Henri Fantin-Latour","Self-Portrait","henri-fantin-latour","1865","./img/Henri_FantinLatour-self-portrait_1865-150x150.jpg"]},"27":{"label":["Henri Fantin-Latour","Self-Portrait","henri-fantin-latour","1856","./img/Henri_FantinLatour-self-portrait_1856-150x150.jpg"]},"28":{"label":["Henri Fantin-Latour","Still Life","henri-fantin-latour","1866","./img/Henri-Fantin-Latour-still_life_1866-150x150.jpg"]},"29":{"label":["Henri Fantin-Latour","Still Life With Mustard Pot","henri-fantin-latour","1860","./img/Henri-Fantin-Latour-still_life_with_mustard_pot_1860-150x150.jpg"]},"30":{"label":["Paul Cezanne","The Artists Father Reading Levenement","paul-cezanne","1866","./img/Paul-Cezanne-the_artists_father_reading__levenement__1866-150x150.jpg"]}}
</script>
<style>
#grid-layout .hybridddl {max-width: 150px;}
</style>
</div>
<div style="height:36px"><a href="JavaScript:void(0);" class="button">submit</a></div>
</form>
</div>
Expand All @@ -187,6 +195,13 @@ <h1 class="title">Custom Select: "Hybrid Select"</h1>
new HybridDropdown(sel,{
fieldName:'hotels2',
})
sel = document.querySelector('#grid-layout');
new HybridDropdown(sel,{
fieldName:'painting',
optionLabel: function(lbl){
return `<img src="${lbl[4]}" alt="${lbl[0]}-${lbl[1]}" /><p><span class="painter">${lbl[0]}</span> - ${lbl[1]} </p>`;
}
})
});
document.querySelector('.button').addEventListener('click', (e)=>{
let form = e.target.closest('form'), fd = new FormData( form );
Expand Down

0 comments on commit 201b209

Please sign in to comment.