agronkabashi/templateengine

Design and build web applications with components using only your web browser

TemplateEngine

TemplateEngine is a web component templating framework that helps you build web applications using only your browser! Include it in your projects to replace your editing tool or create something more awesome based on it.

Demo: http://agronkabashi.github.io/TemplateEngine/

Sizes

This includes markup and default components.

	Size (KB)	Gzipped (KB)
TemplateEngine	25.2	8.4
TemplateEditor	58.1	14.6

Dependencies

• jQuery (TemplateEditor)
• jQuery UI (TemplateEditor)
• Custom lodash build
• AngularJS

How to Get Started

Download and install NodeJS

$ npm install -g grunt-cli                                      // Install Grunt globally
$ git clone https://github.com/AgronKabashi/TemplateEngine.git  // Clone the project and enter directory
$ cd TemplateEngine
$ npm install                                                   // Install dependencies
$ grunt                                                         // Run the default task

Build targets

grunt build             // Pre-cleaning and compilation of js, sass and templates
grunt release-build     // Same as build + minification and obfuscation
grunt default           // Runs build target and hosts a webserver with live reload
grunt release           // Runs build target and hosts a webserver
grunt eslint            // Runs linting
grunt test              // Run unit/e2e tests

Creating your own components

Check the Wiki for details about how to create your own components.

templateengine's Issues

Customize a resolution with device-specific rules

Make it possible to add device-specific rules for a resolution. For instance, a resolution of 640px will be shown on devices with max-width: 640px by default. By allowing the user to attach special rules to a resolution such as pixel-ratio and device-width, he/she can target specific devices.

Add support for multiple backgrounds

Referencing dependencies or files outside the application path breaks in gh-pages

Placing dependencies folder in the site root and referencing it breaks links when published to gh-pages (or any sub folder for that matter) since '/' paths reference github.io instead of github.io/TemplateEngine.

Moving it inside TemplateEditor fixes this but code redundancy may increase with other projects.

TemplateEditor: Transpose between left/right and top/bottom coordinates

By clicking on the labels for respective property

Bug: RSS feed is not updated until page is reloaded

Add component specific, resolution dependent properties

Allow a component to specify visual properties that are resolution specific. You could for instance define that a class should be applied for a resolution of 640px - 1024px.

Bug: Latest release is causing layout regression in some component editors

Affected editors: youtube, rss, sharer, link

Add support for selecting multiple template controls by click-drag

Only Ctrl+click is currently supported.

TemplateEditor: Prevent creation of resolution if difference to siblings is less than X

20px

Look into creating an Angular 2 version

Look into Angular 2 and determine wether it is feasible to port this project.

• How will plugins be loaded? It seems that directives need to have an explicit include.
• Performance? Start using unidirectional flow?
• Make use of Rxjs since it's a required library?

Add support for multple text-shadow layer

Add undo/redo history service

Replace jQuery & jquery UI

Alternatives:

• Domtastic
• Zapto

Optimize TemplateEngine & TemplateEditor

• Reduce markup generated
• Reduce # of requests. This means moving away from requirejs for loading internals. TemplateEngine&Editor modules should however still be requirable from other applications.
• Decrease code complexity by refactoring certains parts into using 3rd party libraries such as lodash
• jQuery UI is starting to become a burden. Consider replacing with something else or simply implement the necessary features (only draggable/resizable needed currently)
• Convert TemplateEditor into a standalone module so it can be used from other modules
• Decrease overall watch count
• Re-design property pane in TemplateEditor
• Conform to more common Javascript code formatting
• Add linting to build step
• Process html templates and generate templateCache calls during build to reduce requests

Branch: optimize-templateengine-#26

Allow user to modify a resolution's properties after it has been created.

Possible solutions:

• drag and resize bar to change resolution value
• double click to open a dialog with options

TemplateEngine: Add tests

TemplateEditor: Add tests

Add support for CSS3 transforms

• Rotate Z-axis
• Transform origin

Distribute properties to specific resolution

Add template control action that copies the properties for the selected template control to a specific resolution.

TemplateEditor: Preserve units when resizing or dragging

If the unit is % then it should stay in % when dragging or resizing.

Click-holding an option in a button-dropdown list causes the action not to be triggered

If you click and keep the mouse button pressed, the action will not trigger since the options are hidden

Create Gmail components

Create Gmail components for building an email application.

• Google API
• Gmail Label List - Lists folders (system & user)
• Gmail Message List - Lists messages in a specific folder
• Gmail Message - Shows email content
• Gmail Authorize - For authorizing the application to access Gmail API
• Add a template preset for quickly testing functionality

Add support for multiple box-shadow layers

Introduce resolution slider for height

Just like there's one for width, introduce one for height. The height resolutions should only apply for the current resolution. By doing this we can generate media queries that target components for a specific width * height resolution.

Might want to implement #4 for heights as well.

Add version control

Allow users to create different versions of a template and choose which one that should be published.

• Introduce a new field for storing the template's internal id. Fetching by the template's public id should return the published version.
• Fetching a template by the internal id should require authentication.

Patch jQuery UI draggable & resizable with a fix for CSS transforms

Or drop it completely in favour of a different library.

http://bugs.jqueryui.com/ticket/6844

TemplateEditor: Add snap-to-element functionality

Hold Ctrl+key when moving a control to active snap-to-element

Refactor directives to follow the new component format in Angular 1.5

Show a helper with the necessary info when dragging/resizing

When dragging/resizing a control the action might seem a bit unresponsive due to realtime updates to templatecontrolproperties. Instead, show a ghost-helper with the necessary info and trigger OnTemplateControlUpdate only when the action has completed.

Improve UX design in property pane.

It appears too cluttered due to the vast amount of css properties.
Ideas:

• alternating colors for panels
• no inputs - less visible
• specific colors for panels/groups
• collapsible panels/groups
• labels inside input fields - move up when containing data
• search on top for filtering properties
• add panels/groups dynamically, i.e if you are interested in setting a background color then include the background panel

Other examples:

TemplateEditor: Add dropdownlist for adding resolutions

Show presets like iPad, Iphone etc

Quick-copy properties

Users must be able to copy properties quickly from one control to another.
Things to think about:

• "Shelve" in memory so they can be injected
• Store single properties, whole section or all properties?