feature(smalltalk) add progress

coderaiser · coderaiser · commit 4c1094727943 · 2019-04-01T15:28:07.000+03:00
diff --git a/README.md b/README.md
@@ -88,6 +88,19 @@ smalltalk
     });
 ```
 
+## smalltalk.progress(title, message)
+
+![Progress](https://raw.githubusercontent.com/coderaiser/smalltalk/master/screen/progress.png "Progress")
+
+```js
+const progress = smalltalk.progress('Cloud Commander', 'Copy /home/coderaiser -> /home/coderaiser/2');
+
+progress.setProgress(41);
+    .catch(() => {
+        console.log('abort');
+    });
+```
+
 ## Custom label 
 
 You can use custom label passing into options param the buttons specification. For example :
diff --git a/css/smalltalk.css b/css/smalltalk.css
@@ -56,6 +56,11 @@
     background-image: url(../img/IDR_CLOSE_DIALOG_H.png);
 }
 
+.smalltalk .progress {
+    display: block;
+    width: 100%;
+}
+
 .smalltalk .page header {
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/example/index.html b/example/index.html
@@ -9,5 +9,6 @@
         }, function() {
             console.log('close');
         })
-    });   
+    });
 </script>
+
diff --git a/example/progress.html b/example/progress.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta content="width=device-width,initial-scale=1" name="viewport">
+
+<script src="../dist/smalltalk.min.js"></script>
+<script>
+    window.addEventListener('DOMContentLoaded', () => {
+        smalltalk.progress('Title').then((value) => {
+            console.log(value);
+        }, () => {
+            console.log('close');
+        })
+    });
+</script>
+
diff --git a/lib/smalltalk.js b/lib/smalltalk.js
@@ -40,6 +40,42 @@ exports.confirm = (title, msg, options) => {
     return showDialog(title, msg, '', buttons, options);
 };
 
+exports.progress = (title, message, options) => {
+    const valueStr = `
+        <progress value="0" data-name="js-progress" class="progress" max="100"></progress>
+        <span data-name="js-counter">0%</span>
+    `;
+    
+    const buttons = {
+        cancel: 'Abort',
+    };
+    
+    const promise = showDialog(title, message, valueStr, buttons, options);
+    const {ok, dialog} = promise;
+    const resolve = ok();
+    
+    find(dialog, ['cancel']).map((el) => {
+        el.focus();
+    });
+    
+    Object.assign(promise, {
+        setProgress(count) {
+            const [elProgress] = find(dialog, ['progress']);
+            const [elCounter] = find(dialog, ['counter']);
+            
+            elProgress.value = count;
+            elCounter.textContent = `${count}%`;
+            
+            if (count === 100) {
+                remove();
+                resolve();
+            }
+        },
+    });
+    
+    return promise;
+};
+
 function getButtons(options = {}) {
     const {buttons} = options;
     
@@ -135,7 +171,10 @@ function showDialog(title, msg, value, buttons, options) {
     
     dialog.addEventListener('keydown', keyDown(dialog, ok(), cancel()));
     
-    return promise;
+    return Object.assign(promise, {
+        dialog,
+        ok,
+    });
 }
 
 function keyDown_(dialog, ok, cancel, event) {
diff --git a/package.json b/package.json
@@ -11,14 +11,17 @@
   "scripts": {
     "watch": "nodemon --watch lib --watch test --exec",
     "watch:client": "redrun compile:client -- --watch",
+    "watch:client:dev": "redrun compile:client:dev -- --watch",
     "watch:test": "npm run watch -- npm test",
     "watch:lint": "npm run watch -- 'npm run lint'",
     "watch:lint:js": "npm run watch -- \"run lint:js\"",
     "watch:coverage": "redrun watch -- redrun coverage",
+    "watch:legacy": "npm run watch -- redrun compile:legacy",
     "coverage": "nyc npm test",
     "report": "nyc report --reporter=text-lcov | coveralls",
-    "compile:server": "babel -d legacy lib",
+    "compile:legacy": "babel -d legacy lib",
     "compile:client": "webpack --progress --mode production",
+    "compile:client:dev": "webpack --progress --mode development",
     "build": "redrun clean init build:*",
     "build:js": "redrun compile:* legacy:*",
     "legacy:index": "echo \"module.exports = require('./smalltalk');\" > legacy/index.js",
@@ -29,7 +32,7 @@
     "lint:js": "eslint lib test webpack.config.js",
     "lint": "redrun lint:*",
     "test": "tape 'test/**/*.js'",
-    "test:update": "UPDATE_FIXTURE=1 redrun test",
+    "test:update": "UPDATE_FIXTURE=1 npm test",
     "init": "mkdirp native"
   },
   "keywords": [
diff --git a/screen/progress.png b/screen/progress.png
diff --git a/test/fixture/progress.html b/test/fixture/progress.html
@@ -0,0 +1,17 @@
+<div class="page">
+        <div data-name="js-close" class="close-button"></div>
+        <header>title</header>
+        <div class="content-area">hello<br>world
+        <progress value="0" data-name="js-progress" class="progress" max="100"></progress>
+        <span data-name="js-counter">0%</span>
+    </div>
+        <div class="action-area">
+            <div class="button-strip">
+                <button
+            tabindex=0
+            data-name="js-cancel">
+            Abort
+        </button>
+            </div>
+        </div>
+    </div>
diff --git a/test/smalltalk.js b/test/smalltalk.js
@@ -41,7 +41,8 @@ const fixture = {
     promptNoValue: readFixture('prompt-no-value'),
     alertCustomLabel: readFixture('alert-custom-label'),
     confirmCustomLabel: readFixture('confirm-custom-label'),
-    promptCustomLabel: readFixture('prompt-custom-label')
+    promptCustomLabel: readFixture('prompt-custom-label'),
+    progress: readFixture('progress'),
 };
 
 test('smalltalk: alert: innerHTML', (t, {document}) => {
@@ -1038,3 +1039,52 @@ test('smalltalk: prompt: custom label', (t, {document}) => {
     t.end();
 });
 
+test('smalltalk: progress: innerHTML', (t, {document}) => {
+    const {createElement} = document;
+    const el = create();
+    createElement.returns(el);
+    
+    smalltalk.progress('title', 'hello\nworld');
+    fixture.progress.update(el.innerHTML);
+    
+    t.equal(fixture.progress(), el.innerHTML, 'should be equal');
+    t.end();
+});
+
+test('smalltalk: progress: setProgress', (t, {document}) => {
+    const valueEl = create();
+    
+    const {createElement} = document;
+    const el = create();
+    
+    el.querySelector.returns(valueEl);
+    createElement.returns(el);
+    
+    const progress = smalltalk.progress('title', 'hello\nworld');
+    
+    progress.setProgress(10);
+    
+    t.equal();
+    t.end();
+});
+
+test('smalltalk: progress: setProgress: 100', (t, {document}) => {
+    const valueEl = create();
+    valueEl.parentElement = create();
+    
+    document.querySelector.returns(valueEl);
+    
+    const {createElement} = document;
+    const el = create();
+    
+    el.querySelector.returns(valueEl);
+    createElement.returns(el);
+    
+    const progress = smalltalk.progress('title', 'hello\nworld');
+    
+    progress.setProgress(100);
+    
+    t.equal();
+    t.end();
+});
+
diff --git a/webpack.config.js b/webpack.config.js
@@ -6,11 +6,11 @@ const dir = './lib';
 const dist = path.resolve(__dirname, 'dist');
 const devtool = 'source-map';
 
-const rules = [{
+const rules = [/*{
     test: /\.js$/,
     exclude: /node_modules/,
     loader: 'babel-loader',
-}, {
+},*/ {
     test: /\.css$/,
     loader: 'style-loader!css-loader!clean-css-loader',
 }, {
