kf5 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a3eb3a3fec42ed6f95a4a436ecaece42593d6edd
-  data.tar.gz: c7d1515809f053724790d54cca8c3e2b12cfdb28
+  metadata.gz: 50231b0a61f410d1d4d532d091b04927d9b275c4
+  data.tar.gz: fe9f484fd4ae97eb4443e6aceb07b9663933d411
 SHA512:
-  metadata.gz: 5aa8979a24e1087d587f50ff52288bc520d3dab17ea589fc42b6e69eb346f28faf5de8fc903945960b39853ddd68f546c3ece1af85273201a409d68776e68e01
-  data.tar.gz: dab062f39fbdaa8dc5ba06b28c10f9d55ef1123ae1546582c5b467b28f91efdb52f7c73d06bc27ff0118383de023a0081532846118a3822e7a177aee5452ff22
+  metadata.gz: 032f67d39110a4cdc78ad65855b2d74c5b4dfc4d544ce67858fab624fef3533ef3056e0437613aa8d98a0dc400cae945401c8bc3805a2b4d16bd4148921feca4
+  data.tar.gz: 1b741f647529dee6eb897ea7392937d319edb2f3487efaddf6876f169f135474cd0a114bc0e62a7a447bc811c6bf8eb123d3dd1d1e5867393fd57db50aada80e

data/.travis.yml

@@ -0,0 +1,4 @@
+language: ruby
+rvm:
+  - 2.2.2
+before_install: gem install bundler

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+# v0.2.0 / 2015-09-19
+
+* add embedded javascript plugin.
+
 # v0.1.0 / 2015-09-03
 
 Create project

data/Gemfile

@@ -2,3 +2,6 @@ source 'https://rubygems.org'
 
 # Specify your gem's dependencies in presenters.gemspec
 gemspec
+
+gem 'simplecov', :require => false
+gem 'coveralls', :require => false

data/README.md

@@ -1,5 +1,8 @@
 # KF5
 
