diff options
Diffstat (limited to 'node_modules/montage/CHANGES.md')
-rwxr-xr-x | node_modules/montage/CHANGES.md | 347 |
1 files changed, 347 insertions, 0 deletions
diff --git a/node_modules/montage/CHANGES.md b/node_modules/montage/CHANGES.md new file mode 100755 index 00000000..5b544221 --- /dev/null +++ b/node_modules/montage/CHANGES.md | |||
@@ -0,0 +1,347 @@ | |||
1 | # v0.10.0 | ||
2 | |||
3 | - **New property change API** | ||
4 | |||
5 | In prior Montage releases if you wanted to be notified when the value of a property changed, or an array was | ||
6 | modified, you used the addEventListener() API to register a listener object (or function). This API has been | ||
7 | replaced with addPropertyChangeListener(), which does everything that addEventListener() did, plus more. | ||
8 | |||
9 | - **Changes to data binding** | ||
10 | |||
11 | In this release, bindings can only be serialized on the source object in the binding. Practically, this means that | ||
12 | the arrow in the binding serialization can only point from right-to-left, not from left-to-right. | ||
13 | Also, the double-arrow syntax (<<->, for example) is no longer valid. | ||
14 | |||
15 | - **__debugChangeNotifications__()** | ||
16 | |||
17 | To help debug and inspect change listeners that you’ve registered on an object, call __debugChangeNotifications__() | ||
18 | This is temporary stop gap which will be replaced by better debugging tools soon. | ||
19 | |||
20 | - **KeyComposer and KeyManager** | ||
21 | |||
22 | Montage now includes a mechanism for easily listening for and responding to keyboard events, including individual | ||
23 | keys, or key combinations that you specify. It consists of two Montage objects: KeyComposer and KeyManager. You | ||
24 | create a KeyComposer object and specify the keys, or key combinations, that you want to respond to, as well as the | ||
25 | listener object that defines the necessary handlers. A default instance of the KeyManager prototype listens for | ||
26 | native key events on behalf of all active KeyComposers. It then invokes a callback method on the listener object | ||
27 | you specified. | ||
28 | |||
29 | - **TokenField** | ||
30 | |||
31 | The TokenField component is a text input component that displays tokens as its content. | ||
32 | |||
33 | - **Flow component** | ||
34 | |||
35 | The Flow component now supports selection handling and a feature called “stride”. The stride of a Flow component | ||
36 | defines points at regular intervals where scrolling should stop. For example, suppose you are creating a carousel | ||
37 | of album covers and you want the scrolling to stop when it reaches a position where the next album is always | ||
38 | positioned at the center. In this case the stride value would be the scroll distance between an element at the | ||
39 | center and the next element at the center. If you wanted scrolling to stop at every second or third album you would | ||
40 | set a stride to double or triple of that value. That way you could have, for example, a page showing 10 albums, and | ||
41 | you would be able to scroll 10 albums at a time, never stopping in the middle. | ||
42 | |||
43 | - **DynamicElement** | ||
44 | |||
45 | The DynamicElement component takes a string of plain text or HTML and inserts it into the component’s associated DOM | ||
46 | element, clearing any existing content. | ||
47 | |||
48 | |||
49 | # v0.9.0 | ||
50 | |||
51 | - **Draw cycle changes** | ||
52 | |||
53 | After the willDraw phase all the components needing draw are sorted by their level in the | ||
54 | component hierarchy. They are then processed in reverse order. This ensures that all the | ||
55 | childComponents needing draw have drawn by the time the parent's draw is called. The didDraw | ||
56 | uses the same list but processes the componets in top down order (the reverse of draw) | ||
57 | |||
58 | - **Components** | ||
59 | |||
60 | Autocomplete Textfield Added | ||
61 | An Autocomplete Textfield extends the Textfield component to support suggestions for the user to pick values. | ||
62 | The HTML markup for the Autocomplete is the same as the standard HTML5 markup (<input>). | ||
63 | Wrapping the <input> HTMLElement as a Montage Autocomplete component adds Data Binding support for all | ||
64 | writable attributes of this element and allows the Developer to provide suggestions to the user based | ||
65 | on the entered value. | ||
66 | |||
67 | Popup | ||
68 | Support HTMLElement and Montage Component for the anchor property | ||
69 | Change willPositionPopup(popup, anchor, anchorPosition) to willPosition(popup, defaultPosition). | ||
70 | Change autoDismiss to autoHide | ||
71 | Support autoHide only for non-modal popups | ||
72 | Support string values (eg: 20px, 30%) for position parameters. If a number is provided, default to 'px'. | ||
73 | |||
74 | - **Template** | ||
75 | |||
76 | ``instantiateWithDocument(document, callback)`` method is added to use plain html templates without an owner. | ||
77 | |||
78 | Backwards compatibility for id attribute based references in serilization is removed, you should now use the | ||
79 | data-montage-id attribute. | ||
80 | |||
81 | # v0.8.0 | ||
82 | |||
83 | - **Data binding shorthand in serializations** | ||
84 | |||
85 | This release introduces a new shorthand syntax for declaring data bindings in a serialization. The new syntax | ||
86 | includes an arrow symbol that indicates the source of the binding and whether its one-way or two-way.The symbol can | ||
87 | take one of the following forms: | ||
88 | |||
89 | `<-` – One-way data binding, bound object on right | ||
90 | |||
91 | `->` – One-way data binding, bound object on left | ||
92 | |||
93 | `<<->` – Two-way data binding, bound object on right | ||
94 | |||
95 | `<->>` – Two-way data binding, bound object on left | ||
96 | |||
97 | Example: | ||
98 | |||
99 | ```javascript | ||
100 | { | ||
101 | "inputText": { | ||
102 | "prototype": "textfield", | ||
103 | "bindings": { | ||
104 | "value": {"<-": "@slider.value"} | ||
105 | } | ||
106 | } | ||
107 | } | ||
108 | ``` | ||
109 | |||
110 | - **RichTextEditor component** | ||
111 | |||
112 | RichTextEditor is a lightweight component that provides basic HTML editing capability. It is wrapper around the | ||
113 | HTML5 contentEditable attribute, and depends on the browser’s level of support of the execCommand() method. The | ||
114 | RichTextEditor lets you set, on a specific text selection range, various formatting attributes including text and | ||
115 | font styles, colors, justification, list style and paragraph indent level. It also supports drag-and-drop of images, | ||
116 | plain text, or HTML fragments between two HTML documents, or the desktop and the document. Images can also be | ||
117 | resized within the editor. | ||
118 | |||
119 | - **Flow component** | ||
120 | |||
121 | This release introduces the first drop of the Flow component. Flow is UI component that allows the design of | ||
122 | scrollable 3D-layouts. Flow is useful for creating a wide range of visual interfaces from 3D carousels to common | ||
123 | vertical and horizontal scrollable lists. | ||
124 | |||
125 | - **Extending components** | ||
126 | |||
127 | There are three options to extend a component’s template: | ||
128 | |||
129 | 1. If the extended component doesn’t wish to introduce changes in the template, the component can set its | ||
130 | templateModuleId property to point to the parent module’s template. | ||
131 | 2. Create a new template that will completely redefine the markup of the component with no relation to the original | ||
132 | template. | ||
133 | 3. Set the extends property of the template that points to the template to be imported and where. This is similar | ||
134 | to the “decorator” pattern of the proposed Web Components feature. This approach is useful when the component | ||
135 | needs to add additional CSS data, or reuse the original markup. The template object will be accessible through | ||
136 | the template label of the serialization. | ||
137 | |||
138 | - **Auto packaging** | ||
139 | |||
140 | Many applications will initially only use their own modules and those provided by the Montage package. | ||
141 | As long as that’s the case, you do not need to make a package.json; just put the data-auto-package attribute on | ||
142 | your Montage script tag. | ||
143 | |||
144 | - **Pop-up component updates** | ||
145 | |||
146 | The Popup component API has been updated to provide better support for popup positioning. | ||
147 | |||
148 | - `anchor` The HTMLElement or Montage component below which the popup will be anchored on the page. To specify a | ||
149 | custom position for a popup, use a delegate (see below). If an anchor is not provided, the position property is | ||
150 | used, if provided. If no positioning support is provided, the Popup is displayed at the center of the screen by | ||
151 | default. | ||
152 | - `position` An object with properties named top, left, bottom and right that specify the position of the popup. | ||
153 | This property is used to position the popup if no anchor is specified. | ||
154 | - `delegate` An object that defines methods that are invoked by the Popup component. The only delegate method | ||
155 | currently supported is willPositionPopup(). This method must return an object with any of the following | ||
156 | properties: top, left, bottom or right. Values assigned to these properties must strings in valid | ||
157 | CSS units (“10px” or “50%”). | ||
158 | - `content` The Montage component that will be displayed in the popup. | ||
159 | - `modal` If set to true, the popup is rendered with a mask underneath. A non-modal popup is hidden when the user | ||
160 | presses the Esc key, or clicks outside of the popup. The developer is responsible for hiding a modal popup. | ||
161 | Default is false. Modal popups never auto-hide themselves. | ||
162 | - `autoHide` Optional. The popup will be automatically hidden after the specified number of milliseconds. This | ||
163 | property has no effect on modal popups. | ||
164 | |||
165 | |||
166 | # v0.7.0 | ||
167 | |||
168 | - **Adding `ownerComponent` property to the Component.** | ||
169 | When the template is deserialized we populate the ownerComponent property of any component created within it's | ||
170 | serialization with the owner of the template. | ||
171 | - **Adding `setElementWithParentComponent` function on the Component.** | ||
172 | This formalizes the API to set a detached element to a component. The caller is responsible for appending the | ||
173 | element to the DOM before prepareForDraw is called on the callee. | ||
174 | - **Serialization changes** | ||
175 | - Specifying types and references | ||
176 | 1. Changed the way we specify an object by merging the module id and the name into only one string using | ||
177 | `"<module>[<name>]"` (e.g.: `"montage/ui/button.reel[Button]"`). When the name matches the last part of the module | ||
178 | id then it's automatically inferred and there's no need to provide it. The last part of the module id is considered | ||
179 | to be the last path component (e.g.: `"event-name"` in `"montage/event/event-name"`) transformed to CamelCase with | ||
180 | dashes stripped (e.g.: `"EventName"`). When the last path component ends with `".reel"` then the component is | ||
181 | considered without its `".reel"` suffix (e.g: `"RadioButton"` for `"montage/ui/radio-button.reel"`). Under these new | ||
182 | rules we reach the following equivalence: `"montage/ui/button.reel[Button]" === "montage/ui/button.reel"`. | ||
183 | 2. The possibility to point to an object instead of just being able to declare an instance of a specific prototype. | ||
184 | We were using the pair `module/name` to declare an instance of that prototype, with this new change only one | ||
185 | property is needed -- `prototype` -- using the rules defined in 1). If, instead of a new object, we just want to | ||
186 | point to an existing one the new `object` property name should be used. | ||
187 | |||
188 | In practice this means a change from: | ||
189 | |||
190 | ```javascript | ||
191 | { | ||
192 | "label": { | ||
193 | "module": "montage/ui/button.reel", | ||
194 | "name": "Button", | ||
195 | "properties": {...} | ||
196 | } | ||
197 | } | ||
198 | ``` | ||
199 | to | ||
200 | ```javascript | ||
201 | { | ||
202 | "label": { | ||
203 | "prototype": "montage/ui/button.reel", | ||
204 | "properties": {...} | ||
205 | } | ||
206 | } | ||
207 | ``` | ||
208 | - Serialization labels are now used as the value of the identifier property by default. | ||
209 | |||
210 | - **Properties with a leading underscore in their name are now {enumerable: false} by default.** | ||
211 | i.e. defining a property as | ||
212 | ```javascript | ||
213 | _name: {value: null} | ||
214 | ``` | ||
215 | is equivalent to doing | ||
216 | ```javascript | ||
217 | _name: {value: null, enumerable:false} | ||
218 | ``` | ||
219 | - **Components** | ||
220 | - Repetition: Adding indexMap property to provide the necessary underpinnings for large data handling. | ||
221 | - SelectInput: Adding values and value property to be able to bind directly to the value of the selected option(s) | ||
222 | - Scroller: Replaces Scrollview. Now uses the Translate composer. | ||
223 | - Scrollview: _deprecated_ | ||
224 | - **Browser Support** | <