Code Monkey home page Code Monkey logo

local-links's Introduction

local-links

Determine cross-browser if an event or anchor element should be handled locally.

NPM Build Status Greenkeeper badge Sauce Test Status

Install

npm install local-links --save

Why?

Browsers have quirks. Knowing if a link is local should be easy, since we just want to know if the hosts are the same. But this can be difficult because of the aforementioned browser quirks. A few of them:

  • IE9 will add :80 to the host of an anchor, but not the window
  • IE9 wont put a leading slash on the pathname of an anchor, but will on the window
  • Chrome 36 will report anchor.hash as '' if it has href="#"
  • More? Please report test cases!

Because of that and a few other things I was doing all the time, such as finding the closest anchor to an element based on an event object, I decided it would be a good module (that at least I would use all the time).

Usage

<a href='/page2' id="local">Local</a>
<a href='#hash' id="hash">Local</a>
<a href='http://google.com' id="google">Google</a>
var local = require('local-links');

// `pathname()` will return the pathname as a string
// if the link is local, otherwise it will return null
local.pathname(document.getElementById('local')) // '/page2'
local.pathname(document.getElementById('hash')) // null
local.pathname(document.getElementById('google')) // null

// `hash()` will return the hash as a string
// if the hash is to this page, otherwise it will return null
local.hash(document.getElementById('local')) // null
local.hash(document.getElementById('hash')) // '#hash'
local.hash(document.getElementById('google')) // null

API

Methods

getLocalPathname(Event or HTMLElement [, HTMLElement])

Returns the pathname if it is a non-hash local link, or null if it is not. Always includes the leading /.

Alias: pathname

getLocalHash(Event or HTMLElement [, HTMLElement])

Returns the hash if it is an in-page hash link, or null if it is not. Always includes the leading #.

Alias: hash

isActive(Event or HTMLElement [, String comparePath])

Returns true/false depending on if the anchor pathname is equal to the comparePath (which defaults to window.location.pathname). Calls pathname() internally.

Alias: active

isLocal(event, anchor, [, Boolean lookForHash])

Returns the pathname (or hash if lookForHash is true) for local links, or null if it is not. This is used by pathname() and hash() under the hood. The main difference here is that you need to specify the event and anchor yourself, and the anchor wont be looked up from event.target like it would from the other methods.

Supply either Event or HTMLElement

The above methods will accept an Event object, like the one you get from click event handlers, or any HTMLElement. You can also supply an Event object and a different HTMLElement as the second parameter and it will take precedence.

If only an Event object is supplied, the HTMLElement will be found from Event.target.

Nested HTML Elements

In the case that any HTMLElement your provide is not an anchor element, the module will look up parentNodes until an anchor is found.

Events

If an Event object is supplied, all methods will return null if any of the following are true altKey, ctrlKey, metaKey, shiftKey. This is because you almost always want to treat modified click events as external page clicks.

target="_blank"

If the anchor has target="_blank" it will return null for both the pathname() and hash() methods.

Hash links

Using the pathname method will return null for hash links that do not point to a different page. To get the hash for one of these links use the hash() method.

Tests

Run npm start and open http://localhost:3000 to run the tests in your browser.

It is also a good idea to run sudo npm run start-80 (requires admin) which will run the tests on http://localhost because there can be unexpected behavior when the host has no port in IE9 and IE10.

To run the tests in the cli, just run npm test.

License

MIT

local-links's People

Contributors

chesles avatar greenkeeper[bot] avatar greenkeeperio-bot avatar lukekarrys avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

local-links's Issues

Option to enable returning a path only if history.pushState is a thing

So in the case of IE9 for example. If you're using a super simple routing approach like, for example that in: https://github.com/HenrikJoreteg/feather-app

There's a potential issue with getLocalPathname in that it will return a path, despite not actually being able to do a pushState which is what it will attempt to do if there's a matching path.

This made me wonder if perhaps there shouldn't be an option (or maybe even be the default) that if history.pushState doesn't exist, it just always returns null. This would cause internal links to do a full page refresh, which would be slower, but still produce the right result. I don't know if this really matters, however because if pushState fails, the app would still update the view just not update the URL which may be a better fallback???

Do what you will with this, but it was just a thought I figured may be worth raising.

An in-range update of electron is breaking the build 🚨

Version 1.7.8 of electron just got published.

Branch Build failing 🚨
Dependency electron
Current Version 1.8.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As electron is β€œonly” a devDependency of this project it might not break production or downstream projects, but β€œonly” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this πŸ’ͺ

Status Details
  • ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Release Notes electron v1.7.8

Bug Fixes

  • [SECURITY] Fixed Chromium RCE vulnerability

Linux

  • Fixed app.makeSingleInstance hanging. #10586

macOS

  • Fixed missing extension when saving a file without filters #10586
Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Consider adding aliases (sorry to be that guy)

Sorry to be that guy, feel free to tell me to bug off.

I think this code:

handleClick: function (e) {
        var pathname = links.pathname(e);

        if (pathname) {
            e.preventDefault();
            app.navigate(pathname);
        }
    }

would be a lot more readable if it was:

handleClick: function (e) {
        var pathname = links.getLocalPathname(e);

        if (pathname) {
            e.preventDefault();
            app.navigate(pathname);
        }
    }

The first looks like it will just get the pathname from anything, rather than only returning a pathname if it's local.

I'd suggest re-naming or aliasing these two:

pathname => getLocalPathname
active => isActive (to match isLocal)

If i name the required module localLinks it's better localLinks.pathname() makes more sense. But I think it'd be clearer with the alias.

An in-range update of tape-run is breaking the build 🚨

Version 3.0.1 of tape-run was just published.

Branch Build failing 🚨
Dependency tape-run
Current Version 3.0.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

tape-run is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Commits

The new version differs by 4 commits.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of electron is breaking the build 🚨

Version 1.7.10 of electron was just published.

Branch Build failing 🚨
Dependency electron
Current Version 1.8.1
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

electron is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Release Notes electron v1.7.10

Bug Fixes

Linux

  • Fixed subpixel font rendering with freetype. #11402

macOS

  • Fixed rendering issues with Nvidia GPU on High Sierra. #10898
  • Fixed incorrectly cropped TouchBar items. #11141
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Responsive menu doesn't collapse

I'm using this with React and my responsive/mobile menu doesn't collapse after clicking a page link. It makes sense, since it seems the site refresh restarts the menu back to a collapsed state. I really love the feel this has on desktop, but should I not use this for mobile views?

If there is a way to take care of this through a handler, my apologies; I'm pretty green with coding.

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.