Ahatskindev
Infrastructure elements for AhatSkin
selected topics in Ahatskindev selected topics in Ahatskindev
topics related to Ahatskindev topics related to Ahatskindev
  • ...
Guests are welcome to view our materials. To subscribe, edit, view raw markup, etc., you'll need to register for an account. Accounts are free (and will always be free) - your involvement helps us directly and indirectly (by demonstrating that our work matters to our funders...) StartingPoints has more info.
Ahatskindev

Production Skin

Intro

AhatSkin is currently a fully functioning prototype implemented on top of NatSkin. As a result, the implementation is somewhat NatSkin-ish.

When a request is received, the page is constructed from a set of core templates plus an additional set of templates which depends on which script was invoked (view, edit, inspect, recover, attach, etc.) We use the ShorterUrlCookbook option in our twiki, so that the url for a page is http://twiki.csueastbay.edu/People/HilaryHolz, not http://twiki.csueastbay.edu/twiki/bin/view/People/HilaryHolz.

core templates

page 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="%LANG%" lang="%LANG%">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=%CHARSET%" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="generator" content="TWiki/NatSkin" /> %TMPL:P{"meta"}%
    <title>%TMPL:P{"title"}% - %WIKITOOLNAME%</title>
    <base href="%SCRIPTURL{view}%/%WEB%/%TOPIC%"></base>
%~~ IFDEFINEDTHEN{"%FAVICON%"}%
~~~   <link rel="icon" href="%FAVICON%" type="image/x-icon" />
~~~   <link rel="shortcut icon" href="%FAVICON%" type="image/x-icon" />
%~~ FIDEFINED%
~~~ %GETSKINSTYLE%
~~~ %TMPL:P{"javascript"}%
~~~ %TMPL:P{"styles"}%
  </head>
  <body class="ahatBody %TMPL:P{"bodyclass"}%">%TMPL:P{"body"}%</body>
</html>

body 

%TMPL:INCLUDE{"strings"}%
%TMPL:INCLUDE{"javascript"}%
%TMPL:INCLUDE{"activities"}%
~~~ %TMPL:DEF{"body"}%
<a name="PageTop" />
<table class="ahatPageBox" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>
~~~   %TMPL:P{"activities"}%
      <table class="ahatContentTable">
        <tr>
          <td class="ahatTopicFocus" rowspan="2" valign="top">
~~~         %WEBCOMPONENT{"ASOrganizeTopics"}%
~~~       </td>
          <td class="ahatContent" valign="top">
            %WEBCOMPONENT{"ASTopicActions"}%
~~~         %BREADCRUMBS{exclude="%TOPIC%"
                type="location"
                header="<span class=\"ahatBreadCrumb\">"
                format="<span class=\"ahatActivityTextColors\">[[$webtopic][$name]]</span>"
                topicformat="<span class=\"ahatTopicTextColors\">[[$webtopic][$name]]</span>"
                separator="<span class=\"ahatBreadcrumbSep\">&nbsp;&#187;&nbsp;</span>"
                footer="</span>"
            }%
            <div class="ahatContent">
              %STARTALIASAREA% %TMPL:P{"content"}% %STOPALIASAREA%
            </div>
          </td>
          <td class="ahatToolFocus" rowspan="2" valign="top">
~~~         %WEBCOMPONENT{"ASOrganizeResources"}%
~~~       </td>
        </tr><tr> <!-- ahatTopicFocus and ahatToolFocus have rowspan 2 -->
          <td class="natMainFooter" valign="bottom">
~~~         %TMPL:P{"contentfooter"}%
~~~         %WEBCOMPONENT{"ASTopicActions"}%
          </td>
        </tr>
      </table>
      <table class="ahatDisseminate">
        <tr><td>
          %WEBCOPYRIGHT%
          %IFDEFINEDTHEN{"$percntWEBSYNDICATION$percnt"}%
            %$nopWEBSYNDICATION%
          %ELSEDEFINED%
            Syndicate this site
            <a class="natFeedIcon" href="%SCRIPTURL{"view"}%/%WEB%/WebRss">RSS</a><a class="natFeedIcon" href="%SCRIPTURL\
{"view"}%/%WEB%/WebAtom">ATOM</a>
          %FIDEFINED%
        </td></tr>
      </table>
    </td>
  </tr>
