v1.0.0 release

KiraLT · Feb 11, 2015 · 1552cc7 · 1552cc7
1 parent b03d449
commit 1552cc7
Show file tree

Hide file tree

Showing 7 changed files with 419 additions and 0 deletions.
diff --git a/bjax.css b/bjax.css
@@ -0,0 +1,31 @@
+.bjax-backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1050;
+    opacity: 0.8;
+    filter: alpha(opacity=80);
+    background-color: #fff;
+    color: #788188;
+}
+.bjax-bar {
+    border-top: 1px solid #eaeef1;
+    border-width: 2px;
+    border-color: #60bed1;
+}
+.bjax-bar.bjax-bar-error {
+    border-color: #d9534f;   
+}
+.bjax-backdrop-error {
+    display: block;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    color: #788188;
+    text-align: center;
+}
diff --git a/bjax.js b/bjax.js
@@ -0,0 +1,199 @@
+(function(window) {
+    if (!('jQuery' in window)) {
+        console.error('Bjax\'s JavaScript requires jQuery.');
+        return;
+    }
+    var jQuery = window.jQuery;
+
+    var isArray = function (element) {
+        return Object.prototype.toString.call(element) === '[object Array]';
+    };
+
+    var isDict = function (element) {
+        return jQuery.isPlainObject(element);
+    };
+
+    var isEmpty = function (element) {
+        if (isArray(element)) {
+            return element.length === 0;
+        } else {
+            return !element;
+        }
+    };
+
+    function Bjax (element, options) {
+        if (options === undefined && isDict(element)) {
+            options = element;
+            element = undefined;
+        }
+        element = $(element);
+        this.options = jQuery.extend({}, Bjax.defaults, options || {});
+        this.data = {};
+        if (element !== undefined) {
+            this.loadElement(element);
+        }
+        this.loadData();
+        this.loader = new Bjax.Loader($(this.data['target']));
+        this.execute();
+    };
+
+    Bjax.VERSION = '1.0.0';
+    Bjax.defaults = {
+        'url_attribute': [
+            'data-href',
+            'href'
+        ],
+        'replace_attribute': 'data-replace',
+        'replace': true,
+        'element_attribute': 'data-el',
+        'element': 'html',
+        'target_attribute': 'data-target',
+        'target': 'html'
+    };
+
+    Bjax.prototype.loadElement = function (element) {
+        var data = {
+            url: this.getValueByAttr(element, this.options.url_attribute),
+            element: this.getValueByAttr(element, this.options.element_attribute),
+            target: this.getValueByAttr(element, this.options.target_attribute),
+            replace: this.getValueByAttr(element, this.options.replace_attribute),
+        };
+        for (var key in data) {
+            if (!isEmpty(data[key])) {
+                this.data[key] = data[key];
+            }
+        }
+    };
+
+    Bjax.prototype.loadData = function (element) {
+        var data = {
+            url: this.options.url,
+            element: this.options.element,
+            target: this.options.target,
+            replace: this.options.replace,
+        };
+        for (var key in data) {
+            if (!isEmpty(data[key]) && !(key in this.data)) {
+                this.data[key] = data[key];
+            }
+        }
+    };
+
+    Bjax.prototype.getValueByAttr = function (element, attributes) {
+        if (!isArray(attributes)) {
+            attributes = [attributes];
+        }
+        for (var i=0; i<attributes.length; i++) {
+            var attr = element.attr(attributes[i]);
+            if (typeof attr !== typeof undefined && attr !== false) {
+                return attr;
+            }
+        }
+        return undefined;
+    };
+
+    Bjax.prototype.execute = function () {
+        var self = this;
+        self.loader.update(100, 500);
+        jQuery.ajax({
+            url: this.data['url'],
+            success: function(content) {
+                self.loader.update(100, 300, function() {
+                    self.render(content);
+                    self.updateUrl();
+                });
+            },
+            error: function() {
+                self.loader.error(2000, function() {
+                    self.execute();
+                });
+            }
+        });
+    };
+
+    Bjax.prototype.updateUrl = function () {
+        if (this.data['replace'] === true){
+            try {
+                window.history.pushState({}, '', this.data['url']);
+            } catch(e) {
+                window.location.replace(this.data['url']);
+            }
+        }
+    };
+
+    Bjax.prototype.render = function (content) {
+        if(this.data['element'] !== 'html') {
+            content = $(content).find(this.data['element']).html();
+        }
+        if(this.data['target'] !== 'html') {
+            $(this.data['target']).html(content);
+        } else {
+            document.open();
+            document.write(content);
+            document.close();
+        }
+        document.title = $(content).filter('title').text();
+    };
+
+    Bjax.PercentLoader = function (target) {
+        this.target = target;
+        this.backdrop = $('<div class="bjax-backdrop"></div>');
+        this.bar = $('<div class="bjax-bar"></div>');
+        this.err = $('<div class="bjax-backdrop-error"></div>');
+        this.abort = false;
+        this.init();
+    };
+
+    Bjax.PercentLoader.prototype.init = function (){
+        var self = this;
+        this.target.css('position','relative')
+        this.backdrop.appendTo(this.target);
+        this.bar.width(0)
+        this.bar.appendTo(this.backdrop);
+        this.err.appendTo(this.backdrop);
+        $(document).on('click', '.bjax-backdrop', function() {
+            $(this).remove();
+            self.abort = true;
+            $(document).off('click', '.bjax-backdrop');
+        });
+    };
+
+    Bjax.PercentLoader.prototype.update = function (progress, waittime, callback){
+        this.bar.stop().animate({
+            width: progress + '%'
+        }, waittime, 'linear', function() {
+            if (callback !== undefined) {
+                callback();
+            }
+        });
+    };
+
+    Bjax.PercentLoader.prototype.error = function (waittime, callback){
+        var self = this;
+        this.bar.stop();
+        this.bar.width(0);
+        this.bar.addClass('bjax-bar-error');
+        this.err.text('Error occurred, retrying. Click anywhere to exit.');
+        this.bar.animate({
+            width: '100%'
+        }, waittime, 'linear', function() {
+            self.bar.width(0);
+            self.bar.removeClass('bjax-bar-error');
+            if (callback !== undefined && self.abort === false) {
+                callback();
+            }
+        });
+    };
+
+    Bjax.Loader = Bjax.PercentLoader;
+
+    jQuery.fn.bjax = function (options) {
+        $(document).on('click', this.selector, function (e) {
+            new Bjax(this, options);
+            e.preventDefault();
+        });
+        return this;
+    };
+
+    window.Bjax = Bjax;
+})(window);
diff --git a/bjax.min.css b/bjax.min.css
diff --git a/bjax.min.js b/bjax.min.js
diff --git a/demo/about.html b/demo/about.html
@@ -0,0 +1,58 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+        <link rel="stylesheet" href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css">
+        <link rel="stylesheet" href="../bjax.min.css">
+        <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+        <script src="../bjax.min.js"></script>
+        <script type="text/javascript">
+            $('[data-bjax]').bjax();
+        </script>
+    </head>
+    <body>
+
+    <div class="container">
+      <div class="header">
+        <nav>
+          <ul class="nav nav-pills pull-right">
+            <li role="presentation"><a href="index.html" data-bjax>Home</a></li>
+            <li role="presentation" class="active"><a href="#">About</a></li>
+            <li role="presentation"><a href="contact.html" data-bjax>Contact</a></li>
+          </ul>
+        </nav>
+        <h3 class="text-muted">Project name</h3>
+      </div>
+
+      <div class="row marketing">
+        <div class="col-lg-6">
+          <h4>Subheading</h4>
+          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
+
+          <h4>Subheading</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Subheading</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+
+        <div class="col-lg-6">
+          <h4>Subheading</h4>
+          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
+
+          <h4>Subheading</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Subheading</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+      </div>
+
+      <footer class="footer">
+        <p>&copy; Company 2014</p>
+      </footer>
+
+    </div> <!-- /container --> 
+    </body>
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,64 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+        <link rel="stylesheet" href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css">
+        <link rel="stylesheet" href="../bjax.min.css">
+        <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+        <script src="../bjax.min.js"></script>
+        <script type="text/javascript">
+            $('[data-bjax]').bjax();
+        </script>
+    </head>
+    <body>
+
+    <div class="container">
+      <div class="header">
+        <nav>
+          <ul class="nav nav-pills pull-right">
+            <li role="presentation" class="active"><a href="#">Home</a></li>
+            <li role="presentation"><a href="about.html" data-bjax>About</a></li>
+            <li role="presentation"><a href="contact.html" data-bjax>Contact</a></li>
+          </ul>
+        </nav>
+        <h3 class="text-muted">Project name</h3>
+      </div>
+
+      <div class="jumbotron" id="signup">
+        <h1>Jumbotron heading</h1>
+        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        <p><a class="btn btn-lg btn-success" href="signup.html" role="button" data-bjax data-target="#signup" data-el="#signup">Sign up today</a></p>
+      </div>
+
+      <div class="row marketing">
+        <div class="col-lg-6">
+          <h4>Subheading</h4>
+          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
+
+          <h4>Subheading</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Subheading</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+
+        <div class="col-lg-6">
+          <h4>Subheading</h4>
+          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
+
+          <h4>Subheading</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Subheading</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+      </div>
+
+      <footer class="footer">
+        <p>&copy; Company 2014</p>
+      </footer>
+
+    </div> <!-- /container --> 
+    </body>
+</html>