Discussion utilisateur:Alex brollo/EditInView.js

A little bit of doc

Aim of EditInView

Many typos of formatting issues are best seen in view mode, but reviewing text in view mode is far from comfortable, since front page image can't be resized nor dragged. When some typo has been found by user or by Erreur(s) possible tool, it's uncomfortable and slow to open the page in edit mode, to fix it and to save the page. EditInView, in view mode, removes limitations in resizing-dragging page image and allows to editwiki code and save it while staying in viewmode.

Present limitations

By now, there's no "preview mode".

Logics of EditInView

In view mode, the tool builds five tattoo icons and an edit box, containing a "tool bar" that works to as a handle to drag editbox, and three textarea fields. Personal tools can be loaded into tool bar; they can be called with buttons, listed into a PersonalButtonx.js subpage of user page.

Header, body and footer of current Page: page are loaded into edit box textareas and can be edited but as usual text fields or by personal tools.

Edits can be saved with "quality level like buttons" into the right side of tool bar of edit box.

Body textarea has "wpTextbox1" as id, so any tool like $.typo can access and edit text contents with minor changes of their code.

The idea is, to make easier and much faster the review of page text, and to create a comfortable environment to do it; html is built asyncronously as soon as the page is opened, and usually is immediately shown when user clicks the tattoo icons.

Front-page image is both resizable and draggable, and there's a trick to save default resizing and dragging for odd and for even pages; saved settings of page image will be applied automatically to next pages, with a comfortable "self-cropping-like" result.

Main icons

• : enlarges page image
• : reduces page image
• : one click: saves enlargement - positioning of current page.
  • double click: erases enlarge-positioning and reloads page
• : first click: hides all in view mode but the text and the imag, to make easier reviewing. Builds the edit box (display: hidden)
  • second click: toggles the edit box from display:hidden to display:block
  • next clicks: toggle hidden/block display for edit box (edit box is not destroyed, and any edit is saved)
• : reverts view mode with default settings

Personal tools

Any of them needs some documentation; they have been written for it.source and need to be customized for fr.source use.

All from them are built by a newButtonx() function as this:

• newButtonx(param1,param2,param3) where:
  • param1 is the brief text into the button;
  • param2 is the js function that will be called;
  • param3 is the help message for the button

Any existing js function can be called in param2; a special function is incapsula(), a simplified version of encapsulate().