</table><a name="PageBottom" />%TMPL:END%

javascript 

%TMPL:DEF{"defaultjavascript"}% <!-- template: javascript.ahattmp.nat.tmpl -->
  <script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/TWikiJavascripts/twiki.js"></script>
  <script type="text/javascript">
    $(function() {
      %TMPL:P{"onloadscript"}%
      $(".natMainContents .twikiTable, .natMainContents .mwTable")
        .not($(".twikiTable .twikiTable, .mwTable .mwTable", this))
    });
  </script>%TMPL:END%
%TMPL:DEF{"javascript"}% %TMPL:P{"defaultjavascript"}% %TMPL:END%

activities 

%TMPL:DEF{"activities"}%
  <table class="ahatActivities" id="ahatActivities">
  <tr>
    <td class="ahatCurrentActivity">%TMPL:P{"currentactivity"}%</td>
  </tr><tr>
    <td class="ahatActivityList" valign="top">%TMPL:P{"activitymap"}%</td>
  </tr>
</table>%TMPL:END%

%TMPL:DEF{"currentactivity"}%
  <div class="ahatActivityTitle">
    <a
~~~   href="%IFDEFINED{"%WEBLOGOURL%"
~~~           then="%WEBLOGOURL%"
~~~           else="%WIKILOGOURL%"
~~~         }%"
~~~   title="%WEBLOGOALT%"
~~~   accesskey="h">%NATWEBLOGO%
~~~ </a>
  </div>
  <div class="ahatActivitySlogan">%SITEMAPWHAT%</div>
  <div class="ahatBroadcastMessageLink">
    %IFDEFINEDTHEN{"$percntBROADCASTMESSAGE$percnt"}%
      %$nopTWISTYBUTTON{
   id="broadcastmessage"
   mode="span"
   prefix="<span class=\"ahatBroadcastToggle ahatActivityTextColor\">"
        suffix="</span>"
        remember="on"
        firststart="show"
        showlink="read announcement"
        hidelink="hide announcement"
        showimgright="%ICONURLPATH{"toggleopenleft-small"}%"
        hideimgright="%ICONURLPATH{"toggleclose-small"}%"
      }%
    %FIDEFINED%
  </div>%TMPL:END%

%TMPL:DEF{"broadcast"}%
  %IFDEFINEDTHEN{"$percntBROADCASTMESSAGE$percnt"}%
    %$nopTWISTYTOGGLE{
      id="broadcastmessage"
      mode="div"
      firststart="show"
      remember="on"
    }%
    <div class="ahatBroadcastMessage"> $test </div>
    %$nopENDTWISTY%
  %FIDEFINED% %TMPL:END%

%TMPL:DEF{"activitymap"}%
~~~ %FLEXWEBLIST{
      webs="publiccurrent"
      exclude="(%USERSWEB%|.*dev|Sandbox|%SYSTEMWEB%|Trash|TestCases)(/\w+)?"
      header="<ul class=\"ahatActivityList\">
*~~             <li class=\"ahatActivityList ahatActivityListLabel\">
*~~               Activity webs:
*~~             </li>"
      footer="  </li>
*~~           </ul>"
      format="<li class=\"ahatActivityList\">
*~~             %MAKETEXT{"<a class='ahatActivityList' href='[_1]'>$name</a>" args="%SCRIPTURLPATH{"view"}%/$web" }%"
      separator="</li>"
      selection="%BASEWEB%"
      markerformat="<li class=\"ahatActivityList\">
*~~                   %MAKETEXT{"<a class='ahatActivityListAlert' href='[_1]'>$name</a>" args="%SCRIPTURLPATH{"view"}%/$web" }%"
    }%
