[Kimchi-devel] [PATCH] [Wok 2/3] Implement wok.notification widget

[Lucio Correia]

On 04-04-2016 13:10, Aline Manera wrote:
>
>
> On 03/31/2016 06:02 PM, Lucio Correia wrote:
>> This is an adapted version of wok.message that removes the
>> the notification when user clicks on close button.
>>
>> Signed-off-by: Lucio Correia <luciojhc at linux.vnet.ibm.com>
>> ---
>>   ui/js/src/wok.notification.js | 36 ++++++++++++++++++++++++++++++++++++
>>   1 file changed, 36 insertions(+)
>>   create mode 100644 ui/js/src/wok.notification.js
>>
>> diff --git a/ui/js/src/wok.notification.js
>> b/ui/js/src/wok.notification.js
>> new file mode 100644
>> index 0000000..b79f5f3
>> --- /dev/null
>> +++ b/ui/js/src/wok.notification.js
>> @@ -0,0 +1,36 @@
>> +/*
>> + * Project Wok
>> + *
>> + * Copyright IBM Corp, 2015-2016
>> + *
>> + * Code derived from Project Kimchi
>> + *
>> + * Licensed under the Apache License, Version 2.0 (the "License");
>> + * you may not use this file except in compliance with the License.
>> + * You may obtain a copy of the License at
>> + *
>> + *     http://www.apache.org/licenses/LICENSE-2.0
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an "AS IS" BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
>> implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + */
>> +
>
>> +wok.notification = function(msg, node) {
>> +    "use strict";
>> +    var container = node || $('#alert-fields');
>> +    if ($(container).size() < 1) {
>> +        container = $('<div
>> id="alert-fields"/>').appendTo($('#alert-container'));
>> +    }
>> +    var message = '<div role="alert" class="alert alert-warning
>> alert-dismissible fade in" style="display: none;">';
>> +    message += '<button type="button" class="close"
>> data-dismiss="alert" aria-label="Close"
>> onclick="wok.removeNotification(&#39;' + msg.code + '&#39;)"><span
>> aria-hidden="true"><i class="fa fa-times-circle"></i></span></button>';
>> +    message += msg.message;
>> +    message += '</div>';
>> +    var $message = $(message);
>> +    $(container).show();
>> +    $(container).append($message);
>> +    $message.alert();
>> +    $message.fadeIn(100);
>> +};
>
> This is very similar to what we have in wok.message.js
> Why not use wok.message to do this work instead of duplicating code?
>

Wok.message would need some adaptations that would make it too complex:
- wok.notification receives msg dict as parameter, not only msg text, 
because we need to call wok.removeNotification on the code of msg.
- wok.removeNotification must be called when user clicks on close 
button, otherwise the notification will be erased only when wok reboots

That's why I've chosen to create a notification specific widget.

-- 
Lucio Correia
Software Engineer
IBM LTC Brazil