User:RP31/Thoughts on Removing Frames

Context

Frames enable an html page to be shown inside another page but are used as a convenient way to split a page into two or more parts with the split point easily moveable. Frames are deprecated in HTML5. The new iframe enables one page to appear inside another but is not so useful for enabling a moveable split point.

In each case we will have to consider whether the feature is really needed and the best way to implement the required functionality.

Pages using frames

Mentors page

tools/mentors/view_page_text_image.php This page consists of three frames. The top part containing controls; this does not really need an adjustable boundary. The lower parts show image and text in the same way as the proofreading interface although only a horizontal split is provided.

The proofreading interfaces

Since removing frames will require major re-work it would be nice to unify the standard and enhanced interfaces. See also Proofer Interface Enhancements

Both the standard and enhanced interfaces first divide the page into the upper part (proofframe - proof_frame.php) and the part containing tools (menuframe - ctrl_frame.php). There seems little need for this division to have an adjustable boundary since the tools occupy a relatively small fixed area.

The proofframe is then divided into image and text areas, either horizontally or vertically. The standard interface uses frames for this whereas the enhanced interface does not. It seems more important to make this division easily adjustable. It would also be possible to switch between horizontal and vertical split on the client side.

Egyptian Hieroglyphics page

tools/proofers/hiero/index.php This will need further consideration: UTF-8 conversion will change the situation.

Manage Suggestions pages

tools/project_manager/show_all_good_word_suggestions.php The left frame shows the user's projects and word suggestions for each. The right pane can show show_good_word_suggestions_detail.php for each word. show_good_word_suggestions_detail.php can also be shown alone in a window and shows each page where the word was suggested with either a vertical or horizontal split.

tools/project_manager/show_word_context.php. This is linked to from show_good_word_suggestions_detail.php by the link "Show full context for this word" and from word_freq_table.inc and shows the contexts for all occurences of the word in a similar way to show_good_word_suggestions_detail.php. but with less detail (only page and line, omitting date, round and proofreader) and with no time cutoff.

Quiz Pages

quiz/generic/main.php These show image and text frames on the left similar to the standard proofreading interface but with only a horizontal split, a control frame at the bottom and a 'instruction' frame at the right.

It can be accessed from quiz/start.php

Implementation

It is possible to simulate a moveable split point using css and javascript. It would be good to be able to have a fixed area which would resize to fit its contents, for exanple the proofreading toolbox area. There are some third-party splitter implementations. In order to have the fixed area it would have to work with a flexbox, some cannot do this. Considered the following:

• https://github.com/shunjikonishi/jquery-splitter. it cannot work with flexbox.
• https://github.com/RickStrahl/jquery-resizable. This uses flexbox but has a problem that the splitter can move off the edge and disappear. It is possible to work around this by using overflow auto so a scroll bar appears in this case but not really satisfactory.
• https://github.com/nathancahill/Split.js/ This claims to work with flexbox. I couldn't get it to work at all last time I tried, no doubt my problem.
• Diy option - A simple option is to make a two-pane splitter which will work with flexbox. This will suffice for the proofreading interface and can be used with iframes for more complicated cases such as the quiz pages.