Merge pull request #2 from sergeyzharko/2-Babel

2 babel
sergeyzharko · Jan 9, 2018 · 7a132a3 · 7a132a3
2 parents ed32ab6 + 5cf4628
commit 7a132a3
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 20 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": ["env"],
+  "plugins": [
+    "./plugin.js"
+  ]
+}
diff --git a/ReadMe.txt b/ReadMe.txt
@@ -0,0 +1,38 @@
+�������� �������:
+��� ������ Babel ��������� ������ � Firefox � IE10
+
+
+Write your own plugin which will convert all true
+values to the false.
+Ex.:
+var q = true; => var q = false;
+if (a==true) => if (a===false)
+
+astexplorer.net
+
+
+
+��� ������� 2:
+������� ������, ������� ������� ��� ��������� console.log();
+
+
+
+
+�� ��� � ������� 3 ������� - �� 3 ������ ���������� babel, �� 4 ������� ��������� ie10, �� 5 - �������� ������
+
+��� ��� ������ ��� ��� ����� ������ �������
+
+
+
+
+
+���� ��������� babel ������ 3
+
+������� ie10 - 4
+
+������� ������ 5
+
+
+
+
+������ async/await - 5+++
diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
     <head>
         <title>News API</title>
         <link rel="stylesheet" type="text/css" href="style.css">
+        <script src="nodeListForEach.js"></script>
+        <script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script> <!-- for async/await -->
+        <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@6/promise.min.js"></script> <!-- https://github.com/stefanpenner/es6-promise -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script> <!-- https://github.com/github/fetch -->
     </head>
     <body>
-        <script type="text/javascript" src="script.js"></script>
+        <script type="text/javascript" src="script-compiled.js"></script>
         <div class="buttons"></div>
         <div class="news"></div>
     </body>

diff --git a/nodeListForEach.js b/nodeListForEach.js
@@ -0,0 +1 @@
+NodeList.prototype.forEach = Array.prototype.forEach;
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "news",
+  "version": "1.0.0",
+  "description": "",
+  "main": "script.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1"
+  }
+}
diff --git a/plugin.js b/plugin.js
@@ -0,0 +1,17 @@
+module.exports = function (babel) {
+  return {
+    visitor: {
+      CallExpression(path) {
+        // console.log(path);
+        if (path.get("callee").node.object) {
+            if (
+                path.get("callee").node.object.name === 'console'
+                && path.get("callee").node.property.name === 'log'
+            ) { path.remove() };
+        } 
+        // reverse the name: JavaScript -> tpircSavaJ
+        // path.node.name = name.split("").reverse().join("");
+      }
+    }
+  };
+}
diff --git a/script-compiled.js b/script-compiled.js
@@ -0,0 +1,96 @@
+'use strict';
+
+// Async/Await - задание со звёздочкой
+var readSourceArray = function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+                switch (_context.prev = _context.next) {
+                    case 0:
+                        _context.next = 2;
+                        return sources;
+
+                    case 2:
+                        return _context.abrupt('return', _context.sent);
+
+                    case 3:
+                    case 'end':
+                        return _context.stop();
+                }
+            }
+        }, _callee, this);
+    }));
+
+    return function readSourceArray() {
+        return _ref.apply(this, arguments);
+    };
+}();
+
+function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
+
+var sources = [{
+    name: 'Google News',
+    logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Google_News_Logo.svg/1200px-Google_News_Logo.svg.png',
+    link: 'google-news-ru'
+}, {
+    name: 'BBC News',
+    logo: 'http://m.files.bbci.co.uk/modules/bbc-morph-news-waf-page-meta/1.2.0/bbc_news_logo.png',
+    link: 'bbc-news'
+}, {
+    name: 'РБК',
+    logo: 'http://www.raketa.com/wp-content/uploads/RBC.jpg',
+    link: 'rbc'
+}];
+
+var url = 'https://newsapi.org/v2/sources?' + 'apiKey=f53b56a81c57478689c3058487c41269';
+
+var req = new Request(url);
+
+fetch(req).then(function (response) {});
+
+function loadSources() {
+    var buttons = document.querySelector('.buttons');
+
+    readSourceArray().then(function (sources) {
+        sources.forEach(function (source) {
+            var button = document.createElement('div');
+            button.classList.add('source');
+            button.classList.add(source.link);
+            button.innerHTML = '\n                    <img class="source-image" src="' + source.logo + '" alt="' + source.name + '">\n                    <a href="#"><div class="picture lion"></div></a>';
+            button.addEventListener('click', function () {
+                return loadNews(source.link);
+            });
+            buttons.appendChild(button);
+        });
+    });
+}
+
+document.addEventListener("DOMContentLoaded", loadSources);
+
+function loadNews(link) {
+    document.querySelectorAll('.source').forEach(function (element, index) {
+        return element.classList.remove('selected');
+    });
+    document.querySelector('.' + link).classList.add('selected');
+    var url = 'https://newsapi.org/v2/top-headlines?sourceS=' + link + '&apiKey=f53b56a81c57478689c3058487c41269';
+    var req = new Request(url);
+    fetch(req).then(function (response) {
+        return response.json();
+    }).then(function (response) {
+        return renderNews(response.articles);
+    });
+}
+
+function renderNews(articles) {
+    var items = document.querySelector('.news');
+    items.innerHTML = '';
+    articles.forEach(function (article) {
+        var dateTime = new Date(article.publishedAt);
+        var dateTimeRow = dateTime.getFullYear() + '.' + dateTime.getMonth() + '.' + dateTime.getDay() + ' ' + dateTime.getHours() + ':' + dateTime.getMinutes();
+        var item = document.createElement('div');
+
+        item.setAttribute('class', 'article');
+        item.innerHTML = '\n            <a href="' + article.url + '"><h4>' + article.title + '</h4></a>\n            <img class="news-image" src="' + article.urlToImage + '">\n            <p>' + article.description + '</p>\n            <p>Published: ' + dateTimeRow + '</p>';
+        items.appendChild(item);
+    });
+}
diff --git a/script.js b/script.js
@@ -28,36 +28,40 @@ fetch(req)
 })
 
 