~~~ %FLEXWEBLIST{
      include="(%USERSWEB%|.*dev|Sandbox|%TWIKIWEB%)(/\w+)?"
      exclude="(Trash|TestCases)(/\w+)?"
      header="<ul class=\"ahatInfrastructureActivityList\">
*~~             <li class=\"ahatActivityList ahatActivityListLabel\">
*~~               Infrastructure webs:
*~~             </li>"
      footer="  </li>
*~~           </ul>"
      format="<li class=\"ahatActivityList\">
*~~             %MAKETEXT{"<a class='ahatInfrastructureActivityList' href='[_1]'>$name</a>" args="%SCRIPTURLPATH{"view"}%/$web" }%"
      separator="</li>"
      selection="%BASEWEB%"
      markerformat="<li class=\"ahatActivityList\">
*~~                   %MAKETEXT{"<a class='ahatInfrastructureActivityListAlert' href='[_1]'>$name</a>" args="%SCRIPTURLPATH{"view"}%/$web" }%"
    }%
~~~ <ul class="ahatSiteMapLabel">
      <li class="ahatSiteMapLabel">
*~~     %MAKETEXT{"<a class='ahatSiteMapLabel' href='[_1]'>SiteMap</a>" args="%SCRIPTURLPATH{"view"}%/Ahatwiki/SiteMap" }%
      </li>
    </ul>%TMPL:END%

strings 

%TMPL:DEF{"LOG_IN"}%%MAKETEXT{"Login"}%%TMPL:END%
%TMPL:DEF{"LOG_OUT"}%%MAKETEXT{"Logout"}%%TMPL:END%
%TMPL:DEF{"EDIT"}%%MAKETEXT{"Edit"}%%TMPL:END%
%TMPL:DEF{"EDIT_HELP"}%%MAKETEXT{"Edit this topic"}%%TMPL:END%
%TMPL:DEF{"ATTACH"}%%MAKETEXT{"Attach"}%%TMPL:END%
%TMPL:DEF{"ATTACH_HELP"}%%MAKETEXT{"Attach image or document to this topic"}%%TMPL:END%
%TMPL:DEF{"MOVE"}%%MAKETEXT{"Move"}%%TMPL:END%
%TMPL:DEF{"MOVE_HELP"}%%MAKETEXT{"Move or rename this topic"}%%TMPL:END%
%TMPL:DEF{"ADD_FORM"}%%MAKETEXT{"Add form"}%%TMPL:END%
%TMPL:DEF{"ADD_FORM_HELP"}%%MAKETEXT{"Add a new form to <nop>[_1]" args="%WEB%.%TOPIC%"}%%TMPL:END%
%TMPL:DEF{"CHANGE_FORM"}%%MAKETEXT{"Change form"}%%TMPL:END%
%TMPL:DEF{"CHANGE_FORM_HELP"}%%MAKETEXT{"Change the current form of <nop>[_1]" args="%WEB%.%TOPIC%"}%%TMPL:END%
%TMPL:DEF{"NEW"}%%MAKETEXT{"New"}%%TMPL:END%
%TMPL:DEF{"NOTHING_FOUND"}%%MAKETEXT{"Nothing found. Try again!"}%%TMPL:END%

script templates

What templates are needed for a script varies a lot by script.

view 

%TMPL:INCLUDE{"page"}% %TMPL:INCLUDE{"body"}%
%TMPL:DEF{"title"}% %IFDEFINED{"%PAGETITLE%" then="$test" else="%TOPIC% &lt; %WEB%" glue="off"}% %TMPL:END%

%TMPL:DEF{"meta"}%
  %HTTP_EQUIV_ON_VIEW%
  %IFDEFINED{"%METAKEYWORDS%" then="<meta name=\"keywords\" content=\"$test\" />$n<meta http-equiv=\"keywords\" content=\"$test\" />"}%
  %IFDEFINED{"%METAAUTHOR%" glue="off" then="<meta name=\"author\" content=\"$test\" />"}%
  %IFDEFINED{"%METADESCRIPTION%" then="<meta name=\"description\" content=\"$test\" />"}%
