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.

Sign up for GitHub

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

Jump to bottom

Added "data-title" attribute #137

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Added "data-title" attribute #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6b4ec97
Add "data-title" attribute.
YuraDubensky Aug 15, 2016
3c103b5
Update Imager.js
YuraDubensky Aug 15, 2016
c9e195d
Updated docs.
YuraDubensky Aug 15, 2016
9976be7
Added tests
YuraDubensky Aug 15, 2016
ba77b52
Update html fixture for test
YuraDubensky Aug 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion Imager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@
this.gif.src = 'data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7';
this.gif.className = this.className;
this.gif.alt = '';
this.gif.title = '';
this.lazyloadOffset = opts.lazyloadOffset || 0;
this.scrollDelay = opts.scrollDelay || 250;
this.onResize = opts.hasOwnProperty('onResize') ? opts.onResize : true;
Expand Down Expand Up @@ -248,7 +249,8 @@
gif.className = (elementClassName ? elementClassName + ' ' : '') + this.className;
gif.setAttribute('data-src', element.getAttribute('data-src'));
gif.setAttribute('alt', element.getAttribute('data-alt') || this.gif.alt);

gif.setAttribute('title', element.getAttribute('data-title') || this.gif.title);

element.parentNode.replaceChild(gif, element);

return gif;
Expand Down
10 changes: 6 additions & 4 deletions docs/html-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,20 +50,22 @@ So the following HTML...
</div>
```

### `data-alt` and `data-class`
### `data-alt`, `data-title` and `data-class`

These two `data-*` attributes are copied from the responsive placeholder to the response `img` element.nnot process images or who have image loading disabled. It is converted to the `alt` attribute of the `img element.
These three `data-*` attributes are copied from the responsive placeholder to the response `img` element.nnot process images or who have image loading disabled. `data-alt` attribute is converted to the `alt` attribute of the `img` element. `data-title` attribute is converted to the `title` attribute of the `img` element.

So the following HTML...

```html
<div data-src="http://placehold.it/{width}" data-alt="alternative text"></div>
<div data-src="http://placehold.it/{width}" data-title="Title text"></div>
<div data-src="http://placehold.it/{width}" data-class="london calling"></div>
```

...is converted to...

```html
<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" alt="alternative text" class="image-replace">
<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" alt="" class="london calling image-replace">
<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" alt="alternative text" title="" class="image-replace">
<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" alt="" title="Title text" class="image-replace">
<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" alt="" title="" class="london calling image-replace">
```
4 changes: 2 additions & 2 deletions test/fixtures/regular.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

<div id="main">
<div class="delayed-image-load" data-src="base/test/fixtures/media/A-320.jpg"></div>
<div class="delayed-image-load" data-src="base/test/fixtures/media/B-320.jpg" data-alt="Responsive Image alternative" data-width="640"></div>
<div class="delayed-image-load" data-src="base/test/fixtures/media/B-320.jpg" data-alt="Responsive Image alternative" data-titke="Responsive Image title" data-width="640"></div>
<div class="delayed-image-load" data-src="base/test/fixtures/media/C-320.jpg"></div>

<span class="not-delayed-image-load">
<img src="data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7" alt="Not a responsive image">
</span>
</div>

<div class="delayed-image-load" data-src="base/test/fixtures/media/A-320.jpg"></div>
<div class="delayed-image-load" data-src="base/test/fixtures/media/A-320.jpg"></div>
28 changes: 28 additions & 0 deletions test/unit/html-options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,34 @@ describe('Imager.js HTML data-* API', function () {
});
});
});

describe('handling data-title', function () {
it('should generate an empty title attribute for the responsive image', function (done) {
fixtures = loadFixtures('regular');
var imgr = new Imager('#main .delayed-image-load');

expect(imgr.gif).to.have.property('title', '');

imgr.ready(function () {
expect(imgr.divs[0]).to.have.property('title', imgr.gif.title);

done();
});
});

it('should generate an title attribute with the same value as the placeholder data-title attribute', function (done) {
fixtures = loadFixtures('regular');
var imgr = new Imager('#main .delayed-image-load');

expect(imgr.gif).to.have.property('title', '');

imgr.ready(function () {
expect(imgr.divs[1]).to.have.property('title', 'Responsive Image title');

done();
});
});
});

describe('handling data-width', function () {
beforeEach(function () {
Expand Down