This repository has been archived by the owner. It is now read-only.
[archive] Build WYSIWYG-backends for static pages
JavaScript PHP
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
libs
src
test
.gitignore
README.md
gofer.js
grunt.js
notes.md
package.json
todo.md

README.md

#IMPORTANT:

Project is not working at all and this readme-file is more something like a roadmap than a documentation.


#About gofer gofer helps you to build a WYSIWYG-backend for your clients so that they can edit the content of their website. gofer targets static one-page websites where a person without any programming knowledge should be able to change same parts of the page.


##Tags

##Attributes


##Features

  • Easy to get started
  • Powerful Syntax
  • Helpful predefined Widgets
  • Easy to extend
  • Good Documentation
  • Careful testing
  • Realworld examples

#Tags ##ID: `{{#id}}`

The #id-tag can be used in three different ways. By using it as a standalone tag it returns the values the linked elements evaluate to. For example if you have an {{input #name}}-tag at one place in your code, you can insert the value of the element at an other place in your code using {{#name}}. The #id-tag can also be used as a wrapper. The first thing the wrapper does is to decide whether the wrapped content gets displayed or not. This depends on the values of the referenced elements. The wrapper iterates over all elements and decides for each element if it should be displayed or not. It only gets displayed when its value is not empty and is not a javascript falsy value. Inside the loop each item is available as the el-tag.

##Loop-Element: `{{el}}`

The el-tag references to the element inside a loop. For more information read 'the section about #id'.

Attributes: mix

##One-line Text: `{{input}}`

The user can input text here e.g. <h1>{{input}}</h1> and the plain-text is returned. Because of this you have to wrap it into some tags (e.g. <h1>).

Attributes: mix, required, hidden, note

##Multi-line Text: `{{text}}`

The user has a rich text-editor to edit a hole block of content. Create it like <p>{{text}}</p>. Text-editor includes bold, italic, cursiv, underlined, link, lists and line-breaks.

Attributes: content, mix, required, hidden, note

##Link: `{{link}}`

Define a link with {{link}} and optional pass HTML-Attributes to it {{link id="" class="" target=""}}. If you don't use the link-tag as a wrapper like {{link}}My Message{{/link}} you can also define the displayed text.

Attributes: mix, required, hidden, href, note

##Image: `{{img}}`