%TMPL:END%

%TMPL:DEF{"content"}%<!-- view.ahattmp.nat.tmpl (content) --> %TEXT%
%META{"form"}% %TMPL:END%

%TMPL:DEF{"contentfooter"}% <!-- view.ahattmp.nat.tmpl (contentfooter) -->
~~~ %IFDEFINED{"$percntMETA{\"attachments\"}$percnt" then="<div class=\"natTopicAttachments\"> $test </div>"}%
~~~ <div class="natRevision"> %REVINFO% </div> %TMPL:END%

edit 

%TMPL:INCLUDE{"page"}% %TMPL:INCLUDE{"body"}% <!-- template: edit.ahattmp.nat.tmpl -->
%TMPL:DEF{"templatescript"}%%TMPL:P{"templatejavascript"}%%TMPL:END%
%TMPL:DEF{"script:skintemplate:edit"}%%TMPL:P{"templatejavascript"}%%TMPL:END%
%TMPL:DEF{"editjavascript"}%<!-- template:editjavascript.natedit.tmpl -->
<script type="text/javascript">
function submitEditForm(script, action) {
  $("#savearea").val($("#topic").val());
  $(".natEditBottomBar a").each(function () {
    this.blur();
  });
  if (typeof(beforeSubmitHandler) != 'undefined') {
    beforeSubmitHandler(script, action);
  }
  if (action == 'add form') {
    document.main.elements['submitChangeForm'].value = action;
  }
  document.main.elements['action_preview'].value = '';
  document.main.elements['action_save'].value = '';
  document.main.elements['action_checkpoint'].value = '';
  document.main.elements['action_addform'].value = '';
  document.main.elements['action_replaceform'].value = '';
  document.main.elements['action_cancel'].value = '';
  document.main.elements['action_' + action].value = 'foobar';
  document.main.submit();
}
</script>
<!-- //editjavascript -->%TMPL:END%
%TMPL:DEF{"nateditjavascript"}%<!-- jqueryscript -->
<script type="text/javascript">
$(function() {
  $("#topic").natedit({
    autoMaxExpand:true,
    signatureMarkup: ['-- ', '%WIKIUSERNAME%', ' - %DATE%'],
    gotImagePlugin: %IF{"context ImagePluginEnabled" then="true" else="false"}%,
    gotMathModePlugin: %IF{"context MathModePluginEnabled" then="true" else="false"}%
  });
  var savetext = $("#savearea").val();
  if (savetext) {
    $("#topic").val(savetext);
  }
});
</script>
<!-- //jqueryscript -->%TMPL:END%
%TMPL:DEF{"templatejavascript"}%<!-- templatejavascript -->
<script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/NatEditContrib/jquery.natedit.js"></script>
<script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/NatEditContrib/edit.js"></script>
<script type="text/javascript">
$(function() {
  window.setTimeout(fixHeightOfPane, 1);
});
</script>
%TMPL:P{"nateditjavascript"}%
%TMPL:P{"editjavascript"}%
<!-- //templatejavascript -->%TMPL:END%
%TMPL:DEF{"editjavascript"}% <!-- editjavascript.ahattmp.nat.tmpl -->
  <script type="text/javascript">
    function submitEditForm(script, action) {
      if (action == 'add form') {
        document.EditForm.elements['submitChangeForm'].value = action;
      }
      document.EditForm.elements['action_preview'].value = '';
      document.EditForm.elements['action_save'].value = '';
      document.EditForm.elements['action_checkpoint'].value = '';
      document.EditForm.elements['action_addform'].value = '';
      document.EditForm.elements['action_replaceform'].value = '';
      document.EditForm.elements['action_cancel'].value = '';
      document.EditForm.elements['action_' + action].value = 'foobar';
      document.EditForm.submit();
  }
  </script>%TMPL:END%
