mhulse / jquery-harmonia Goto Github PK
View Code? Open in Web Editor NEWReplace an (un)ordered list with a form select.
Home Page: http://mhulse.github.com/jquery-harmonia/demo/
License: Apache License 2.0
Replace an (un)ordered list with a form select.
Home Page: http://mhulse.github.com/jquery-harmonia/demo/
License: Apache License 2.0
<li>plain text</li>
Currently, my code will say "there's a problem with your markup" if list item has no href.
https://github.com/registerguard/jquery-harmonia/blob/master/harmonia/jquery.harmonia-0.1.0.js#L132
$hrefs used out of scope. Need to fix!
Shouldn't this be var
ed(?):
https://github.com/registerguard/jquery-harmonia/blob/master/harmonia/jquery.harmonia-0.1.0.js#L106
Fail!
var console = this.console || {log:function(){}};
Might be a better way to handle console/debug output. Allows me to ditch the check for C
and just use console.log()
;
Kinda a patch:
//----------------------------------
// Compare urls directly or index:
//----------------------------------
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
if ((href == '/') || (href == ahref) || ((href.indexOf(ahref) != -1) && (ahref != '/'))) {
selected = true;
}
Not fully tested. Was working with this:
<ul class="avr_links avr_harmonia">
<li><a href="/">Home</a></li>
...
The slash was hitting the indexOf
and matching as selected
.
Is the above patch good enough? Need to test more ... Might be nice to have a multi-page demo to account for this scenario.
See pattern for this here:
https://github.com/mhulse/grunt-js-boiler/blob/gh-pages/build/src/jquery.worf.js#L112
settings = $.extend(true, {}, defaults, options, $this.data(NS + 'Options')); // Recursively merge defaults, options and HTML5 `data-` attribute options.
So each can be styled individually if so desired.
Might want to investigate how useful the selectId
option is, as only one ID can be on a page. Maybe the data-
attribute feature #21 cold be a fix for this issue too?
Spelled wrong in README.
… to latest version found here:
* @docs http://github.com/username/jquery-harmonia
Replace username
with registerguard
.
As soon as things are stable, let's tag it!
Might be nice to have ability to target list and have the harmonia dropdown appear elsewhere on page.
... and put version number in the comments.
Make font size 16px so ios doesn't zoom.
Also, center and make a little more presentable.
Need rule above options header.
Bad news on ios. Have to turn off pop up block and then it crashes.
May be a solution here:
Move the generated anywhere on the page using the elementTarget option. For example: data-harmonia-options='{ "elementTarget" : "#target" }', where elementTarget is: <div id="foo"></div>. Make foo target and say "... somewhere on page".
Make this repo a Bower-installable package.
Need to allow for all first children to be span or href (the latter would scenario would be for optgroups).
The current workflow is to work on develop
, merge into master
and merger master
to gh-pages
.
Skip all of the above and make this repo a gh-pages
-only workflow.
So we can have working media queries in IE<8!
It's not a JSHint option:
Update the doc comment.
They don't match.
If currentPage : true
in the options, and when passing this first default option:
$default = _optionize.call(data.target, $('<a>'), data.settings.optionDefault);
… it hits this code:
link = ($a.attr('href') || ''); // Current `<a>`'s href.
… and then passes checks later so that it becomes the "selected" option
.
Need to make sure that links without href
attributes don't pass selected
checks.
This line:
https://github.com/registerguard/jquery-harmonia/blob/master/harmonia/jquery.harmonia.js#L347
Here's a jQuery ticket:
http://bugs.jquery.com/ticket/12072
Doesn't appear that jQuery 1.9.1 has fixed it.
It's just a warning, so going to ignore this for now.
Check this though in the next version of jQuery.
If there's HTML inside list item's href then Harmonia won't generate an option. Just need to strip all HTML to get at the text node(s).
Like:
<select name="fm_select">
<optgroup label="Group 1">
<option value="Option 1.1">Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option value="Option 2.1">Option 2.1</option>
<option value="Option 2.2">Option 2.2</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option value="Option 3.1">Option 3.1</option>
<option value="Option 3.2">Option 3.2</option>
<option value="Option 3.3">Option 3.3</option>
</optgroup>
</select>
With this:
<ul class="bits bits-right harmonia" data-harmonia-options='{
"elementTarget": "#top-select"
}'>
<li><span>No Link</span></li>
<li><a href="http://google.com">Link</a></li>
<li><a href="http://google.com">Link</a></li>
<li><a href="http://google.com">Link</a></li>
<li class="fl"><a href="http://google.com">Link</a></li>
</ul>
I get:
So the banner can be stripped when minified.
It's not possible to make optgroup
headings linkable, so you can do:
<li>
<a href="/report/">Report</a>
<ul>
<li><a href="/report/" class="avr_util-hide">Report Home</a></li>
<li><a href="/report/something-wrong/">Something Wrong</a></li>
<li><a href="/report/something-right/">Something Right</a></li>
<li><a href="/report/status-of-reports/">Status of Reports</a></li>
</ul>
</li>
Where .avr_util-hide
is just display:none
.
I don't see a need to say anything in the console in the destroy
method.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.