js/ajatus.elements.js

   1 /*
   2  * This file is part of
   3  *
   4  * Ajatus - Distributed CRM
   5  * @requires jQuery v1.2.1
   6  *
   7  * Copyright (c) 2007 Jerry Jalava <jerry.jalava@gmail.com>
   8  * Copyright (c) 2007 Nemein Oy <http://nemein.com>
   9  * Website: http://ajatus.info
  10  * Licensed under the GPL license
  11  * http://www.gnu.org/licenses/gpl.html
  12  *
  13  */
  14
  15 (function($){
  16     $.ajatus = $.ajatus || {};
  17     $.ajatus.elements = $.ajatus.elements || {};
  18
  19     /**
  20      * Ajatus Dialog
  21      */
  22     $.ajatus.elements.dialog = function(title, msg, opts)
  23     {
  24         $.ajatus.layout.styles.load($.ajatus.preferences.client.theme_url + 'css/jquery/plugins/jqModal.css');
  25         $.ajatus.layout.styles.load($.ajatus.preferences.client.theme_url + 'css/jquery/plugins/dialog/dialog.css');
  26
  27         this.holder = $('#dynamic-elements');
  28         this.options = {
  29             modal: true,
  30             overlay: 30,
  31             closable: true,
  32             dialog: {
  33                 width: 300,
  34                 height: 200,
  35                 nested: false
  36             }
  37         };
  38
  39         this.options = $.ajatus.utils.merge_configs(this.options, opts);
  40
  41         this.id = this.create(title, msg, opts);
  42         return this;
  43     };
  44     $.extend($.ajatus.elements.dialog.prototype, {
  45         create: function(title, msg, options)
  46         {
  47             var closable = true;
  48             if (   typeof this.options.closable != 'undefined'
  49                 && this.options.closable == false)
  50             {
  51                 this.options.modal = false;
  52                 closable = false;
  53             }
  54
  55             var id = this._generate_id();
  56             var dialog = this._create_dialog_structure(id, closable);
  57
  58             if (typeof title != 'undefined') {
  59                 $('.jqmdTC',dialog).html(title);
  60             }
  61             if (typeof msg != 'undefined') {
  62                 $('.jqmdMSG',dialog).html(msg);
  63             }
  64
  65             this.holder.append(dialog);
  66
  67             var content_target = $('.jqmdMSG',dialog);
  68
  69             var options = $.extend({
  70                 target: content_target,
  71                 onHide: function(h) {
  72                     content_target.html('');
  73                     h.o.remove();
  74                     h.w.fadeOut(300);
  75                 }
  76             }, this.options, options);
  77
  78             $('#' + id).jqm(options);
  79
  80             return id;
  81         },
  82
  83         get_dialog: function() {
  84             return $('#' + this.id);
  85         },
  86
  87         get_content_holder: function() {
  88             return $('#' + this.id + ' .jqmdMSG');
  89         },
  90
  91         set_content: function(content) {
  92             $('#' + this.id + ' .jqmdMSG').html(content);
  93         },
  94
  95         append_content: function(content)
  96         {
  97             $('#' + this.id + ' .jqmdMSG').append(content);
  98         },
  99
 100         prepend_content: function(content)
 101         {
 102             $('#' + this.id + ' .jqmdMSG').prepend(content);
 103         },
 104
 105         open: function()
 106         {
 107             $('#' + this.id).jqmShow();
 108         },
 109
 110         close: function()
 111         {
 112             $('#' + this.id).jqmHide();
 113         },
 114
 115         destroy: function()
 116         {
 117             $('#' + this.id).jqmHide();
 118             $('#' + this.id).remove();
 119         },
 120
 121         _create_dialog_structure: function(id, closable)
 122         {
 123             var body = $('<div />')
 124             .attr('id', id)
 125             .addClass('jqmDialog')
 126             .hide()
 127             .css({
 128                 width: this.options.dialog.width+"px",
 129                 height: this.options.dialog.height+"px"
 130             });
 131
 132             if (this.options.dialog.nested) {
 133                 body.addClass('jqmdAbove');
 134             }
 135
 136             var frame = $('<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC"></div></div></div><div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC"><div class="jqmdMSG"></div></div></div></div>');
 137
 138             $('.jqmdBC', frame).css({
 139                 height: this.options.dialog.height - 70 + "px"
 140             });
 141
 142             if (   typeof closable == 'undefined'
 143                 && closable)
 144             {
 145                 frame.append('<input type="image" src="' + $.ajatus.preferences.client.theme_url + 'css/jquery/plugins/dialog/close.gif" class="jqmdX jqmClose" />');
 146             }
 147
 148             body.html(frame);
 149
 150             return body;
 151         },
 152
 153         _generate_id: function()
 154         {
 155             return "ajatus_dialog_" + $.ajatus.utils.generate_id();
 156         }
 157     });
 158     /**
 159      * Ajatus Dialog ends
 160      */
 161
 162     $.ajatus.elements.messages = {
 163         msgs: [],
 164         watchers: [],
 165         holder: null
 166     };
 167     $.extend($.ajatus.elements.messages, {
 168         create: function(title, message, options)
 169         {
 170             if (typeof options == 'undefined') {
 171                 options = {
 172                     closable: true,
 173                     visible: 5
 174                 };
 175             }
 176             if (typeof options.type == 'undefined') {
 177                 options.type = 'notification';
 178             }
 179             if (typeof options.closable == 'undefined') {
 180                 options.closable = true;
 181             }
 182             options.holder = $.ajatus.elements.messages.holder;
 183             var msg = new $.ajatus.elements.message(title, message, options);
 184
 185             $.ajatus.elements.messages.msgs.push(msg);
 186
 187             if (   options.visible
 188                 && options.visible > 0)
 189             {
 190                 var watcher_opts = {
 191                     auto_start: true,
 192                     safety_runs: 0,
 193                     interval: 200,
 194                     timed: (options.visible * 1000)
 195                 };
 196                 var watcher = new $.ajatus.events.watcher(watcher_opts);
 197                 watcher.element.bind('on_stop', function(e, watcher_id){
 198                     msg.fade('out', true);
 199                 });
 200             }
 201
 202             return msg;
 203         },
 204         static: function(title, message, options)
 205         {
 206             var msg = new $.ajatus.elements.message(title, message, options);
 207             return msg;
 208         },
 209         remove: function(msg_id)
 210         {
 211             $.ajatus.elements.messages.msgs = $.grep($.ajatus.elements.messages.msgs, function(n,i){
 212                 if (n.id == msg_id) {
 213                     n.remove();
 214                     return false;
 215                 } else {
 216                     return true;
 217                 }
 218             });
 219         },
 220         clear: function()
 221         {
 222             $.ajatus.elements.messages.msgs = [];
 223             $.ajatus.elements.messages.holder.html('');
 224         },
 225         gen_id: function()
 226         {
 227             var date = new Date();
 228             var id = 'msg_' + date.getTime();
 229             return id;
 230         },
 231         set_holder: function(holder)
 232         {
 233             if (typeof holder == 'undefined') {
 234                 var holder = $('#system_messages', $.ajatus.application_element);
 235             }
 236             $.ajatus.elements.messages.holder = holder;
 237         }
 238     });
 239
 240     $.ajatus.elements.message = function(title, msg, options)
 241     {
 242         this.options = $.extend({
 243             auto_show: true,
 244             disappear: false,
 245             holder: false,
 246             closable: false,
 247             type: 'static'
 248         }, options || {});
 249         this.holder = this.options.holder;
 250         this.body_div = null;
 251
 252         if (! this.holder) {
 253             this.holder = $('<div />');
 254             this.holder.appendTo($.ajatus.application_content_area);
 255         }
 256
 257         this.id = this.create(title, msg);
 258         return this;
 259     };
 260     $.extend($.ajatus.elements.message.prototype, {
 261         create: function(title, msg) {
 262             var id = $.ajatus.elements.messages.gen_id();
 263             this.body_div = jQuery('<div class="ajatus_elements_message" />').attr({
 264                 id: id
 265             }).addClass(this.options.type).hide();
 266             this.body_div.appendTo(this.holder);
 267
 268             if (this.options.closable) {
 269                 var self = this;
 270                 var close_handle = jQuery('<div class="close_handle" />')
 271                 close_handle.appendTo(this.body_div)
 272                 close_handle.bind('click', function(){
 273                     self.fade('out', true);
 274                 });
 275             }
 276
 277             var title_item = jQuery('<h2 />').attr('class', 'title').html(title);
 278             title_item.appendTo(this.body_div);
 279
 280             var msg_item = jQuery('<div />').attr('class', 'message').html(msg);
 281             msg_item.appendTo(this.body_div);
 282
 283             if (this.options.auto_show) {
 284                 this.show();
 285             }
 286
 287             return id;
 288         },
 289         show: function() {
 290             this.fade('in');
 291             //this.body_div.show();
 292         },
 293         hide: function() {
 294             this.fade('out');
 295             //this.body_div.hide();
 296         },
 297         fade: function(direction, destroy) {
 298             var self = this;
 299             if (direction == 'out') {
 300                 this.body_div.fadeOut('slow', function(){
 301                     if (destroy) {
 302                         self.destroy();
 303                     }
 304                 });
 305             } else {
 306                 this.body_div.fadeIn('normal', function(){
 307                 });
 308             }
 309         },
 310         remove: function() {
 311             this.body_div.remove();
 312         },
 313         destroy: function() {
 314             $.ajatus.elements.messages.remove(this.id);
 315         },
 316         bind_in_content: function(action, selector, func) {
 317             $(selector, this.body_div).bind(action, func);
 318         }
 319     });
 320
 321     $.ajatus.elements.indicator = function(label, options) {
 322         this.options = $.extend({
 323             auto_show: false
 324         }, options || {});
 325         this.body_div = null;
 326
 327         this.label = label || $.ajatus.i10n.get('Loading');
 328
 329         this.id = this.create();
 330         return this;
 331     };
 332     $.extend($.ajatus.elements.indicator.prototype, {
 333         create: function() {
 334             var id = this._gen_id();
 335
 336             this.body_div = jQuery('<div class="ajatus_elements_indicator" />').attr({
 337                 id: id
 338             }).hide();
 339             this.body_div.appendTo($.ajatus.application_dynamic_elements);
 340
 341             if (this.label != '') {
 342                 var label_item = jQuery('<div />').attr('class', 'label').html(this.label);
 343                 label_item.appendTo(this.body_div);
 344             }
 345
 346             // var indicator = jQuery('<div />').attr('class', 'loader');
 347             // indicator.appendTo(this.body_div);
 348
 349             if (this.options.auto_show) {
 350                 this.show();
 351             }
 352
 353             return id;
 354         },
 355         show: function() {
 356             this.body_div.show();
 357         },
 358         hide: function() {
 359             this.body_div.hide();
 360         },
 361         close: function() {
 362             this.hide();
 363             this.body_div.remove();
 364         },
 365         _gen_id: function()
 366         {
 367             var date = new Date();
 368             var id = 'indicator_' + date.getTime();
 369             return id;
 370         }
 371     });
 372
 373 })(jQuery);