%TMPL:DEF{"javascript"}%%TMPL:P{"defaultjavascript"}%%TMPL:P{"templatejavascript"}%%TMPL:P{"editjavascript"}%%TMPL:END%

%TMPL:DEF{"bottomtopicactions"}% <!-- template: edittoolbar.ahattmp.nat.tmpl -->
  <div class="natEditBottomBar">
    <ul>
~~~   %TMPL:P{"savebutton"}%
~~~   %TMPL:P{"checkpointbutton"}%
~~~   %TMPL:P{"previewbutton"}%
~~~   %TMPL:P{"cancelbutton"}%
~~~   %TMPL:P{"forcenewrevision"}%
    </ul>
  </div> %TMPL:END%

%TMPL:DEF{"savebutton"}% <li class="natEditSaveButton"> <a id="save" accesskey="s" href="javascript:submitEditForm('save', 'save')" title="Save and exit"> <span>%MAKE\
TEXT{"Save"}%</span> </a> </li> %TMPL:END%

%TMPL:DEF{"checkpointbutton"}% <li class="natEditCheckpointButton"> <a id="checkpoint" accesskey="w" href="javascript:submitEditForm('save', 'checkpoint')" title="Sav\
e and continue editing"> <span>Save and Continue</span> </a> </li> %TMPL:END%

%TMPL:DEF{"previewbutton"}% <li class="natEditPreviewButton"> <a id="preview" accesskey="p" href="javascript:submitEditForm('preview', 'preview')" title="Preview your\
 changes"> <span>Preview</span> </a> </li> %TMPL:END%

%TMPL:DEF{"formbutton"}% %FORMBUTTON{"<li class=\"natEditFormButton\"><a href=\"$url\" accesskey=\"f\" title=\"$action\">$action</a></li>"}% %TMPL:END%

%TMPL:DEF{"cancelbutton"}% <li class="natEditCancelButton"> <a id="cancel" accesskey="c" href="javascript:submitEditForm('save', 'cancel')" title='%MAKETEXT{"Abandon \
changes and exit"}%'> <span>%MAKETEXT{"Cancel"}%</span> </a> </li> %TMPL:END%

%TMPL:DEF{"forcenewrevision"}% <li class="natEditForceNewRevision"> <label for="forcenewrevision"> <input type="checkbox" title="Creates a new topic revision when sav\
ing" id="forcenewrevision" name="forcenewrevision" %FORCENEWREVISIONCHECKBOX% /> %MAKETEXT{"New revision"}% </label> </li>%TMPL:END%

%TMPL:DEF{"edittools"}%<ul class="natEditEditTools"> %TMPL:P{"formbutton"}% %TMPL:P{"previewbutton"}% %TMPL:P{"checkpointbutton"}% </ul>%TMPL:END%

%TMPL:DEF{"editstyles"}%
  %TMPL:P{"stylesscreen"}%
  <style type="text/css" media="all">
    @import url("%PUBURLPATH%/%TWIKIWEB%/NatEditContrib/styles.css");
    @import url("%PUBURLPATH%/%TWIKIWEB%/NatEditContrib/%IF{"defined NATEDIT_THEME" then="%NATEDIT_THEME%" else="default"}%/styles.css");
  </style> %TMPL:END%
%TMPL:DEF{"styles"}% %TMPL:P{"defaultstyles"}% %TMPL:P{"editstyles"}% %TMPL:END%

%TMPL:DEF{"bodyclass"}%natEditBody%TMPL:END%

%TMPL:DEF{"meta"}% %HTTP_EQUIV_ON_EDIT% %TMPL:END%

%TMPL:DEF{"title"}%%TOPIC% - (%MAKETEXT{"edit(ahattmp)"}%)%TMPL:END%

%TMPL:DEF{"onloadscript"}%
  txtarea = document.EditForm.text; // tell natedit where our textarea is
  document.EditForm.text.focus();
%TMPL:END%

%TMPL:DEF{"locator"}% <span class="natSep">&middot;</span>[[WebHome][%WEB%]]<span class="natSep">&middot;</span>  <b>%TOPIC%</b>%TMPL:END%

