Commits

Pedro Lima committed b2ed269

mobiweaver static resources for demos

Comments (0)

Files changed (4)

Empty file added.

mobiweaver/jquery.mobiweaver.searchhelp-0.1.css

+
+.ui-icon-searchhelp {
+    background-image: url(mobiweaver_search_help.png);
+}
+
+table.ui-mobiweaver-searchhelp { width:100%; border-spacing: 0; }
+table.ui-mobiweaver-searchhelp thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
+table.ui-mobiweaver-searchhelp th, td { text-align:left; padding:6px; }
+table.ui-mobiweaver-searchhelp tbody tr { margin: 0; display: table-row; }
+
+
+
+
+/* Stolen from datebox */
+.ui-input-searchhelp { width: 97%; background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; padding-top: 0px; padding-bottom: 0px; } 
+.ui-input-searchhelp { min-height: 38px; } /* Fix for IE8 */
+.ui-input-searchhelp .ui-btn-icon-notext { margin-top: 5px !important; margin-bottom: 5px !important; }
+.ui-input-searchhelp input { width: 87% !important; padding: 0 !important; margin-top: 5px !important; border: 1px solid transparent !important; vertical-align: middle; display: inline-block !important; background-color: transparent; zoom: 1; *display: inline; }
+.ui-input-searchhelp input:focus { outline: none;}
+.ui-input-searchhelp .ui-btn-text {display: none;}
+
+@media all and (max-width: 650px){ /* Fix internal input element at low size */
+  .ui-input-searchhelp input { width: 80% !important; }
+}
+@media all and (min-width: 450px){
+  .ui-input-searchhelp { width: 60%; display: inline-block; zoom:1; *display: inline; }
+}

mobiweaver/jquery.mobiweaver.searchhelp-0.1.js

