Skip to content
This repository has been archived by the owner on Nov 12, 2019. It is now read-only.

Commit

Permalink
Merge pull request #74 from yjlintw/bug-fix
Browse files Browse the repository at this point in the history
Bug fix
  • Loading branch information
yjlintw authored Apr 27, 2017
2 parents 6f65314 + a0da521 commit 317a931
Show file tree
Hide file tree
Showing 11 changed files with 389 additions and 4 deletions.
25 changes: 25 additions & 0 deletions assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,20 @@ h1, h2 {
box-shadow: 0px;
border: 0px; }

#search-filters {
margin-top: 1em; }
#search-filters .tag {
-webkit-user-select: none;
margin: 0 0.2em;
background-color: #313743;
color: #526c77;
cursor: pointer; }
#search-filters .tag:hover {
background-color: #425c77; }
#search-filters .tag.active {
background-color: #857af8;
color: #fff; }

#search-results {
max-width: 960px; }
@media only screen and (min-width: 769px) {
Expand Down Expand Up @@ -567,8 +581,19 @@ h1, h2 {
margin-left: 250px;
min-height: calc(100vh - 25px); } }
#read-view #read-area .comic-page-container {
position: relative;
-webkit-user-select: none;
margin-bottom: 1em; }
#read-view #read-area .comic-page-container img {
height: calc(100vh - 25px);
display: block;
margin: 0 auto; }
#read-view #read-area .comic-page-container .zoom-btn {
opacity: 0.1;
font-size: 1.5em;
position: absolute;
padding: 0.5em 0.8em 0.4em;
background-color: rgba(0, 0, 0, 0.8); }
#read-view #read-area .comic-page-container .zoom-btn:hover {
opacity: 1;
transition: opacity 0.2s ease-out; }
235 changes: 235 additions & 0 deletions assets/js/jquery.zoom.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,235 @@
/*!
Zoom 1.7.20
license: MIT
http://www.jacklmoore.com/zoom
*/
(function ($) {
var defaults = {
url: false,
callback: false,
target: false,
duration: 120,
on: 'mouseover', // other options: grab, click, toggle
touch: true, // enables a touch fallback
onZoomIn: false,
onZoomOut: false,
magnify: 1
};

// Core Zoom Logic, independent of event listeners.
$.zoom = function(target, source, img, magnify) {
var targetHeight,
targetWidth,
sourceHeight,
sourceWidth,
xRatio,
yRatio,
offset,
$target = $(target),
position = $target.css('position'),
$source = $(source);

// The parent element needs positioning so that the zoomed element can be correctly positioned within.
target.style.position = /(absolute|fixed)/.test(position) ? position : 'relative';
target.style.overflow = 'hidden';
img.style.width = img.style.height = '';

$(img)
.addClass('zoomImg')
.css({
position: 'absolute',
top: 0,
left: 0,
opacity: 0,
width: img.width * magnify,
height: img.height * magnify,
border: 'none',
maxWidth: 'none',
maxHeight: 'none'
})
.appendTo(target);

return {
init: function() {
targetWidth = $target.outerWidth();
targetHeight = $target.outerHeight();

if (source === target) {
sourceWidth = targetWidth;
sourceHeight = targetHeight;
} else {
sourceWidth = $source.outerWidth();
sourceHeight = $source.outerHeight();
}

xRatio = (img.width - targetWidth) / sourceWidth;
yRatio = (img.height - targetHeight) / sourceHeight;

offset = $source.offset();
},
move: function (e) {
var left = (e.pageX - offset.left),
top = (e.pageY - offset.top);

top = Math.max(Math.min(top, sourceHeight), 0);
left = Math.max(Math.min(left, sourceWidth), 0);

img.style.left = (left * -xRatio) + 'px';
img.style.top = (top * -yRatio) + 'px';
}
};
};

$.fn.zoom = function (options) {
return this.each(function () {
var
settings = $.extend({}, defaults, options || {}),
//target will display the zoomed image
target = settings.target && $(settings.target)[0] || this,
//source will provide zoom location info (thumbnail)
source = this,
$source = $(source),
img = document.createElement('img'),
$img = $(img),
mousemove = 'mousemove.zoom',
clicked = false,
touched = false;

// If a url wasn't specified, look for an image element.
if (!settings.url) {
var srcElement = source.querySelector('img');
if (srcElement) {
settings.url = srcElement.getAttribute('data-src') || srcElement.currentSrc || srcElement.src;
}
if (!settings.url) {
return;
}
}

$source.one('zoom.destroy', function(position, overflow){
$source.off(".zoom");
target.style.position = position;
target.style.overflow = overflow;
img.onload = null;
$img.remove();
}.bind(this, target.style.position, target.style.overflow));

img.onload = function () {
var zoom = $.zoom(target, source, img, settings.magnify);

function start(e) {
zoom.init();
zoom.move(e);

// Skip the fade-in for IE8 and lower since it chokes on fading-in
// and changing position based on mousemovement at the same time.
$img.stop()
.fadeTo($.support.opacity ? settings.duration : 0, 1, $.isFunction(settings.onZoomIn) ? settings.onZoomIn.call(img) : false);
}

function stop() {
$img.stop()
.fadeTo(settings.duration, 0, $.isFunction(settings.onZoomOut) ? settings.onZoomOut.call(img) : false);
}

// Mouse events
if (settings.on === 'grab') {
$source
.on('mousedown.zoom',
function (e) {
if (e.which === 1) {
$(document).one('mouseup.zoom',
function () {
stop();

$(document).off(mousemove, zoom.move);
}
);

start(e);

$(document).on(mousemove, zoom.move);

e.preventDefault();
}
}
);
} else if (settings.on === 'click') {
$source.on('click.zoom',
function (e) {
if (clicked) {
// bubble the event up to the document to trigger the unbind.
return;
} else {
clicked = true;
start(e);
$(document).on(mousemove, zoom.move);
$(document).one('click.zoom',
function () {
stop();
clicked = false;
$(document).off(mousemove, zoom.move);
}
);
return false;
}
}
);
} else if (settings.on === 'toggle') {
$source.on('click.zoom',
function (e) {
if (clicked) {
stop();
} else {
start(e);
}
clicked = !clicked;
}
);
} else if (settings.on === 'mouseover') {
zoom.init(); // Preemptively call init because IE7 will fire the mousemove handler before the hover handler.

$source
.on('mouseenter.zoom', start)
.on('mouseleave.zoom', stop)
.on(mousemove, zoom.move);
}

// Touch fallback
if (settings.touch) {
$source
.on('touchstart.zoom', function (e) {
e.preventDefault();
if (touched) {
touched = false;
stop();
} else {
touched = true;
start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
}
})
.on('touchmove.zoom', function (e) {
e.preventDefault();
zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
})
.on('touchend.zoom', function (e) {
e.preventDefault();
if (touched) {
touched = false;
stop();
}
});
}

if ($.isFunction(settings.callback)) {
settings.callback.call(img);
}
};

img.setAttribute('role', 'presentation');
img.src = settings.url;
});
};

$.fn.zoom.defaults = defaults;
}(window.jQuery));
35 changes: 35 additions & 0 deletions assets/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,24 @@ h1, h2 {
}
}