%TMPL:DEF{"revCommentPluginOptions"}%%IF{ "context RevCommentPluginEnabled" then="<div class='revComment'><label for='comment'>Summary of changes</label> <input class\
='twikiEditComment twikiInputField' size='50' type='text' name='comment' id='comment' /></div><!--/revComment-->" else=""}%%TMPL:END%

%TMPL:DEF{"formstart"}% <!-- formstart -->
  <input type="hidden" name="action_addform" value="" />
  <input type="hidden" name="action_cancel" value="" />
  <input type="hidden" name="action_checkpoint" value="" />
  <input type="hidden" name="action_preview" value="" />
  <input type="hidden" name="action_replaceform" value="" />
  <input type="hidden" name="action_save" value="" />
  <input type="hidden" name="cmd" value="%CMD%" />
  <input type="hidden" name="cover" value="%URLPARAM{"cover"}%" />
  <input type="hidden" name="formtemplate" value="%FORMTEMPLATE%" />
  <input type="hidden" name="templatetopic" value="%TEMPLATETOPIC%" />
  <input type="hidden" name="newtopic" value="%NEWTOPIC%" />
  <input type="hidden" name="originalrev" value="%ORIGINALREV%" />
  <input type="hidden" name="redirectto" value="%REDIRECTTO%" />
  <input type="hidden" name="skin" value="%URLPARAM{"skin"}%" />
  <input type="hidden" name="submitChangeForm" value="" />
  <input type="hidden" name="forcenewrevision" value="%URLPARAM{"forcenewrevision"}%" />
  <input type="hidden" name="rev" value="%URLPARAM{"rev"}%" />
  <input type="hidden" name="onlywikiname" value="1" /> %TMPL:P{"edittoolbar"}% %TMPL:END%

%TMPL:DEF{"textarea"}%<textarea id="topic" class="natEditTextArea" name="text" style="width: 100%;" rows="50" cols="300">%TEXT%</textarea>%TMPL:END%

%TMPL:DEF{"formfields"}%%FORMFIELDS%%TMPL:END%

%TMPL:DEF{"editoptions"}%
  %TWISTY{id="editoptions" mode="div" showlink="More" hidelink="Less" remember="on" firststart="show"}%
    <div class="natSubmitOptions">
      <h3>Options</h3>
        <b><label for="parent">%MAKETEXT{"Parent topic"}%:</label></b>
        <input type="text" id="parent" name="topicparent" size="40" value="%TOPICPARENT%" />
    </div>
    <div class="natEditHelp">
      %INCLUDE{"%IF{"defined NATEDIT_HELPTEXT" then="%NATEDIT_HELPTEXT%" else="%TWIKIWEB%.NatEditHelpText"}%"}% </li></ul>
    </div>
  %ENDTWISTY% %TMPL:END%

%TMPL:DEF{"content"}%
  <div class="natEdit">
    <form name="EditForm" action="%SCRIPTURLPATH{"save"}%/%WEB%/%TOPIC%" method="post">
      %TMPL:P{"formstart"}% %TMPL:P{"textarea"}% %TMPL:P{"formfields"}% %TMPL:P{"bottomtopicactions"}% %TMPL:P{"editoptions"}% %TMPL:P{"editform"}%
    </form>
  </div>%TMPL:END%

search

Development Skin

-- HilaryHolz - 27 Feb 2009

Login Register
Search
selected tools for Ahatskindev selected tools for Ahatskindev
Reference Desk
r1 - 26 Feb 2009 - 17:01:58 - HilaryHolz
Guests are welcome to view our materials. To subscribe, edit, view raw markup, etc., you'll need to register for an account. Accounts are free (and will always be free) - your involvement helps us directly and indirectly (by demonstrating that our work matters to our funders...) StartingPoints has more info.
This site is powered by the TWiki collaboration platformCopyright 1999-2009 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Ahatwiki? Send feedback Syndicate this site RSSATOM