Giter Club home page Giter Club logo

diva.js's Introduction

This is the repository for the new DDMAL website distributed via GitHub Pages. It is a static website that has been modified to run without a CMS. The entirety of the site is stored in this repository, blog contents included. The formatting was adapted from the Lanyon theme, developed by Mark Otto.

To view the old version using Forestry CMS, consult the 'old-forestry-website' branch.

Contents

Local Setup

macOS / Windows Install

Assuming you have Git installed, open a terminal and clone the repository into any known location on your computer. The documents folder is recommended, though it is up to you.

Configuration and building site locally

git clone https://github.com/DDMAL/ddmal.github.io.git

Enter the directory with cd ddmal.github.io, and pull from the repository to your local folder. Specifically, pull from the 'deforested' branch, the branch used by GitHub Pages to host the site.

git pull origin deforested

At this point, the site is able to be edited and run locally. Use the VSCode "Live Server" extension to view the static website in your browser and track changes automatically.

Creating your lab member page

Create a new folder following the firstname_lastname convention under the appropriate subfolder (undergraduate, masters, etc.) in lab_members. Copy the template file from TEMPLATES/lab_member_template into your newly created folder (do not rename the file). Follow the TODO comments and fill in the desired information.

When adding an image for a lab member page, place it in the assets/lab_members directory. Reference the exact filename in the profile photo's src attribute in your index.html file.

You will also need to add a link to your new page in lab_members/index.html. Copy and paste a <li> item from the appropriate subsection in the appropriate alphabetical position. Make sure to update your name in the content and the path to your page. Add a thumnbail to the assets/lab_members/thumbnail folder and link it in the image src, or use the placeholder image. It should resemble this format (undergraduate used as an example here):

  <li><a href="../lab_members/undergraduate/first_last/">First Last</a><a href="../lab_members/undergraduate/first_last/"><img class="member_photo_list" src="../assets/lab_members/thumbnail/placeholder.png" /></a></li>

Updating citations

There are two parts of this site updated from Zotero group libraries. (OMR Bibliography and DDMAL) https://www.zotero.org/groups/424851/omr_bibliography https://www.zotero.org/groups/2415821/ddmal

Inside the DDMAL folder, there are four subfolders for Media, Posters, Presentations and Publications respectively.

To create an export, right click on any desired subfolder and select the option Create Bibliography from Collection.... At this point, make sure you have installed the Chicago Manual of Style 17th edition inside the Manage Styles... popup. Then, set Output Mode to Bibliography and Output Method to Save as HTML. Select ok, and name the file one of

DDMAL_< [media, posters, presentations, publications, omr] >.html

depending on which folder you are exporting. Then, save it inside the zotero_export/ folder within this directory.

NOTE: make sure your generated HTML file contains all of the content you want displayed for the given page, old and new. Once the script is run, the existing page content will be replaced with the contents of your generated file, so include previous content you want to keep as well as any new modifications.

Next, run the html_parser.py script at the top level of this directory (works on Python 3.7, have not checked others). You will be prompted to input text based on which type of citations you would like to update, one of the three or all. The changes will be reflected in the content.json files in each of the specified folders, which are dynamically displayed in the static pages. Open any modified pages locally to ensure they display correctly before pushing to this repository.

There is another GitHub Actions script called github_html_parser.py that was used in an attempt to automatically update the citation markdown files when zotero_export/ files are updated and pushed to the repo. It is currently deprecated.

Troubleshooting

If you are having any difficulties with setup or local development, please use the issues tab found in this repository.

diva.js's People

Contributors

affogarty avatar ahankinson avatar ahwitz avatar cadagong avatar deepio avatar dellsystem avatar dependabot[bot] avatar emilyhopkins avatar erichanliu avatar fujinaga avatar jackyyzhang03 avatar jeromepl avatar jregimbal avatar magoni avatar robcast avatar vigliensoni avatar wabain avatar zeyadhazem avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

diva.js's Issues

Smooth fade-in for tiles

Add this as a pie-in-the-sky future future feature request. It would be nice if the tiles could fade in when they are loaded, rather than just popping in. It should be a very short fade in, 100ms or so, but just enough that it wouldn't be quite as jarring. The jQuery .fadeIn() method looks promising for this.

This would definitely have to be tested for performance impact.

Full screen mode

There should be a fullscreen mode feature, either triggered when the user enters native fullscreen mode or something that can be toggled. It should also be possible to specify what, besides the actual document viewer, is included in fullscreen mode. For the next version, or this one if there is time?