+[![Build Status](https://api.travis-ci.org/emn178/kf5.png)](https://travis-ci.org/emn178/kf5)
+[![Coverage Status](https://coveralls.io/repos/emn178/kf5/badge.svg?branch=master)](https://coveralls.io/r/emn178/kf5?branch=master)
+
 A library to integrate with KF5 help desk.[逸創云客服](http://www.kf5.com/)
 
 ## Installation
@@ -50,6 +53,11 @@ Or you can assaign arguments manaully
 redirect_to_kf5 :username => 'username' # others....
 ```
 
+In view, you can use `kf5_tag` to include javascript plugin.
+```ruby
+= kf5_tag
+```
+
 ## License
 
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/app/assets/javascripts/kf5.js

@@ -0,0 +1,561 @@
+(function(window, config)
+{
+    "use strict";
+
+    var 
+        script = window.document.getElementById('kf5-provide-supportBox'),
+        parts = script.src.split('//'),
+        host = parts.length > 1 ? parts[0] + '//' + parts[1].split('/')[0] : '',
+        kf5Domain = script.getAttribute('kf5-domain'),
+        supportboxConfigURL = '//' + kf5Domain + '/supportbox/buttonconfig',
+        _config = {
+            btn_name           : '帮助按钮',
+            facade             : '1', 
+            color              : '#7A88FF', 
+            position           : 'right',
+            iframeURL          : '//' + kf5Domain + '/supportbox/index',
+            btn_icon           : '//assets.kf5.com/supportbox/images/icon2.png',
+            styleURL           : '//assets.kf5.com/supportbox/css/btn.css',
+            template           : '<div id="kw-tab" class="kf5-support-btn" style="{{bg_color}}"> <img src="{{btn_icon}}" alt=""><span>{{title}}</span> </div> <div id="kw-block" class="kf5-support"> <a id="kw-close" class="kf5-close" title="关闭"><i class="icon-clear"></i></a> <div id="kw-loading" class="kf5-loading"> </div> <iframe id="kw-widget-iframe" src="" scrolling="no" frameborder="0"></iframe> </div>'
+        };
+
+    function KF5SupportBox(config)
+    {
+        this.config = config || {};
+
+        this.init();
+    }
+
+    window.KF5SupportBox = KF5SupportBox;
+
+    KF5SupportBox.prototype = {
+
+        el: null,
+
+        getElement: function(selector)
+        {
+            return window.document.getElementById(selector.replace('#', ''));
+        },
+
+        getOpt: function(key)
+        {
+            if(this.config.hasOwnProperty(key))
+            {
+                return this.config[key];
+            }
+            else
+            {
+                return _config[key];
+            }
+        },
+
+        init: function()
+        {
+            this._prepareStyle();
+
+            return this;
+        },
+
+        initElements: function()
+        {
+            this._prepareElement();
+            this.append();
+
+            this._bindEvents();
+        },
+
+        append: function()
+        {
+            window.document.body.appendChild(this.el);
+
+            return this;
+        },
+
+        _prepareStyle: function()
+        {
+            var link = window.document.createElement('link');
+
+            link.rel = 'styleSheet';
+            link.type = 'text/css';
+            link.href = this.getOpt('styleURL');
+
+            var self = this;
+            link.onload = function()
+            {
+                self.initElements();
+                link.onload = null;
+            };
+
+            window.document.body.appendChild(link);
+
+            return this;
+        },
+
+        _prepareElement: function()
+        {
+            var className = 'kf5-support-123456789';
+
+            // 位置
+            if(this.getOpt('position') === 'left')
+            {
+                className += ' kf5-left';
+            }
+            else
+            {
+                className += ' kf5-right'
+            }
+
+            // 外观
+            className += ' kf5-style' + (parseInt(this.getOpt('facade')) || 1);
+
+            // 设备
+            if(this.getOpt('is_mobile'))
+            {
+                className += ' kf5-mobile';
+            }
+
+            this.el = window.document.createElement('div');
+            this.el.setAttribute('class', className);
+            this.el.innerHTML = this.getOpt('template')
+                    .replace('{{title}}', this.getOpt('btn_name') || '获取帮助')
+                    .replace('{{btn_icon}}', this.getOpt('btn_icon'))
+                    .replace('{{bg_color}}', this.getOpt('color') ? 'background:' + this.getOpt('color') : '');
+
+            return this;
+        },
+
+        _bindEvents: function()
+        {
+            var self = this;
+            this.getElement('#kw-tab').onclick = function()
+            {
+                self.open();
+            };
+
+            this.getElement('#kw-close').onclick = function()
+            {
+                self.close();
+            };
+
+            this.getElement('#kw-widget-iframe').onload = function()
+            {
+                // setTimeout(function()
+                // {
+                    self.getElement('#kw-loading').style.display = 'none';
+                // }, 2000);
+                
+            };
+
+            if(cookie('kf5-supportBox-autoOpen'))
+            {
+                this.open();
+            }
+
+            return this;
+        },
+
+        loadIframe: function()
+        {
+            var iframe = this.getElement('#kw-widget-iframe');
+
+            if(!iframe.getAttribute('src'))
+            {
+                iframe.setAttribute('src', this.getOpt('iframeURL'));
+            }
+
+            return this;
+        },
+
+        // resizeIframe: function(data)
+        // {
+        //     var elem = this.getElement('#kw-block');
+
+        //     if(elem)
+        //     {
+        //         elem.style.height = parseFloat(data) + 'px';
+        //     }
+        // },
+
+        open: function(e)
+        {
+            if(!this.isOpened)
+            {
+                hideElement(this.getElement('#kw-tab'));
+
+                this.loadIframe();
+                // slideUp(this.getElement('#kw-widget-iframe'), 400);
+                slideUp(this.getElement('#kw-block'), 400);
+
+                cookie('kf5-supportBox-autoOpen', 1, {expires: 3 / 24, path: '/'});
+
+                this.isOpened = true;
+            }
+        },
+
+        close: function(e)
+        {
+            // slideDown(this.getElement('#kw-widget-iframe'), 400);
+            slideDown(this.getElement('#kw-block'), 400);
+
+            showElement(this.getElement('#kw-tab'));
+            // this.getElement('#kw-widget-iframe').setAttribute('src', '');
+            
+            cookie('kf5-supportBox-autoOpen', null, {path: '/'});
+
+            this.isOpened = false;
+        }
+    };
+
+    var supportbox;
+    function onload()
+    {
+        var script = window.document.createElement('script'),
+            configURL = supportboxConfigURL;
+
+        embed(configURL, function(win)
+        {
+            if(win.KF5_SUPPORTBOX_BUTTON && win.KF5_SUPPORTBOX_BUTTON.show)
+            {
+                supportbox = new KF5SupportBox(win.KF5_SUPPORTBOX_BUTTON);
+
+                // 延时自动加载iframe
+                // setTimeout(function()
+                // {
+                //     supportbox.loadIframe();
+                // }, 30 * 1000);
+            }            
+        });
+    }
+
+    document.addEventListener('page:load', onload, false);
+    window.addEventListener('load', onload, false);
+
+    // allow cross origin operation
+    window.addEventListener('message', function(e)
+    {
+        var context, cmd, data;
+
+        if(e.data)
+        {
+            context = e.data.match(/^([^ ]+)(?: +(.*))?/);
+            cmd = context[1];
+            data = context[2];
+        }
+
+        if(cmd === 'CMD::showSupportbox')
+        {
+            if(supportbox)
+            {
+                supportbox.open();
+            }
+        }
+        else if(cmd === 'CMD::hideSupportbox')
+        {
+            if(supportbox)
+            {
+                supportbox.close();
+            }
+        }
+        else if(cmd === 'CMD::resizeIframe')
+        {
+            // supportbox.resizeIframe(data);
+        }
+    });
+
+    function embed(mainJS, output) 
+    {
+        var domain, doc, iframeWindow, iframeDoc,
+            iframe = window.document.createElement("iframe");
+
+        iframe.src = "javascript:false", 
+        iframe.title = "", 
+        iframe.role = "presentation", 
+        (iframe.frameElement || iframe).style.cssText = "display: none", 
+        window.document.body.appendChild(iframe);
+        iframeWindow = iframe.contentWindow, 
+        iframeDoc = iframeWindow.document;
+
+        try {
+            doc = iframeDoc
+        } catch (c) {
+            domain = window.document.domain, 
+            iframe.src = 'javascript:var doc=document.open();doc.domain="' + domain + '";void(0);', 
+            doc = iframeDoc
+        }
+
+        doc.open().start = function() {
+            if(output)
+            {
+                if(typeof output === 'object')
+                {
+                    output.iframeWindow = iframeWindow;
+                }
+                else if(typeof output === 'function')
+                {
+                    output(iframeWindow);
+                }
+            }
+        }, 
+
+        doc.write('<body onload="document.start();">'), 
+        doc.write('<script src="' + mainJS + '""></script>'), 
+        doc.close();
+    }
+
+    function getStyle(el, style)
+    {
+        var 
+            pnum = (/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/).source,
+            rmargin = /^margin/,
+            rposition = /^(top|right|bottom|left)$/,
+            rnumnonpx = new RegExp( "^(" + pnum + ")(?!px)[a-z%]+$", "i" ),
+
+            getStyles, curCSS;
+
+        if ( window.getComputedStyle ) {
+            getStyles = function( elem ) {
+                return elem.ownerDocument.defaultView.getComputedStyle( elem, null );
+            };
+
+            curCSS = function( elem, name, computed ) {
+                var width, minWidth, maxWidth, ret,
+                    style = elem.style;
+
+                computed = computed || getStyles( elem );
+
+                // getPropertyValue is only needed for .css('filter') in IE9, see #12537
+                ret = computed ? computed.getPropertyValue( name ) || computed[ name ] : undefined;
+
+                if ( computed ) {
+
+                    // if ( ret === "" && !jQuery.contains( elem.ownerDocument, elem ) ) {
+                    //     ret = jQuery.style( elem, name );
+                    // }
+
+                    // A tribute to the "awesome hack by Dean Edwards"
+                    // Chrome < 17 and Safari 5.0 uses "computed value" instead of "used value" for margin-right
+                    // Safari 5.1.7 (at least) returns percentage for a larger set of values, but width seems to be reliably pixels
+                    // this is against the CSSOM draft spec: http://dev.w3.org/csswg/cssom/#resolved-values
+                    if ( rnumnonpx.test( ret ) && rmargin.test( name ) ) {
+
+                        // Remember the original values
+                        width = style.width;
+                        minWidth = style.minWidth;
+                        maxWidth = style.maxWidth;
+
+                        // Put in the new values to get a computed value out
+                        style.minWidth = style.maxWidth = style.width = ret;
+                        ret = computed.width;
+
+                        // Revert the changed values
+                        style.width = width;
+                        style.minWidth = minWidth;
+                        style.maxWidth = maxWidth;
+                    }
+                }
+
+                // Support: IE
+                // IE returns zIndex value as an integer.
+                return ret === undefined ?
+                    ret :
+                    ret + "";
+            };
+        } else if ( document.documentElement.currentStyle ) {
+            getStyles = function( elem ) {
+                return elem.currentStyle;
+            };
+
+            curCSS = function( elem, name, computed ) {
+                var left, rs, rsLeft, ret,
+                    style = elem.style;
+
+                computed = computed || getStyles( elem );
+                ret = computed ? computed[ name ] : undefined;
+
+                // Avoid setting ret to empty string here
+                // so we don't default to auto
+                if ( ret == null && style && style[ name ] ) {
+                    ret = style[ name ];
+                }
+
+                // From the awesome hack by Dean Edwards
+                // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
+
+                // If we're not dealing with a regular pixel number
+                // but a number that has a weird ending, we need to convert it to pixels
+                // but not position css attributes, as those are proportional to the parent element instead
+                // and we can't measure the parent instead because it might trigger a "stacking dolls" problem
+                if ( rnumnonpx.test( ret ) && !rposition.test( name ) ) {
+
+                    // Remember the original values
+                    left = style.left;
+                    rs = elem.runtimeStyle;
+                    rsLeft = rs && rs.left;
+
+                    // Put in the new values to get a computed value out
+                    if ( rsLeft ) {
+                        rs.left = elem.currentStyle.left;
+                    }
+                    style.left = name === "fontSize" ? "1em" : ret;
+                    ret = style.pixelLeft + "px";
+
+                    // Revert the changed values
+                    style.left = left;
+                    if ( rsLeft ) {
+                        rs.left = rsLeft;
+                    }
+                }
+
+                // Support: IE
+                // IE returns zIndex value as an integer.
+                return ret === undefined ?
+                    ret :
+                    ret + "" || "auto";
+            };
+        }
+
+        return curCSS && curCSS(el, style);
+    }
+
+    function slideUp(elem, duration)
+    {
+        var originalStyle = elem.getAttribute('style');
+        elem.style.display = 'block';
+        var originalHeight = parseInt(getStyle(elem, 'height'));
+
+        elem.style.height = '0px';
+
+        duration = duration || 500;
+        var tStart = Date.now(),
+            cost = 0,
+            timer = setInterval(function()
+            {
+                cost = (Date.now() - tStart) / duration;
+                cost = cost > 1 ? 1 : cost;
+
+                elem.style.height = cost * originalHeight + 'px';
+
+                if(cost >= 1)
+                {
+                    clearInterval(timer);
+                    timer = null;
+                    
+                    if(originalStyle)
+                    {
+                        elem.setAttribute('style', originalStyle);
+                    }
+                    else
+                    {
+                        elem.removeAttribute('style');
+                    }
+                    elem.style.display = 'block';
+                }
+            }, 1000 / 60);
+    }
+
+    function slideDown(elem, duration)
+    {
+        var originalStyle = elem.getAttribute('style');
+        elem.style.display = 'block';
+
+        var originalHeight = parseInt(getStyle(elem, 'height'));
+
+        duration = duration || 500;
+        var tStart = Date.now(),
+            cost = 0,
+            timer = setInterval(function()
+            {
+                cost = (Date.now() - tStart) / duration;
+                cost = cost > 1 ? 1 : cost;
+
+                elem.style.height = (1 - cost) * originalHeight + 'px';
+
+                if(cost >= 1)
+                {
+                    clearInterval(timer);
+                    timer = null;
+                    
+                    if(originalStyle)
+                    {
+                        elem.setAttribute('style', originalStyle);
+                    }
+                    else
+                    {
+                        elem.removeAttribute('style');
+                    }
+                    elem.style.display = 'none';
+                }
+            }, 1000 / 60);
+    }
+
+    function hideElement(el)
+    {        
+        el.style.display = 'none';
+    }
+
+    function showElement(el)
+    {
+        el.style.display = 'block';
+    }
+
+    function cookie(name, value, options) 
+    {
+        if (typeof value != 'undefined') 
+        { // name and value given, set cookie 
+            options = options || {};
+            if (value === null) {
+                value = '';
+                options.expires = -1;
+            }
+            var expires = '';
+            if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
+                var date;
+                if (typeof options.expires == 'number') {
+                    date = new Date();
+                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
+                } else {
+                    date = options.expires;
+                }
+                expires = '; expires=' + date.toUTCString();
+            }
+            var path = options.path ? '; path=' + (options.path) : '';
+            var domain = options.domain ? '; domain=' + (options.domain) : '';
+            var secure = options.secure ? '; secure' : '';
+            document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
+        } else {
+            var cookieValue = null;
+            if (document.cookie && document.cookie != '') {
+                var cookies = document.cookie.split(';');
+                for (var i = 0; i < cookies.length; i++) {
+                    var cookie = cookies[i].replace(/^\s+|\s+$/g, '');
+                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                        break;
+                    }
+                }
+            }
+            return cookieValue;
+        }
+    }
+
+    function isPC()
+    {
+        var userAgentInfo = navigator.userAgent;
+        var Agents = ['Android', 'iPhone',
+                    'SymbianOS', 'Windows Phone',
+                    'iPad', 'iPod'];
+        var flag = true;
+
+        for(var i = 0; i < Agents.length; i++)
+        {
+            if(userAgentInfo.indexOf(Agents[i]) !== -1)
+            {
+                flag = false;
+                break;
+            }
+        }
+
+        return flag;
+    }
+
+})(window);

data/lib/kf5.rb

@@ -5,6 +5,7 @@ require "kf5/version"
 require "kf5/configuration"
 require "kf5/properties"
 require "kf5/helper"
+require "kf5/view_helper"
 
 module KF5
   def self.configure(&block)
@@ -21,6 +22,10 @@ module KF5
         ActiveSupport.on_load :action_controller do
           include KF5::Helper
         end
+        ActiveSupport.on_load :action_view do
+          include KF5::ViewHelper
+        end
+        Rails.application.config.assets.precompile += %w( kf5.js )
       end
     end
   end

data/lib/kf5/version.rb

@@ -1,3 +1,3 @@
 module KF5
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/lib/kf5/view_helper.rb

@@ -0,0 +1,7 @@
+module KF5
+  module ViewHelper
+    def kf5_tag
+      javascript_include_tag "kf5.js", :id => "kf5-provide-supportBox", :"kf5-domain" => "#{KF5.configuration.domain}.kf5.com"
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: kf5
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Chen Yi-Cyuan
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-09-03 00:00:00.000000000 Z
+date: 2015-09-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -75,18 +75,21 @@ extra_rdoc_files: []
 files:
 - ".gitignore"
 - ".rspec"
+- ".travis.yml"
 - CHANGELOG.md
 - Gemfile
 - Gemfile.lock
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/assets/javascripts/kf5.js
 - kf5.gemspec
 - lib/kf5.rb
 - lib/kf5/configuration.rb
 - lib/kf5/helper.rb
 - lib/kf5/properties.rb
 - lib/kf5/version.rb
+- lib/kf5/view_helper.rb
 homepage: https://github.com/emn178/kf5
 licenses:
 - MIT