User talk:Pilaf/Live Preview

From Wikipedia, the free encyclopedia

Excellent idea - well done! But does it work for us antediluvial throwbacks who still use the classic skin? "monobook.js" is a bit of a clue, but I live in hope ... -- ALoan (Talk) 13:23, 7 Feb 2005 (UTC)

I'm afraid not, as far as I know other skins do not allow CSS or JavaScript extensions (correct me if I am wrong please), so you'll have to switch to MonoBook if you want to use this. Sorry. Pilaf 16:08, 7 Feb 2005 (UTC)
A theoretical work around, if you really can't live without the classic skin, is to modify your monobook.css to mimic the classic skin. It's not a trivial solution though. Pilaf 16:15, 7 Feb 2005 (UTC)
Thanks - I wondered if someone had already done this - m:Gallery of user styles seems the most likely candidate, but ultimately not a lot of help. If anyone has a monobook.css that emulates the classic skin, I'd be very grateful if I could copy it... -- ALoan (Talk) 14:13, 14 Feb 2005 (UTC)
You can use this with the classic skin, as I am doing right now. You have to edit your standard.js file instead of monobook.js. Lupin 20:42, 31 July 2005 (UTC)

Can you add how to install it on Wiktionary ? Thanks. Yann

I think the only change required is that instead of the local /w/index.php?title=User:Pilaf/livepreview.js... path, you have to use absolute http://en.wikipedia.org/w/index.php?title=User:Pilaf/livepreview.js... I have tried that on cs: Wikipedia and it seems to work fine. --Mormegil 16:27, 7 Feb 2005 (UTC)
No, that won't always work fine as you need to define a few variables per wiki. Moving from en.wikipedia to en.wiktionary or en.whatever should be very easy as most things remain the same (especially namespaces). Generally the best way to implement it in some other wiki is by copying to that wiki and configuring the system variables. I will write a tutorial on how to use it on other wikis later, in the meanwhile please let me know where you are using it as I need to keep track for when I release updates. I need some means of centralized organization. Pilaf 17:16, 7 Feb 2005 (UTC)
Can someone please post exactly what is needed to get this working on another mediaWiki implementation, or link to the most current instructions?? I've dug through Pilaf's various pages, Live_View, InstaView, examined monobook.js, instaview.js, tried including the vars mentioned above... forced reloads, cleared browser cache, tried different browser... I can't get it working, what am I missing?! I just implemented MediaWiki for a software documentation project. Thanks anybody. --emjayess 4 Mar 2006
Very nice work Pilaf, very handy! I was wondering if you could help me with something similar. I want to make my own modification to the Edit page but I am not sure how to do so (I will probably work it out but if you could tell me it would help a lot). Once again, thanks for the very handy tool. --Yelhsa 14:53, Feb 17, 2005 (UTC)

Contents

[edit] Bugs

Nice idea! I have a couple of bugreports/feature requests, if you are interested:

  • Links like [[Wikipedia:Foobar|]] should be rendered like Foobar, i.e. the first colon-separated prefix should be ignored for rendering, currently it is broken completely.
    • This was implemented and working, must've broken it accidentally. I'll fix it right away.
  • Links like [[:Category:Foobar]] (dtto :Image:) should ignore the initial colon.
    • It's in my to do list.
  • The namespaces ignore translation, e.g. on cs:, [[Soubor:Foobar.jpg]] should render an image (Soubor: is equivalent to Image: there). This is understandable, but maybe there could be at least some "local setting variable" in users' Monobook.js, similar to $wgUserName.
    • This is already possible, you just need to copy the livepreview.js to your own wiki (fr, de, whatever) and configure the system variables at the top of the script. Namespaces are variables which can be localized.
    Oh, perfect, I haven't hoped for that! :-)
  • The time format with ~~~~ is different from MediaWiki's. I know, I am nitpicking. :-)
    • I know, I was hoping nobody would notice ;) It's low priority, but I might fix it at some moment.
      • Here's the code to fix it: Replace the two calls to Date() with: d=new Date(); d.getUTCHours()+":"+d.getUTCMinutes()+", "+d.getUTCDate()+" "+monthname[d.getUTCMonth()]+" "+d.getUTCFullYear()+" (UTC)". Hope you don't mind all my patches and suggestions. ;-) JesseW 19:16, 12 July 2005 (UTC)
  • The yellow-red frame should finish with some <br clear=all>, because otherwise, if there is some floating object inside, it continues even under the frame.

Anyway, thanks for a piece of good work!

    • I know, I loosely tried to implement this recently, but I was really sleepy and didn't want to keep messing with it (the first attempt failed). I'll do it soon.

--Mormegil 16:27, 7 Feb 2005 (UTC)

Thanks for your reports. Perhaps I should open a section for bug reports as there are many things to fix yet. Pilaf 17:10, 7 Feb 2005 (UTC)

Some more nitpicking:

  • [http://www.example.org/] displays [#], but it is probably a feature (not counting the links).
    • It is indeed a feature, but rather an ugly hack, so I'll try to implement links numbering.
  • If a line indented by a colon contains a smilie, it is broken. (e.g. : blah blah :-))
    • I'll take care of that.

