preview post extension_

dwclifton

Actually, the fix for this is really easy. And in my opinion mandatory. What you're doing is adding a second id to the which is a no-no. Use the existing one instead.

Please see sumeet's post further down for the correct function.

Now all you have to do is locate the two instances of the textarea in /controls/Common.controls.php and add the event:

onkeyup=\"ReloadTextDiv();\"

Note the lowercase use of the Javascript event. This is XHTML folks! Attributes are case-sensitive and they must be lowercase.

stuart

Good point dw, didn't really give this enough time, moving house and all it was a rush job. I'll implement those chances to the code and reword the installaion instructions to reflect this.

dwclifton

What I like about the fix is it makes a very simple extension even simpler. All the user has to do now is install Live.js and Live.php, add the event handler to the two s in Common.controls.php, and, if they want to, style the preview element in global.css.

Which reminds me, the element you were using for that is redundant, another simplification is to put the id on the paragraph:

Then you can style it with one simple rule:

#TextDisplay {
  width: 96%;
  padding: 4px;
  background-color: #fefefd;
  border: 1px solid #dededf;
}

or whatever...

dw -- that's scary, sounds too much like gw, try doug ;-)

sumeet

It's possible I made some heinously simple error, but when I changed the code for proper XHTML and whatnot, it kind of screwed up LP. Now is actually says <br /> when I hit return. Anyone else have this problem? Know a solution?

sumeet

To fix the appearance of <br />, use this for Live.js:

function ReloadTextDiv() {
 var NewText = document.getElementById('CommentBox').value;
 var regex=/\r?\n/g;
 NewText=NewText.replace(regex,"<br />\n");
 var DivElement = document.getElementById('TextDisplay');
 DivElement.innerHTML = NewText;
}

dwclifton

Sorry about that sumeet, the Markdown formatter is replacing the < character with a literal HTML entity in code fragments. You must have pasted it in the first time not realizing this.

sumeet

It's okay. It was an easy mistake for you to make. The other small typo was a space before the entity and the opening quote. That needs to be removed for it to work properly.

dwclifton

I can't seem to figure out how the hell to insert code fragments that have < characters in them. I just tried editing my own post, both as HTML and as Markdown, and I keep scewing it up. I'm tempted to delete it or just point at yours because I don't want anyone else pasting that code in and have the same trouble you did.

sumeet

<pre><code>function ReloadTextDiv() { var NewText = document.getElementById('CommentBox').value; var regex=/\r?\n/g; NewText=NewText.replace(regex,"<br />\n"); var DivElement = document.getElementById('TextDisplay'); DivElement.innerHTML = NewText; }</code></pre> That's how I did mine. <br /> is just like typing <br /> Basically, type it up in HTML mode. Then, use the real < and > for things you actually want HTML to compute. For things you simply want displayed, use < and >

dwclifton

Thanks.

Normally, this is 100x easier to do with Markdown, all you do is indent code blocks with 4 spaces (or more). And speaking of Mark, for some reason his Markdown extension for Vanilla, which is what is causing this to happen, converts any < characters it sees to the entity &lt; before passing it to the Markdown code. Which I don't understand myself at all, because that's exactly what Markdown does for code blocks, performs all these conversions for you.

nathan

May I suggest, instead of having the user alter any files themselves, the extension does it for them? The extension system writes to/ over other files all the time, and I think it should be quite simple to have it 'alter' the common settings file, with STANDARD config. (I know some more advanced users may wish to put the live preview in custom places) when the extension is ebanled. When didabled, it removes said code changes. This way, when the extension is disable, the live preview heading does not remain. Killing tow birds with one stone. I will look into this tonight, but 3stripe, I wanted your feedback first. Have you already fried this? Is it possible?

graste

A live preview is a very nice thing. Is there a max-length defined on the textarea on comments that is checked serverside? I would like to see such feature if it isn't there already. And IF we have a maxlength, then something like counting characters as done here: http://www.quirksmode.org/blog/archives/2005/07/footnotes_on_th.html#postcomment would be a "nice to have" feature (for an extension).

stuart

max characters in comments are set in the admin area. That should be pretty easy to do.

giginger

I'm absolutely clueless as to how to insert those tags into the code. I tried and got a parse error so I clearly did something wrong.

Would someone be able to post what the text area tag should look like when it's inserted please?

Thanks.

Krak

In Common.Controls.php, Around line 169 add onkeyup=\"ReloadTextDiv();\" ---- so like this: =========================== <textarea name=\"Body\" class=\"".($this->Context->Session->User->Setting("ShowLargeCommentBox")?"LargeCommentBox":"SmallCommentBox")."\" id=\"CommentBox\" onkeyup=\"ReloadTextDiv();\">".$Comment->Body."</textarea>" =========================== Then around line 241 do the same thing again --- =========================== <textarea name=\"Body\" class=\"".($this->Context->Session->User->Setting("ShowLargeCommentBox")?"LargeCommentBox":"SmallCommentBox")."\" id=\"CommentBox\" onkeyup=\"ReloadTextDiv();\">".$Discussion->Comment->Body."</textarea>" =========================== Then around line 184, AFTER the form tags add <strong>Live preview:</strong><p id=\"TextDisplay\"></p> =========================== $sReturn .= "</div> </form> <strong>Live preview:</strong><p class=\"PreviewText\" id=\"TextDisplay\"></p> </div>"; =========================== Do the same thing around line 248... =========================== </div> </form> <strong>Live preview:</strong><p class=\"PreviewText\" id=\"TextDisplay\"></p> </div>"; =========================== Sorry if it looks confusing / messy, I tried the HTML tags and it wasnt working, so I just did it this way.

giginger

Thanks man. I really am useless at php editing

Krak

No problem, you get it to work?

nathan

Is there a read me file with that extension? There should be. That is hard for the average user (I do know there is a warning, but still...)

giginger

There is a read me file but I just couldn't insert the tag into the code without getting a parse error. It's a lack of knowledge on my behalf to be honest.

edit: @krak, I'm at work so I can't get onto my ftp and upload an edited file. I'm sure it'll work though.

stuart

Ideally we need someone who understands the extension architecture to sort this out so its automated.