From f01622b7a64da614d35f426d1f360a34c7582e9c Mon Sep 17 00:00:00 2001 From: Anton Vakhrushev Date: Sun, 29 Apr 2018 11:06:17 +0300 Subject: [PATCH] Use backbone for about me page --- package-lock.json | 27 ++++++++-- package.json | 6 ++- source/_assets/about_me/index.js | 89 ++++++++++++++++++++------------ source/_assets/common/metrika.js | 9 ++++ source/about/me.html.twig | 4 +- 5 files changed, 96 insertions(+), 39 deletions(-) create mode 100644 source/_assets/common/metrika.js diff --git a/package-lock.json b/package-lock.json index bf69ac2..1287174 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index 72e7cf6..4274244 100644 --- a/package.json +++ b/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": {} } diff --git a/source/_assets/about_me/index.js b/source/_assets/about_me/index.js index 999ed0e..f574032 100644 --- a/source/_assets/about_me/index.js +++ b/source/_assets/about_me/index.js @@ -1,40 +1,63 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; +import Metrika from '../common/metrika'; import './style.scss' -const notes = [ - 'Любимый фильм "Три идиота".', - 'Люблю кататься на велосипеде.', - 'Люблю читать фантастические книги.', - 'Люблю шоколад.', - 'На день рождения ко мне можно прийти без подарка.', - 'Не люблю пьяных людей.', - 'Предпочитаю ходить в кино на 2D-сеансы.', - 'Проехал на велосипеде 200 километров за день.', - 'Работаю программистом.', - 'Хотел бы побывать в горах.', -]; -function selectRandomNote() { - return notes[Math.floor(Math.random() * notes.length)]; -} +const PageView = Backbone.View.extend({ -function updateNode() { - const el = document.getElementById('about-me-note'); - if (el) { - el.innerHTML = selectRandomNote(); - } -} + notes: [ + 'Люблю фильм "Три идиота".', + 'Люблю кататься на велосипеде.', + 'Люблю читать фантастические книги.', + 'Люблю шоколад.', + 'На день рождения ко мне можно прийти без подарка.', + 'Не люблю пьяных людей.', + 'Предпочитаю ходить в кино на 2D-сеансы.', + 'Проехал на велосипеде 200 километров за день.', + 'Работаю программистом.', + 'Хотел бы побывать в горах.', + ], -function onKnowBetter(event) { - event.preventDefault(); - if (window.yaCounter41913764) { - window.yaCounter41913764.hit(location.href); - } - updateNode(); -} + shown: [], -window.addEventListener('DOMContentLoaded', updateNode); + events: { + 'click #know-better': 'onClickKnowBetter', + }, -const el = document.getElementById('know-better'); -if (el) { - el.addEventListener('click', onKnowBetter); -} + 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 = []; + } + + const phrase = _.sample(available); + this.shown.push(phrase); + + return phrase; + }, + + 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')}); diff --git a/source/_assets/common/metrika.js b/source/_assets/common/metrika.js new file mode 100644 index 0000000..25ebbc3 --- /dev/null +++ b/source/_assets/common/metrika.js @@ -0,0 +1,9 @@ +class Metrika { + hit(name) { + if (window.yaCounter41913764) { + window.yaCounter41913764.hit(name); + } + } +} + +export default new Metrika(); diff --git a/source/about/me.html.twig b/source/about/me.html.twig index 61ea47d..540b948 100644 --- a/source/about/me.html.twig +++ b/source/about/me.html.twig @@ -9,10 +9,10 @@ title: Обо мне {% block content %} -
+
-
Я люблю шоколад.
+