#search-filters {
margin-top: 1em;
.tag {
-webkit-user-select: none;
margin: 0 0.2em;
background-color: #313743;
color: #526c77;
cursor: pointer;
&:hover {
background-color: #425c77;
}
&.active {
background-color: #857af8;
color: #fff;
}
}
}

#search-results{
// background-color: #eee;
max-width: $container-max-width;
Expand Down Expand Up @@ -717,12 +735,29 @@ h1, h2 {
.comic-page-container {
// height: 100vh;
// background-color: #aaa;
position: relative;
-webkit-user-select: none;
margin-bottom: 1em;
img {
height: calc(100vh - #{$titlebar-height});
display: block;
margin: 0 auto;
}
.zoom-btn {
// z-index: 10000;
// visibility: hidden;
opacity: 0.1;
font-size: 1.5em;
position: absolute;
padding: 0.5em 0.8em 0.4em;
background-color: rgba(0,0,0,0.8);
&:hover {
// visibility: visible;
opacity: 1;
transition: opacity 0.2s ease-out;
}

}
}
}
}
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
</div>
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="./assets/js/jquery-3.2.1.min.js"></script>
<script src="./assets/js/jquery.zoom.js"></script>

<script>
require("./renderer-process/viewcontrollers/titlebar-viewcontroller")
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "comic-reader",
"productName:": "Comic Reader",
"author": "Team Comic Reader",
"version": "0.1.12",
"version": "0.1.13",
"description": "A simple comic reader app",
"main": "main.js",
"devDependencies": {
Expand Down
38 changes: 37 additions & 1 deletion renderer-process/viewcontrollers/read-viewcontroller.js
Original file line number Diff line number Diff line change
Expand Up @@ -379,10 +379,46 @@ function createComicPage(imguri, id, idx) {
view.attr("id", id);
view.attr("idx", idx);
view.find("img").attr("src", imguri);
view.click(function() {
// var is_dragging = false;
// var is_zoom = false;
// view.find("img").mousedown(function() {
// is_dragging = false;
// })
// .mousemove(function() {
// is_dragging = true;
// })
// .mouseup(function() {
// var was_dragging = is_dragging;
// is_dragging = false;
// if (!was_dragging) {
// console.log('drag:' + was_dragging);
// current_page_idx = idx;
// nextPic();
// }
// });

view.find('.zoom-btn').click(function() {
view.zoom({
on:'click',
magnify: '1.5',
callback: function() {
view.trigger('click');
},
onZoomOut: function() {
view.trigger('zoom.destroy');
}
})

});
view.find("img").click(function() {
current_page_idx = idx;
nextPic();
});

// view.zoom({
// on:'grab',
// magnify: '2'
// })
return view;
}

Expand Down
Loading

0 comments on commit 317a931

Please sign in to comment.