Git Product home page Git Product logo

jquery-harmonia's Issues

Handle console better

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();

Links that are "/" or "" or ?

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.

Allow each select to have unique ID or class

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?

Fix comment...

 * @docs      http://github.com/username/jquery-harmonia

Replace username with registerguard.

Tag 1.0.0!

As soon as things are stable, let's tag it!

Demo page

Make font size 16px so ios doesn't zoom.

Also, center and make a little more presentable.

Fix

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".

Bower

Make this repo a Bower-installable package.

Reduce branches down to gh-pages

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.

Selected

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.

Strip HTML from inside HREF

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).

Make optgroups

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>

screen shot 2014-06-25 at 10 50 41 pm

Handle non-links better

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:

screenshot 2017-05-14 00 14 37

Document optgroup links

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.