Bienvenue, Invité
Nom d'utilisateur : Mot de passe :
Please do NOT post requests for help here. Use the Help forum for that.
  • Page :
  • 1

SUJET :

Colorbox, Wheelzoom and ... pinch-zoom il y a 2 semaines 6 jours #1

I've noticed that webtrees version 2 has re-introduced a problem with Colorbox and Wheelzoom that I was involved in solving five and a half years ago - see: www.webtrees.net/index.php/en/forum/2-op...zoom-problems-solved . If you click on a media thumbnail image on a version 2 site, it opens in a Colorbox frame, and then the re-introduced problem is that, if you zoom in using your mouse's scroll wheel, only the area occupied by the original, un-zoomed image is used, instead of the entire ColorBox frame.

I can't see how to solve that problem in webtrees v2, as the colorbox and wheelzoom javascript files that are in assets\js-1.7.9 in webtrees v1 are no longer there in v2. I can see in resources\js\vendor.js lines 138 and 140 to import "jquery-colorbox" and "wheelzoom", but I can't work out where they're imported from, so can't progress to re-solving this problem in webtrees v2.

The way webtrees handles media images is important to me. I want family members to be able to clearly see the documents that provide the evidence for our history. I was hoping that webtrees v2 would have moved on in the way it handles media images by allowing users on tablets or phones to use two finger gestures to zoom and scroll images.

With that in mind I did a bit of searching and came across pinch-zoom: github.com/GoogleChromeLabs/pinch-zoom which seems to be a simple way of implementing finger gestures whilst also including the scroll-wheel functionality of Wheelzoom. I believe I've succeeded in incorporating pinch-zoom into webtrees 1.7.17, replacing Wheelzoom. Here are the steps I took:

Add file github.com/GoogleChromeLabs/pinch-zoom/b...r/dist/pinch-zoom.js to assets\js-1.7.9\
Remove file assets\js-1.7.9\jquery.wheelzoom-2.0.0.js
Remove file assets\js-1.7.9\jquery.wheelzoom.patch

In file assets\js-1.7.9\webtrees.js (line numbers and text refer to the non-minified version):
Replace lines 1076 to 1079 inclusive:
// Add wheelzoom to the displayed image
onComplete: function () {
jQuery('.cboxPhoto').wheelzoom();
}
with:
// Add Pinch-Zoom to the displayed image
onComplete: function () {
jQuery('.cboxPhoto').wrap("<pinch-zoom></pinch-zoom>");
}

In file includes\session.php:
Replace line 93:
define('WT_JQUERY_WHEELZOOM_URL', WT_STATIC_URL . 'assets/js-1.7.9/jquery.wheelzoom-2.0.0.js');
with:
define('WT_JQUERY_PINCHZOOM_URL', WT_STATIC_URL . 'assets/js-1.7.9/pinch-zoom.js');

In files:
app\Theme\CloudsTheme.php
app\Theme\FabTheme.php
app\Theme\MinimalTheme.php
app\Theme\WebtreesTheme.php
app\Theme\XeneaTheme.php
Remove line from public function hookFooterExtraJavascript() e.g.:
'<script src="' . WT_JQUERY_WHEELZOOM_URL . '"></script>' .
Add line to public function hookFooterExtraJavascript() e.g.:
'<script defer src="' . WT_JQUERY_PINCHZOOM_URL . '"></script>' .

I've set up two test webtrees sites, one using webtrees 1.7.17 and the other using webtrees 2.0.5. They've each got the same tree with only one person in it - my wife's aunt who inspired me to get started on family history research. Here are the links:
www.taylor-thomas.org.uk/webtrees1-7-17/
www.taylor-thomas.org.uk/webtrees2-0-5/

Try opening the 1.7.17 site on a tablet or phone, and zooming in to an image with two finger gestures. Zooming in to an image on the 2.0.5 site demonstrates the return of the colorbox problem.

Something else I'd really like to do with images in webtrees is make some of them visible to the world, whilst others are only accessible by logged in users. Ideally I'd like to be able to set access permissions on a folder by folder basis. Is that already possible?

Mike

Connexion ou Créer un compte pour participer à la conversation.

Colorbox, Wheelzoom and ... pinch-zoom il y a 2 semaines 6 jours #2

  • fisharebest
  • Portrait de fisharebest
  • Hors Ligne
  • Administrator
  • Administrator
  • Messages : 13196
Hi Mike,

Thanks for the long post. It might be better to put this in the issue tracker on github.

For a long time, we used your patch for colorbox. IIRC, there was a security update for colorbox, and I couldn't work out how to apply your patch to the new colorbox code.
So, it was a choice between security and functionality, and security won...

If you can create a similar patch for the latest colorbox code, that would be great!

As for finding the source code in 2.0, I'm afraid it requires a few command-line developer tools.

1) You need node.js and npm (node package manager). Installation instructions at nodejs.org

