Przed wszystkim sprzedaj mi jak zrobiłeś efekt ripple do pracy by mi sie przydał, a nic nie mogłem znależć jak to uzyskać :). Tak, nie używamy frameworków. A teraz przejdźmy do projektu, pierwszy plus za to, że jest to coś więcej niż strona portfolio, to zawsze cenię. Związku z tym nie będę oceniał HTML/CSS tylko całość jako framework.
1. trochę dużo rzeczy trzeba importować.
<!-- ICONS -->
<link rel="stylesheet" href="https://aurolia-css.github.io/lib/fontawesome/css/all.css">`
<!-- /ICONS -->
<!-- JQUERY -->
<script src="https://aurolia-css.github.io/download/jquery.min.js"></script>
<script src="https://aurolia-css.github.io/download/jquery-ui.min.js"></script>
<!-- /JQUERY -->
<!-- CSS & JS -->
<script src="https://aurolia-css.github.io/download/aurolia.js" defer></script>
<link rel="stylesheet" href="https://aurolia-css.github.io/download/aurolia.css">
<!-- /CSS & JS -->
jQuery i twój kod można zapakować w jedną paczkę, za pomocą webpacka.
Ikony jak i cssy również da się zrobić w jedną paczkę, tu patrz webpack. Bądź podobne rzeczy.
<script src="https://aurolia-css.github.io/download/aurolia.js" defer></script>
Dlaczego jako defer? Ostatecznie niech użytkownik wstawi na końcu body. Ostatecznie async. Defer może spowodować to, że HTML przestanie się renderować bo trzeba coś z JS-a wczytać.
2. Czemu to nie jest paczka npm? Szybciej jest serwować od siebie, niż z servera github.
3.Masz mnóśtwo plików html, które nie są mi potrzebne do życia. Może warto je schować do docs?
Przejdżmy do środka. Zacznę od mojego ulubionego Vue.
4. Ok..Gdzie tu jest kod? Nie widzę takiego folderu jak /src
5.Przejdę, jednak do pliku aurolia.js. No jest trochę duży.
6.Załóżmy, ze użytkownik nie chcę tego i tego i powiedzmy tego. Twoim przypadku jest to niemożliwe, podzieliłbym to na mniejsze segmenty i zrobiłym to tak Aurolia.use(), jeśli chcialbym użyć w swoim projekcie.
7. Zainstaluj sobie eslinta do projektu. Bo trochę cieżko się czyta.
function toggleClassName(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}
}
jQuery coś takiego ma. https://api.jquery.com/toggleClass/.
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
} else {
root.Dragdealer = factory();
}
}(this, function () {
var Dragdealer = function(wrapper, options) {
this.options = this.applyDefaults(options || {});
this.bindMethods();
this.wrapper = this.getWrapperElement(wrapper);
if (!this.wrapper) {
return;
}
this.handle = this.getHandleElement(this.wrapper, this.options.handleClass);
if (!this.handle) {
return;
}
this.init();
this.bindEventListeners();
};
Dragdealer.prototype = {
defaults: {
disabled: false,
horizontal: true,
vertical: false,
slide: true,
steps: 0,
snap: false,
loose: false,
speed: 0.1,
xPrecision: 0,
yPrecision: 0,
handleClass: 'handle',
css3: true,
activeClass: 'active',
tapping: true
No dobra a jak chciallbym coś zmienić, speed teraz nie mogę to ładnie zmienić. Według mnie powinno wyglądać tak:
new Aurelia().Carousel({speed: 0.2})
i w konstruktorze.
class Carousel {
constructor(properties) {
this.speed = properties.speed || 0.2;
}
}
Powinno zadziałać, gdzieś również powinen być sprawdzany typ danych, jeśli użytkownik przypadkowo wpisał string a my chcemy int.
this.wrapper = this.getWrapperElement(wrapper);
Gdzie jest zmienna wrapper?
W dokumentacji nic takiego się nie pojawia.
if (typeof(wrapper) == 'string')
if (typeof wrapper === 'string')
getWrapperElement: function(wrapper) {
if (typeof(wrapper) == 'string') {
return document.getElementById(wrapper);
} else {
return wrapper;
}
}
z tego wynika, że jak podam 12 to mi coś zwróci, według do przepisania.
Ok, podaj mi przyklad, kiedy to nie jest string. Bo widzę, że tylko w jednym miejscu jest używana.
(wrapper.getElementsByClassName)
wlaściwie co próbujesz sprawdzić tym warunkiem?
handleClassMatcher = new RegExp('(^|\\s)' + handleClass + '(\\s|$)');
childElements = wrapper.getElementsByTagName('*');
for (i = 0; i < childElements.length; i++) {
if (handleClassMatcher.test(childElements[i].className)) {
return childElements[i];
}
Wydaje mi się, że tak jest łatwiej
wrapper.querySelectorAll(handleClass)
Chyba, że źle rozumiem tą cześć kodu.
I mam dziwne wrażenie, że karuzela nie jest twoja. Zatrzymałem się na 78 linijce, później zerknę co masz dalej.
EDIT: No to przechodzę dalej, Tak jak wspominałem, kod tamtej karuzeli jest słabej jakości. Plus taką galeryjkę można napisać samym CSS ;).
W ciągu dalszym widzę, że tylko 2 miejscach jest wykorzystany jQuery, nie wspominając o jQueryUI. Własciwie możesz wskazać co jest twoje po stronie JS?
