Source: site.view [edit]
Function name: siteeditpage
Arguments: ctype,module,usecache,scrollToRow
Description: Template form for edit page ScrollTo position sent in optional argument
Page type: html
Render function:  
Module: siteutil

Page source:

<html lang="en">
	
	<head>
        <title>Collaborama</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <link rel="stylesheet" type="text/css" href="/webl/WubHub_DoIt?cmdline=basiccss"/>				
		<link rel="stylesheet" href="/webl/WubHub_DoIt?cmdline=threeDcss">
		<link rel="stylesheet" href="/webl/WubHub_DoIt?cmdline=accordionCSS">      
 		<script src="http://codemirror.net/lib/codemirror.js"></script>
  		<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
  		<script src="http://codemirror.net/addon/search/searchcursor.js"></script>
  		<script src="http://codemirror.net/addon/search/search.js"></script>  
  
  		<script src="/static/cm/mode/wubhub/wubhub.js"></script>
  		<script src="/static/cm/mode/xml/xml.js"></script>
  		<script src="/static/cm/mode/javascript/javascript.js"></script>
  		<script src="/static/cm/mode/css/css.js"></script>
  		<script src="/static/cm/mode/htmlmixed/htmlmixed.js"></script>
  
    <style type="text/css">
      .CodeMirror {border: 1px solid grey; font-size:13px;background: #FFFFFF}
    </style>   

    <style type="text/css">      
      .CodeMirror-fullscreen {
        display: block;
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        z-index: 9999;
      }

      .link-url {
        text-decoration:  underline;
        font-weight:      bold;
        color: blue;
        cursor: pointer;
      }
        
      .folded-url {
        display: inline-block;
        background: #46d5ff;
        border: solid 1px #2e8da9;
        color: white;
        font-weight: bold;
        cursor: pointer;
        border-radius: 10px;
        padding: 2px 6px;
        font-size: 80%;
        font-family: "helvetica neue", helvetica, arial, sans-serif;
      }
     </style>
      
	</head>
	
    <body onload='document.forms.wubhub.cmdline.focus(); setContentMode("<webl>ctype;</webl>");'>

		<div class="meny">
          <webl>Markup(WubCall("collabSidebar", []));</webl>      
		</div>

		<div class="meny-arrow"></div>

		<div class="meny-contents">
			<article>
              
<div id="header">

<div id="logo">
  <a href="/webl/WubHub_DoIt?cmdline=home"><img src="/static/clogo-white.png" height="30" alt="Collaborama">Collaborama</a>
</div>

<div id="cmdline">
<form name="wubhub" action="/webl/WubHub_DoIt" method="get">
  <input size="65" name="cmdline" title="Enter command">
  <input type="submit" value="Enter" title="Execute command">
</form>
</div>

<div id="navbar">
<ul>
  <li><a href="/webl/WubHub_DoIt?cmdline=site.about">About</a></li>
  <li><a href="/webl/WubHub_DoIt?cmdline=site.help">Help</a></li>
  <li><a href="/webl/WubHub_DoIt?cmdline=site.contact">Contact</a></li>
</ul>

</div>
</div>
            
<form action="/webl/WubHub_SaveFunction" method="post">
              
<div id="content">        
  <div id="content-header">
  </div>        
  <div id="main-text">
      <table width="100%">
        <tbody>
        <tr>
          <td>Function:</td>
          <td>
	    <select name="module">
               <webl>
var SelectedOption = fun(item, desired)
   if (item == desired) then
       return ` selected="true"`
   else
       return " "
   end
end;

// -------------------------------------------------------------------------
// Returns HTML listing leagal module options for a user
// -------------------------------------------------------------------------
export var LegalModuleOptions = fun(module)
   var s = "";
   every m in Wub_WritableModules() do
      s = s + "<option" + SelectedOption(m,module) + ` value="` + m + `">` + m + "</option>\n"
   end;
   return s;
end;
                  LegalModuleOptions(module);
               </webl>
            </select>                        
            <input name="name" value="%name%" size="30" title="Name of the function"/>
            Args: <input name="arglist" value="%arglist%" size="45" title="Comma-separated list of arguments"/>
            &nbsp;
            <a href="/webl/WubHub_DoIt?cmdline=edit(%module%.%name%.<webl>"%"+"prevVersion%"</webl>)">&lt;&lt;</a> Ver. %version% 
            <a href="/webl/WubHub_DoIt?cmdline=edit(%module%.%name%.<webl>"%"+"nextVersion%"</webl>)">&gt;&gt;</a>
            
          </td><td align="right">
             <input name="version" value="%version%" type="hidden" size="30"/>
             <input name="created" value="%created%" type="hidden" size="30"/>
             <input name="createdby" value="%createdby%" type="hidden" size="30"/>
             <input name="modified" value="%modified%" type="hidden" size="30"/>
             <input name="modifiedby" value="%modifiedby%" type="hidden" size="30"/>
             <input name="oldtags" value="<webl>`%old` + `tags%`</webl>" type="hidden" size="30"/>
             <input name="oldflags" value="<webl>`%old` + `flags%`</webl>" type="hidden" size="30"/>
             <input name="oldspecialtags" value="<webl>`%old` + `specialtags%`</webl>" type="hidden" size="30"/>

             <input type="submit" value="SAVE">
          
          </td>
        </tr>
        <tr>
          <td valign="top">Description: </td>
          <td><textarea name="description" title="Brief synopsis of function">%description%</textarea></td>
        </tr>
        <tr>
          <td>Page type:
          </td>
          <td>
<webl>
  if !(ctype member ["alias", "url", "webl", "javascript", "snippet", "html", "text"]) then
   ctype = "snippet";
end;
var cattr = fun(b)
   if b then `checked="checked"` else "" end;
end;
var c1 = cattr(ctype=="url");
var c2 = cattr(ctype=="webl");
var c7 = cattr(ctype=="javascript");
var c3 = cattr(ctype=="snippet");
var c4 = cattr(ctype=="html");
var c5 = cattr(ctype=="text");
var c6 = cattr(ctype=="alias");
`<input type="radio" name="ctype" onchange="setContentMode('alias');" value="alias"`    + c6 + `>Alias
<input type="radio" name="ctype" onchange="setContentMode('url');" value="url"`     + c1 + `>URL
<input type="radio" name="ctype" onchange="setContentMode('webl');" value="webl"`    + c2 + `>WebScript
<input type="radio" name="ctype" onchange="setContentMode('javascript');" value="javascript"`    + c7 + `>JavaScript
<input type="radio" name="ctype" onchange="setContentMode('snippet');" value="snippet"` + c3 + `>HTML snippet
<input type="radio" name="ctype" onchange="setContentMode('html');" value="html"`    + c4 + `>HTML page
<input type="radio" name="ctype" onchange="setContentMode('text');" value="text"`    + c5 + `>Text/data
`
</webl>
          </td>
          <td align="right"><small>F3-fullscreen</small></td>
        </tr>
        </tbody>
     </table>
  </div>    
  
  <textarea id="exec" name="exec" title="Text, data, or source code">%exec%</textarea>
  
  <script>

    var editor = CodeMirror.fromTextArea(document.getElementById("exec"), {
        lineNumbers: true,
        lineWrapping: true,
        extraKeys: {
        "F3": function(cm) {
          setFullScreen(cm, !isFullScreen(cm));
        },
        "Esc": function(cm) {
          if (isFullScreen(cm)) setFullScreen(cm, false);
        } 
      }
     });

     function setContentMode(val)
     {
        if (val == "webl")
           editor.setOption("mode", "wubhub");
       else if (val == "text")
           editor.setOption("mode", "text/plain");
       else if (val == "javascript")
           editor.setOption("mode", "text/javascript");
       else 
           editor.setOption("mode", "text/html");
     }      
   
    
     function scanRange(cm, from, to) {
        from = from && from.line || 0
        to = to && to.line || cm.lineCount()
        for (var line=from; line<=to; line++) {
           scanLine(cm, line)
        }
     }
    
     function scanLine(cm, lineNumber) {
         var text = cm.getLine(lineNumber);
         if (text != undefined) {
            var PREFIX = 'URL[';
            var SUFFIX = ']';
            var SEPARATOR = "|";
            var start = text.indexOf(PREFIX)
            if (start >= 0) {
                var end = text.indexOf(SUFFIX, start+PREFIX.length)
                var cCol = cm.getCursor().ch;
                var cRow = cm.getCursor().line;
                var cursorInSpan = ((cRow == lineNumber) && (cCol >= start) && (cCol <= end));
                if (end >= 0 && (!cursorInSpan)) {
                    var sep = text.indexOf(SEPARATOR, start+PREFIX.length)
                    var label = "LINK";
                    var href = "";
                    if (sep >= 0) {
                      label = text.substring(start + PREFIX.length, sep).trim();
                      href = text.substring(sep+1, end).trim();
                    } else {
                      href = text.substring(start + PREFIX.length, end).trim();
                    }
                    insertWidget(cm,
                        CodeMirror.Pos(lineNumber, start),
                        CodeMirror.Pos(lineNumber, end + PREFIX.length),
                        label,
                        href
                    );
                }
            }
         }
     }
  
     function makeDom(tag) {
        var element = tag ? document.createElement(tag) : document.createDocumentFragment()
        for (var i=1; i<arguments.length; i++) {
            var arg = arguments[i]
            if (arg) {
                if (typeof arg !== 'object') {
                    arg = document.createTextNode(arg.toString())
                }
                if (arg.nodeType) {
                    element.appendChild(arg)
                } else {
                    Object.keys(arg).forEach(function (key) {
                        element.setAttribute(key, arg[key])
                    })
                }
            }
        }
        return element
     }
  
     function insertWidget(cm, from, to, label, url) {
         var dom = makeDom('span', {class:'link-url'}, label)
 
         cm.markText(from, to, {
             replacedWith: dom,
             clearOnEnter: true
             });
 
         CodeMirror.on(dom, "mousedown", function() {
           var r=confirm("Navigate to " + label + "?");
           if (r==true) {
              window.location.href = url;
           }           
          });
     }
   
    function isFullScreen(cm) {
      return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
    }
    function winHeight() {
      return window.innerHeight || (document.documentElement || document.body).clientHeight;
    }
    function setFullScreen(cm, full) {
      var wrap = cm.getWrapperElement();
      if (full) {
        wrap.className += " CodeMirror-fullscreen";
        wrap.style.height = winHeight() + "px";
        document.documentElement.style.overflow = "hidden";
      } else {
        wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
        wrap.style.height = "";
        document.documentElement.style.overflow = "";
      }
      cm.refresh();
    }
    CodeMirror.on(window, "resize", function() {
      var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
      if (!showing) {
         editor.getWrapperElement().style.height = (winHeight() - 400) + "px";
      } else {
         showing.CodeMirror.getWrapperElement().style.height = winHeight() + "px";
      }
    }); 
  
  // Call it the first time
    editor.getWrapperElement().style.height = (winHeight() - 400) + "px";
 
    editor.on('change', function(cm, changeObj) {
       for (var line=changeObj.from.line; line<=changeObj.to.line; line++) {
           scanLine(cm, line)
       }
    })
    
    editor.on("cursorActivity", function(cm) {
       var cLine = cm.getCursor().line;
       scanLine(cm, cLine);
       scanLine(cm, cLine-1);
       scanLine(cm, cLine+1);
    })
    
    editor.on("gutterClick", function(cm, n) {
      var url = window.location.href;
      if (url.substring(url.length-1) == ")") {
         url = url.substring(0, url.length-1) + ">" + n + ")";
        } else {
         url = url + ">" + n;
      }
      url = "URL[%name%|" + 
               url + "]";
      window.prompt ("Copy to clipboard: Ctrl+C, Enter", url);
    });
 
    scanRange(editor);
    // Go to last line in system
    editor.setCursor(editor.lineCount(), 0);
    // The scroll up to requested line
    editor.scrollIntoView(%scrollToRow%-1, 0);
    
  
</script>
 
  <div id="main-text">
  
     <table>
       <tbody>  
        <tr>
          <td>Render function: </td>
          <td><input name="render" value="%render%" size="25" title="Specify function to render result, or leave blank for default behavior."/> </td>
          <td>
          Test function:
          <input name="test" value="%test%" size="25" title="Specify optional unit test function that returns a boolean.  May be left blank."/></td>
        </tr>

        <tr>
          <td>Tags:</td>
          <td><input name="tags" value="%tags%" size="45" title="Specify a comma-separated list of tags. Tags are user-defined, searchable mechanisms for classifying functions.  May be left blank."/> </td>
          <td> Flags:
          <input name="flags" value="%flags%" size="45" title="Specify a comma-separated list of flags.  Flags are special tags used in some way by other WubHub functions (e.g. 'test' is used to indicate a unit test function).  May be left blank."/></td>
        </tr>
        <tr>
          
          <td>
<webl>

var cattr = fun(b)
   if b then `checked="checked"` else "" end;
end;
var c1 = cattr(usecache=="usecache");

`<input type="checkbox" name="usecache" value="usecache" ` + c1 + `title="If selected, will save results for each arg combo to a cache and return results from cache before executing function.  This is GLOBAL across all users, so only use this as appropriate.">
   Cache results
 `;
</webl>  &nbsp; &nbsp;
          </td><td>
            Expiration date:
            <input name="cacheexpire" value="%cacheexpire%" size="22" title="Cache expiration date: use format '11/02/07 4:12 pm'"/> &nbsp; &nbsp;

           </td><td>
            Refresh rate:
            <input name="cacherefreshrate" value="%cacherefreshrate%" size="20" title="Cache refresh rate: use values such as '1W' (week), '1D' (day), or '1H' (hour) or combinations of these, such as '3D 2H'.  Note: refreshing will run in a background thread as the ANONYMOUS user, so only use for publicly-accessible functions."/>

          </td><td align="right">  [<a href="/webl/WubHub_DoIt?cmdline=site.terms">Terms</a>]</td>
        </tr>
      </tbody>
    </table>        
  </div>
</div>
</form>  

<div id="footer">
</div>        
			</article>
</div>        

		<script src="http://lab.hakim.se/meny/js/meny.min.js"></script>
		<script>
			// Create an instance of Meny
			var meny = Meny.create({
				// The element that will be animated in from off screen
				menuElement: document.querySelector( '.meny' ),

				// The contents that gets pushed aside while Meny is active
				contentsElement: document.querySelector( '.meny-contents' ),

				// [optional] The alignment of the menu (top/right/bottom/left)
				position: Meny.getQuery().p || 'left',

				// [optional] The height of the menu (when using top/bottom position)
				height: 200,

				// [optional] The width of the menu (when using left/right position)
				width: 260,

				// [optional] Distance from mouse (in pixels) when menu should open
				threshold: 40
			});

			// API Methods:
			// meny.open();
			// meny.close();
			// meny.isOpen();
			
			// Events:
			// meny.addEventListener( 'open', function(){ console.log( 'open' ); } );
			// meny.addEventListener( 'close', function(){ console.log( 'close' ); } );

			// Embed an iframe if a URL is passed in
			if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
				var contents = document.querySelector( '.meny-contents' );
				contents.style.padding = '0px';
				contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
			}
		</script>

	</body>
</html>