rejetto forum

macros in external javascipt file ?

Guest · 9 · 3474
« previous next »
Pages: 1

0 Members and 1 Guest are viewing this topic.

Warp

  • Guest
on: December 25, 2008, 02:22:20 PM
Hi,
this works (inside hfs.tpl):
<head>
<script language="JavaScript" type="text/javascript">
<!--
function update()
{
{.set | chatsize | {.filesize|warp2001\chat.txt.}.}
alert ('{.^chatsize.}');
}
-->
</script>

</head>
<body>


This do not work (inside hfs.tpl and the same function as above inside hfs.js):
<head>
<script language="JavaScript" type="text/javascript" src="/hfs/hfs.js"></script>
</head>
<body>

Anybody knows why the second code fragment do not work ?


Warp


http:
//warp2001.dyndns.org:44792/

Offline SilentPliz

  • Operator
  • Tireless poster
  • *****
    • Posts: 1298
  • ....... chut ! shh!
    • View Profile
Reply #1 on: December 25, 2008, 03:06:45 PM
perhaps...

<head>
<script type="text/javascript" src="/hfs/hfs.js"></script>
</head>
<body>

and of course... hfs folder should be in the vfs.
« Last Edit: December 25, 2008, 03:13:06 PM by SilentPliz »

Warp

  • Guest
Reply #2 on: December 25, 2008, 03:57:45 PM
Hi,

thank you for the answer.
Removing the language-Attribut do not solve the problem.
There are more javascript functions inside hfs.js.
Everything works fine without macros.
With the macro above i got en error message (Firefox):

Syntax Error (at .):
{.set | chatsize | {.filesize|warp2001\chat.txt.}.}

The hfs folder is inside the VFS.



Warp

Offline SilentPliz

  • Operator
  • Tireless poster
  • *****
    • Posts: 1298
  • ....... chut ! shh!
    • View Profile
Reply #3 on: December 25, 2008, 04:57:04 PM
An Chat... for your inspiration...  :)

Implement in diff templates, or file hfs.diff.tpl ... in a real directory.
Smileys are at the bottom of the page (zip)