Add a hash parameter for pages per row

Used only in grid view and ignored in document view, but preserved upon returning to grid view (just as the zoom level is). Could be named "r", for row, or "n", for number (because "p" is taken).

Items with varying max_zooms not handled well

Currently there is no way to handle items with varying max_zooms - it's assumed that every pyramidal image file within a document has the same max zoom. However, there are some documents for which this is not the case, resulting in some pages looking like this:

Screenshot of issue

It's probably not reasonable to assume that all images in a document have the same max_zoom, so this should be accommodated somehow, preferably automatically. Some possibilities:

  • Force all images to be generated as TIFFs with max_zoom set to the lowest max_zoom among all the images
  • Process the images (possibly manually) to ensure that they have the same max_zoom
  • Something on the document viewer side?

Switching between grid/page view broken

When leaving grid view, the document viewer should jump to the page shown as the current page.

When entering grid view, the document viewer should jump to the row containing the page shown as the current page.

Two events fired when pinch-zooming

When trying to zoom out through pinch-zoom on the iPad, two gestureend events are fired for some reason, resulting in the user being scrolled to an unexpected place (usually about twice the expected page number). Preventing the event from propagating and returning false did not help. This seems to only occur when zooming out.

Adaptive padding

There should be the ability to set an "adaptive" padding which depends on the average height and width of the images. The ratio of padding to the dimensions should be adjustable. If set to 0, it should use settings.fixedPadding (also user-adjustable) instead.

Load only tiles within the viewport

Use virtual rendering techniques to load only the tiles that are visible in the viewport. This should speed up loading at the higher zooms.

Callback functions

There should be the ability to extend this plugin via callback functions, most notably for scrolling, but perhaps also for zooming and other events as well.

Test on Windows

I suppose we should make sure this works on Windows-specific browsers. Let's start with IE7 and work our way up.

Horizontal scrollbar appears in grid view sometimes

When the page is loaded from a new tab/window in Google Chrome, with a page number specified and the grid hash parameter set to true, a horizontal scrollbar unexpectedly appears. Doesn't appear to happen in Firefox or Safari.

Smoother image loading when scrolling

If images were loaded when they were 100 or 200 pixels beyond the viewport, then the tiles would come into view more smoothly, at least at lower scrolling speeds.

Ability to load more than one viewer per page

The code needs a small rewrite to allow for the possibility of instantiating more than one document viewer on a single page. Currently this is not feasible due to the way div IDs are handled, but the original code had a framework for implementing this so fixing this issue simply requires making use of that framework.

long scrolling can produce thousands of requests

Perhaps this is not an issue (I am not sure if this is normal for such an application), but...

If you perform a relatively long scroll (e.g. holding down page-down or dragging a long distance) you can generate a rather large number of unnecessary requests. For example:

  1. If I scroll from page 500 to 583 by holding page-down, I generate 969 requests - though I never actually see any pages except the last.
  2. If I start from the beginning and drag the scrollbar to page 411 (with pretty good accuracy), I generate 871 requests.

I am running Google Chrome on Windows XP on relatively new hardware on a relative fast internet connection and it performed relatively well, but it may be problematic for others to have hundreds (sometimes thousands) of requests in a matter of a couple seconds.

