Skip to content

Commit

Permalink
changed property 'fullWindow' name to 'imageSize'
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicolas-t
nicolas-t committed Jul 20, 2015
1 parent c1fea5d commit ca830c7
Show file tree
Hide file tree
Showing 6 changed files with 42 additions and 41 deletions.
14 changes: 7 additions & 7 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,24 @@
<script>
$(function(){
$('#example0').Chocolat({
fullWindow: 'contain'
imageSize: 'contain'
});

$('#example1').Chocolat({
loop : true,
fullWindow : 'cover',
imageSize : 'cover',
overlayOpacity : 0.9
});

$('#example2').Chocolat({
container : '#container1',
fullWindow : 'contain',
imageSize : 'contain',
loop : true,
})

$('#example3').Chocolat({
container : '#container2',
fullWindow : 'cover',
imageSize : 'cover',
})
});
</script>
Expand Down Expand Up @@ -146,7 +146,7 @@ <h2>
{src : 'demo-images/6.jpg', title : 'caption 2'},
{src : 'demo-images/8.jpg', title : 'caption 3'},
],
fullWindow : 'contain',
imageSize : 'contain',
container : '#container3'
}).data('chocolat');

Expand Down Expand Up @@ -195,7 +195,7 @@ <h2>
e.preventDefault()

console.log('cover mode start')
instance.api().set('fullWindow', 'cover')
instance.api().set('imageSize', 'cover')
var def = instance.api().place()

