css SphinxSearch in Argento Flat整合

Posted 2021-05-13

/* Search form scripts */
function activateSearchField(field, form, emtyText, event) {
    if (form.hasClassName('active')) {
        return true;
    }

    form.addClassName('active');
    field.addClassName('shown');
    field.focus();

    if (field.value && field.value != emtyText) {
        Event.stop(event);
        // http://stackoverflow.com/questions/13071106/set-caret-to-end-of-textbox-on-focus/13071184#13071184
        setTimeout(function() {
            if (field.createTextRange) {
                var r = field.createTextRange();
                r.collapse(true);
                r.moveEnd("character", field.value.length);
                r.moveStart("character", field.value.length);
                r.select();
            } else {
                field.selectionStart = field.selectionEnd = field.value.length;
            }
        }.bind(this), 13);
        return false;
    } else if (field.value == emtyText || field.value === '') {
        field.setValue('');
    }
    return true;
}
function deactivateSearchField(field, form) {
    field.removeClassName('shown');
    form.removeClassName('active');
}

if (typeof AjaxsearchAutocomplete !== 'undefined') {
    AjaxsearchAutocomplete.prototype.onButtonClick = AjaxsearchAutocomplete.prototype.onButtonClick.wrap(function(o, e) {
        var field = $('search'),
            form  = field.up('form'),
            value = $('search').getValue();

        if (!activateSearchField(field, form, this.options.searchtext, e)) {
            return false;
        }
        o(e);
    });

    document.observe('dom:loaded', function() {
        var close = $$('.form-search .search-close').first(),
            input = $('search');
        if (close) {
            close.observe('click', function() {
                deactivateSearchField(input, input.up('form'));
            });
        }
    });
} else {
    Varien.searchForm.prototype.submit = Varien.searchForm.prototype.submit.wrap(function(o, event) {
        if (!activateSearchField(this.field, this.form, this.emptyText, event)) {
            return false;
        }
        o(event);
    });

    document.observe('dom:loaded', function() {
        var close = $$('.form-search .search-close').first();
        if (close) {
            close.observe('click', function() {
                deactivateSearchField(searchForm.field, searchForm.field.form);
            });
        }
    });
}
/* End of search form scripts */

var MobileTogglers = function() {
    var _container = $('mobile-togglers'),
        _rules = {
        'toggle-menu': {
            on: function() {
                var el = $(_container.down('.toggle-menu').readAttribute('data-menu'));
                el.addClassName('shown');
            },
            off: function() {
                var el = $(_container.down('.toggle-menu').readAttribute('data-menu'));
                el.removeClassName('shown');
            }
        },
        'toggle-quick-links': {
            on: function() {
                $$('.quick-links')[0].addClassName('shown');
            },
            off: function() {
                $$('.quick-links')[0].removeClassName('shown');
            }
        },
        // 'toggle-search': {
        //     on: function() {
        //         $$('.btn-search')[0].simulate('click');
        //     },
        //     off: function() {
        //         $$('.search-close')[0].simulate('click');
        //     }
        // },
        'toggle-search': {
            on: function() {
                $$('.form-search')[0].addClassName('shown');
                $('search_mini_form').addClassName('active');
            },
            off: function() {
                $$('.form-search')[0].removeClassName('shown');
                $('search_mini_form').removeClassName('active');
            }
        }, 
        'toggle-cart': {
            on: function() {
                $('header-cart-content').show();
            },
            off: function() {
                $('header-cart-content').hide();
            }
        }
    };

    function _addObservers(selector, handlers) {
        if (!_container) {
            return;
        }
        _container.select('.' + selector).each(function(el) {
            el.observe('click', function(e) {
                if (el.hasClassName('active')) {
                    el.removeClassName('active');
                    _container.removeClassName('active');
                    handlers.off();
                } else {
                    for (var i in _rules) {
                        if (el.hasClassName(i)) {
                            continue;
                        }
                        _container.select('.' + i).invoke('removeClassName', 'active');
                        _rules[i].off();
                    }

                    el.addClassName('active');
                    _container.addClassName('active');
                    handlers.on();
                }
            });
        }.bind(this));
    }

    for (var i in _rules) {
        _addObservers(i, _rules[i]);
    }

    return {
        add: function(selector, handlers) {
            _addObservers(selector, handlers);
        }
    };
};
document.observe('dom:loaded', function() {
    MobileTogglers();

    enquire.register('(max-width: 480px)', {
        match: function () {
            $$('.header-content')[0].insert($$('.quick-links')[0]);
        },
        unmatch: function () {
            $$('.top-toolbar')[0].insert($$('.quick-links')[0]);
        }
    });

    $$('.product-collateral > div').each(function(el, i) {
        el.addClassName('jumbotron');
        if (i > 0) {
            el.insert({
                top: '<div class="stub"></div>'
            });
        }
    });
});

.searchautocomplete 		{ right: 70px;    top: -20px; }
.nav-container 				{ margin: 25px 90px 0 0; }
.search-field-wrapper		{ opacity: 1; }
.search-field-wrapper label { display: none; }
.header-container .form-search { top: auto; width: auto; }

@media (max-width: 480px) {
	.header-container #search_mini_form 			{ display: none; }
	.searchautocomplete 							{ right: 0px; top: 0px; padding-bottom: 15px;  }
	#search_mini_form.active .search-field-wrapper 	{ padding-left: 30px; }
	.searchautocomplete .nav						{ min-width: 300px; width: auto; }
	.nav-container 									{ margin: 0px 90px 0 0; }
}