添加sdk.js和web.js

ecomfe · Aug 18, 2015 · ac8a5be · ac8a5be
1 parent 97233fd
commit ac8a5be
Show file tree

Hide file tree

Showing 4 changed files with 355 additions and 0 deletions.
diff --git a/test/browser/demo/sdk.html b/test/browser/demo/sdk.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>百度开放云</title>
+    <link rel="icon" type="image/x-icon" href="./img/fi.ico">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="bower_components/jquery/dist/jquery.js"></script>
+    <script src="esl.source.js"></script>
+    <script type="text/javascript">
+    esl.config({
+      waitSeconds: 10,
+      baseUrl: 'src',
+      packages: [
+        {name: 'baidubce-sdk', location: '../dep/baidubce-sdk/0.0.0', main: 'baidubce-sdk.bundle'},
+        {name: 'async', location: '../dep/async/0.0.0', main: 'async'},
+        {name: 'etpl', location: '../dep/etpl/3.0.0/src', main: 'main'},
+        {name: 'humanize', location: '../dep/humanize/0.0.9/src', main: 'main'},
+        {name: 'moment', location: '../dep/moment/2.7.0/src', main: 'moment'},
+        {name: 'underscore', location: '../dep/underscore/1.6.0/src', main: 'underscore'},
+        {name: 'msr', location: '../dep/msr/0.0.0/src', main: 'MediaStreamRecorder'},
+        {name: 'store', location: '../dep/store/1.3.9/src', main: 'store'}
+      ]
+    });
+    </script>
+    <style type="text/css">
+    html, body {
+        margin: 0;
+        padding: 0;
+    }
+    </style>
+</head>
+<body>
+    <input type="file" id="file" />
+</body>
+<script type="text/javascript">
+// bos:///explorer/index.html
+// bos:///explorer/sdk.html
+esl(['sdk'], function (app) {
+  app.start();
+});
+</script>
+</html>
+<script>
+var _hmt = _hmt || [];
+(function() {
+  var hm = document.createElement("script");
+  hm.src = "//hm.baidu.com/hm.js?e0a1e2da956a3ea7befd58c813597fe4";
+  var s = document.getElementsByTagName("script")[0]; 
+  s.parentNode.insertBefore(hm, s);
+})();
+</script>
diff --git a/test/browser/demo/src/sdk.js b/test/browser/demo/src/sdk.js
@@ -0,0 +1,117 @@
+/**
+ * @file sdk.js
+ * @author leeight
+ */
+
+define(function (require) {
+    var sdk = require('baidubce-sdk');
+    var u = require('underscore');
+
+    var helper = require('./helper');
+
+    var kQueryString = getQueryString();
+
+    var exports = {};
+
+    var events = {
+        READY: 'ready',
+        FILE_CHANGE: 'fileChange',
+        UPLOAD_SUCCESS: 'uploadSuccess',
+        UPLOAD_FAILURE: 'uploadFailure',
+
+        UPLOAD: 'upload'
+    };
+
+    function fire(type, data) {
+        if (window === top) {
+            return;
+        }
+
+        parent.postMessage({
+            type: type,
+            data: data
+        }, '*');
+    }
+
+
+    /**
+     * 处理父页面发送过来的信息.
+     */
+    function handlePostMessage (evt) {
+        var originalEvent = evt.originalEvent;
+        var payload = originalEvent.data;
+
+        var type = payload.type;
+        var data = payload.data;
+
+        if (type === events.UPLOAD) {
+            var client = getClient();
+            var blob = $('#file').get(0).files[0];
+            $('#file').attr('disabled', true);
+            helper.upload(data.bucketName, data.objectName, blob, {}, client)
+                .then(function (response) {
+                    fire(events.UPLOAD_SUCCESS, response);
+                })
+                .catch(function (error) {
+                    fire(events.UPLOAD_FAILURE, error);
+                })
+                .fin(function () {
+                    $('#file').attr('disabled', false);
+                });
+        }
+    }
+
+    function getClient() {
+        var client = new sdk.BosClient(getConfig());
+
+        // 用户显示的设置了 ak 和 sk，不需要服务器计算
+        if (kQueryString['ed']) {
+            // 如果 url 参数里面存在 ?ed=1 那么说明是本地开发模式，需要在计算
+            // 签名的时候使用真正的Host，而不是当前页面的域名
+            client.createSignature = function (credentials, httpMethod, path, params, headers) {
+                // 修复 Host 的内容
+                headers.Host = kQueryString['ed'];
+
+                var auth = new sdk.Auth(credentials.ak, credentials.sk);
+                return auth.generateAuthorization(httpMethod, path, params, headers);
+            };
+        }
+
+        return client;
+    }
+
+    function getConfig() {
+        return JSON.parse(decodeURIComponent(kQueryString['config']));
+    }
+
+    function getQueryString() {
+        return u.object(location.search.substr(1).split('&').map(function (item) {
+            var chunks = item.split('=', 2);
+            return [chunks[0], chunks[1]];
+        }));
+    }
+
+    function handleFileChange (evt) {
+        fire(events.FILE_CHANGE, evt.target.files);
+    }
+
+    exports.start = function () {
+        $(window).on('message', handlePostMessage);
+        $('#file').on('change', handleFileChange);
+
+        fire(events.READY);
+    };
+
+    return exports;
+});
+
+
+
+
+
+
+
+
+
+
+/* vim: set ts=4 sw=4 sts=4 tw=120: */
diff --git a/test/browser/demo/src/web.js b/test/browser/demo/src/web.js
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2014 Baidu.com, Inc. All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+/**
+ * 页面中需要有 jQuery，自行引用.
+ * @constructor
+ */
+function BosWebClient(options) {
+    /**
+     * 配置信息
+     * @type {Object}
+     */
+    this.options = options;
+
+    /**
+     * Bucket的名字
+     * @type {string}
+     */
+    this.bucketName = null;
+
+    /**
+     * 上传到 Bucket 的文件名，必须以 '/' 开头.
+     * @type {string}
+     */
+    this.objectName = null;
+
+    /**
+     * SDK所在页面的引用
+     * @type {Window}
+     */
+    this._sdkWinRef = null;
+
+    /**
+     * @type {Object}
+     */
+    this._eventHandlers = {};
+}
+
+BosWebClient.prototype.on = function (type, handler, opt_context) {
+    var list = this._eventHandlers[type];
+    if (!list) {
+        list = (this._eventHandlers[type] = []);
+    }
+
+    list.push({handler: handler, context: opt_context});
+};
+
+BosWebClient.prototype.dispatchEvent = function (type, data) {
+    var list = this._eventHandlers[type];
+    if (!list) {
+        return;
+    }
+
+    for (var i = 0; i < list.length; i ++) {
+        var item = list[i];
+        try {
+            item.handler.call(item.context, data);
+        }
+        catch (ex) {
+            // IGNORE
+        }
+    }
+};
+
+
+BosWebClient.prototype.fire = function (type, data) {
+    this._sdkWinRef.postMessage({
+        type: type,
+        data: data
+    }, '*');
+};
+
+/**
+ * 初始化Web Uploader
+ * @param {jQuery} container 容器的Id.
+ */
+BosWebClient.prototype.init = function (container) {
+    var config = JSON.stringify(this.options);
+    var mark = this.options.relayUrl.indexOf('?') === -1 ? '?' : '&';
+    var iframeUrl = this.options.relayUrl + mark + 'config=' + encodeURIComponent(config);
+    // var iframeUrl = config.endpoint + '/explorer/sdk.html?config=' + encodeURIComponent(config);
+
+    container.html('<iframe src="' + iframeUrl + '">');
+
+    this._sdkWinRef = container.find('iframe').get(0).contentWindow;
+
+    var client = this;
+    $(window).on('message', function (evt) {
+        var payload = evt.originalEvent.data;
+        client.dispatchEvent(payload.type, payload.data);
+    });
+};
+
+BosWebClient.prototype.setBucketName = function (bucketName) {
+    if (!bucketName) {
+        throw new Error('Invalid bucketName');
+    }
+
+    this.bucketName = bucketName;
+};
+
+BosWebClient.prototype.setObjectName = function (objectName) {
+    if (!objectName || objectName.substr(0, 1) !== '/') {
+        throw new Error('Invalid objectName');
+    }
+
+    this.objectName = objectName;
+};
+
+BosWebClient.prototype.upload = function () {
+    if (!this.bucketName || !this.objectName) {
+        return;
+    }
+
+    this.fire('upload', {
+        bucketName: this.bucketName,
+        objectName: this.objectName
+    });
+};
+
+
+
+
+
+
+
+
+
+
+/* vim: set ts=4 sw=4 sts=4 tw=120: */
diff --git a/test/browser/demo/web.html b/test/browser/demo/web.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>百度开放云</title>
+    <link rel="icon" type="image/x-icon" href="./img/fi.ico">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="bower_components/jquery/dist/jquery.js"></script>
+    <script src="src/web.js"></script>
+</head>
+<body>
+    <div id="uploader"></div>
+</body>
+<script type="text/javascript">
+(function () {
+
+var client = new BosWebClient({
+    credentials: {
+        ak: '4c60a1d7c5c846c79bff4f304240c581',
+        sk: '42bb4f0b2f274b7eb0b544156a50e564'
+    },
+    relayUrl: 'http://172.18.19.22:8964/sdk.html?ed=10.105.97.15',
+    endpoint: 'http://172.18.19.22:8964'
+});
+
+client.on('ready', function (data) {
+    console.log(data);
+});
+client.on('uploadSuccess', function (data) {
+    console.log(data);
+});
+client.on('uploadFailure', function (data) {
+    console.log(data);
+});
+client.on('fileChange', function (data) {
+    console.log(data);
+    client.setBucketName('explorer');
+    client.setObjectName('/sdf/df/df.gif');
+    client.upload();
+});
+
+client.init($('#uploader'));
+
+})();
+</script>
+</html>