Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

file 319 lines (293 sloc) 11.164 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyFormBuilder</title>
  <link rel="stylesheet" href="lib/bootstrap.min.css">
  <link rel="stylesheet" href="editor.css">
  <script src="lib/jquery.min.js"></script>
  <script src="lib/jquery-ui.min.js"></script>
  <script src="lib/knockout-latest.debug.js"></script>
  <script src="lib/knockout.mapping-latest.js"></script>
  <script src="lib/knockout-sortable.js"></script>
  <script src="lib/bootstrap-tabs.js"></script>
  <script src="lib/jquery.hotkeys.js"></script>
  <script src="editor.js"></script>
</head>
<body>

<div class="container">
  <div class="content">
    <div class="page-header row">
      <div class="pull-left"><h1>MyFormBuilder</h1></div>
    </div>
    <div class="row">
      <div class="span6 sidebar">
        <ul class="tabs" data-tabs="tabs" data-bind="tab: $root.currentTab">
          <li class="active"><a href="#add-field-pane">Add a Field</a></li>
          <li><a href="#field-settings-pane">Field Settings</a></li>
          <li><a href="#form-settings-pane">Form Settings</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="add-field-pane">
            <div data-bind="template: 'tmpl-add-field'"></div>
          </div>
          <div class="tab-pane" id="field-settings-pane">
            <div data-bind="template: {name: 'tmpl-field-settings', data: selectedField }"></div>
          </div>
          <div class="tab-pane" id="form-settings-pane">
            <div data-bind="template: {name: 'tmpl-form', data: form }"></div>
          </div>
        </div>
      </div>
      <div class="span10 main-content" data-bind="with: form">
        <div class="field-wrapper"
             data-bind="click: $root.showFormSettings, css: { selected: $root.formSettingsSelected }">
          <h2 data-bind="text: name"></h2>
          <p data-bind="text: description"></p>
        </div>
        <form data-bind="sortable: {template: 'tmpl-field-preview', data: fields}"
              class="form-stacked"></form>
        <div data-bind="ifnot: hasFields">
          <div class="alert-message block-message warning">
            <p><strong>Hey, there is no fields!</strong> Currently, you don't have
              any fields.</p>
            <div class="alert-actions">
              <button class="btn small" data-bind="click: $root.createFirstField">Create a field for me</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
    <h4>Form Structure</h4>
    <pre data-bind="text: $root.formJSON"></pre></div>
  </div>
</div>

<footer class="footer">
  <div class="container">
    <h6>Keyboard shortcuts</h6>
    <ul>
      <li><strong>j</strong> Select next field</li>
      <li><strong>k</strong> Select previous field</li>
      <li><strong>DEL or BACKSPACE</strong> Delete selected field</li>
    </ul>
  </div>
</footer>

<!-- Form settings -->
<script type="text/html" id="tmpl-form">
  <form class="form-stacked" data-bind="submit: $.noop">
    <p>
      <label>Name</label>
      <input data-bind="value: name">
    </p>
    <p>
      <label>Description</label>
      <textarea data-bind="value: description"></textarea>
    </p>
  </form>
</script>

<!-- Add Field Pane -->
<script type="text/html" id="tmpl-add-field">
  <div class="add-field-pane" data-bind="click: $root.addField">
    <!-- TODO: Generate these buttons dynamically -->
    <button class="btn success" data-type="text">Single Line Text</button>
    <button class="btn success" data-type="number">Number</button>
    <button class="btn success" data-type="textarea">Paragraph Text</button>
    <button class="btn success" data-type="checkbox">Checkboxes</button>
    <button class="btn success" data-type="radio">Multiple Choice</button>
    <button class="btn success" data-type="select">Dropdown</button>
    <button class="btn success" data-type="section">Section Break</button>
    <button class="btn success" data-type="page">Page Break</button>
    <br><br>
    <button class="btn success" data-type="shortname">Name</button>
    <button class="btn success" data-type="file">File Upload</button>
    <button class="btn success" data-type="address">Address</button>
    <button class="btn success" data-type="date">Date</button>
    <button class="btn success" data-type="email">Email</button>
    <button class="btn success" data-type="time">Time</button>
    <button class="btn success" data-type="phone">Phone</button>
    <button class="btn success" data-type="url">Website</button>
    <button class="btn success" data-type="money">Price</button>
    <button class="btn success" data-type="likert">Likert</button>
  </div>
</script>

<!-- Generic field preview template -->
<script type="text/html" id="tmpl-field-preview">
  <div class="clearfix field-wrapper"
       data-bind="click: $root.selectField,
css: { selected: $data == $root.selectedField() },
sortableItem: $data">
    <label>
      <span data-bind="if: is_required" class="required">*</span>
      <span data-bind="text: title"></span>
    </label>
    <div data-bind="template: previewTemplateName"></div>
    <div class="pull-right">
      <button data-bind="click: $root.duplicateField" class="btn xsmall success">+</button>
      <button data-bind="click: $root.removeField" class="btn xsmall danger">×</button>
    </div>
  </div>
</script>