--Mormegil 10:03, 8 Feb 2005 (UTC)

BTW, last night I uploaded a new version which fixes a couple bugs (not in your list though) plus implementing the clearing
you suggested. Thanks again! Pilaf 13:38, 8 Feb 2005 (UTC)

Hi again! Some problems were fixed, thanks! But some still remain:

  • Colon-indented items are displayed wrongly. It is IMHO the worst problem. Try the following:
:blah blah
:foo bar
:baz
  • [[:Image:Foobar.jpg]] should ignore the colon (it already works for :Category)
  • [[:cs:Foobar|]] should display cs:Foobar, currently it is broken (it already works for things like meta:Foobar).

Thanks again for this great piece of code! --Mormegil 16:34, 21 Feb 2005 (UTC)

Oops, hadn't noticed that problem with definition lists (indented text). I'll get to it soon. Pilaf 13:50, 23 Feb 2005 (UTC)

[edit] More bug reports/feature requests

First of all, great work. I'm steping through the code right now(I'm a paranoid guy...), and it's interesting.

  • Implementing raw signatures - i.e. not adding anything to the wpUserSignature - I don't know if accessing the preferences would be a PITA, but adding a option like wpPrefRawSig shouldn't be too hard. I may send you a patch for it sometime. If you or anyone wants to see the semi-commented version of the code that I made, let me know and I'll post it to the wiki. JesseW 17:55, 12 July 2005 (UTC)

[edit] md5 function is old-fashioned

This is a great tool! When writing my popups tool, I noticed that images with utf8 characters caused problems in my md5 function. It seems that Live Preview is similarly afflicted: try a live preview on this section, containing Image:ErzsébetBáthory.jpg. The md5 hash is computed incorrectly. A functioning javascript utf8 md5 function is at [1] and there's a local copy at User:Lupin/md5-2.2alpha.js. Lupin 16:02, 6 August 2005 (UTC)

[edit] Suggested improvements

Not certain whether to put this here or on the article but here goes:

  • Show interwiki links as a separate section at the bottom
  • Show categories as a separate section at the bottom

Something like:

+==========================+
| preview of article       |
|                          |
.                          .
.                          .
.                          .
|                          |
+==========================+ 
| [[:cy:...]]              |
| [[:gd:...]]              |
+==========================+
| [[:Category:Test]]       |
+==========================+

Making the links live to allow for testing would be good: this already works well on the regular text section. I figure this shouldn't be any extra load given that you're already taking account of them (and ignoring them). --Phil | Talk 13:40, Feb 21, 2005 (UTC)

Good idea, I'll try to implement it later. I've been trying to refactor the code a bit lately so that it becomes more flexible (currently I can't implement multiline nowiki tags properly plus some other stuff), so this may come along with that in the next version. Thanks a lot for the suggestion. Pilaf 22:12, 21 Feb 2005 (UTC)

[edit] I've implemented switching the accessKey from the regular preview to live preview

If anyone else wants the code to switch the alt-p accesskey from the regular preview to Live Preview, it is availabe from my User:JesseW/monobook.js file. Pilaf, if you want to add this, feel free. JesseW 18:54, 12 July 2005 (UTC)

[edit] License, source code?

Hi, under what license did you release your script, and is there an unpacked (possibly commented?) version of the source code available? Thanks, AxelBoldt 19:44, 25 September 2005 (UTC)

License is BSD. Updates coming soon. Pilaf 22:15, 19 November 2005 (UTC)
Meanwhile, I converted the current source to an indented version (with help of Mozilla's js function pretty printer). Maybe others can use this as well. Arbruijn 21:34, 22 January 2006 (UTC)

[edit] Minor rendering problem

I'm trying it now and liking it very much, but two small things I notice that Live Preview renders wrong are with this:

(talk)
(talk)

Same thing, with the wiki code visible: [[Image:WikiThanks.png|frame| [[User_talk:Nickj|(talk)]] ]]

Problems are:

  1. Image should show the description link as "(talk)", but Live Previews as "(talk)]]".
  2. The "Same thing" text in the nowiki tags should appear as text, but in the Live Preview it appears as a second identical image.

-- All the best, Nickj (t) 22:59, 9 October 2005 (UTC)

Fixed for next release. Pilaf 19:26, 4 December 2005 (UTC)

[edit] Problem on links beginning with /

BUG: Although Wikipedia treats a link like /foo as a link relative to the current article name, ie User_talk:Pilaf/Live_Preview/foo, Live Preview currently treats such relative links as absolute, and so links to http://en.wikipedia.org/wiki//foo. jnothman talk

Fixed for next update. Pilaf 22:16, 19 November 2005 (UTC)

[edit] Offline preview

Your Live Preview certainly has the capability, but can I get it to give me a preview when I'm offline? I haven't installed it yet, but from the description it works off a wikipedia aritcle, so only works online at the moment.--Commander Keane 05:12, 14 November 2005 (UTC)

How do you get the current contents of a page which you want to edit if you're offline? Or do you mean to start from scratch? It could be modified to work offline in that sense. jnothman talk 08:15, 14 November 2005 (UTC)
Yes, I meant from scratch. I'm going to be offline for a week and want to work on the layout of template. Since I'm a bit hit-and-miss with the wiki table code a preview would be very useful. I could also download content first and work with it offline later.--Commander Keane 16:11, 14 November 2005 (UTC)
Here's a very neat offline version of Live Preview by Sverdrup: [2] (save it as livepreview.html or whatever you prefer). By the way, a new LP version with some bugfixes is in the works, stay tuned. Pilaf 02:08, 19 November 2005 (UTC)

[edit] Minor syntax error

I have been trying to understand how your code works and in doing so I noticed that (I think) "this._parse_inline_nowiki=function(str)" should be just "_parse_inline_nowiki=function(str)"

It works in javascript in the browser because (I think) "this." refers to the global object and so the function is declared just where it would have been. I only noticed this issue because I was translating the code to run on an ASP page at my server [[3]] so that I could watch it work.

VERY impressive bit of code. It gets a lot done in fewer lines than I would use. Did you translate this from the MetaWiki code or write it off the top of your head? I have yet to find the WikiText to HTML code in the MetaWiki source or I would answer this question myself. :) --Jamesnewton 01:21, 22 November 2005 (UTC)

Sorry about the totally mangled code. Unfortunately I lost the original human-friendly, commented version in a HD crash, but I have since decided to take it up anew, so I will be publishing the "source code" very soon. The error you mention is a product of some major code rearrangement I made at some point, and is already fixed in the latest (not yet released) version. Thanks for your compliments, and yes, I wrote it up from scratch just comparing against Mediawiki's output (that's why it has some discrepancies). Best wishes, Pilaf 04:54, 23 November 2005 (UTC)

