Use backbone for about me page
This commit is contained in:
parent
4e73b218bf
commit
f01622b7a6
27
package-lock.json
generated
27
package-lock.json
generated
@ -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": {
|
||||
|
||||
@ -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": {}
|
||||
}
|
||||
|
||||
@ -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')});
|
||||
|
||||
9
source/_assets/common/metrika.js
Normal file
9
source/_assets/common/metrika.js
Normal file
@ -0,0 +1,9 @@
|
||||
class Metrika {
|
||||
hit(name) {
|
||||
if (window.yaCounter41913764) {
|
||||
window.yaCounter41913764.hit(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new Metrika();
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user