mike-north/ember-anchor

Support for an #anchor like construct, in ember.js apps

ember-anchor

Installation

ember install ember-anchor

Recommended Use

The easiest way to use ember-anchor is to setup a controller with a queryParam, and bind it to the {{ember-anchor}} component.

Add this component to the template corresponding to the controller or route where your queryParams may live, passing in the queryParam to be used as your "anchor" param, to the component as property a.

app/templates/application.hbs

{{ember-anchor a=anc}}

On your controller, add a mixin that allows us to use a queryParam like a #hash.

app/controllers/application.js

import Ember from 'ember';
import ControllerSupport from 'ember-anchor/mixins/controller-support';

export default Ember.Controller.extend(ControllerSupport, {
  queryParams: ['anc'],
  anc: 'first'
});

Now you may build links with a queryParam, and add "anchors" to arbitrary elements in the page, which can be scrolled to.

app/templates/index.hbs

{{link-to 'Go to First' 'index'
  (query-params anc='first') }}
{{link-to 'Go to Second' 'index'
  (query-params anc='second') }}
{{link-to 'Go to Third' 'index'
  (query-params anc='third') }}



<h5 data-anchor='first'></h5>
<h5 data-anchor='second'></h5>
<h5 data-anchor='third'></h5>

Legacy Use (With Ember.View)

And on your view, add a mixin that scrolls the page to the appropriate position, based on a queryParam, and in response to queryParam changes

app/views/index.js

import Ember from 'ember';
import ViewSupport from 'ember-anchor/mixins/view-support';

export default Ember.View.extend(ViewSupport, {

});

Build links in the same way as described above

Advanced Configuration

One View

You can customize the queryParam used for anchors on a single view, by overriding the anchorQueryParam property on both the controller and view

app/controllers/customized.js

import Ember from 'ember';
import ControllerSupport from 'ember-anchor/mixins/controller-support';

export default Ember.Controller.extend(ControllerSupport, {
  anchorQueryParam: 'custom',
  queryParams: ['custom'],
  custom: 'first'
});

app/views/customized.js

import Ember from 'ember';
import ViewSupport from 'ember-anchor/mixins/view-support';

export default Ember.View.extend(ViewSupport, {
  anchorQueryParam: 'custom'
});

You should then build your links, and add your data-* attributes as follows

<!-- Build your link /?custom=first -->
{{link-to 'Go to First' 'index'
  (query-params custom='first') }}

<!-- Will be scrolled into view, when above link is clicked -->
<h5 data-custom='first'></h5>

Application Wide

If you wish to use a different queryParam other than anchor, as the application-wide default you can configure this addon as follows

app/configure/environment.js

var ENV = {
  ...
  emberAnchor: {
    anchorQueryParam: 'a'
  },
  ...
};
...
return ENV;

You should then build your links, and add your data-* attributes as follows

<!-- Build your link /?a=first -->
{{link-to 'Go to First' 'index'
  (query-params a='first') }}

<!-- Will be scrolled into view, when above link is clicked -->
<h5 data-a='first'></h5>

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

ember-anchor's Issues

Sticky anchorQueryParam

Once I have transitioned to a query params link, unless I pass null in every single link-to throughout my entire application the QueryParam remains, i.e.

• Use {{link-to 'Add param' 'index' (query-params anchor='third') }}
• It scrolls to the <h5 data-anchor="third">
• Then click on {{link-to 'no params' 'other-page' }}
• URL is /other-page?anchor=third

Is there any way to turn off this stickiness? Thanks!

Regression: anchor query param gets dropped on page reload

I confirmed that this wasn't the case in 0.0.6, but was something that was introduced in 0.0.7. I tested it against the dummy app on both versions.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Demo link does not work

Demo link does not work.

http://ember-anchor.mike.works/

Recommended use : not working with ember 2.4

I tried the instructions given in recommended use section with ember 2.4 but it didn't worked.