+// Async/Await - задание со звёздочкой
+async function readSourceArray(){
+    return await sources;
+}
+
+
 
 function loadSources() {
     let buttons = document.querySelector('.buttons');
 
-    for (let source of sources) {
-        let button = document.createElement('div');
-        button.classList.add('source');
-        button.classList.add(source.link);
-        button.innerHTML = `
-            <img class="source-image" src="${source.logo}" alt="${source.name}">
-            <a href="#"><div class="picture lion"></div></a>`;
-        button.addEventListener('click', function(){ loadNews(source.link) });
-        buttons.appendChild(button);
-    }
+    readSourceArray().then(
+        (sources => {
+            sources.forEach( source => {
+                let button = document.createElement('div');
+                button.classList.add('source');
+                button.classList.add(source.link);
+                button.innerHTML = `
+                    <img class="source-image" src="${source.logo}" alt="${source.name}">
+                    <a href="#"><div class="picture lion"></div></a>`;
+                button.addEventListener('click', () => loadNews(source.link) );
+                buttons.appendChild(button);
+            });
+        }) 
+    )
 }
 
 document.addEventListener("DOMContentLoaded", loadSources);
 
 
 function loadNews(link) {
-    document.querySelectorAll('.source').forEach(function(element, index){
-        element.classList.remove('selected');
-    });
-
+    document.querySelectorAll('.source').forEach( (element, index) => element.classList.remove('selected') );
     document.querySelector(`.${link}`).classList.add('selected');
-
     var url = `https://newsapi.org/v2/top-headlines?sourceS=${link}&apiKey=f53b56a81c57478689c3058487c41269`;
-
     var req = new Request(url);
-
     fetch(req)
     .then( response => response.json() )
     .then( response => renderNews(response.articles) )
@@ -66,7 +70,7 @@ function loadNews(link) {
 function renderNews(articles) {
     let items = document.querySelector('.news');
     items.innerHTML = '';
-    for (let article of articles) {
+    articles.forEach( article => {
         let dateTime = new Date(article.publishedAt);
         let dateTimeRow = `${dateTime.getFullYear()}.${dateTime.getMonth()}.${dateTime.getDay()} ${dateTime.getHours()}:${dateTime.getMinutes()}`;
         let item = document.createElement('div');
@@ -78,5 +82,5 @@ function renderNews(articles) {
             <p>${article.description}</p>
             <p>Published: ${dateTimeRow}</p>`;
         items.appendChild(item);  
-    }
+    });
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		NodeList.prototype.forEach = Array.prototype.forEach;