mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 19:30:07 +00:00
different marks architecture, a bit more complext to play with but allot more flexible (bugs expected)...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
312e0c700d
commit
088d4201d4
12
ui/data.js
12
ui/data.js
@ -1101,6 +1101,7 @@ function convertDataGen1(data, cmp){
|
||||
* Loaders
|
||||
*/
|
||||
|
||||
|
||||
function updateImageIndicators(gid, image){
|
||||
gid = gid == null ? getImageGID() : gid
|
||||
image = image == null ? getImage() : $(image)
|
||||
@ -1108,8 +1109,12 @@ function updateImageIndicators(gid, image){
|
||||
// marks...
|
||||
if(MARKED.indexOf(gid) != -1){
|
||||
image.addClass('marked')
|
||||
// XXX
|
||||
_addMark('selected', gid, image)
|
||||
} else {
|
||||
image.removeClass('marked')
|
||||
// XXX
|
||||
_removeMark('selected', gid, image)
|
||||
}
|
||||
|
||||
return image
|
||||
@ -1138,14 +1143,19 @@ function _loadImagePreviewURL(image, url){
|
||||
// may leak to newly loaded images...
|
||||
// XXX do a pre-caching framework...
|
||||
function updateImage(image, gid, size, sync){
|
||||
image = image == null ? getImage() : $(image)
|
||||
sync = sync == null ? SYNC_IMG_LOADER : sync
|
||||
image = $(image)
|
||||
var oldgid = getImageGID(image)
|
||||
|
||||
if(oldgid == gid || gid == null){
|
||||
gid = oldgid
|
||||
|
||||
} else {
|
||||
// remove old marks...
|
||||
if(typeof(oldgid) == typeof('str')){
|
||||
getImageMarks(oldgid).remove()
|
||||
}
|
||||
// reset gid...
|
||||
image
|
||||
.attr('gid', JSON.stringify(gid))
|
||||
.css({
|
||||
|
||||
@ -161,6 +161,7 @@
|
||||
border: dotted blue 5px;
|
||||
}
|
||||
|
||||
.mark.tagged,
|
||||
.mark.blue,
|
||||
.mark.red,
|
||||
.mark.yellow {
|
||||
@ -168,8 +169,8 @@
|
||||
margin-left: 0px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
.mark.tagged:after,
|
||||
.mark.blue:after,
|
||||
.mark.red:after,
|
||||
.mark.yellow:after {
|
||||
@ -194,6 +195,16 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.mark.tagged:after {
|
||||
box-shadow: none;
|
||||
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
|
||||
font-size: 10pt;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
content: "T";
|
||||
color: white;
|
||||
background: none;
|
||||
}
|
||||
.mark.blue:after {
|
||||
left: -25px;
|
||||
border: solid 3px blue;
|
||||
@ -208,6 +219,23 @@
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.ccw270,
|
||||
.cw90 {
|
||||
-webkit-transform: rotate(90deg);
|
||||
}
|
||||
.ccw180,
|
||||
.cw180 {
|
||||
-webkit-transform: rotate(180deg);
|
||||
}
|
||||
.ccw90,
|
||||
.cw270 {
|
||||
-webkit-transform: rotate(270deg);
|
||||
}
|
||||
.ccw0,
|
||||
.cw0 {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="jquery.js"></script>
|
||||
|
||||
@ -264,7 +292,7 @@
|
||||
<div id="0" class="image2" style="background-image: url(image.jpg)"></div>
|
||||
<div class="mark red"></div>
|
||||
|
||||
<div id="1" class="current image2" style="background-image: url(image.jpg)"></div>
|
||||
<div id="1" class="current image2 cw180" style="background-image: url(image.jpg)"></div>
|
||||
<div class="mark"></div>
|
||||
<div class="mark blue" title="blue"></div>
|
||||
<div class="mark red" title="red"></div>
|
||||
@ -272,6 +300,7 @@
|
||||
|
||||
<div id="2" class="image2" style="background-image: url(image.jpg)"></div>
|
||||
<div class="mark select"></div>
|
||||
<div class="mark tagged" title="tagged"></div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
122
ui/layout.css
122
ui/layout.css
@ -224,7 +224,7 @@ button:hover {
|
||||
height: 20px;
|
||||
margin-top: -20px;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: silver;
|
||||
@ -270,6 +270,7 @@ button:hover {
|
||||
/*********************************************************** Image ***/
|
||||
.marker,
|
||||
.current-marker,
|
||||
.mark,
|
||||
.image {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -495,63 +496,64 @@ button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
*/
|
||||
/*
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
font-size: 0pt;
|
||||
border: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: auto;
|
||||
bottom: 5px;
|
||||
left: auto;
|
||||
right: 5px;
|
||||
border-radius: 50%;
|
||||
background: blue;
|
||||
/* make the mark stand out if it is over an image with similar
|
||||
color/density */
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
font-size: 0pt;
|
||||
border: none;
|
||||
|
||||
box-shadow: 0px 0px 7px 0px black;
|
||||
/*border: solid 1px white;*/
|
||||
width: @ribbon-mark-size;
|
||||
height: @ribbon-mark-size;
|
||||
|
||||
/*border: solid 1px black;*/
|
||||
top: auto;
|
||||
bottom: @ribbon-mark-offset;
|
||||
left: auto;
|
||||
right: @ribbon-mark-offset;
|
||||
|
||||
border-radius: 50%;
|
||||
background: blue;
|
||||
|
||||
box-shadow: 0px 0px 7px 0px black;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after,
|
||||
.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after {
|
||||
top: 5px;
|
||||
bottom: auto:
|
||||
top: @ribbon-mark-offset;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 5px;
|
||||
right: @ribbon-mark-offset;
|
||||
}
|
||||
.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"][flipped*="horizontal"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"][flipped*="horizontal"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="270"][flipped="vertical"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="90"][flipped="horizontal"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="180"]:not([flipped]):after {
|
||||
top: 5px;
|
||||
bottom: auto;
|
||||
left: 5px;
|
||||
right: auto;
|
||||
top: @ribbon-mark-offset;
|
||||
bottom: auto;
|
||||
left: @ribbon-mark-offset;
|
||||
right: auto;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="180"][flipped="vertical"]:after,
|
||||
.marks-visible.viewer .marked.image:not([orientation])[flipped*="horizontal"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="0"][flipped*="horizontal"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="270"]:not([flipped]):after {
|
||||
top: auto;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
right: auto;
|
||||
top: auto;
|
||||
bottom: @ribbon-mark-offset;
|
||||
left: @ribbon-mark-offset;
|
||||
right: auto;
|
||||
}
|
||||
*/
|
||||
/* NOTE: we use a different mark representation for single image mode... */
|
||||
/*
|
||||
.marks-visible.single-image-mode.viewer .marked.image:after {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
/* corner mark... (a-la bookmarks in PortableMag)
|
||||
* XXX account for flipping... */
|
||||
/*
|
||||
@ -586,12 +588,48 @@ button:hover {
|
||||
bottom: @ribbon-mark-offset;
|
||||
right: @ribbon-mark-offset;
|
||||
}
|
||||
/
|
||||
|
||||
|
||||
/* XXX should we use opacity??? */
|
||||
.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
|
||||
opacity: 0.3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
*/
|
||||
/* new gen marks... */
|
||||
.mark {
|
||||
/* this fully covers the image to simplify positioning of actual marks */
|
||||
|
||||
margin-left: -300px;
|
||||
border: none;
|
||||
}
|
||||
.viewer:not(.marks-visible) .mark {
|
||||
display: none;
|
||||
}
|
||||
.mark.selected {
|
||||
width: 0px;
|
||||
margin-left: 0px;
|
||||
border: none;
|
||||
overflow: visible;
|
||||
}
|
||||
.mark.selected:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
font-size: 0pt;
|
||||
border: none;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
left: auto;
|
||||
right: 10px;
|
||||
box-shadow: 2px 2px 20px -2px rgba(0, 0, 0, 0.7);
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: blue;
|
||||
left: -15;
|
||||
}
|
||||
.marks-visible.single-image-mode.viewer .mark:after {
|
||||
display: none;
|
||||
}
|
||||
/****************************************************** Image info ***/
|
||||
.inline-image-info {
|
||||
@ -959,7 +997,7 @@ button:hover {
|
||||
.global-mode-indicators > *,
|
||||
.context-mode-indicators > * {
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.global-mode-indicators .circle,
|
||||
@ -986,7 +1024,7 @@ button:hover {
|
||||
.context-mode-indicators .indicator {
|
||||
display: none;
|
||||
height: 20px;
|
||||
vertical-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* actual indicators */
|
||||
/* marks... */
|
||||
@ -1143,9 +1181,10 @@ button:hover {
|
||||
.dark.viewer .ribbon-indicator:hover:after {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.large.viewer:not(.single-image-mode) .current.image {
|
||||
border-width: 3px;
|
||||
.large.viewer:not(.single-image-mode) .current-marker {
|
||||
border-width: 2px;
|
||||
}
|
||||
.large.viewer:not(.single-image-mode) .mark:after,
|
||||
.large.viewer:not(.single-image-mode) .marked.image:after {
|
||||
-webkit-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
|
||||
-moz-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
|
||||
@ -1153,6 +1192,7 @@ button:hover {
|
||||
-ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
|
||||
transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
|
||||
}
|
||||
.small.viewer:not(.single-image-mode) .mark:after,
|
||||
.small.viewer:not(.single-image-mode) .marked.image:after {
|
||||
-webkit-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
|
||||
-moz-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
|
||||
@ -1163,8 +1203,8 @@ button:hover {
|
||||
/********************************************************* Overlay ***/
|
||||
.overlay-block {
|
||||
display: none;
|
||||
position: absolute:
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -1237,7 +1277,7 @@ button:hover {
|
||||
border-radius: 3px;
|
||||
background: gray;
|
||||
padding: 20px;
|
||||
vertical-align: center;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0px 5px 50px 0px black;
|
||||
}
|
||||
/* tables in dialogs... */
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
|
||||
/******************************************************** Settings ***/
|
||||
|
||||
@image-tile-size: 300px;
|
||||
|
||||
@ribbon-mark-offset: 5px;
|
||||
|
||||
@ribbon-mark-size: 10px;
|
||||
@ -318,7 +320,7 @@ button:hover {
|
||||
margin-top: -20px;
|
||||
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
@ -375,13 +377,14 @@ button:hover {
|
||||
/*********************************************************** Image ***/
|
||||
.marker,
|
||||
.current-marker,
|
||||
.mark,
|
||||
.image {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align:left;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
width: @image-tile-size;
|
||||
height: @image-tile-size;
|
||||
font-size: 12pt;
|
||||
overflow: hidden;
|
||||
|
||||
@ -560,6 +563,7 @@ button:hover {
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -578,11 +582,7 @@ button:hover {
|
||||
border-radius: 50%;
|
||||
background: blue;
|
||||
|
||||
/* make the mark stand out if it is over an image with similar
|
||||
color/density */
|
||||
box-shadow: 0px 0px 7px 0px black;
|
||||
/*border: solid 1px white;*/
|
||||
/*border: solid 1px black;*/
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after,
|
||||
.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after,
|
||||
@ -590,7 +590,7 @@ button:hover {
|
||||
.marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after,
|
||||
.marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after {
|
||||
top: @ribbon-mark-offset;
|
||||
bottom: auto:
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: @ribbon-mark-offset;
|
||||
}
|
||||
@ -614,11 +614,14 @@ button:hover {
|
||||
left: @ribbon-mark-offset;
|
||||
right: auto;
|
||||
}
|
||||
*/
|
||||
|
||||
/* NOTE: we use a different mark representation for single image mode... */
|
||||
/*
|
||||
.marks-visible.single-image-mode.viewer .marked.image:after {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/* corner mark... (a-la bookmarks in PortableMag)
|
||||
@ -655,13 +658,59 @@ button:hover {
|
||||
bottom: @ribbon-mark-offset;
|
||||
right: @ribbon-mark-offset;
|
||||
}
|
||||
/
|
||||
|
||||
|
||||
/* XXX should we use opacity??? */
|
||||
.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
|
||||
opacity: 0.3;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* new gen marks... */
|
||||
|
||||
.mark {
|
||||
/* this fully covers the image to simplify positioning of actual marks */
|
||||
margin-left: -@image-tile-size;
|
||||
border: none;
|
||||
}
|
||||
.viewer:not(.marks-visible) .mark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mark.selected {
|
||||
width: 0px;
|
||||
margin-left: 0px;
|
||||
border: none;
|
||||
overflow: visible;
|
||||
}
|
||||
.mark.selected:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
font-size: 0pt;
|
||||
border: none;
|
||||
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
left: auto;
|
||||
right: 10px;
|
||||
|
||||
box-shadow: 2px 2px 20px -2px rgba(0,0,0,0.7);
|
||||
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
|
||||
|
||||
background: blue;
|
||||
left: -15;
|
||||
}
|
||||
.marks-visible.single-image-mode.viewer .mark:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -941,7 +990,7 @@ button:hover {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: auto;
|
||||
min-width: 300px;
|
||||
min-width: @image-tile-size;
|
||||
text-align: right;
|
||||
|
||||
color: transparent;
|
||||
@ -971,7 +1020,7 @@ button:hover {
|
||||
.global-mode-indicators > *,
|
||||
.context-mode-indicators > * {
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@ -1001,7 +1050,7 @@ button:hover {
|
||||
.context-mode-indicators .indicator {
|
||||
display: none;
|
||||
height: 20px;
|
||||
vertical-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
@ -1182,13 +1231,15 @@ button:hover {
|
||||
|
||||
|
||||
|
||||
.large.viewer:not(.single-image-mode) .current.image {
|
||||
border-width: 3px;
|
||||
.large.viewer:not(.single-image-mode) .current-marker {
|
||||
border-width: 2px;
|
||||
}
|
||||
.large.viewer:not(.single-image-mode) .mark:after,
|
||||
.large.viewer:not(.single-image-mode) .marked.image:after {
|
||||
.scale(0.7);
|
||||
}
|
||||
|
||||
.small.viewer:not(.single-image-mode) .mark:after,
|
||||
.small.viewer:not(.single-image-mode) .marked.image:after {
|
||||
.scale(1.8);
|
||||
}
|
||||
@ -1199,7 +1250,7 @@ button:hover {
|
||||
|
||||
.overlay-block {
|
||||
display: none;
|
||||
position: absolute:
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
@ -1280,7 +1331,7 @@ button:hover {
|
||||
|
||||
padding: 20px;
|
||||
|
||||
vertical-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
box-shadow: 0px 5px 50px 0px black;
|
||||
}
|
||||
|
||||
32
ui/marks.js
32
ui/marks.js
@ -12,6 +12,32 @@
|
||||
* helpers...
|
||||
*/
|
||||
|
||||
function _addMark(cls, gid, image){
|
||||
gid = gid == null ? getImageGID() : gid
|
||||
image = image == null ? getImage() : $(image)
|
||||
|
||||
var mark = $('.mark.'+cls+'.'+gid)
|
||||
|
||||
if(mark.length == 0){
|
||||
mark = $('<div class="mark selected"/>')
|
||||
.addClass(gid)
|
||||
.insertAfter(image)
|
||||
}
|
||||
return mark
|
||||
}
|
||||
function _removeMark(cls, gid, image){
|
||||
gid = gid == null ? getImageGID() : gid
|
||||
image = image == null ? getImage() : $(image)
|
||||
|
||||
var mark = $('.mark.'+cls+'.'+gid)
|
||||
|
||||
if(mark.length != 0){
|
||||
mark.detach()
|
||||
}
|
||||
return mark
|
||||
}
|
||||
|
||||
|
||||
// NOTE: to disable MARKED cleanout set no_cleanout_marks to true.
|
||||
// NOTE: MARKED may contain both gids that are not loaded and that do
|
||||
// not exist, as there is no way to distinguish between the two
|
||||
@ -81,6 +107,12 @@ var toggleImageMark = createCSSClassToggler(
|
||||
'marked',
|
||||
function(action){
|
||||
toggleMarkesView('on')
|
||||
// XXX
|
||||
if(action == 'on'){
|
||||
_addMark('selected')
|
||||
} else {
|
||||
_removeMark('selected')
|
||||
}
|
||||
$('.viewer').trigger('togglingMark', [getImage(), action])
|
||||
})
|
||||
|
||||
|
||||
@ -126,6 +126,22 @@ function getImageGID(image){
|
||||
}
|
||||
|
||||
|
||||
// Get marks associated with image...
|
||||
//
|
||||
// img can be:
|
||||
// - literal gid
|
||||
// - image
|
||||
// - null -- assume current image
|
||||
//
|
||||
// NOTE: this does not understand selectors as arguments...
|
||||
function getImageMarks(img){
|
||||
gid = typeof(img) == typeof('str') ? img : null
|
||||
gid = gid == null ? getImageGID(img) : gid
|
||||
|
||||
return $('.mark.'+gid)
|
||||
}
|
||||
|
||||
|
||||
function getRibbon(a){
|
||||
a = a == null ? getImage() : a
|
||||
|
||||
@ -241,15 +257,24 @@ function getImageBefore(image, ribbon){
|
||||
function shiftTo(image, ribbon){
|
||||
var target = getImageBefore(image, ribbon)
|
||||
var cur_ribbon = getRibbon(image)
|
||||
var marks = getImageMarks(image)
|
||||
|
||||
// insert before the first image if nothing is before the target...
|
||||
if(target.length == 0){
|
||||
image.prependTo($(ribbon))
|
||||
|
||||
} else {
|
||||
image.insertAfter(target)
|
||||
var target_marks = getImageMarks(target).last()
|
||||
image.insertAfter(
|
||||
// if target has marks, insert after them...
|
||||
target_marks.length > 0
|
||||
? target_marks
|
||||
: target)
|
||||
}
|
||||
|
||||
// move the marks...
|
||||
image.after(marks)
|
||||
|
||||
$('.viewer').trigger('shiftedImage', [image, cur_ribbon, ribbon])
|
||||
|
||||
// if removing last image out of a ribbon, remove the ribbon....
|
||||
@ -312,7 +337,13 @@ function createImage(n, force_create_new){
|
||||
'class': 'image'
|
||||
})
|
||||
} else {
|
||||
return $('<div order="'+n+'" gid="'+n+'" class="image"/>')
|
||||
return $('<div/>')
|
||||
.attr({
|
||||
order: n,
|
||||
gid: JSON.stringify(n),
|
||||
// need to strip extra classes...
|
||||
'class': 'image',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -398,9 +429,7 @@ function removeRibbon(ribbon){
|
||||
// NOTE: this will remove everything out of a ribbon if left/right are
|
||||
// more than the length of the ribbon...
|
||||
function extendRibbon(left, right, ribbon, no_compensate_shift){
|
||||
ribbon = ribbon == null ?
|
||||
getRibbon()
|
||||
: $(ribbon)
|
||||
ribbon = ribbon == null ? getRibbon() : $(ribbon)
|
||||
left = left == null ? 0 : left
|
||||
right = right == null ? 0 : right
|
||||
var images = ribbon.children('.image')
|
||||
@ -420,12 +449,10 @@ function extendRibbon(left, right, ribbon, no_compensate_shift){
|
||||
// NOTE: we save the detached elements to reuse them on extending,
|
||||
// if needed...
|
||||
if(left < 0){
|
||||
//removed = $(images.splice(0, -left)).detach()
|
||||
removed = removed.concat($(images.splice(0, -left)).detach().toArray())
|
||||
}
|
||||
if(right < 0){
|
||||
var l = images.length
|
||||
//removed = $(images.splice(l+right, l)).detach()
|
||||
removed = removed.concat($(images.splice(l+right, l)).detach().toArray())
|
||||
}
|
||||
// calculate the maximum number of new elements left to create...
|
||||
@ -444,6 +471,11 @@ function extendRibbon(left, right, ribbon, no_compensate_shift){
|
||||
res.right = createImages(right, removed).appendTo(ribbon)
|
||||
}
|
||||
|
||||
// cleanup...
|
||||
$(removed).each(function(){
|
||||
getImageMarks($(this)).remove()
|
||||
})
|
||||
|
||||
// compensate the position...
|
||||
// NOTE: this is fool-proof as it's based on relative visual
|
||||
// position...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user