2gis / makeup Goto Github PK

Поиск по блокам/состояниям не работает. Он должен круто фильтровать левую панель, разворачивать нужные блоки, и т.д. и т.п.

Описать (или хотя бы упомянуть), что при нажатии на 1-4 будет выбран один из способов наложения.

Можно попросить отдать https://www.npmjs.com/package/makeup

Индикатор у блока, горящий красным или зелёным, показывающий валидность по каким-то встроенным линтерам css/html (или даже w3c) и кастомным плагинам. По клику показывает отчёт.

Exclude miniCard template from index.html of demo to separate file or to js.

Use history API where it is possible.

Найдены следующие баги:

• Мейкап появляется над содержимым сайта и скролится вместе с ним.
• На body висит text-algin: center;, из-за чего названия блоков в мейкап так же центрируются.
• Неплохо было-бы убивать адреса ссылок при просмотре верстки, чтобы никуда не редиректило в случае нажатия.

Ошибка в консоли

Uncaught TypeError: miniCardTemplate is not a function
    at Makeup._templating (http://2gis.github.io/makeup/demo/:40:37)
    at Makeup._renderItem (http://2gis.github.io/makeup/demo/dist/makeup.js:25281:42)
    at Makeup._obey (http://2gis.github.io/makeup/demo/dist/makeup.js:25142:22)
    at Makeup._init (http://2gis.github.io/makeup/demo/dist/makeup.js:24721:18)
    at Object.<anonymous> (http://2gis.github.io/makeup/demo/dist/makeup.js:24685:23)
    at fire (http://2gis.github.io/makeup/demo/dist/makeup.js:3148:30)
    at Object.fireWith [as resolveWith] (http://2gis.github.io/makeup/demo/dist/makeup.js:3260:7)
    at Object.deferred.(anonymous function) [as resolve] (http://2gis.github.io/makeup/demo/dist/makeup.js:3350:34)
    at http://2gis.github.io/makeup/demo/dist/makeup.js:24643:20
    at dispatch (http://2gis.github.io/makeup/demo/dist/makeup.js:4670:9)

Make script.js, place it on github.io, make code-snippet for inserting that script on any web-page.

Script should download Makeup, parseDom and then init Makeup with found blocks.

Во-первых, ссылка в README.md на репозиторий, некорректная, исправьте пожалуйста.

Система: Mac OS X.
После клонирования проекта из репозитория и попытки установить, появляется ошибка следующего содержания:

andshulga@dev ~/shulga/test/makeup (master) $ npm i
-
> [email protected] preinstall /Users/andshulga/shulga/test/makeup/node_modules/gmsmith
> gm -version || convert -version

sh: gm: command not found
sh: convert: command not found
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/bin/npm" "install"
npm ERR! node v0.12.0
npm ERR! npm  v2.1.2
npm ERR! code ELIFECYCLE

npm ERR! [email protected] preinstall: `gm -version || convert -version`
npm ERR! Exit status 127
npm ERR!
npm ERR! Failed at the [email protected] preinstall script.
npm ERR! This is most likely a problem with the gmsmith package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gm -version || convert -version
npm ERR! You can get their info via:
npm ERR!     npm owner ls gmsmith
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/andshulga/shulga/test/makeup/npm-debug.log

Привет!

Заметил, что было бы удобно иметь возможность менять цвет фона в мэйкапе.
В идеале было бы здорово прикрутить палитру цветов или поле с вводом нужного цвета.

Подключаемый файл не должен быть минифицирован, сильно усложняет дебаг.

Предлагаю интернационализировать промосайт. Сделать переключатель English | Русский, по умолчанию показывать английский. Строки к сайту я переведу.

Для перевода можно использовать www.transifex.com, он бесплатен для опенсорса.

экстремальных же, ну

Install them on npm start

method() which returns array of string with all blocks names on page.

Make possibility to minimize makeup. Website behind it must be accessible.

В репе не должно быть dist, а в npm только она по сути и должна быть. См. как сделано у handlebars.

Problem: some data, templates, images etc. may be unavailable before window.onload.

Delay Makeup initialization up to that event.

Make button for inserting full data in auto mode for any block. (like smiley).

Also, fix smiley.

Еще раз здравствуйте)

Можно ли по принципу из этого вопроса указать для блока свою функцию template(), которая вызавалась бы вместо функции, переданной в Makeup(), и также как она генерировала html разметку?

Make it right way, with noConflict.

Remember, old version of handlebars has no noConflict method.

В списке горячих клавиш:

• ~ – Свернуть или развернуть меню со списком блоков.

Сейчас тильда только сворачивает меню, обратно только через кнопку.

Убрать зависимости от types, groupTypes и прочее. Входное дерево должно быть простым и любого уровня вложенности.

Привет.

Подключили Makeup к стартеркиту на вебпак. Для некоторых компонентов, после отрисовки, нужно выполнять скрипт, чтобы компонент принял окончательный внешний вид (используются jquery плагины). Можно ли среагировать на переключение элемента, чтобы после вставки элемента на страницу его проинициализировать?

Сейчас решили проблему так:

import pugTemplate from './index.pug';
import render from '../calendar';

const data = {
  name: 'calendar',
  type: 'module',
  items: [{
    name: 'default.calendar.component',
    type: 'module',
  }]
};

function template({module: blockName}) {
  switch (blockName) {
    case 'default.calendar.component': {
      setTimeout(() => {render()}, 300);
      return pugTemplate({});
    }
  }
}

export {
  data,
  template,
}

здесь функцию render() нужно выполнить после отрисовки блока default.calendar.component.

После смены формата попытка инициализировать на массиве фейлится - списка блоков нет. Но и в консоли нет ничего.

Посмотреть, может ещё каких ошибок добавить.

cmd+T is a common keyboard shortcut for fast "jump-to" search. We can make slack/sublime/github-like popup with fuzzy search.

Also we can use @romanyanke's idea with item tags.

gulp-clean считается depricated. Вместо него лучше использовать gulp-rimraf. А еще лучше npm-модуль del

Неправильно работает вложенный jQuery: асинхронные методы в итоге вызывают внешний инстанс jQuery, а не внутренний. Например, если у внешнего барона нет, а у внутреннего есть, всё пропало.

Make items instead of data

User should have as many freedom as we can give him.

Think about default values for item fields; structure freedom; simplicity of data structure.

Fix listeners on nested "makeup" block - they must not work.

Привет,

Большое спасибо за интересный проект и активный выход в опенсорс! Меня очень впечатляет ваш серьезный подход к разработке верстки, отсюда собственно и вопрос, как вы документируете UI компоненты в компании?

Возможно вы ранее уже видели/слышали, что я активно занимаюсь идеей создания Style Guide Platform и мы с ребятами разрабатываем движек для этого дела - SourceJS. Вижу что ваш инструмент легко вписывается в наше идеальное видение процесса разработки UI, вот например интерфейс Clarify в SourceJS http://sourcejs.com/specs/example-bootstrap-bundle/carousel/?clarify=true&sections=1.

Clarify берет компонент из общей странницы документации, и позволяет его тестировать в разных шаблонах, упрощая подход Living Style Guide Driven Development. Мы ранее планировали добавить туда плагин для image regression тестирование, было бы интересно совместить ваш инструмент с Clarify, как расширение/плагин.

Если у вас есть подобные решения, я бы с удовольствием хотел бы с вами пообщаться и обменяться опытом.

Если вы еще активно не разрабатываете стайл гайды для своих компонентов, вам так же может пригодиться мой обзор инструментов http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/.

Короче, дело к ночи.

Надо запилить режим, когда подключаешь либу на страницу, дёргаешь её без параметров, она парсит эту страницу, разбивая её на блоки, выводя эти блоки в сайдбаре и т.п.

То есть смысл в быстром старте и быстрой оценки возможностей Makeup рядовым верстальщиком.

Запилить демку