[edit] Bug: !! th divider

Live preview does not properly handle !! for table header cells. See Help:Tables. jnothman talk

Fixed for next release. Pilaf 17:07, 2 December 2005 (UTC)

[edit] Second button required to re-hide

Now that the layout of the edit page has changed, would it be possible to add in a second button, next to the "Live Preview" button, to hide the output? Because the preview is now showing between the text box and the edit summary, editing a long page means that the "Save/Preview/Changes" buttons get shoved way down the bottom of the page by the LivePreview. You could maybe rename the current button "Show Live Preview" and name the new button "Hide Live Preview": it would presumably need to be disabled until you actually showed something… HTH HAND —Phil | Talk 14:50, 2 December 2005 (UTC)

Will fix. Pilaf 22:26, 3 December 2005 (UTC)

[edit] Name change

After some thought I decided to change the project's name to InstaView in order to avoid conflict with MediaWiki's Live Preview feature. Thanks to everyone who submitted suggestions. Pilaf 22:26, 3 December 2005 (UTC)

[edit] Problem on links beginning #

Similar to the / problem, except that Wikipedia's own preview doesn't do this properly either. jnothman talk 22:53, 19 December 2005 (UTC)

[edit] Problem with links starting :

[[:Category:Categories|Foo]] shows as Category:Categories|Foo and links to Category:Categories|Foo which can't exist. It should show as Foo. Same goes for interwiki, eg a Hebrew article.

A different problem occurs with [[:Image:mypic.jpg|My pic]]. It correctly displays as My pic but links to :Image:mypic.jpg instead of Image:mypic.jpg. Indeed [[:Image:mypic.jpg]] produces the incorrect link as well: <http://en.wikipedia.org/wiki/:Image:mypic.jpg>

jnothman talk 22:53, 19 December 2005 (UTC)


[edit] Nicking installation tips from popups

Wikipedia:Tools/Navigation popups#Installation has some good stuff you could borrow. First, they provide a template that can be subst to install the needed javascript into monobookjs, very nice. Also, apparently you can install this in other skins, and they havethe necessary files linked for each. Pimlottc 08:10, 26 March 2006 (UTC)

[edit] True "instant" preview?

Is it possible to make the live preview update automatically on each keystroke? That would be much more handy and pretty darn slick. You can inject a onchange handler into a pre-existing textarea, can't you? If not, greasemonkey could be used. Pimlottc 08:10, 26 March 2006 (UTC)

Having it update onChange would probably bog the browser down, as the entire document would be converted and rendered with each stroke. Having it update in short time intervals wouldn't be such a bad idea though. Pilaf 03:17, 27 March 2006 (UTC)

[edit] not offline enough

I want a totally offline preview, no past or future connection required. libtext-wikiformat-perl and parsewiki are OK but don't do tables. --User:Jidanni 2006-07-29

Read above under Offline preview. Pilaf 16:08, 1 August 2006 (UTC)

[edit] Wishlist

  • Please find a way to expand templates. The preview's usefulness is rather limited as is.
  • Please watch the #if's. If you preview User:Will Pittenger/Archive Indexer with your tool, the #if's are ignored or improperly handled.
  • Please find a way to properly display inter-wiki links. I like to test each one before I sumbit it. Waiting for Wikipedia's preview takes longer.
  • Any support for WikiCities:?

Will (Talk - contribs) 05:27, 20 November 2006 (UTC)