How to use CssEditor

1. Make sure the editor is not disabled. If the editor's titlebar says "(disabled)", click the enable button.
2. When the editor is enabled, click any element on the page.
3. Use the editor to change properties of the selected element's style. Not all properties will be modifiable.
4. The stylesheet is saved to the filesystem by clicking Save.

Testing

Tests

1. select element
2. dynamic outline should disappear when the editor is used.
3. Border Selector
   • All parts of the border selector should be disabled if border is not specified for the selected element's rule
   • new border styles and border widths should always work
4. undo | redo should work properly across multiple component and multiple style rule changes.

Bugs

• colorpicker: implement transparent and inherit. (inherit will not be implemented)
• create service to save stylesheet text to filesystem.
• implement undo and redo
• create buttons for undo()/redo().
• border style new values only work the first time, e.g. "outset" works once, but not a second time.
• DragLib: make esc release dragObj to where it was grabbed from, not from after where it was dragged from.
• ElementWithRules: Fix the activation method

About

The CssEditor allows you to edit styles on a page by clicking elements that have those styles.

Save the stylesheet to update your entire site. (TODO)

Help Needed

• Usability Engineer needed (to improve usability)
• Java Developer needed (to create service)
• JavaScript Developers needed (for refactoring, peer review, documentation).

Saving the StyleSheet

The StyleSheet is saved to the filesystem.

When the user clicks "save", a POST request is sent to the server with the stylesheet text.

The file is opened (on the server) and the contents are replaced with the styleSheetText that was received from the client in the POST request.

License

Editor States

The Editor has three (3) states. They are:

1. Edit State

   User can edit the selected element's class.

   User can select another editable element by clicking on it.

   Other "click" event handlers are disabled, so user can't interact with the page.

   User can disable editor.

2. Selection State (initial state)

   User can see which elements are editable by viewing the mouseover state of a RuleEditableElement.

   User can select another editable element by clicking on it.

   Other "click" event handlers are disabled, so user can't interact with the page.

3. Disabled State

   User can't see which elements are editable or select any elements to edit.

   Other "click" event handlers are restored, so user can interact with the page as it will be live to see how it looks and feels.

   User can enable editor to enter into selection state.

Editor Components

The editor has many components, and adding a new one is not that hard.

How to add a component.

1. Create an element in HTML that has the ID of the style property you wish to edit. See how it looks in the editor.
2. Next, create a JavaScript class that implements the Component interface.
3. Remember that element you created in step 1? Give that element the class token "component" plus a class token that describes what type of component it is.
4. Now in editor.js, look for the ComponentFactory. YOu'll have to add a conditional statement

   if(hasToken(el.className, [myComponentClass]))
   	return myClass.getInstance(el);					
   					

Listener

The listener is a way of allowing an object to subscribe or unsubscribe to an event notification. Very useful and necessary for the Editor.

Keyboard Accelerators

There are some keyboard accessibility limitations to the Editor. For instance, some buttons are not tabbable. The HSV picker could use improvements in this area also.

How to

This is a fake link

Instructions

For those who wish to deploy the CssEditor.

• Include the editor html (<form id="editor"...
• Include the js files
• include editor.css
• onload, call CssEditor.getInstance(styleSheetTitle).

Drag 'n drop

...

Design Patterns

What are Design Patterns?

Design patterns are a way of reusing your experiences and approaches.

It's a way of "designing" code so it will be easier to manage.

Why Should I use Design Patterns?

Change. Ease of development. Ease of maintenance.

The concept of code reuse appears in all languages. "Sliding Doors" is a CSS design idiom.

With object oriented programming, design patterns help us deal with problems by tackling the difficult parts head on and encapsulating them in objects.