A possible fix would be to not make the AJAX call immediately, but instead set a timer which will check to see if the page is still in the view and only then make the AJAX call. The actual interval can be relatively small and remain unnoticeable by the user (think 1 / # of page downs per millisecond). In fact, it may speed up performance as the user wouldn't have to handle hundreds simultaneous connections.

Option to switch orientation

For the next version. There should be an option to switch between a vertical (the current default) and a horizontal layout.

totalHeight not calculated properly

settings.totalHeight is somehow not being calculated properly - there is either not enough not padding at the bottom or too much of it (depending on what "fix" is applied)

Create test sets

We'll need to create some test sets and ensure diva works with a wide range of images.

Cursor icon doesn't change in firefox

It remains the default cursor when hovering over or dragging within the document viewer. Happens in Firefox 3.6.10 (Mac) but not Firefox 3.6.16 (Ubuntu). Also happens in Opera, 11.10 on Ubuntu. (Don't have any other browsers to test at the moment.) Actually, Opera seems to be having larger problems - it's not rendering all the images properly, for one. But that's another issue.

Sidebar showing thumbnails of images

There should be a sidebar showing the thumbnails of certain pages throughout the document, so that the user can easily visually browse the document.

Possible usability issue with ctrl + zoom out

On the computer I'm using now (lab computer, the one nearest the door), the control key is mapped to right-click or something so that whenever I try to zoom out with ctrl + double click, it just brings up the right-click menu; it doesn't zoom me in or out. I have no such problem on my laptop, however, and I don't know how common this issue is. I had no such issues with the alt key.

I'm not sure what the best solution would be - ignore this case? Allow users to zoom out with either alt or control? Return it to alt? What do you think, @ahankinson?

Add JPEG2000 / Djatoka support

We should support Djatoka and JPEG2000 in both Djatoka and IIP. This shouldn't be required, due to the lack of free libraries for r/w JPEG 2000, but it should be an option.

Pixel coordinates should be round()ed

Currently page output for the div sizing looks like:

"top: 504851.35291595693px; width:622.5px; height: 1022.5px; left:502.75px;"

Since we can't have 352915693ths of a pixel, we should round these to the closest whole value. This might fix the white line issue too.

Zooming and scrolling on the iPad

Zooming in and out on the iPad is a bit difficult. The zoom slider works, although it can be a bit hard to press, but double-click to zoom doesn't work at all (presumably because the iPad fires off double-tap as opposed to double-click events). I'm also not sure how we could implement ctrl + double-click to zoom out on the iPad.

Scrolling actually does work as expected - it has to be done as two-finger scrolling, as is standard. Both horizontal and vertical two-finger scrolling are working.

Go-to page doesn't work if you hit enter

The goto page input, isn't in a form and only has a click handler:
https://github.com/DDMAL/diva.js/blob/master/js/diva.js#L885

Aside from being invalid html, it'd be a better idea to make a form, not a div, put the input inside it - and attach a submit handler to the form. This would remove the mouse dependency on the goto page input.

To reproduce:

Expected result - goto entered page

Actual result - sweet diddly

"Spread" (dual page) view

There should be the option to view pages of certain documents side by side (verso, recto). This could either be another view (in addition to grid and document) or could replace the regular document view for applicable documents.

Ctrl + zooming out doesn't work in Firefox on Mac

The context menu is no longer triggered (commit 921372d) but pressing control and double-clicking doesn't do anything.

Actually, if "Disable or replace context menus" is unchecked in Preferences -> Content -> Advanced Javascript settings, then the context menu is still triggered. This behaviour appears in Google maps as well, but Control + double clicking to zoom out works there.

How should we deal with this? This is Firefox 4.0.1 on Mac OS X Server. Firefox 3.6 on Ubuntu works fine.

Zoom slider should have a label

When in the regular document view, the label should indicate that it is a zoom slider and display the current zoom level; when in grid view, the zoom slider should be replaced by a grid slider, and the label should reflect the change.

Incorrect panel height in fullscreen mode when resizing window

Happens in Firefox with Firebug opened and Chrome with the web inspector opened. When entering fullscreen mode with the console/inspector opened, the height of the panel is taken correctly, but if the console is closed while in fullscreen mode, the resized panel height is not taken into account, resulting in pages not appearing when they are supposed to (when scrolling). This also happens when resizing the window within fullscreen mode.

Fixing this would probably require listening to all window resize events while in fullscreen mode and adjusting the stored panel height based on that.

Option to switch orientation

For the next version. There should be an option to switch between a vertical (the current default) and a horizontal layout.

nearViewport is not incorporating padding correctly

New pages are showing up about 50 pixels of scroll after they are supposed to, and are disappearing too quickly as well. Looks like an issue with nearViewport and/or the way settings.heightAbovePages takes padding into account.

Timer to skip scroll events when too frequent

Scrolling can be slow sometimes (although nowhere near as slow as it was before, when all the images were being loaded), particularly on the higher zooms. There should be a way of skipping scroll events or something.

Scrolling after entering fullscreen mode not working

in Firefox 3.6, after scrolling to a certain page and entering fullscreen mode, the user is is shown the first page as opposed to the most recently-viewed page. This problem does not seem to occur in Opera (11.10), Chrome, or Safari. In Firefox 4, the problem does not occur when the user enters fullscreen mode, but rather when the user leaves it.

Images disappear after zooming out

As far as I can tell, this occurs in non-webkit browsers on OS X and all the browsers that I've tested (Opera, Firefox, Chrome) on Ubuntu and Windows. Somehow the right pages aren't being loaded. This may have something to do with the zoom change ratio.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.