Use backbone for about me page

package-lock.json

@@ -1490,6 +1490,15 @@
       "integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==",
       "dev": true
     },
+    "backbone": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/backbone/-/backbone-1.3.3.tgz",
+      "integrity": "sha1-TMgOp8sWMaxHSInOQPL4vGg7KZk=",
+      "dev": true,
+      "requires": {
+        "underscore": "1.9.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -5588,6 +5597,12 @@
         "is-object": "1.0.1"
       }
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
+      "dev": true
+    },
     "js-base64": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",
@@ -6911,6 +6926,12 @@
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
           "integrity": "sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE=",
           "dev": true
+        },
+        "underscore": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
+          "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag=",
+          "dev": true
         }
       }
     },
@@ -9981,9 +10002,9 @@
       }
     },
     "underscore": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
-      "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag=",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.0.tgz",
+      "integrity": "sha512-4IV1DSSxC1QK48j9ONFK1MoIAKKkbE8i7u55w2R6IqBqbT7A/iG7aZBCR2Bi8piF0Uz+i/MG1aeqLwl/5vqF+A==",
       "dev": true
     },
     "union-value": {

package.json

@@ -5,11 +5,14 @@
   "version": "1.0.0",
   "description": "Homepage",
   "devDependencies": {
+    "backbone": "^1.3.3",
     "css-loader": "^0.28.11",
+    "jquery": "^3.3.1",
     "node-sass": "^4.9.0",
     "prettier": "^1.12.1",
     "sass-loader": "^7.0.1",
     "style-loader": "^0.21.0",
+    "underscore": "^1.9.0",
     "webpack": "^4.5.0",
     "webpack-cli": "^2.0.14"
   },
@@ -17,5 +20,6 @@
     "watch": "",
     "build": "webpack --config webpack.config.js --progress",
     "build-prod": "webpack --config webpack.config.js --env.production"
-  }
+  },
+  "dependencies": {}
 }

source/_assets/about_me/index.js

@@ -1,7 +1,14 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+import Metrika from '../common/metrika';
 import './style.scss'
 
-const notes = [
-    'Любимый фильм "Три идиота".',
+
+const PageView = Backbone.View.extend({
+
+    notes: [
+        'Люблю фильм "Три идиота".',
         'Люблю кататься на велосипеде.',
         'Люблю читать фантастические книги.',
         'Люблю шоколад.',
@@ -11,30 +18,46 @@ const notes = [
         'Проехал на велосипеде 200 километров за день.',
         'Работаю программистом.',
         'Хотел бы побывать в горах.',
-];
+    ],
 
-function selectRandomNote() {
-    return notes[Math.floor(Math.random() * notes.length)];
-}
+    shown: [],
 
-function updateNode() {
-    const el = document.getElementById('about-me-note');
-    if (el) {
-        el.innerHTML = selectRandomNote();
+    events: {
+        'click #know-better': 'onClickKnowBetter',
+    },
+
+    initialize() {
+        this.render();
+    },
+
+    render() {
+        this.showRandomFact();
+        return this;
+    },
+
+    pickRandomFact() {
+        let available = _.difference(this.notes, this.shown);
+        if (_.size(available) === 0) {
+            available = this.notes;
+            this.shown = [];
         }
-}
 
-function onKnowBetter(event) {
-    event.preventDefault();
-    if (window.yaCounter41913764) {
-        window.yaCounter41913764.hit(location.href);
-    }
-    updateNode();
-}
+        const phrase = _.sample(available);
+        this.shown.push(phrase);
 
-window.addEventListener('DOMContentLoaded', updateNode);
+        return phrase;
+    },
 
-const el = document.getElementById('know-better');
-if (el) {
-    el.addEventListener('click', onKnowBetter);
-}
+    showRandomFact() {
+        const fact = this.pickRandomFact();
+        this.$('#about-me-note').text(fact);
+    },
+
+    onClickKnowBetter(evt) {
+        evt.preventDefault();
+        this.showRandomFact();
+        Metrika.hit(location.href);
+    },
+});
+
+new PageView({ el: $('.js-about-me')});

source/_assets/common/metrika.js

@@ -0,0 +1,9 @@
+class Metrika {
+    hit(name) {
+        if (window.yaCounter41913764) {
+            window.yaCounter41913764.hit(name);
+        }
+    }
+}
+
+export default new Metrika();

source/about/me.html.twig

@@ -9,10 +9,10 @@ title: Обо мне
 
 {% block content %}
 
-  <section class="about-me">
+  <section class="about-me js-about-me">
     <div class="about-me__content">
 
-      <div class="about-me__note" id="about-me-note">Я люблю шоколад.</div>
+      <div class="about-me__note" id="about-me-note"></div>
 
       <ul class="about-me__links">
         <li class="about-me__link">