Сообщение от Триви
|
Обнулить стили у кнопки Корзины получается, но не до конца. Убрал у неё все бутстраповские классы, которые подсасывает openCart, за исключением `.dropdown-toggle`... После нажатия на кнопку она всё равно стилизуется как показано в скриншотах:
|
|
Сообщение от Триви
|
Сейчас настал черёд стилизации карусели, тот ещё гимор я так понимаю.
Главное свою не написать случайно )) А то я могу )))
|
|
Сообщение от Триви
|
Для редактирования текста Opencart использует редактор Summernote.
Хотел немножко стили под себя подправить, иду сюда admin/view/javascript/summernote/summernote.css
Открываю стили, а они сборщиком минифицированы...
|
Вы можете в Chrome DevTools выбрать на сайте нужный элемент и увидеть всю цепочку наследовании CSS. И можете менять стили элемента «вживую»! Рабочие пространства Chrome DevTools позволяют вам сохранить изменения в файле на сайте, внесенные вами в Devtools, в локальную копию того же файла на вашем компьютере. Например, предположим:
- У вас есть исходный код вашего opencart проекта на рабочем столе.
- Вы используете локальный веб-сервер (корень сайта — каталог исходного кода), так что ваш сайт доступен, например, по адресу localhost:8080.
Так что когда вы откроете localhost:8080 в Google Chrome, и вы будете использовать DevTools для изменения CSS сайта, то при включенных рабочих пространствах, изменения CSS, которые вы вносите в DevTools, сохраняются в исходном коде вашего opencart проекта. (localhost:8080 — это как пример, на самом деле может быть любой адрес)
Самый простой способ добавить папку проекта в рабочее пространство — открыть в Chrome DevTools панель Sources и перетащить туда папку. (
https://youtu.be/DJfdjdlSJho?t=56)
|
Сообщение от Триви
|
Открываю стили, а они сборщиком минифицированы.
Вот на хрена так спрашивается делать, блин?
|
А исходники? Хотя вы теперь знаете, что это не проблема!
|
Сообщение от laimas
|
|
На чем тренировки производятся, на удаленном сервере? Ставьте локальный сервер и тренируйтесь на нем, делая вывод в браузер данных дабы проверить себя, и прочее, что на реальном сервере конечно же делать не стоит.
|
Я заметил, что иногда рекомендуете устанавливать Open Server, почему не более приближённое к реальности, например, при помощи docker? (Как начать с docker?
https://www.youtube.com/watch?v=VzzwnsLX_5o Краткое описание…
https://habr.com/ru/post/309556/)
|
Сообщение от Триви
|
|
Я не совсем понял. JS-ки за пределами папки кастомной темы не меняются через модификаторы? Просто там на старом синтаксисе ES5 всё написано. Я уже стал от него отвыкать. В новом с вебпаком всё так здорово - подключил файл, расширил класс. А тут... Как мне в своём кастомном js-файле например расширить с добавлением новых свойств и методов класс псевдокласс `cart`, построенный по-старинке на объекте?
|
А с чего вы взяли, что это класс? cart — это экземпляр класса Object. Даже если написать отдельный класс Cart, то его всевозможные экземпляры будут выполнять одно и тоже.
Если вы хотите, чтобы cart был экземпляром класса Cart, то вы можете сделать так...
function Cart() {
throw new TypeError("Illegal constructor");
}
Object.defineProperty(Cart, Symbol.hasInstance, {
value: instance => cart === instance
});
Cart.prototype = cart;
Cart.prototype.constructor = Cart;
/* долгожданное наследование */
class SuperCart extends Cart {
myNewMethod() {}
}
/* теперь вместо cart используйте myCart */
const myCart = Object.create(SuperCart.prototype);
// > cart instanceof Cart
// < true
// > myCart instanceof Cart
// < true
// > myCart.add
// < ƒ (product_id, quantity)
Но действительно ли вам нужен класс в данном случае? Вы исходили из ложной предпосылки, что cart — класс, а на деле это — объект типа Object.
|
Сообщение от Триви
|
|
Как мне в своём кастомном js-файле например расширить с добавлением новых свойств и методов класс псевдокласс `cart`, построенный по-старинке на объекте?
|
Дело в том, что это не класс, а объект (экземпляр класса Object). Вы можете дописать в объект нужные функции и свойства...
Object.assign(cart, {
myNewMethod: function() {}
});
|
Сообщение от Триви
|
|
некоторые неправильно называют такие вещи как animate.css библиотеками, а я взял и повторил это.
|
|
Сообщение от laimas
|
|
Что к чему и что за такая странная библиотека (и откуда она вообще могла появиться) animate.css.
|
Всё верно, это библиотека CSS анимации. Что может быть странного и удивительного в том, чтобы часто используемые анимации вынести в отдельную библиотеку? Вот ещё больше полезных библиотек CSS анимации —
https://css-tricks.com/css-animation-libraries/
|
Сообщение от laimas
|
|
А CSS - это каскадные таблицы стилей, и коли это файл, то подключаемая. Можно конечно говорить о библиотеке, которая занимается стилями оформления темы/элементов приложения, но в среде системного программирования это ни как не .css будет.
|
Обычные программы тоже могут быть оформлены при помощи CSS — Skype, Discord, WhatsApp, Visual Studio Code и пр. И даже операционная система — Chrome OS.
|
Сообщение от Триви
|
|
CSS3 настолько мощная штука...
|
Такой вещи вообще не существует! Никто не может точно сказать и определить, что это такое! (Я спрашивал, человек, говорит — «ну там
transform есть в CSS3...» смотрим в документацию — а там —
CSS Transforms Module Level 1, вообще отдельный модуль!)
На самом деле уже с 2007 года существует «CSS Snapshot» (т.е. «снимок» состояния CSS) — периодически обновляемый документ (
https://w3.org/TR/css), один из разделов которого называется — «Официальное определение CSS».
|
Сообщение от Триви
|
the modal dialog
|
Модальное окно — окно, которое блокирует работу пользователя с приложением до тех пор, пока пользователь это окно не закроет.
|
Сообщение от laimas
|
|
Вот вам диалоги не убогие, это практически полноценные приложения, с гораздо большими возможностями чем confirm и promt. Как видите во всех браузерах открывается, но все это симуляция кроме в IE. Откройте эту ссылку в IE и посмотрите, чувствуется разница.
|
Стоит учитывать, что showModalDialog раньше работал и в Firefox и в Chrome (Ещё работает в Safari, но планируется к удалению), но в последствии был объявлен устаревшим и удалён, поскольку существует стандартизированное и более гибкое решение, которое предоставляет спецификация HTML.
«Модальное» и «блокирующее выполнение скриптов» — это не одно и тоже. «Модальное» означает поверх всего остального, предотвращение взаимодействия с остальным. Таким образом, например, диалоги jQuery UI являются модальными, но они не блокируют выполнение скриптов.
Почему window.showModalDialog был объявлен устаревшим?
В общем, идея реализации диалогового окна в браузере была действительно хорошей идеей, но window.showModalDialog было плохой реализацией, изобилующей проблемами.
Модальное диалоговое окно, созданное при помощи showModalDialog, содержит полноценный документ HTML, а не фрагмент кода. На самом деле это просто два совершенно разных окна, взаимодействующих друг с другом. Но в основном это просто добавляет ненужную сложность, усложняет реализацию браузера и вносит ряд ошибок.
Хотя важно, чтобы модальные диалоги не позволяли пользователю взаимодействовать с исходным окном, нет никаких причин, по которым ему нельзя разрешать взаимодействовать с другими вкладками или встроенными элементами управления браузера (назад/вперёд, избранное, адресная строка и пр.)
Что использовать взамен? Спецификация HTML 5.3 представляет элемент <dialog>, который используется для отображения диалогов, включая
модальные.
Элемент <dialog> представляет часть приложения, с которой пользователь может взаимодействовать, чтобы выполнить определённую задачу — диалоговое окно.
На данный момент диалоговые окна полностью
поддерживаются в Chrome и Opera, в Firefox — частичная поддержка под флагом, а остальные — нет (решается при помощи полифила, но что тебе стоит потребовать у разработчиков твоего любимого браузера все доделать?)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- polyfill -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js"></script>
<script>
if("showModal" in document.createElement('dialog') === false)
new MutationObserver(function(mutationsList, observer) {
mutationsList.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if(node.tagName === "DIALOG" && "showModal" in dialog === false)
dialogPolyfill.registerDialog(node);
});
});
}).observe(document.documentElement, { childList: true, subtree: true });
</script>
<!-- end of polyfill -->
</head>
<body>
<button id="button">open modal dialog</button>
<dialog id="dialog">
<form method="dialog">
<h1>Hi!</h1>
<p>I am a modal dialog.</p>
<button>Close me</button>
</form>
</dialog>
<script>
button.addEventListener("click", event => {
dialog.showModal();
});
</script>
</body>
</html>
Это как с чей-то легкой руки назвали обычный слой ранжируемый поверх всех с затенением остального и прочей хренью модальным окном, что к окну, а тем более модальному диалогу, не имеет вообще никакого отношения. И бывают и путаницы из-за такой вольности, когда "а" и "в" не понимают друг друга во время диалога. В JS есть три модальных диалога - alert, confirm и promt, плюс в IE существуют еще два - showModalDialog и showModelessDialog, все остальное чушь полнейшая, как бы их кто-то не называл, хоть супер модальные, от этого они ими не станут. Более близкое по смыслу к библиотеке, это набор js-функций и т.п. подключаемых, а css, это правила стилей, равно как, например, в подключаемом json описание опций, конфигураций и пр.
