mason/util/workflow.mas

   1 %# Generates a workflow component
   2 <%args>
   3   $id
   4 </%args>
   5
   6 %# Initializes shared variables.
   7 <%shared>
   8   my $loadstyle = 1;
   9   my @titles = ();
  10   my @contents = ();
  11   my $pending = "";
  12   my $complete = "Complete!";
  13 </%shared>
  14
  15 %# Clears shared variables from previous uses.
  16 <%init>
  17   @titles = ();
  18   @contents = ();
  19   $pending = "";
  20   $complete = "Complete!";
  21 </%init>
  22
  23 %# Adds a new step to the workflow
  24 <%method step>
  25   <%args>
  26     $title => ""
  27   </%args>
  28   <%init>
  29     push @contents, $m->content;
  30     push @titles, $title;
  31   </%init>
  32 </%method>
  33
  34 %# Shown when all steps are completed but one or more is pending.
  35 <%method pending>
  36   <%init>
  37     $pending = $m->content;
  38   </%init>
  39 </%method>
  40
  41 %# Shown when all steps are completed and none are pending.
  42 <%method complete>
  43   <%init>
  44     $complete = $m->content;
  45   </%init>
  46 </%method>
  47
  48
  49 %# loads css, but only once (even if used multiple time in one request)
  50 % if ($loadstyle) {
  51 % $loadstyle = 0;
  52 <style media="screen">
  53   ol.workflow-prog{
  54     display: table;
  55     table-layout: fixed;
  56     list-style-type: none;
  57     text-align: center;
  58     margin: 0 0 1em 0;
  59     padding: 0;
  60     width: 100%;
  61     counter-reset: step;
  62     font-size: 16px;
  63   }
  64
  65   ol.workflow-prog>li{
  66     display: table-cell;
  67     text-align: center;
  68     color: black;
  69     position: relative;
  70     font-size: 11px;
  71   }
  72
  73   ol.workflow-prog>li>div.workflow-title{
  74     display: inline-block;
  75     width: 100%;
  76     white-space: nowrap;
  77     overflow: hidden;
  78     text-overflow: ellipsis;
  79   }
  80
  81   ol.workflow-prog>li::after{
  82     font-size: 14px;
  83     width: 30px;
  84     height: 30px;
  85     content: counter(step);
  86     counter-increment: step;
  87     line-height: 1em;
  88     padding-top: 0.3em;
  89     border: 4px solid;
  90     display: block;
  91     text-align: center;
  92     position: relative;
  93     border-radius: 50%;
  94     margin: 0 auto 0 auto;
  95     background: white;
  96     border-color: #bbb;
  97     color: #bbb;
  98   }
  99
 100   ol.workflow-prog>li.workflow-complete::after{
 101     border-color: #5fba7d;
 102     color: white;
 103     background: #5fba7d;
 104   }
 105
 106   @keyframes pend_blink {
 107     0% {}
 108     50% {
 109       border-color: white;
 110     }
 111     100% {}
 112   }
 113
 114   ol.workflow-prog>li.workflow-pending::after{
 115     animation: pend_blink 2s linear infinite;
 116   }
 117
 118   ol.workflow-prog>li.workflow-skipped::after{
 119     border-color: #eeb700;
 120     background: #eeb700;
 121     color: white;
 122   }
 123
 124   ol.workflow-prog>li.workflow-focus::after{
 125     border-color: #5fba7d;
 126     background: white;
 127     color: #5fba7d;
 128   }
 129
 130
 131   ol.workflow-prog>li::before {
 132     width: 100%;
 133     height: 2px;
 134     content: '';
 135     display: block;
 136     position: relative;
 137     top: 34px;
 138     margin-left: 50%;
 139     background-color: #bbb;
 140   }
 141
 142   ol.workflow-prog>li:last-of-type::before {
 143     width: 0%;
 144   }
 145
 146   ol.workflow-prog>li.workflow-complete::before{
 147     background: #5fba7d;
 148   }
 149
 150   ol.workflow-content{
 151     display: block;
 152     table-layout: fixed;
 153     list-style-type: none;
 154     margin: 0;
 155     padding: 0;
 156     width: 100%;
 157   }
 158
 159   ol.workflow-content>li{
 160     width: 100%;
 161     position: relative;
 162     display: none;
 163   }
 164
 165   ol.workflow-content>li.workflow-focus{
 166     display: block;
 167   }
 168
 169   div.workflow-pending-message{
 170     display: none;
 171   }
 172   div.workflow-complete-message{
 173     display: none;
 174   }
 175   div.workflow-message-show{
 176     display: block;
 177   }
 178
 179 </style>
 180 % }
 181
 182 <& '/util/import_javascript.mas', classes => ['workflow'] &>
 183 <% $m->content %>
 184 <div id="<% $id %>" class="workflow">
 185   <ol class="workflow-prog">
 186 %   foreach my $title (@titles) {
 187       <li><div class="workflow-title"><% $title %></div></li>
 188 %    }
 189   </ol>
 190   <div class="panel panel-default">
 191     <div class="panel-body">
 192       <ol class="workflow-content">
 193 %       foreach my $content (@contents) {
 194           <li><% $content %></li>
 195 %       }
 196       </ol>
 197       <div class="workflow-pending-message"><% $pending || $complete %></div>
 198       <div class="workflow-complete-message"><% $complete %></div>
 199     </div>
 200   </div>
 201 </div>
 202 <script type="text/javascript">
 203   Workflow.init("#<% $id %>");
 204 </script>