-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
работа с DOM переведена на JQuery (#23)
- Loading branch information
Showing
27 changed files
with
22,337 additions
and
1,758 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,27 @@ | ||
| // slider | ||
| const sliderChange = function sliderChange(element) { | ||
| const { value } = element; | ||
| const width = element.parentElement.clientWidth - 20; | ||
| const min = element.attributes.min.value; | ||
| const max = element.attributes.max.value; | ||
| element.previousElementSibling.innerText = value; | ||
| element.previousElementSibling.style.left = `${((width / (max - min)) * (value - min)) - 8.75}px`; | ||
| }; | ||
| /* global $ */ | ||
| import convertRemToPixels from '../../scripts/convertRemToPixels'; | ||
|
|
||
| const sliderInput = function sliderInput(event) { | ||
| sliderChange(event.target); | ||
| }; | ||
| class Slider { | ||
| constructor(element) { | ||
| this.$element = $(element); | ||
| this.$parent = this.$element.parent(); | ||
| this.$view = this.$parent.find('.slider__view'); | ||
| this.$line = this.$parent.find('.slider__line'); | ||
| this.sliderChange.call(this); | ||
| this.$element.on('input.slider', this.sliderChange.bind(this)); | ||
| } | ||
| sliderChange() { | ||
| const { $element } = this; | ||
| const width = $element.width() - convertRemToPixels(1.25); | ||
| const value = $element.val(); | ||
| const min = this.$element.prop('min'); | ||
| const max = this.$element.prop('max'); | ||
| const newLeft = ((width / (max - min)) * (value - min)) - convertRemToPixels(0.625); | ||
| this.$view.text(value).css({ left: newLeft }); | ||
| const newWidth = ((width / (max - min)) * (value - min)) + convertRemToPixels(0.625); | ||
| this.$line.width(newWidth); | ||
| } | ||
| } | ||
|
|
||
| (function initSliders() { | ||
| const elements = document.querySelectorAll('.js-slider__input'); | ||
| elements.forEach((element) => { | ||
| sliderChange(element); | ||
| element.oninput = sliderInput; | ||
| }); | ||
| }()); | ||
| let sliders = []; | ||
| $('.js-slider__input').each((index, element) => sliders.push(new Slider(element))); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,17 @@ | ||
| // ripple effect | ||
| const rippleEffect = function rippleEffect(event) { | ||
| const div = document.createElement('div'); | ||
| div.id = 'ripple'; | ||
| div.style.top = `${event.pageY - 25}px`; | ||
| div.style.left = `${event.pageX - 25}px`; | ||
| /* global $ */ | ||
| import convertRemToPixels from '../../scripts/convertRemToPixels'; | ||
|
|
||
| document.body.appendChild(div); | ||
| setTimeout(() => { document.body.removeChild(div); }, 550); | ||
| }; | ||
|
|
||
| (function initButtons() { | ||
| const elements = document.querySelectorAll('.standart-button'); | ||
| elements.forEach((element) => { | ||
| element.onclick = rippleEffect; | ||
| }); | ||
| }()); | ||
| class Button { | ||
| constructor(element) { | ||
| this.$element = $(element).on('click.standart-button', this.rippleEffect.bind(this)); | ||
| this.size = convertRemToPixels(2); | ||
| } | ||
| rippleEffect(event) { | ||
| const $div = $('<div/>').attr('id', 'button__ripple'); | ||
| $div.css({ top: `${event.offsetY - this.size}px`, left: `${event.offsetX - this.size}px` }); | ||
| this.$element.append($div); | ||
| setTimeout(() => $div.remove(), 550); | ||
| } | ||
| } | ||
| let buttons = []; | ||
| $('.standart-button').each((index, element) => buttons.push(new Button(element))); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,6 @@ | ||
| import './index.styl'; | ||
| import './favicons/favicons'; | ||
| import './components/slider/slider'; | ||
| import './components/standart-button/standart-button'; | ||
| import Controller from './mvc/controller/Controller.ts'; | ||
|
|
||
| const controller = new Controller(); |
Oops, something went wrong.