2) Get the source code from github. e.g. use git if you are familiar with it - or (much simpler) download a .ZIP from github.com/fisharebest/webtrees/archive/master.zip

3) In the webtrees home folder run "npm install" which will fetch all the JS packages that we need. They are listed in package.js.

4) Then look in node_modules/jquery_colorbox and modify your code there.

5) Then run "npm run production" to create an updated public/js/vendor.min.js and public/css/vendor.min.css - and press F5 in your browser.

> Something else I'd really like to do with images in webtrees is make some of them visible to the world, whilst others are only accessible by logged in users. Ideally I'd like to be able to set access permissions on a folder by folder basis. Is that already possible?

It might be better to start a separate thread for this. Discussing two things in one thread usually leads to either confusion, or one of them being lost.

I think there is a demand for this type of thing. There is at least one open issue on github. The difficulty is finding something that is backwards compatible with existing sites, consistent with the rest of the privacy logic, etc. One simple solution might be a "batch update" ("data fix" in 2.0) which adds privacy restrictions "none" to all media in a folder...
Greg Roach - Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. - fisharebest.webtrees.net

Connexion ou Créer un compte pour participer à la conversation.

Dernière édition: par fisharebest.

Colorbox, Wheelzoom and ... pinch-zoom il y a 2 semaines 6 jours #3

Thanks Greg - that's given me my homework then!

I've downloaded the full version of jquery.colorbox-1.6.4.js and applied the same patches as were done to jquery.colorbox-1.5.14.js. I've got that working in webtrees 1.7.17. I don't know how to generate a .patch file, so these are the changes I've made to jquery.colorbox-1.6.4.js:

Remove or comment out lines 1010 to 1020 inclusive:
if (settings.h) {
photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px';
}

if ($related[1] && (settings.get('loop') || $related[index + 1])) {
photo.style.cursor = 'pointer';

$(photo).bind('click.'+prefix, function () {
publicMethod.next();
});
}

Add these lines after line 1023 (photo.style.height = photo.height + 'px';):
var vertpadding = (settings.h - photo.height) / 2;
var horizpadding = (settings.w - photo.width) / 2;
photo.style.padding = vertpadding + 'px ' + horizpadding + 'px';

I'll try to follow your instructions and see if I can apply and test these changes to colorbox in webtrees 2.0.5, and maybe then replace wheelzoom with pinch-zoom in wt 2.0.5.

Don't hold your breath!

And yes, media file access permissions would be better in a separate thread if it's not currently possible, and should be in Request for New Feature.

Mike

Connexion ou Créer un compte pour participer à la conversation.

Colorbox, Wheelzoom and ... pinch-zoom il y a 2 semaines 3 jours #4

I've now followed your instructions, Greg. It was a steep learning curve, but I got node and npm working and eventually got "npm run production" to run successfully.

It turns out that the solution to the Colorbox and Wheelzoom problem is simpler than I thought. I've found that replacing Wheelzoom with Pinch-zoom means that Colorbox 1.6.4 doesn't need to be modified. You can see this working on www.taylor-thomas.org.uk/webtrees2-0-5/ .

I should have made notes as I went along, but I think these are the important bits of what I did:

1) I downloaded Pinch-zoom from github.com/GoogleChromeLabs/pinch-zoom and added it to the node_modules folder, and I think I used npm to install it.

2) In resources/js/vendor.js I added a line 140 saying:
import “pinch-zoom”;

3) I downloaded github.com/GoogleChromeLabs/pinch-zoom/b...r/dist/pinch-zoom.js and saved it in public.js

4) In resources/views/layouts/default.phtml I added after line 144:
<script src="<?= e(asset('js/pinch-zoom.js')) ?>"></script>
and I replaced line 174:
wheelzoom(document.querySelectorAll(".cboxPhoto"));
with:
jQuery('.cboxPhoto').wrap("<pinch-zoom></pinch-zoom>");

5) Did "npm run production" successfully and copied all the files which npm reported as changed across to my local test server - particularly public/js/vendor.min.js, public/js/webtrees.min.js, and public/css/*.min.css

I know I shouldn't have to have done 3) or the first bit of 4) above, but I haven't worked out how to use the imported pinch-zoom yet, so I took the easy way out.

I left Wheelzoom installed and left the line in resources/js/vendor.js which imports Wheelzoom as I think it's used elsewhere in Webtrees.

I hope that all helps...

Mike

Connexion ou Créer un compte pour participer à la conversation.

Colorbox, Wheelzoom and ... pinch-zoom il y a 2 semaines 3 jours #5

My number one wish. This looks very promising!
Thanks a lot Mike!
webtrees 2.0.6 at visitusinmaputo.com/webtree PHP 7.2.9
webtrees 2.0 dev on local WampServer PHP 7.3.1

Connexion ou Créer un compte pour participer à la conversation.

  • Page :
  • 1
Propulsé par Kunena