mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
new ribbon architecture working, still not done migrating...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
a2e13d1b08
commit
e35b45e960
@ -63,6 +63,13 @@ body {
|
||||
-o-transition: all 0.1s linear, transform 0.1s linear;
|
||||
transition: all 0.1s linear, transform 0.1s linear;
|
||||
}
|
||||
.viewer:not(.no-transitions) .ribbon-locator:not(.no-transitions) {
|
||||
-webkit-transition: all 0.1s linear, transform 0.1s linear;
|
||||
-moz-transition: all 0.1s linear, transform 0.1s linear;
|
||||
-ms-transition: all 0.1s linear, transform 0.1s linear;
|
||||
-o-transition: all 0.1s linear, transform 0.1s linear;
|
||||
transition: all 0.1s linear, transform 0.1s linear;
|
||||
}
|
||||
|
||||
.viewer:not(.no-transitions) .ribbon:not(.no-transitions) {
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
|
||||
@ -522,69 +522,25 @@ button:hover {
|
||||
}
|
||||
|
||||
|
||||
/****************************************************** Ribbon set ***/
|
||||
/****************************************** Ribbon set and locator ***/
|
||||
.ribbon-set {
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
/* NOTE: this needs for scaling/zooming to behave correctly and not
|
||||
shift the element, when its dimensions change...
|
||||
...this is because .ribbon-set will both be used for scaling
|
||||
and aligning... */
|
||||
.origin(top, left);
|
||||
}
|
||||
.ribbon-locator {
|
||||
position: relative;
|
||||
|
||||
/* empty ribbon set... */
|
||||
.ribbon-set:empty {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
|
||||
// place at top left corner...
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
|
||||
-webkit-transform: none !important;
|
||||
-moz-transform: none !important;
|
||||
-o-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.viewer:empty:before,
|
||||
.viewer:empty:after,
|
||||
.ribbon-set:empty:before,
|
||||
.ribbon-set:empty:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
//content: "Nothing loaded...";
|
||||
content: attr(empty-msg);
|
||||
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin-top: -20px;
|
||||
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: silver;
|
||||
opacity: 0.9;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.viewer:empty:after,
|
||||
.ribbon-set:empty:after {
|
||||
|
||||
//content: "Press 'O' to load, 'F1' for help or '?' for keyboard mappings.";
|
||||
content: attr(empty-help);
|
||||
|
||||
margin-top: 5px;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
opacity: 0.5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -617,10 +573,10 @@ stretching in width... */
|
||||
display: none;
|
||||
}
|
||||
.ribbon:first-child {
|
||||
margin-top: 0px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.ribbon:last-child {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.base-ribbon-marker {
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
.ribbon-mover {
|
||||
.ribbon-locator {
|
||||
position: relative;
|
||||
|
||||
top: 0px;
|
||||
@ -150,8 +150,8 @@ $(function(){
|
||||
|
||||
var image = $(this)
|
||||
var ribbon = image.parents('.ribbon').first()
|
||||
var ribbon_mover = ribbon.parents('.ribbon-mover').first()
|
||||
var ribbon_set = ribbon_mover.parents('.ribbon-set').first()
|
||||
var ribbon_locator = ribbon.parents('.ribbon-locator').first()
|
||||
var ribbon_set = ribbon_locator.parents('.ribbon-set').first()
|
||||
|
||||
image
|
||||
.addClass('current')
|
||||
@ -160,15 +160,21 @@ $(function(){
|
||||
var angle = ribbon_set.attr('angle') || 0
|
||||
|
||||
var l = image[0].offsetLeft
|
||||
var t = ribbon[0].offsetTop
|
||||
var w = image[0].offsetWidth
|
||||
|
||||
var t = ribbon[0].offsetTop
|
||||
var h = ribbon[0].offsetHeight
|
||||
|
||||
// centering image...
|
||||
ribbon.css('transform', 'translateX(-'+ (l + w/2) +'px)')
|
||||
|
||||
// view angle and scale...
|
||||
ribbon_set.css('transform',
|
||||
'scale('+ scale +') '
|
||||
+'rotate('+ angle +'deg)')
|
||||
ribbon_mover.css('transform', 'translateY(-'+ (t + h/2) +'px)')
|
||||
|
||||
// centering ribbons...
|
||||
ribbon_locator.css('transform', 'translateY(-'+ (t + h/2) +'px)')
|
||||
})
|
||||
|
||||
|
||||
@ -279,7 +285,7 @@ $(function(){
|
||||
|
||||
<div class="viewer">
|
||||
<div class="ribbon-set">
|
||||
<div class="ribbon-mover">
|
||||
<div class="ribbon-locator">
|
||||
<div class="ribbon">
|
||||
<div class="image"></div>
|
||||
<div class="image"></div>
|
||||
|
||||
@ -547,8 +547,6 @@ module.ViewerActions = actions.Actions({
|
||||
this
|
||||
.centerImage(target)
|
||||
.centerRibbon(target)
|
||||
.ribbons
|
||||
.origin(target)
|
||||
}],
|
||||
|
||||
focusImage: [
|
||||
@ -769,8 +767,6 @@ module.ViewerActions = actions.Actions({
|
||||
// and rounding to nearest discrete number of images to fit on screen.
|
||||
zoomIn: ['Zoom/Zoom in',
|
||||
function(){
|
||||
this.ribbons.origin()
|
||||
|
||||
var d = (this.config['zoom-step'] || 1.2)
|
||||
|
||||
// limit scaling to screen dimensions...
|
||||
@ -784,8 +780,6 @@ module.ViewerActions = actions.Actions({
|
||||
}],
|
||||
zoomOut: ['Zoom/Zoom out',
|
||||
function(){
|
||||
this.ribbons.origin()
|
||||
|
||||
var max = this.config['max-screen-images']
|
||||
|
||||
if(max && max < (this.screenwidth * (this.config['zoom-step'] || 1.2))){
|
||||
|
||||
@ -493,146 +493,27 @@ var RibbonsPrototype = {
|
||||
//
|
||||
// Set scale...
|
||||
// .scale(<scale>)
|
||||
// .scale(<scale>, <image>|'current'|'closest')
|
||||
// .scale(<scale>, 'top'|'center'|'bottom'|<px>|%, 'left'|'center'|'right'|<px>|%)
|
||||
// -> <ribbons>
|
||||
//
|
||||
// NOTE: this will also set origin...
|
||||
//
|
||||
// XXX if chrome 38 renders images blurry uncomment the fix...
|
||||
scale: function(scale, t, l){
|
||||
scale: function(scale){
|
||||
// get...
|
||||
if(arguments.length == 0){
|
||||
return this.dom.getScale(this.getRibbonSet()) || 1
|
||||
}
|
||||
|
||||
// set...
|
||||
} else {
|
||||
var ribbon_set = this.getRibbonSet()
|
||||
|
||||
if(ribbon_set.length == 0){
|
||||
return this
|
||||
}
|
||||
|
||||
// default origin -- center...
|
||||
if(t == null && l == null){
|
||||
this.origin('center', 'center')
|
||||
|
||||
// an image...
|
||||
} else if(l == null){
|
||||
t = t == 'current' ? this.getImage()
|
||||
: t == 'closest' ? this.getImageByPosition()
|
||||
: t
|
||||
this.origin(t)
|
||||
|
||||
// explicit...
|
||||
} else {
|
||||
this.origin(t, l)
|
||||
}
|
||||
|
||||
// XXX experimental: not sure if this is the right place for this...
|
||||
// ...think this is a good place because its one spot
|
||||
// that gets used everywhere...
|
||||
// ...think this is a bad spot because we lose control ho many
|
||||
// images of what size get loaded, and wee need to minimize
|
||||
// loading...
|
||||
//this.updateImage('*', null, this.getVisibleImageSize('height', 1) * scale)
|
||||
|
||||
this.dom.setScale(ribbon_set, scale)
|
||||
|
||||
|
||||
/*
|
||||
ribbon_set
|
||||
.velocity('stop')
|
||||
// XXX get the time from config...
|
||||
.velocity({scale: scale}, 200)
|
||||
*/
|
||||
|
||||
/* XXX not sure if this is needed yet...
|
||||
// XXX fix a render bug in chrome 38...
|
||||
var v = this.viewer[0]
|
||||
if(v.style.transform == ''){
|
||||
v.style.transform = 'translateZ(0)'
|
||||
} else {
|
||||
v.style.transform = ''
|
||||
}
|
||||
*/
|
||||
var ribbon_set = this.getRibbonSet()
|
||||
|
||||
if(ribbon_set.length == 0){
|
||||
return this
|
||||
}
|
||||
},
|
||||
|
||||
// Origin...
|
||||
//
|
||||
// Get origin...
|
||||
// .origin()
|
||||
// -> <origin>
|
||||
//
|
||||
// Set origin to center of image:
|
||||
// .origin(image)
|
||||
// -> ribbons
|
||||
//
|
||||
// Set origin to screen coordinates:
|
||||
// .origin(x|%|'left'|'center'|'right', x|%|'top'|'center'|'bottom')
|
||||
// -> ribbons
|
||||
//
|
||||
// NOTE: this will also compensate for scaling.
|
||||
//
|
||||
// XXX DEBUG: remove point updating when not needed...
|
||||
origin: function(a, b){
|
||||
// get...
|
||||
if(arguments.length == 0){
|
||||
return this.dom.getOrigin(this.getRibbonSet())
|
||||
|
||||
// set...
|
||||
} else {
|
||||
var ribbon_set = this.getRibbonSet()
|
||||
this.dom.setScale(ribbon_set, scale)
|
||||
|
||||
if(ribbon_set.length == 0){
|
||||
return this
|
||||
}
|
||||
|
||||
var ro = ribbon_set.offset()
|
||||
var s = this.scale()
|
||||
|
||||
if(a != null && b != null){
|
||||
var vo = this.viewer.offset()
|
||||
|
||||
a = a == 'left' ? 0
|
||||
: a == 'right' ? this.viewer.width()
|
||||
: a == 'center' ? this.viewer.width()/2
|
||||
: /[0-9.]*%/.test(a) ? this.viewer.width()*(parseFloat(a)/100)
|
||||
: a
|
||||
|
||||
b = b == 'top' ? 0
|
||||
: b == 'bottom' ? this.viewer.height()
|
||||
: b == 'center' ? this.viewer.height()/2
|
||||
: /[0-9.]*%/.test(b) ? this.viewer.height()*(parseFloat(b)/100)
|
||||
: b
|
||||
|
||||
var l = (a - ro.left)/s + vo.left
|
||||
var t = (b - ro.top)/s + vo.top
|
||||
|
||||
// image...
|
||||
} else {
|
||||
var img = this.getImage(a)
|
||||
var io = img.offset()
|
||||
// XXX jQuery3: should we compensate for scale here???
|
||||
var w = img.width()
|
||||
var h = img.height()
|
||||
|
||||
var l = (io.left - ro.left)/s + w/2
|
||||
var t = (io.top - ro.top)/s + h/2
|
||||
}
|
||||
|
||||
this.dom.shiftOrigin(ribbon_set, l, t)
|
||||
|
||||
// XXX DEBUG: remove when done...
|
||||
if($('.point').length > 0){
|
||||
this.dom.setOffset($('.point'), l, t)
|
||||
}
|
||||
|
||||
return this
|
||||
}
|
||||
return this
|
||||
},
|
||||
|
||||
// Get visible image tile size...
|
||||
@ -868,10 +749,16 @@ var RibbonsPrototype = {
|
||||
if(ribbon_set.length == 0 && create){
|
||||
ribbon_set = $('<div/>')
|
||||
.addClass('ribbon-set')
|
||||
.append($('<div/>')
|
||||
.addClass('ribbon-locator'))
|
||||
.appendTo(this.viewer)
|
||||
}
|
||||
return ribbon_set
|
||||
},
|
||||
getRibbonLocator: function(create){
|
||||
return this.getRibbonSet(create)
|
||||
.find('.ribbon-locator')
|
||||
},
|
||||
|
||||
// Get image...
|
||||
//
|
||||
@ -1196,7 +1083,7 @@ var RibbonsPrototype = {
|
||||
var ribbon = this.getRibbon(target)
|
||||
var i = this.getRibbonOrder(ribbon)
|
||||
ribbon = ribbon.length == 0 ? this.createRibbon(target) : ribbon
|
||||
var ribbon_set = this.getRibbonSet(true)
|
||||
var ribbon_set = this.getRibbonLocator(true)
|
||||
|
||||
var ribbons = this.viewer.find(RIBBON)
|
||||
|
||||
@ -2299,83 +2186,46 @@ var RibbonsPrototype = {
|
||||
|
||||
// center a ribbon vertically...
|
||||
//
|
||||
// XXX offset and scale are not used...
|
||||
// XXX custom align point woud also be nice...
|
||||
// (top, bottom, center, %, px)
|
||||
// XXX need to account for margins...
|
||||
centerRibbon: function(target, offset, scale){
|
||||
target = this.getImage(target)
|
||||
scale = scale || this.scale()
|
||||
var ribbon_set = this.getRibbonSet()
|
||||
centerRibbon: function(target){
|
||||
var ribbon = this.getRibbon(target)
|
||||
var locator = this.getRibbonLocator()
|
||||
|
||||
if(ribbon_set.length == 0 || target.length == 0){
|
||||
if(locator.length == 0 || ribbon.length == 0){
|
||||
return this
|
||||
}
|
||||
|
||||
//this.origin(target)
|
||||
|
||||
var o = target.attr('orientation')
|
||||
o = o == null ? 0 : o
|
||||
var t = ribbon[0].offsetTop
|
||||
var h = ribbon[0].offsetHeight
|
||||
|
||||
var ro = ribbon_set.offset().top
|
||||
// NOTE: this appears to account for margins...
|
||||
var io = target.offset().top
|
||||
|
||||
// NOTE: we are not using .outerHeight(true) here as it returns
|
||||
// the visible size rather than the real size, so we'll
|
||||
// need to first divide by current scale and then multiply
|
||||
// by the given scale which will introduce errors...
|
||||
var s = getComputedStyle(target[0])
|
||||
var h = parseFloat(o == 0 || o == 180 ? s.height : s.width)
|
||||
|
||||
var t = (io - ro)/scale + h/2
|
||||
|
||||
var offset = this.dom.relativeOffset(this.viewer, ribbon_set, {
|
||||
top: t,
|
||||
left: 0,
|
||||
}).top
|
||||
|
||||
this.dom.setOffset(ribbon_set, 0, offset)
|
||||
//locator.css('transform', 'translateY(-'+ (t + h/2) +'px)')
|
||||
locator.transform({x: 0, y: -(t + h/2), z: 0})
|
||||
|
||||
return this
|
||||
},
|
||||
|
||||
// center an image horizontally...
|
||||
//
|
||||
// XXX offset is not used...
|
||||
// XXX custom align point would also be nice...
|
||||
// (top, bottom, center, %, px)
|
||||
// XXX need to account for margins...
|
||||
centerImage: function(target, mode, offset, scale){
|
||||
centerImage: function(target, mode){
|
||||
target = this.getImage(target)
|
||||
scale = scale || this.scale()
|
||||
var ribbon = this.getRibbon(target)
|
||||
|
||||
if(ribbon.length == 0){
|
||||
return this
|
||||
}
|
||||
|
||||
var o = target.attr('orientation')
|
||||
o = o == null ? 0 : o
|
||||
var l = target[0].offsetLeft
|
||||
var w = target[0].offsetWidth
|
||||
|
||||
var rl = ribbon.offset().left
|
||||
// NOTE: this appears to account for margins...
|
||||
var il = target.offset().left
|
||||
var image_offset = mode == 'before' ? 0
|
||||
: mode == 'after' ? w
|
||||
: w/2
|
||||
|
||||
var W = this.viewer.width() * scale
|
||||
|
||||
// NOTE: we are not using .outerWidth(true) here as it returns
|
||||
// the visible size rather than the real size, so we'll
|
||||
// need to first divide by current scale and then multiply
|
||||
// by the given scale which will introduce errors...
|
||||
var s = getComputedStyle(target[0])
|
||||
var w = parseFloat(o == 0 || o == 180 ? s.width : s.height) * scale
|
||||
|
||||
var image_offset = mode == 'before' ? w/2
|
||||
: mode == 'after' ? -w/2
|
||||
: 0
|
||||
|
||||
this.dom.setOffset(ribbon, ((rl + ((W-w)/2 + image_offset) - il) / scale))
|
||||
//ribbon.css('transform', 'translateX(-'+ (l + image_offset) +'px)')
|
||||
ribbon.transform({x: -(l + image_offset), y: 0, z: 0})
|
||||
|
||||
return this
|
||||
},
|
||||
@ -2384,7 +2234,7 @@ var RibbonsPrototype = {
|
||||
//
|
||||
// If n is given this will fit n images (default: 1)
|
||||
//
|
||||
// NOTE: this will never scale the view in a wat that an image
|
||||
// NOTE: this will never scale the view in a way that an image
|
||||
// overflows either in height nor width.
|
||||
//
|
||||
// XXX might be useful to set origin before scaling...
|
||||
@ -2442,6 +2292,7 @@ var RibbonsPrototype = {
|
||||
},
|
||||
|
||||
|
||||
// XXX
|
||||
setEmptyMsg: function(msg, help){
|
||||
this.getRibbonSet()
|
||||
.attr({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user