+/*
+ * Search Help - Search Help widget for jQuery Mobile.
+ *
+ *
+ * Sources:
+ * JQuerymobile.datebox
+ * http://www.hiddentao.com/archives/2011/11/07/how-to-write-a-custom-widget-for-jquery-mobile/
+ * http://wiki.jqueryui.com/w/page/12138135/Widget%20factory
+ *
+ */
+(function($, undefined) {
+    $.widget("mobiweaver.searchhelp", $.mobile.widget , {
+        closed: false,
+        /** Available options for the widget are specified here, along with default values. */
+        options: {
+            resultField: "name",
+            disabled: false,
+            baseUrl: "/sap/bc/bsp/sap/ymwsearchhelp/",
+            transition: "pop",
+            searchHelpTheme: 'a',
+            overlayTheme: false,
+            dialogTitle:  "Search Help",
+            noResultsMsg: "No results found"
+        },
+
+        _searchhelpHandler: function(event, payload) {
+            // Handle all event triggers that have an internal effect
+            if (!event.isPropagationStopped()) {
+                switch (payload.method) {
+                    case 'open':
+                        $(this).jqmData('searchhelp').open();
+                        break;
+                    case 'close':
+                        $(this).jqmData('searchhelp').close(payload.fromCloseButton);
+                        break;
+                    case 'set':
+                        $(this).val(payload.value);
+                        $(this).trigger('change');
+                        break;
+                    case 'search':
+                        $(this).jqmData('searchhelp').search(payload.value);
+                        break;
+                    default:
+                        break;
+                }
+            }
+        },
+
+        /** Mandatory method - automatically called by jQuery Mobile to initialise the widget. */
+        _create: function() {
+            $(document).trigger("searchhelpcreate");
+            var self = this;
+            var inputElement = this.element;
+            // control when the search help form is initialized
+            var formInit = false;
+            var opts = $.extend(this.options, inputElement.jqmData("options"));
+            // get the current page's theme (or the searchHelpTheme if we can't find it)
+            var thisTheme = $.mobile.getInheritedTheme(inputElement, opts.searchHelpTheme);
+            opts.overlayTheme = opts.overlayTheme || thisTheme;
+            var thisPage = inputElement.closest('.ui-page');
+            var focusedEl = inputElement.wrap('<div class="ui-input-searchhelp ui-shadow-inset ui-corner-all ui-body-'+ thisTheme +'"></div>').parent();
+            var helpBtn = $('<a href="#" class="ui-input-clear ui-searchhelp" title="search help">search help</a>').bind('vclick', function (e) {
+                e.preventDefault();
+                if (!opts.disabled) { 
+                        self.inputElement.trigger('searchhelp', {'method': 'open'});
+                }
+                setTimeout(function() {
+                    $(e.target).closest("a").removeClass($.mobile.activeBtnClass);
+                }, 300);
+            }).buttonMarkup({icon: 'searchhelp', iconpos: 'notext', corners:true, shadow:true})
+              .css({'vertical-align': 'middle', 'float': 'right'});
+            // the formPage is kept unitialized and the page() method will be called in the first open call
+            inputElement.after(helpBtn);
+            inputElement.bind('searchhelp', this._searchhelpHandler);
+            inputElement.removeClass('ui-corner-all ui-shadow-inset').focus(function(){
+                if (!opts.disabled) {
+                    focusedEl.addClass('ui-focus');
+                }
+                inputElement.removeClass('ui-focus');
+            }).blur(function(){
+                    focusedEl.removeClass('ui-focus');
+                    inputElement.removeClass('ui-focus');
+                }
+            ).change(function() {
+                    self._update();
+                });
+            var formPage = $("<div id='formPage' data-role='dialog' class='ui-dialog' data-theme='" + opts.searchHelpTheme + "' data-overlay-theme='" + opts.overlayTheme + "'>" + 
+                                "<div data-role='header' data-backbtn='false' data-theme='" + opts.searchHelpTheme + "'>" +
+                                    "<div class='ui-title'>" + opts.dialogTitle + "</div>" +
+                                "</div>" +
+                            "<div data-role='content'></div>" +
+                            "</div>")
+                                .appendTo( $.mobile.pageContainer );
+                       // .css('zIndex', o.zindex).addClass(o.transition),
+            var listPage = $("<div data-role='dialog' class='ui-dialog' data-theme='" + opts.searchHelpTheme + "' data-overlay-theme='" + opts.overlayTheme + "'>" +
+                                "<div data-role='header' data-backbtn='false' data-theme='" + opts.searchHelpTheme + "'>" +
+                                    "<div class='ui-title'>" + opts.dialogTitle + "</div>" +
+                                "</div>" + 
+                                "<div data-role='content'></div>" +
+                            "</div>")
+                                .appendTo( $.mobile.pageContainer ).page();
+            listPage.find( ".ui-header a").bind('vclick', function(e) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                self.inputElement.trigger('saphelp', {'method':'close', 'fromCloseButton':true});
+            });
+            $.extend(this, {
+                thisPage: thisPage,
+                formInit: formInit,
+                inputElement: inputElement,
+                listPage: listPage,
+                focusedEl: focusedEl,
+                formPage: formPage
+            });
+        },
+
+        _buildUrl: function(page) {
+            return this.options.baseUrl + page;
+        },
+
+        // call the server to get the search help metadata and build the search help form
+        // execute the callback after the form initialization
+        _initForm: function() {
+            var self = this,
+                searchhelpname = this.options.searchHelp;
+            $.mobile.showPageLoadingMsg();
+            $.ajax({
+                url: this._buildUrl('fields.do'),
+                data: { sh: searchhelpname },
+                context: this.formPage.children(":jqmData(role='content')").first(),
+                dataType: "xml",
+                success: function(data) {
+                    var page = '',
+                        xmldoc = $(data);
+                    page += '<form data-role="searchhelpform">';
+                    page += '<input type="hidden" name="sh" value="' + searchhelpname + '">';
+                    xmldoc.find('field').each(function(index) {
+                        var description = $(this).text(),
+                            name = $(this).attr('name'),
+                            datatype = $(this).attr('datatype');
+                        //FIXME logic for different data types
+                        page += '<label for="' + name + '">' + description + '</label>';
+                        page += '<input type="text" name="' + name + '">';
+                    });
+                    page += '</form>';
+                    page += '<a href="#searchhelp" id="help-result-button" data-role="button" data-inline="false">Search</a>';
+                    $(this).html(page);
+                    self.formPage.page();
+                    self.formPage.find(".ui-header a").bind('tap', function(e) {
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                        self.inputElement.trigger('saphelp', {'method':'close', 'fromCloseButton':true});
+                    });
+                    $(this).children(':jqmData(role="searchhelpform")').submit(function(e) {
+                        e.preventDefault();
+                        var shFormData = $(this).serialize();
+                        self.inputElement.trigger('searchhelp', {'method':'search', 'value': shFormData});
+                        return false;
+                    });
+                    $(this).find("a").each(function() {
+                        $(this).bind('vclick', function(e) {
+                            $(this).parent().children(':jqmData(role="searchhelpform")').submit();
+                            return false;
+                        });
+                    });
+                    self.formInit = true;
+                    $.mobile.hidePageLoadingMsg();
+                    $.mobile.changePage(self.formPage, {'transition': self.transition});
+                },
+                error: function() {
+                      $.mobile.hidePageLoadingMsg();
+                }
+            });
+        },
+
+        open: function() {
+            // prevent the parent page from being removed from the DOM,
+            var self = this;
+            this.thisPage.unbind("pagehide.remove");
+            self.closed = false;
+            if (this.formInit) {
+                $.mobile.changePage(self.formPage, {'transition': this.transition});
+            } else { 
+                this._initForm();
+            }
+        },
+
+        search: function(value) {
+            // TODO prevent the form page from being removed from the DOM?
+            // this.thisPage.unbind( "pagehide.remove" );
+            var self=this,
+                searchResultsEl = this.listPage.children(":jqmData(role='content')").first();
+            searchResultsEl.empty();
+            $.mobile.showPageLoadingMsg();
+            $.ajax({
+                url: this._buildUrl('search.do'),
+                data: value,
+                dataType: "xml",
+                context: searchResultsEl,
+                error: function() {
+                    $.mobile.hidePageLoadingMsg();
+                },
+                success: function(data){
+                    var xmldoc;
+                    var resultTable = $('<table class="ui-mobiweaver-searchhelp"></table>');
+                    var resultsExist = false;
+                    xmldoc = $(data);
+                    // header row
+                    // not very efficient
+                    xmldoc.find('searchhelp entry').each( function(index) {
+                        if (index === 0) {
+                            resultsExist = true;
+                            var header = $('<thead></thead>');
+                            var headerRow = $('<tr></tr>');
+                            $(this).children().each( function() {
+                                var th = $('<th></th>').text($(this).attr('title'));
+                                headerRow.append(th);
+                            });
+                            header.append(headerRow);
+                            resultTable.append(header);
+                        }
+                    });
+                    if (resultsExist) {
+                        // data
+                        var tblBody = $('<tbody></tbody>');
+                        xmldoc.find('searchhelp entry').each( function(index) {
+                            var resultText = $(this).find("field[name='"+self.options.resultField+"']").text();
+                            // TODO exception if not found
+                            var resRow = $('<tr></tr>',  {class: 'ui-btn ui-btn-up-a', 'data-result': resultText, 'data-theme': self.options.searchHelpTheme});
+                            $(this).children().each( function() {
+                                var resData = $('<td></td>').text($(this).text());
+                                resRow.append(resData);
+                            });
+                            tblBody.append(resRow);
+                        });
+                        resultTable.append(tblBody);
+                        $(this).append(resultTable);
+                    } else {
+                          $(this).append("<p>" + self.noResultsMsg + "</p>");
+                    }
+                    $.mobile.hidePageLoadingMsg();
+                    $.mobile.changePage(self.listPage, {'transition': this.transition});
+                    $(this).find("td").each(function() {
+                        $(this).bind('vclick', function(e) {
+                            e.preventDefault();
+                            self.inputElement.trigger('searchhelp', {'method':'set', 'value': $(this).parent().attr('data-result')});
+                            self.inputElement.trigger('searchhelp', {'method':'close'});
+                        })
+                    });
+                }
+            });
+        },
+
+        close: function(fromCloseButton) {
+            // Close the controls
+            var self = this,
+                callback;
+
+            if (!fromCloseButton) {
+                // user closed the dialog by selecting a value
+                if (!self.closed) {
+                    window.history.go(-2);
+                }
+            }
+            else {
+                window.history.go(-1);
+            }
+            if( !self.thisPage.data("page").options.domCache ){
+                self.thisPage.bind( "pagehide.remove", function() {
+                    $(self).remove();
+                });
+            }
+            self.focusedEl.removeClass('ui-focus');
+            // FIXME callBack - precisamos?
+            if (self.options.closeCallback !== false) { 
+                callback = new Function(self.options.closeCallback);
+                callback(undefined, self);
+            }
+            self.closed = true;
+        },
+
+        /** Custom method to handle updates. */
+        _update: function() {
+            var inputElement = this.element;
+            var opts = $.extend(this.options, inputElement.jqmData("options"));
+            $(document).trigger("searchhelpupdate");
+        },
+
+        /* Externally callable method to force a refresh of the widget. */
+        refresh: function() {
+           return this._update();
+        },
+    // Use the destroy method to clean up any modifications your widget has made to the DOM
+    destroy: function() {
+        // remove button?
+        this.inputElement.unbind('searchhelp');
+        $.Widget.prototype.destroy.call( this );
+    }
+    } );
+    /* Handler which initialises all widget instances during page creation. */
+    $(document).bind("pagecreate", function(e) {
+       $(document).trigger("searchhelpbeforecreate");
+       return $(":jqmData(role='searchhelp')", e.target).searchhelp();
+    });
+})( jQuery );

mobiweaver/mobiweaver_search_help.png

Added
New image