<!-- Generic field settings template -->
<script type="text/html" id="tmpl-field-settings">
  <div data-bind="if: $data">
    <form class="form-stacked">
      <div class="clearfix">
        <label>Title</label>
        <textarea data-bind="value: title" class="xlarge"></textarea>
      </div>
      <div class="clearfix">
        <label>Type</label>
        <select data-bind="options: FIELD_TYPES, value: type"></select>
      </div>
      <div class="clearfix">
        <label>
          <input type="checkbox" data-bind="checked: is_required">
          <span>Required?</span>
        </label>
      </div>
      <div class="clearfix">
        <label>Instructions</label>
        <textarea data-bind="value: instructions"></textarea>
      </div>
      <div data-bind="template: settingsTemplateName"></div>
    </form>
  </div>
  <div data-bind="ifnot: $data">
  Select a field.
  </div>
</script>

<!-- Radio field -->
<script type="text/html" id="tmp-field-preview-radio">
  <ul data-bind="foreach: choices" class="unstyled">
    <label>
      <input type="radio" data-bind="attr: {name: $parent.FieldId}" disabled readonly>
      <span data-bind="text: choice"></span>
    </label>
  </ul>
</script>
<script type="text/html" id="tmp-field-settings-radio">
  <div data-bind="template: 'tmp-choices', data: $data"></div>
</script>

<!-- Number field -->
<script type="text/html" id="tmp-field-preview-number">
  <input class="large">
</script>
<script type="text/html" id="tmp-field-settings-number"></script>

<!-- Text field -->
<script type="text/html" id="tmp-field-preview-text">
  <input class="xlarge">
</script>
<script type="text/html" id="tmp-field-settings-text"></script>

<!-- Checkboxes field -->
<script type="text/html" id="tmp-field-preview-checkbox">
  <ul data-bind="foreach: choices" class="unstyled">
    <label>
      <input type="checkbox" data-bind="attr: {name: $parent.FieldId}" disabled readonly>
      <span data-bind="text: choice"></span>
    </label>
  </ul>
</script>
<script type="text/html" id="tmp-field-settings-checkbox">
  <div data-bind="template: 'tmp-choices', data: $data"></div>
</script>

<!-- Section -->
<script type="text/html" id="tmp-field-preview-section">
  <p data-bind="text: instructions"></p>
</script>
<script type="text/html" id="tmp-field-settings-section"></script>

<!-- Page -->
<script type="text/html" id="tmp-field-preview-page"></script>
<script type="text/html" id="tmp-field-settings-page"></script>

<!-- Textarea field -->
<script type="text/html" id="tmp-field-preview-textarea">
  <textarea class="xlarge"></textarea>
</script>
<script type="text/html" id="tmp-field-settings-textarea"></script>

<!-- Shortname field -->
<script type="text/html" id="tmp-field-preview-shortname">
  <input >
  <input >
</script>
<script type="text/html" id="tmp-field-settings-shortname"></script>

<!-- File field -->
<script type="text/html" id="tmp-field-preview-file">
  <input type="file">
</script>
<script type="text/html" id="tmp-field-settings-file"></script>

<!-- Date field -->
<script type="text/html" id="tmp-field-preview-date">
  <input class="small"> / <input class="small"> / <input class="small">
</script>
<script type="text/html" id="tmp-field-settings-date"></script>

<!-- Time field -->
<script type="text/html" id="tmp-field-preview-time">
  <input class="small"> : <input class="small">
</script>
<script type="text/html" id="tmp-field-settings-time"></script>

<!-- Address field -->
<script type="text/html" id="tmp-field-preview-address">
  <input class="large">
</script>
<script type="text/html" id="tmp-field-settings-address"></script>

<!-- Money field -->
<script type="text/html" id="tmp-field-preview-money">
  <input>
</script>
<script type="text/html" id="tmp-field-settings-money"></script>

<!-- Email field -->
<script type="text/html" id="tmp-field-preview-email">
  <input class="large">
</script>
<script type="text/html" id="tmp-field-settings-email"></script>

<!-- Phone field -->
<script type="text/html" id="tmp-field-preview-phone">
  <input class="large">
</script>
<script type="text/html" id="tmp-field-settings-phone"></script>

<!-- Select field -->
<script type="text/html" id="tmp-field-preview-select">
  <select data-bind="options: choices, optionsText: 'choice'"></select>
</script>
<script type="text/html" id="tmp-field-settings-select">
  <div data-bind="template: 'tmp-choices', data: $data"></div>
</script>

<!-- URL field -->
<script type="text/html" id="tmp-field-preview-url">
  <input class="large">
</script>
<script type="text/html" id="tmp-field-settings-url"></script>

<!-- Likert field -->
<script type="text/html" id="tmp-field-preview-likert">
  <strong>Not Implemented Yet</strong>
</script>
<script type="text/html" id="tmp-field-settings-likert"></script>

<!-- Helpers -->
<script type="text/html" id="tmp-choices">
  <div class="clearfix">
    <label>choices</label>
    <ul data-bind="foreach: choices" class="unstyled">
      <li>
        <input data-bind="value: choice" class="">
        <button data-bind="click: $parent.addChoice" class="btn xsmall success">+</button>
        <button data-bind="click: $parent.removeChoice" class="xsmall btn danger">×</button>
      </li>
    </ul>
    <div data-bind="ifnot: hasChoices">
      <button data-bind="click: addChoice" class="btn xsmall success">+ Add a Choice</button>
    </div>
  </div>
  <div class="clearfix">
    <label>
      <input data-bind="checked: is_randomized" type="checkbox">
      <span>Randomized?</span>
    </label>
  </div>
</script>

</body>
<script>
var formData = {name: "My first form", description: "Description goes here."};
var builder = new EditorViewModel(formData);
ko.applyBindings(builder);
</script>
</html>
Something went wrong with that request. Please try again.