def.done(function(){
Expand All @@ -207,7 +207,7 @@ <h2>
e.preventDefault()

console.log('contain mode start')
instance.api().set('fullWindow', 'contain')
instance.api().set('imageSize', 'contain')
var def = instance.api().place()

def.done(function(){
Expand Down
20 changes: 10 additions & 10 deletions dist/js/jquery.chocolat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
container : window, // window or jquery object or jquery selector, or element
imageSelector : '.chocolat-image',
className : '',
fullWindow : false, // false, 'contain', 'cover' or 'native'
imageSize : 'default', // 'default', 'contain', 'cover' or 'native'
initialZoomState : null,
fullScreen : false,
loop : false,
Expand Down Expand Up @@ -172,7 +172,7 @@
var holderRatio = (holderHeight / holderWidth);
var imgRatio = (imgHeight / imgWidth);

if(this.settings.fullWindow == 'cover') {
if(this.settings.imageSize == 'cover') {
if(imgRatio < holderRatio) {
height = holderHeight;
width = height / imgRatio;
Expand All @@ -182,7 +182,7 @@
height = width * imgRatio;
}
}
else if(this.settings.fullWindow == 'native') {
else if(this.settings.imageSize == 'native') {
height = imgHeight;
width = imgWidth;
}
Expand All @@ -195,9 +195,9 @@
width = holderGlobalWidth;
height = width * imgRatio;
}
if(!this.settings.fullWindow && (width >= imgWidth || height >= imgHeight)) {
width=imgWidth;
height=imgHeight;
if(this.settings.imageSize === 'default' && (width >= imgWidth || height >= imgHeight)) {
width = imgWidth;
height = imgHeight;
}
}

Expand Down Expand Up @@ -317,7 +317,7 @@

markup : function() {
this.elems.domContainer.addClass('chocolat-open ' + this.settings.className);
if(this.settings.fullWindow == 'cover') {
if(this.settings.imageSize == 'cover') {
this.elems.domContainer.addClass('chocolat-cover');
}
if(this.settings.container !== window) {
Expand Down Expand Up @@ -572,8 +572,8 @@
},

zoomIn : function (e) {
this.settings.initialZoomState = this.settings.fullWindow
this.settings.fullWindow = 'native';
this.settings.initialZoomState = this.settings.imageSize
this.settings.imageSize = 'native';

var event = $.Event('mousemove');
event.pageX = e.pageX;
Expand All @@ -592,7 +592,7 @@
}
var duration = duration || this.settings.duration

this.settings.fullWindow = this.settings.initialZoomState
this.settings.imageSize = this.settings.initialZoomState
this.settings.initialZoomState = null
this.elems.img.animate({'margin': 0}, duration)

Expand Down
2 changes: 1 addition & 1 deletion dist/js/jquery.chocolat.min.js
View file

Large diffs are not rendered by default.

13 changes: 7 additions & 6 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,9 @@ $(document).ready(function(){
##Documentation
-----------

### Parameters
**container : ** `default:window`
### Parameters

**container :** `default:window`
Sets whether viewer will open and fill the whole page (`default`) , or whether it should open in a particular block of the page. For example ` #container2` in this case the height and width of the block must be defined.
values can be : window, selector, jQuery element, or a node

Expand All @@ -51,9 +52,9 @@ Title of the set. Can also be defined from the html, with the `data-chocolat-tit
**className :** `default : ''`
Add a custom css class to the parent of the lightbox

**fullWindow :** `default : false`
Can be `false`, `'contain'`, `'native'`, or `'cover'`.
`false` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's not streched, only displayed at native dimensions
**imageSize :** `default : 'default'`
Can be `'default'`, `'contain'`, `'native'`, or `'cover'`.
`default` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's not streched, only displayed at native dimensions
`'contain'` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's streched, to fit the window
`'cover'` : the image cover the window, no white space are displayed.
more informations & exemple about contain/cover : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
Expand Down Expand Up @@ -150,7 +151,7 @@ Set to the container when its width is inferior to `480px` (or `mobileBreakpoint
Set to the container when chocolat is open in a block (`container != window`)

**.chocolat-cover :**
Set to the container when chocolat `fullWindow` is set to `'cover'`
Set to the container when chocolat `imageSize` is set to `'cover'`

**.chocolat-zoomable :**
Set to the container when chocolat is zoomable
Expand Down
20 changes: 10 additions & 10 deletions src/js/jquery.chocolat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
container : window, // window or jquery object or jquery selector, or element
imageSelector : '.chocolat-image',
className : '',
fullWindow : false, // false, 'contain', 'cover' or 'native'
imageSize : 'default', // 'default', 'contain', 'cover' or 'native'
initialZoomState : null,
fullScreen : false,
loop : false,
Expand Down Expand Up @@ -172,7 +172,7 @@
var holderRatio = (holderHeight / holderWidth);
var imgRatio = (imgHeight / imgWidth);

if(this.settings.fullWindow == 'cover') {
if(this.settings.imageSize == 'cover') {
if(imgRatio < holderRatio) {
height = holderHeight;
width = height / imgRatio;
Expand All @@ -182,7 +182,7 @@
height = width * imgRatio;
}
}
else if(this.settings.fullWindow == 'native') {
else if(this.settings.imageSize == 'native') {
height = imgHeight;
width = imgWidth;
}
Expand All @@ -195,9 +195,9 @@
width = holderGlobalWidth;
height = width * imgRatio;
}
if(!this.settings.fullWindow && (width >= imgWidth || height >= imgHeight)) {
width=imgWidth;
height=imgHeight;
if(this.settings.imageSize === 'default' && (width >= imgWidth || height >= imgHeight)) {
width = imgWidth;
height = imgHeight;
}
}

Expand Down Expand Up @@ -317,7 +317,7 @@

markup : function() {
this.elems.domContainer.addClass('chocolat-open ' + this.settings.className);
if(this.settings.fullWindow == 'cover') {
if(this.settings.imageSize == 'cover') {
this.elems.domContainer.addClass('chocolat-cover');
}
if(this.settings.container !== window) {
Expand Down Expand Up @@ -572,8 +572,8 @@
},

zoomIn : function (e) {
this.settings.initialZoomState = this.settings.fullWindow
this.settings.fullWindow = 'native';
this.settings.initialZoomState = this.settings.imageSize
this.settings.imageSize = 'native';

var event = $.Event('mousemove');
event.pageX = e.pageX;
Expand All @@ -592,7 +592,7 @@
}
var duration = duration || this.settings.duration

this.settings.fullWindow = this.settings.initialZoomState
this.settings.imageSize = this.settings.initialZoomState
this.settings.initialZoomState = null
this.elems.img.animate({'margin': 0}, duration)

Expand Down
14 changes: 7 additions & 7 deletions test/test.chocolat.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,12 @@ describe "Chocolat", ->

it "should add css classes to body when full window", (done) ->
chocolat = $('#example0').Chocolat({
fullWindow : 'cover'
imageSize : 'cover'
}).data('chocolat')

chocolat.api().open().done( ->
expect($('body').hasClass('chocolat-open')).to.be.true
expect($('body').hasClass('chocolat-' + chocolat.settings.fullWindow)).to.be.true
expect($('body').hasClass('chocolat-' + chocolat.settings.imageSize)).to.be.true
# expect($('#container').hasClass('chocolat-zoomable')).to.be.true
done()
)
Expand Down Expand Up @@ -287,7 +287,7 @@ describe "Chocolat", ->

)

describe "FullWindow cover", ->
describe "imageSize cover", ->
afterEach ->
chocolat = $('#example0').data('chocolat')

Expand All @@ -300,17 +300,17 @@ describe "Chocolat", ->
$('#example0').data('chocolat', null)

it "should add class chocolat-cover to parent", (done) ->
chocolat = $('#example0').Chocolat({fullWindow: 'cover'}).data('chocolat')
chocolat = $('#example0').Chocolat({imageSize: 'cover'}).data('chocolat')

chocolat.api().open().done( ->
expect(chocolat.api().get('fullWindow')).to.equal('cover')
expect(chocolat.api().get('imageSize')).to.equal('cover')
expect(chocolat.api().getElem('domContainer').hasClass('chocolat-cover')).to.be.true
done()
)

it "should have shortest side of the container equal to shortest side to the image in container", (done) ->
chocolat = $('#example0').Chocolat({
fullWindow: 'cover'
imageSize: 'cover'
container: '#container'
}).data('chocolat')

Expand Down Expand Up @@ -340,7 +340,7 @@ describe "Chocolat", ->

it "should have shortest side of the container equal to shortest side to the image in window", (done) ->
chocolat = $('#example0').Chocolat({
fullWindow: 'cover'
imageSize: 'cover'
}).data('chocolat')

chocolat.api().open().done( ->
Expand Down

0 comments on commit ca830c7

Please sign in to comment.