Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add-on works for Ember Engines #55

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 0 additions & 14 deletions .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,8 @@ insert_final_newline = true
indent_style = space
indent_size = 2

[*.js]
indent_style = space
indent_size = 2

[*.hbs]
insert_final_newline = false
indent_style = space
indent_size = 2

[*.css]
indent_style = space
indent_size = 2

[*.html]
indent_style = space
indent_size = 2

[*.{diff,md}]
trim_trailing_whitespace = false
13 changes: 13 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
module.exports = {
root: true,
parserOptions: {
ecmaVersion: 6,
sourceType: 'module'
},
extends: 'eslint:recommended',
env: {
browser: true
},
rules: {
}
};
43 changes: 41 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.

# See https://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
Expand All @@ -13,5 +14,43 @@
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
npm-debug.log*
testem.log
=======
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules
jspm_packages

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history
32 changes: 0 additions & 32 deletions .jshintrc

This file was deleted.

19 changes: 10 additions & 9 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
bower_components/
tests/
tmp/
dist/

/bower_components
/config/ember-try.js
/dist
/tests
/tmp
**/.gitkeep
.bowerrc
.editorconfig
.ember-cli
.gitignore
.eslintrc.js
.watchmanconfig
.travis.yml
.npmignore
**/.gitkeep
bower.json
ember-cli-build.js
Brocfile.js
testem.json
testem.js
28 changes: 17 additions & 11 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,34 +1,40 @@
---
language: node_js
node_js:
- "0.12"
- "6"

sudo: false

cache:
directories:
- node_modules
- $HOME/.npm
- $HOME/.cache # includes bowers cache

env:
matrix:
- EMBER_TRY_SCENARIO=ember-release
- EMBER_TRY_SCENARIO=ember-beta
- EMBER_TRY_SCENARIO=ember-canary
# we recommend testing LTS's and latest stable release (bonus points to beta/canary)
- EMBER_TRY_SCENARIO=ember-lts-2.4
- EMBER_TRY_SCENARIO=ember-lts-2.8
- EMBER_TRY_SCENARIO=ember-release
- EMBER_TRY_SCENARIO=ember-beta
- EMBER_TRY_SCENARIO=ember-canary
- EMBER_TRY_SCENARIO=ember-default

matrix:
fast_finish: true
allow_failures:
- env: EMBER_TRY_SCENARIO=ember-beta
- env: EMBER_TRY_SCENARIO=ember-canary

before_install:
- "npm config set spin false"
- "npm install -g npm@^2"
- npm config set spin false
- npm install -g bower phantomjs-prebuilt
- bower --version
- phantomjs --version

install:
- npm install -g bower
- npm install
- bower install

script:
- ember try $EMBER_TRY_SCENARIO test
# Usually, it's ok to finish the test scenario without reverting
# to the addon's original dependency state, skipping "cleanup".
- node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO test --skip-cleanup
2 changes: 1 addition & 1 deletion .watchmanconfig
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"ignore_dirs": ["tmp"]
"ignore_dirs": ["tmp", "dist"]
}
2 changes: 1 addition & 1 deletion LICENSE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2015
Copyright (c) 2017

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

Expand Down
126 changes: 7 additions & 119 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,139 +1,27 @@
# ember-lazy-image

[![Build Status](https://travis-ci.org/twokul/ember-lazy-image.svg)](https://travis-ci.org/twokul/ember-lazy-image)

`ember-lazy-image` is a component that allows you to gracefully handle image loading.

Component will load images lazily, only if they appeared in the view port.
This optimization brings page load time down.

Default loading placeholder is stolen from [aurer](https://github.com/aurer) and his awesome [codepen](http://codepen.io/aurer/pen/jEGbA).

### Installation

From inside your ember-cli project, run the following:

```bash
ember install ember-lazy-image
```

#### Installation for ember-cli 0.1.5 - 0.2.2

```bash
ember install:addon ember-lazy-image
```

#### Installation without ember-cli

```bash
npm install ember-lazy-image --save
```

### lazy-image

```hbs
{{lazy-image url='http://my-valid-url.com/foo.jpg'}}
```

Component will wait until the image is loaded and while waiting it will show default
loading placeholder (see above).

You can customize `loading` placeholder by passing it as an parameter:

```hbs
{{#lazy-image url='http://my-valid-url.com/foo.jpg'}}
<!-- custom template goes here, spinner, svg, etc. -->
{{/lazy-image}}
```

You can also define the fallback if the image failed to load. By default, component will render
`Image failed to load` text.

You can customize `error` text by passing it as an parameter:

```hbs
{{lazy-image url='http://my-not-valid-url.com/foo.jpg' errorText='Something went wrong.'}}
```

### `width`, `height` and `data-*` attributes

Lazy Image supports `width`, `height` and `data-*` attribute bindings.

```hbs
{{lazy-image url='http://my-valid-url.com/foo.jpg' width=400 height=400 data-foo-bar="my-foo-bar"}}
{{lazy-image url='http://my-valid-url.com/foo.jpg' width=400 height=400 data-foo-bar=foo.bar.path}}
```

### `class` attribute

You can also pass class names for the image element.

```hbs
{{lazy-image url='http://my-valid-url.com/foo.jpg' class='foo-bar baz-bar'}}
```

### `alt` attribute

You can pass the alt attribute to the component and it will be rendered on the image element

```hbs
{{lazy-image url='http://my-valid-url.com/foo.jpg' alt='foo description'}}
```

### ember-in-viewport options

Lazy Image uses [ember-in-viewport](https://github.com/dockyard/ember-in-viewport/) for viewport detection. Due to the way listeners and `requestAnimationFrame` is setup, you'll have to override the `ember-in-viewport` options by creating `app/components/lazy-image.js`:

```js
// app/components/lazy-image.js

import Ember from 'ember';
import LazyImage from 'ember-lazy-image/components/lazy-image';

export default LazyImage.extend({
viewportOptionsOverride: Ember.on('didInsertElement', function() {
Ember.setProperties(this, {
viewportUseRAF : true,
viewportSpy : false,
viewportRefreshRate : 150,
viewportTolerance: {
top : 50,
bottom : 50,
left : 20,
right : 20
}
});
})
});
```

See [Advanced usage (options)](https://github.com/dockyard/ember-in-viewport/tree/1.0.0#advanced-usage-options) for more in detail `ember-in-viewport` options.

The use of `threshold` is deprecated in favor of `viewportTolerance`.

### Experimental `lazy-background-image`

This is an experimental component that will add `background-image` style attribute to a component's `div`. It also
sets `min-height` attribute to `270px` so the image is visible. You should be able to overwrite it by using `lazy-background-image` class.
This README outlines the details of collaborating on this Ember addon.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The readme should probably stay the same?


## Installation

* `git clone` this repository
* `git clone <repository-url>` this repository
* `cd ember-lazy-image`
* `npm install`
* `bower install`

## Running

* `ember server`
* Visit your app at http://localhost:4200.
* `ember serve`
* Visit your app at [http://localhost:4200](http://localhost:4200).

## Running Tests

* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`

## Building

* `ember build`

For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
File renamed without changes.
31 changes: 0 additions & 31 deletions addon/components/lazy-background-image.js

This file was deleted.

Loading