flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-11-03 21:00:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

started experimenting with image structure -- want filters to affect only the image (not the bg and all that's inside) and at the same time keep it at 1 tag...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-12-02 06:23:19 +04:00
parent a719079472
commit 450631f1a9
4 changed files with 99 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/data.js
View File

@ -1186,6 +1186,9 @@ function updateImage(image, gid, size, sync){
// flip... // flip...
setImageFlipState(image, img_data.flipped == null ? [] : img_data.flipped) setImageFlipState(image, img_data.flipped == null ? [] : img_data.flipped)
// XXX filter settings...
// XXX
// NOTE: this only has effect on non-square image blocks... // NOTE: this only has effect on non-square image blocks...
correctImageProportionsForRotation(image) correctImageProportionsForRotation(image)
@ -1196,9 +1199,6 @@ function updateImage(image, gid, size, sync){
image.removeClass('marked') image.removeClass('marked')
} }
// XXX load filter settings...
// XXX
return image return image
} }

4
ui/editor.js
View File

@ -30,6 +30,8 @@ var toggleEditor = createCSSClassToggler(
top: '50px', top: '50px',
left: '5px', left: '5px',
}) })
// XXX add handlers for saving data to images...
// XXX
// make clicks on unfocusable elements remove focus... // make clicks on unfocusable elements remove focus...
.click(function(){ .click(function(){
if(event.target != $('.panel :focus')[0]){ if(event.target != $('.panel :focus')[0]){
@ -39,6 +41,8 @@ var toggleEditor = createCSSClassToggler(
// setup the event to update the editor... // setup the event to update the editor...
.on('focusingImage', function(){ .on('focusingImage', function(){
if(toggleEditor('?') == 'on'){ if(toggleEditor('?') == 'on'){
// XXX save previous settings if changes...
// XXX
reloadControls('.current.image') reloadControls('.current.image')
} }
}) })

91
ui/experiments/seporate-image-and-background.html Executable file
View File

@ -0,0 +1,91 @@
<html>
<style>
.image {
position: relative;
display: inline-block;
vertical-align: middle;
text-align:left;
width: 300px;
height: 300px;
font-size: 12pt;
overflow: hidden;
box-sizing: border-box;
color: white;
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
background: no-repeat 50% black;
background-size: contain;
/* XXX do we need this? */
border: solid black 5px;
/*-webkit-filter: invert(1);*/
}
.current.image {
background: no-repeat 50% black;
background-size: contain;
/* XXX remove this... */
border: solid red 5px;
}
/*********************************************************************/
.image2:before,
.image2 {
position: relative;
display: inline-block;
vertical-align: middle;
text-align:left;
font-size: 12pt;
overflow: visible;
color: white;
}
.image2 {
width: 290px;
height: 290px;
background: no-repeat 50% transparent;
background-size: contain;
margin: 5px;
-webkit-filter: invert(1);
}
.ribbon {
display: inline-block;
background: black;
}
.current.image2:before {
position: relative;
content: "";
top: -5px;
left: -5px;
width: 100%;
height: 100%;
/* XXX this is affected by the filter... */
border: solid 5px red;
}
/*********************************************************************/
</style>
<body>
<div class="image" style="background-image: url(image.jpg)"></div>
<div class="current image" style="background-image: url(image.jpg)"></div>
<hr>
<div class="ribbon">
<div class="image2" style="background-image: url(image.jpg)"></div>
<div class="current image2" style="background-image: url(image.jpg)"></div>
</div>
</body>
</html>

1
ui/lib/editor.js
View File

@ -236,6 +236,7 @@ function makeLogRange(text, filter, target){
} }
// XXX add panel update events to help save settings...
function makeEditorControls(target){ function makeEditorControls(target){
// tool panel... // tool panel...
var panel = $('<details open/>') var panel = $('<details open/>')