EDIT 19h15 (french time)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style>
body, th { font-family:tahoma, verdana, arial, helvetica, sans; font-weight:normal; font-size:14pt; }
body { margin:0; background-color:#000; padding:5px; }
a { text-decoration:none;  background-color:Transparent; color:#b1aba7; }
img { border-style:none }
#foldercomment { font-size:12pt; color:#590000; background:#b1aba7; padding:0px; border:12px solid #1b1b1b; border-bottom:12px solid #1b1b1b; margin-top:12px; }

.comment { font-size:11pt; color:#b1aba7; background:#590000; padding:15px; border:4px solid #888; margin-top:7px; }
.comment1 { font-size:11pt; color:#b1aba7; background:#1b1b1b; padding:10px; border:4px solid #888; margin-top:7px; }
.button { height:583px; padding:11px 8px; margin:12px; border:2px solid white; background:#b1aba7; font-size:11pt; font-weight:normal; }
.button1 { height:131px; padding:11px 30px; margin:10px; border:3px solid white; background:#cbc4c0; }
.button2 { height:159px; padding:11px 8px; margin:12px; border:2px solid white; background:#cbc4c0; }

SELECT {
color:#b1aba7;
background-color:#1b1b1b;
font-size:12px;
font-family:arial;
}
</style>

<title>HFS %folder%</title>
<link rel="shortcut icon" href="favicon.ico" />

<script type="text/javascript">
go_visibility = new Array;

function goblink()
   {
   if(document.getElementById && document.all)
      {
      blink_tab = document.getElementsByTagName('blink');
      for(a=0;a<blink_tab.length;a++)
         {
         if(go_visibility[a] != "visible")
            go_visibility[a] = "visible";
         else
            go_visibility[a] = "hidden";
         blink_tab[a].style.visibility=go_visibility[a];
         }
      }
   setTimeout("goblink()", 700);
   }
window.onload = goblink;
</script>


<script language="JavaScript" type="text/JavaScript">
<!--
 function addSmiley(codesmiley)
  {
   var msg = document.frm.texto;         
   codesmiley=' '+codesmiley+' ';   
   // Compatible IE
   if(document.selection)
   {
   msg.focus();
   sel = document.selection.createRange();
   sel.text = codesmiley;
 //  document.step2.focus();
   }
  else if(msg.selectionStart || msg.selectionStart == "0")
   {
   var startPos = msg.selectionStart;
   var endPos = msg.selectionEnd;
   var chaine = msg.value;
   
   msg.value = chaine.substring(0, startPos) + codesmiley + chaine.substring(endPos, chaine.length);
   msg.selectionStart = startPos + codesmiley.length;
   msg.selectionEnd = endPos + codesmiley.length;
   msg.focus();
   }
  else
   {
   msg.value += codesmiley;
   msg.focus();
   }
  }

function getSelectedText(){
  if (window.getSelection){
    return window.getSelection().toString();
  }
  else if (document.getSelection){
    return document.getSelection();
  }
  else if (document.selection){
    return document.selection.createRange().text;
  }
document.frm.texto.focus();
}
//-->
</script>

<script language="JavaScript" type="text/JavaScript">
<!--
var refresh=true;
function Prefresh() {
  if ((document.frm.texto.value=='') & (document.frm.login.value>''))
  window.location="{.get|url|text=.}";
  document.frm.texto.focus();
  setTimeout("Prefresh()",10000);
};

function textsend(){
};
//-->
</script>

<!-- Define special:begin
{.set | pass |!erase.}
{.set|chatfile|%folder-name%.txt.}
{.set|chattext|{.load|{.^chatfile.} .} .}
{.set|maxlength|10240.}
-->

<!-- Limit Length of file and reset it when pass is given
{.if|{.length | {.^chattext.} .}>{.^maxlength.}|
  {. set | chattext |{.cut||{.div|{.^maxlength.}|2.}|{.^chattext.} .}/set.}
 /if.}
{.if|{.?text={.^pass.}.}|{:{.save | {.^chatfile.}|.}:}.}
-->

<!-- Save chat file on hard drive
{.if| {.and|{.?name.}|{.?text.}|{.not| {.?text={.^pass.}.}.}/and.}
     |{:
          {. set | chattext |{.time.} --- <b>{.?name.}</b>&gt; {.?text.}<br>{.^chattext.}.}
          {.save | {.^chatfile.}|{.^chattext.} /save.}
      :}
/if.}
-->

</head>
<body>

<div class=button><img src="/~img27" /> <u><b>{.!user.}</u>: Welcome %user% ! </b>

<CENTER><div id=folder>{.breadcrumbs|{:<button onclick="window.location='%bread-url%';">{.or|%bread-name%|<IMG alt="" src="/~img1"> Home.}</button>:} .}</DIV></CENTER>
  <br / </a>

<form name=frm>{.repeat|2|&nbsp;.}
<div class=button2> <b>Name </b><input id=login name=name style="font-size:10pt; font-weight:bold; color:B1ABA7; background-color:1b1b1b; border:3px solid #888;" value="{.if|{.?name.}|{.?name.}|%user%.}" onfocus="javascript:refresh='false';" size="24% onblur="javascript:refresh='true';">
  <br / </a>
  <br / </a>

<div class=comment> <b>Text</b> <input  id=texto name=text style="font-size:10pt; font-weight:bold; color:B1ABA7; background-color:1b1b1b; border:3px solid #888;" onfocus="javascript:refresh='true';" size="117%  onchange="textsend();">
  <br / </a>
  {.repeat|9|&nbsp;.}<input type=submit>
  <br / </a>
  <br / </a>
</form>

{.repeat|9|&nbsp;.}<button onclick="Prefresh() ;">Refresh</button>
{.repeat|1|&nbsp;.}

<IMG alt="" src="/rotation.gif">

<select name="addbbcode18"  style="font-size:11pt;background-color:1b1b1b; border:3px solid #888;" size="1" onchange="javascript:addSmiley((this.value>'')?'<font color='+this.value+'>'+getSelectedText()+'</font>' : getselectedText()); this.value='';return(false);">
<option style="color:#B1ABA7; background-color: #1b1b1b" value="" class="genmed">Choose color</option>
<option style="color:white" value="white" class="genmed">White</option>
<option style="color:palegoldenrod" value="palegoldenrod" class="genmed">Palegoldenrod</option>
<option style="color:khaki" value="khaki" class="genmed">Khaki</option>   
<option style="color:yellow" value="yellow" class="genmed">yellow</option>
<option style="color:lightsalmon" value="lightsalmon" class="genmed">Lightsalmon</option>
<option style="color:salmon" value="salmon" class="genmed">Salmon</option>
<option style="color:Orange" value="Orange" class="genmed">Orange</option>
<option style="color:hotpink" value="hotpink" class="genmed">Hotpink</option>
<option style="color:violet" value="violet" class="genmed">Violet</option>
<option style="color:red" value="red" class="genmed">Red</option>
<option style="color:firebrick" value="firebrick" class="genmed">Firebrick</option>
<option style="color:yellowgreen" value="yellowgreen" class="genmed">Yellowgreen</option>
<option style="color:palegreen" value="palegreen" class="genmed">Palegreen</option>
<option style="color:seagreen" value="seagreen" class="genmed">Seagreen</option>
<option style="color:aquamarine" value="aquamarine" class="genmed">Aquamarine</option>
<option style="color:lightskyblue" value="lightskyblue" class="genmed">Lightskyblu</option>
<option style="color:mediumslateblue" value="mediumslateblue"class="genmed">Mediumslateblue</option>
<option style="color:blue" value="blue" class="genmed">Bleu</option>
<option style="color:darkslateblue" value="darkslateblue" class="genmed">Darkslateblue</option>
<option style="color:lightgray" value="lightgray" class="genmed">Lightgray</option>
<option style="color:gray" value="gray" class="genmed">Gray</option>
</select>

{.repeat|1|&nbsp;.}
<select name=addbbcode20 style="font-size:11pt; background-color:1b1b1b; border:3px solid #888;" size="1" onChange="javascript:addSmiley((this.value>'') ? '<font size='+this.value+'>'+getSelectedText()+'</font>' : getselectedText()); this.value=''; return(false);">
<option value="" class="genmed">Fonts size</option>
<option value="1" class="genmed">{.repeat|10|&nbsp;.}1</option>
<option value="2" class="genmed">{.repeat|10|&nbsp;.}2</option>
<option value="3" class="genmed">{.repeat|10|&nbsp;.}3</option>
<option value="4" class="genmed">{.repeat|10|&nbsp;.}4</option>
<option value="5" class="genmed">{.repeat|10|&nbsp;.}5</option>
<option value="6" class="genmed">{.repeat|10|&nbsp;.}6</option>
<option value="7" class="genmed">{.repeat|10|&nbsp;.}7</option>
</select>

{.repeat|3|&nbsp;.}
<button onClick="addSmiley(' <BR> '); return(false)">{.!icon_br.}<br></button>
<button onClick="addSmiley(' <HR COLOR=B1ABA7> '); return(false)">{.!icon_hr.}</button>
<button onClick="javascript:addSmiley('<CENTER>'+getSelectedText()+'</CENTER>'); return(false);">{.!icon_center.}</button>
<button onClick="javascript:addSmiley('<B>'+getSelectedText()+'</B>'); return(false);">{.!icon_bold.}</button>
<button onClick="javascript:addSmiley('<S>'+getSelectedText()+'</S>'); return(false);">{.!icon_strike.}</button>
<button onClick="javascript:addSmiley('<I>'+getSelectedText()+'</I>'); return(false);">{.!icon_italicize.}</button>
<button onClick="javascript:addSmiley('<U>'+getSelectedText()+'</U>'); return(false);">{.!icon_underline.}</button>
<button onClick="javascript:addSmiley('<BLINK>'+getSelectedText()+'</BLINK>'); return(false);">{.!icon_blink.}</button>


<HR COLOR="b1aba7">
<div class=button1>
<a href="http://www.rejetto.com/hfs/"><font color=gray><U><I> Chat on HFS 2.3 beta %build%</I></U></font></a>
{.repeat|22|&nbsp;.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_smiley.} '); return(false);">{.!icon_smiley.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_wink.} '); return(false);">{.!icon_wink.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_cheesy.} '); return(false)">{.!icon_cheesy.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_grin.} '); return(false)">{.!icon_grin.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_angry.} '); return(false);">{.!icon_angry.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_sad.} '); return(false);">{.!icon_sad.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_shocked.} '); return(false);">{.!icon_shocked.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_cool.} '); return(false);">{.!icon_cool.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_huh.} '); return(false);">{.!icon_huh.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_rolleyes.} '); return(false);">{.!icon_rolleyes.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_mrgreen.} '); return(false);">{.!icon_mrgreen.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_tongue.} '); return(false);">{.!icon_tongue.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_embarrassed.} '); return(false);">{.!icon_embarrassed.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_lipsrsealed.} '); return(false);">{.!icon_lipsrsealed.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_undecided.} '); return(false);">{.!icon_undecided.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_kiss.} '); return(false);">{.!icon_kiss.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_cry.} '); return(false);">{.!icon_cry.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_idea.} '); return(false);">{.!icon_idea.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_question.} '); return(false);">{.!icon_question.}
<a href="javascript:void(0);" onclick="addSmiley(' {.!icon_exclaim.} '); return(false);">{.!icon_exclaim.}
<a>

<div id="textsend"></div>
<div class=comment1> <U><b>%user%</b></U>
{.repeat|56|&nbsp;.}Date: %date% - Time: %time%

<HR COLOR="B1ABA7">
  <br / </a>
  <br / </a>
{.load|{.^chatfile.}  .}</div>

<script language="JavaScript" type="text/JavaScript">document.frm.texto.focus();</script>
  <br / </a>
  <br / </a>
  <br / </a>

<CENTER><IMG src=/smilhfs/blstencil.gif></CENTER>
  <br / </a>
  <br / </a>

</body>
</html>

[special:strings]
hr=HR
icon_hr=<IMG  src=/smilhfs/hr.gif>
br=BR
icon_br=<IMG  src=/smilhfs/BR.gif width=22 height=22>
underline=U
icon_underline=<IMG  src=/smilhfs/underline.gif>
italicize=I
icon_italicize=<IMG src=/smilhfs/italicize.gif>
strike=S
icon_strike=<IMG src=/smilhfs/strike.gif>
bold=B
icon_bold=<IMG src=/smilhfs/bold.gif>
blink=BLINK
icon_blink=<IMG src=/smilhfs/blink.gif>
center=CENTER
icon_center=<IMG src=/smilhfs/center.gif>

icon_smiley=<IMG src=/smilhfs/smiley.gif>
icon_wink=<IMG src=/smilhfs/wink.gif>
icon_cheesy=<IMG src=/smilhfs/cheesy.gif>
icon_grin=<IMG src=/smilhfs/grin.gif>
icon_angry=<IMG src=/smilhfs/angry.gif>
icon_sad=<IMG src=/smilhfs/sad.gif>
icon_shocked=<IMG src=/smilhfs/shocked.gif>
icon_cool=<IMG src=/smilhfs/cool.gif>
icon_huh=<IMG src=/smilhfs/huh.gif>
icon_rolleyes=<IMG src=/smilhfs/rolleyes.gif>
icon_mrgreen=<IMG src=/smilhfs/icon_mrgreen.gif>
icon_tongue=<IMG src=/smilhfs/tongue.gif>
icon_embarrassed=<IMG src=/smilhfs/embarrassed.gif>
icon_lipsrsealed=<IMG src=/smilhfs/lipsrsealed.gif>
icon_undecided=<IMG src=/smilhfs/undecided.gif>
icon_kiss=<IMG src=/smilhfs/kiss.gif>
icon_cry=<IMG src=/smilhfs/cry.gif>
icon_idea=<IMG src=/smilhfs/icon_idea.gif>
icon_question=<IMG src=/smilhfs/icon_question.gif>
icon_exclaim=<IMG src=/smilhfs/icon_exclaim.gif>
« Last Edit: December 26, 2008, 12:00:04 AM by SilentPliz »

Warp

  • Guest
Reply #4 on: December 25, 2008, 06:24:04 PM
Hi,
thank you for the supplied code.
Sure it is usefull for me and other.

For my page i like to create a small basic chat.
I'm a little bit lost with the problem described above.
I like to know if other HFS user successfully include macros in an external javascript file.
If so, there must be an error inside my code ...


Warp

Offline SilentPliz

  • Operator
  • Tireless poster
  • *****
    • Posts: 1298
  • ....... chut ! shh!
    • View Profile
Reply #5 on: December 25, 2008, 06:44:24 PM
Look at the templates of the team RAWR.
They use external files .Js for their templates.

http://www.rejetto.com/forum/index.php?topic=5456.0

It should miss numerical value on your macros. ???

Otherwise, the template that I posted is made from the Chat of rejetto which is a basic chat. The code is composed of macros:

<html>
<body>
{.if| {.and|{.?name.}|{.?text.} /and.} |{.\
{.append|chat.txt|<br>{.time.} --- <b>{.?name.}</b>&gt; {.?text.}
/append.}
/.} /if.}
<form name=frm>
Name <input name=name value="{.?name.}">
<p>Text <input name=text>
<p><input type=submit>
</form>
<script>document.frm.text.focus();</script>
<a href="{.get|url|text=.}">Refresh</a>

<hr>
{.load|chat.txt.}
</body>
</html>
« Last Edit: December 25, 2008, 06:50:15 PM by SilentPliz »

Warp

  • Guest
Reply #6 on: December 25, 2008, 07:03:50 PM
Hi,
before i post my problem i took a look into the RAWR template.
No macros in external .js file found.

What do you mean ?:
It should miss numerical value on your macros.


My basic chat (alpha) is still working.
http:
//warp2001.dyndns.org:44792
At the end the problem is a little bit cosmetic, because I like to put all javascript functions into an external .js file.


Warp

Offline rejetto

  • Administrator
  • Tireless poster
  • *****
    • Posts: 13523
    • View Profile
Reply #7 on: December 27, 2008, 12:14:03 AM
Quote from: Warp on December 25, 2008, 02:22:20 PM
<script language="JavaScript" type="text/javascript" src="/hfs/hfs.js"></script>

macros don't work in external files.
but you can <script src="/~hfs.js">

and then put the content of your file inside the template as

[hfs.js]
here goes the javascript content!




the browser will think it's an external file, and will cache the content (if that's what you meant to get)

Warp

  • Guest
Reply #8 on: December 27, 2008, 12:50:31 PM
Hi,
again thanks for the reply rejetto.

The reason for my question was to update a chat window only if the filesize of chat.txt changes.
It is not serious to update the chat window every second even if no new message was added.

Instead of using the "filesize macro" we can use javascript with document.lastModified.
In this case (which is only a workaround) we must also load chat.txt because document.lastModified works only with loaded documents.
This could be done in a hidden frame ...

Anyway i must find another solution.



Warp

Pages: 1