Define an image with {{img}}. Optional you can pass HTML-Attributes like {{img id="" class="" alt="" title=""}}. When you click this element you can upload an image and refer to its path by defining an ID-attribute: {{img #myImage}}. The menu to select an image lets you upload an image and, as long as not set before, lets you specify the alt-&title-attributes. An other way to upload an image is by dropping it onto the element.

Attributes: mix, required, hidden, title, path, note

##File: `{{file}}`

Specify an element using {{file}}<element></element>{{/file}}. When you click this element you can upload a file and refer to its path by defining an ID-attribute: {{file #myFile}}. You can upload a file by selecting one in the menu or by dropping it onto the element.

Attributes: mix, required, hidden, path, note

##Files: `{{files}}`

Create a multi-file-uploder with {{files #id}}. Uploader also supports drag & drop.

Attributes: mix, required, path, note

##Checkboxes: `{{check()}}`

With the check-tag the user can select between diffrent options the programmer can use to customize the page. By using the tag as wrapper e.g. {{ check() }}placeholder{{/check}} clicking the placeholder element will show the option-menu. The check-tag needs an array of options which is specified like {{ check('option1', 'option2') }}. Using the optn-tag only makes sense with a defined ID otherwise the options are unreachable.

Attributes: content, mix, required, hidden, max, min, len, yes, no, note

##Radiobuttons: `{{radio()}}`

Works in the same way check does with the different that only one option can be selected. {{radio('cookie', 'coke') }}. Unless val is defined the first option is by default selected.

Attributes: content, mix, hidden, val, note

##Toggle: `{{toggle}}`

{{toggle #name}} does the same as {{radio(true, false) #name}}with the different that it can be used without it to achieve the same as you would by writing {{toggle #uid}} {{#uid}}blah blah{{/uid}}{{/toggle}}.

Attributes: mix, hidden, val, note

##List: `{{list}}`

Make a list of items. You can add new items to the list and reorder them via drag & drop.

  • Define a template inline: {{list}}template goes here{{/list}}
  • Use a file as template: {{ list(./path/to/template.gofer) }}

Attributes: content, mix, required, hidden, path, max, min, len, note

##Note: `{{note}}`

Notes are only visible in editing-mode. They can be used to display instructions to your client about how to edit the page. {{note}}some blah blah{{/note}}

##Partial: `{{partial}}`

Include an other file using: {{ partial(path/to/component.html) }}


#Attributes ##`}}content{{`

The content-attribute contains a STRING of content which gets rendered in the DOM. This attribute differs from the other attributes since it is only available in mix-mode. For link and list the content-attribute belongs to the content wrapped between two tags. The content of list is read-only. And for check and radio it references to a hash of all options and their BOOLEAN-values.

Tags: input, text, link, list, check, radio

##`#id`

You can assign every element to an ID. This is done by adding a # + a name to an element e.g. {{input #name}}.

Tags: #, input, text, link, img, file, files, check, toggle, list

##`mix()`

Using the mix-attribute you can specify a function. gofer searchs for the specified function in the context of your helper-files. When the function exists it gets called with the element as argument and the element's value will be set to the return-value of the function-call. The element-object the function gets called with differs from element to element, but every element-object contains an attributes-hash called attr and the DOM-element representing it as el. For additional tag-specific properties have a look at the tags.

Tags: #, input, text, link, img, file, files, check, toggle, list

##`required`

Tags marked with required have to contain some information, otherwise the page can't be updated.

Tags: input, text, link, img, file, files, check, list

##`hidden`

Use hidden when you want the user to give you information through a tag without that the information is displayed at this place.

Tags: #, input, text, link, img, file, files, check, toggle, list

##`title()`

The title-property sets the html-title-attribute and in the case of an <img>-tag it also will be used for the alt-attribute. You can predefine it but it stays editable for the user.

Tags: link, img

##`href()`

The href-property sets the html-href-attribute. You can predefine it but it stays editable for the user.

Tags: link

##`path()`

Specify a path the given file should be or is located at on your server.

Tags: img, file, files

##`max()`

Define a maximum required size the user has to create or select.

Tags: check, list

##`min()`

Define a minimum required size the user has to create or select.

Tags: check, list

##`len()`

Define the required size the user has to create or select. Is a shortcode for setting max and min to the same value. Use it e.g. {{list len(3) }}. In javascript-mode len is read-only and returns the current length of the element.

Tags: check, list

##`yes()`

yes returns all selected values. It's a shortcode for filtering the values by yourself. Keep attention when you use it as a setter because you can only set ether yes or no, never both of them. When using it as a setter use it like `{{check('apple', 'orange', banana') yes('orange') }}.

Tags: check

##`no()`

no returns all unselected values. It's a shortcode for filtering the values by yourself. Keep attention when you use it as a setter because you can only set ether yes or no, never both of them. When using it as a setter use it like `{{check('apple', 'orange', banana') no('apple', 'banana') }}.

Tags: check

##`val()`

With val you can specify the preselected value of the element. In the case of toggle it is only true or false. In read-mode val returns the selected value.

Tags: radio , toggle

##`note()`

Create a note-element which describes the given element. Use it like {{input note(Enter your name here) }}. Since this note is related to an element gofer can tell you more about what you are doing e.g. telling you which required fields you left empty.

Tags: input, text, img, file, files, opt, toggle, list

##`data()`

Gofer can create a template file with data-attributes for you if you want to change the template without breaking the existing data-mapping of gofer.

Tags: input, text, img, file, files, opt, toggle, list


#`jQuery.gofer`

Because gofer is a jQuery-fan he has his own jQuery-plugin, too. You can search for gofer-elements with gofer('id'). But if you only want a specific range of all the elements with a given id you can find them with $('#container').gofer('id') which returns only the gofer-elements where the DOM-element is a children of the given selector.


#License

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

In jurisdictions that recognize copyright laws, the author or authors of this software dedicate any and all copyright interest in the software to the public domain. We make this dedication for the benefit of the public at large and to the detriment of our heirs and successors. We intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to http://unlicense.org/