..templates/contact.hbs
`{{ember-anchor a=myQueryParam}}

{{link-to 'Go to First' 'contact' (query-params anchor='first') }}
{{link-to 'Go to Second' 'contact' (query-params anchor='second') }}
{{link-to 'Go to Third' 'contact' (query-params anchor='third') }}

First

This line is first line. This line is first line. This line is first line. This line is first line. This line is first line. This line is first line.

Second

This line is first line. This line is first line. This line is first line. This line is first line. This line is first line. This line is first line.

Third

This line is first line. This line is first line. This line is first line. This line is first line. This line is first line. This line is first line. ` Also, I added controller, ../controller/contact.js but page navigation with the headers not working. `import Ember from 'ember'; import ControllerSupport from 'ember-anchor/mixins/controller-support';

export default Ember.Controller.extend(ControllerSupport, {
queryParams:['anchor'],
anchor: 'first'
});
`

Demo not working

Hi!

I'm trying http://mike.works/ember-anchor/ and it does not scroll!

Working with OCTANE

Is there a working example for octane 3.22 and above?

DEPRECATION: An addon is trying to access project.nodeModulesPath

While trying to update an app that uses this addon to v3.0.0 I ran into this deprecation:
An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }). Accessed from:

This needs to be fixed so that projects using this addon can upgrade to v3.0.0.

This should fix it:
Upgrade the version checker: ember-cli/ember-cli-version-checker#48

Ember Anchor not working with Firefox and IE but works with Chrome

Hi I tried this ember anchor addon and found working in Chrome but not in Firefox and IE. Am I missing something ? Here is my sample app link : code link

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): husky
• chore(deps): stable ember infrastructure (major) (ember-cli, ember-cli-babel, ember-cli-fastboot, ember-qunit, ember-resolver, ember-source, eslint-plugin-ember, qunit-dom)
• chore: lockfile maintenance
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): @ember/optional-features

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): semantic-release [security]
• chore(deps): eslint-plugin-node
• chore(deps): ambient types (minor) (@types/ember, @types/qunit)
• chore(deps): @types/ember
• chore(deps): commitlint monorepo (major) (@commitlint/cli, @commitlint/config-conventional, @commitlint/travis-cli)
• chore(deps): ember-cli-template-lint
• chore(deps): ember-maybe-import-regenerator
• chore(deps): ember-source-channel-url
• chore(deps): ember-try
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• ember-cli-babel ^7.0.0
• ember-cli-htmlbars ^6.0.0
• @commitlint/cli 8.3.6
• @commitlint/config-conventional 8.3.6
• @commitlint/travis-cli 8.3.6
• @ember/optional-features 0.7.0
• @mike-north/js-lib-renovate-config 1.3.1
• @mike-north/js-lib-semantic-release-config 1.0.1
• @types/ember 3.1.2
• @types/qunit 2.9.6
• broccoli-asset-rev 3.0.0
• ember-cli-dependency-checker 3.3.2
• ember-cli-eslint 5.1.0
• ember-cli-fastboot 3.3.2
• ember-cli-htmlbars-inline-precompile 3.0.2
• ember-cli-inject-live-reload 2.1.0
• ember-cli-sri 2.1.1
• ember-cli-template-lint 1.0.0
• ember-cli-uglify 3.0.0
• ember-cli 4.12.3
• ember-export-application-global 2.0.1
• ember-load-initializers 2.1.2
• ember-maybe-import-regenerator 0.1.6
• ember-qunit 5.1.5
• ember-resolver 8.1.0
• ember-source-channel-url 2.0.1
• ember-source 4.12.4
• ember-try 1.4.0
• eslint-plugin-ember 10.6.1
• eslint-plugin-node 11.1.0
• husky 2.7.0
• loader.js 4.7.0
• semantic-release 15.12.5
• qunit-dom 2.0.0
• node ^4.5 || 6.* || >= 7.*

travis

.travis.yml

• node 8
• node 10

---

• Check this box to trigger a request for Renovate to run again on this repository

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

$(`[data-anchor="${this.get(controllerProp)}"]`) should be $(`[data-${qp}="${controllerProp}"]`) as in _scrollToElemPosition

in here. Alternatively, I think the whole check can be removed and left to be handled at _scrollToElemPosition.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Could not find module

Hi, this is my first time making an issue, so go easy on me!

So I installed the project through npm and got this error. Then I also tried to install it with bower and still got the same error. I'm on ember cli 1.13.1.

Error: Could not find module 'ember-new-computed' imported from 'ember-anchor/mixins/controller-support'

Replace travis-deploy-once with Travis-CI stage