Response for Brackets - original v0.0.1
Форма авторизации
Главная Разное / Прочее Response for Brackets - original v0.0.1

Response for Brackets - original v0.0.1

Ben Rooney
Response for Brackets - original v0.0.1
Оригинал инструмента Responsive Design для Brackets от Lee Brimelow.

ВАЖНО: этот код в настоящее время работает хорошо только на Brackets sprint 25. Автор не имел времени на его обновление для более последних версий Brackets, но я не думаю, что это потребует много усилий.

Добро пожаловать в исходный код настроек Responsive Design для Brackets. Помните, что в настоящее время этот код на самом деле работает просто как прототип. Но если вы не будете следовать приведенным ниже рекомендациям, вы сможете самостоятельно попробовать его обновить.

Ознакомьтесь с демо
Прежде чем рассматривать и изменять код, вы сначала должны проверить работоспособность Responsive Design в Brackets. Следуйте инструкциям ниже, для того, чтобы начать:
- Откройте Brackets и перейдите в меню Файл > Открыть папку и выберите папку Демо-сайт.
- Теперь вы должны увидеть split view и пользовательский интерфейс UI.
- Далее смотрите видео и выполняйте точно такие же шаги, которые автор сделал в демо-версии для тестирования функции.



Существует не много проверок в коде, так что после просмотренного демо, позволит вам увидеть особенности без каких-либо проблем и ошибок.

Структура Исходного кода
Этот прототип был построен в качестве расширения не с целью внесения каких-либо изменений в код ядра Brackets. Модифицированные файлы находятся в папке SRC / bracketsCoreChanges и автор опишит их ниже. Просто нужно переписать текущие файлы в Brackets с модифицированных версий.

Список изменений основного кода Brackets

EditorManager.js
В общем, вы не сможете создать встроенный CSS редактор, который конкурируется с официальным Brackets. Автору это пришлось просто поменять. Вот измененный код:

Код
162 if(providers[i].name.indexOf("inlineEditorProvider") !== -1)
163 inlinePromise = provider(editor, pos);


FileSyncManager.js
Так как я пишу все на временное Brackets CSS файлов не остановится выдаёт сообщение о внешних изменениях, грязные файлов и т.д. Этот мод только что сделал это игнорировать мой файл. Вот измененный код:

Код
252 if (true) {
253 result.resolve();
254 return promise;
255 }


DocumentManager.js
Опять вопрос был с временным файлом CSS. Я не хочу, показывая в панели проекта или рабочего набора. Код ниже в основном говорит "так долго, как это не мое дело, делать то, что вы хотите".

Код
220 function addToWorkingSet(file) {
221 if(file.fullPath.indexOf("temp") === -1) {


Основные исходные файлы

main.js
Это, где все это происходит. Основной файл расширение составляет около 1500 линий.

Query.js
Это "класс", который представляет собой один запрос СМИ и все его данные. Это было написано в то время как назад, так что это не модуль requireJS, а само выполнение анонимную функцию.

Splitter.js
Brackets модуль так называемый Resizer, который дает вам возможность изменять размер панели. Так как автор делает некоторые довольно интенсивные вещи, он переписал его, чтобы сделать его супер легким. Автор также удалил весь JQuery от него.

ResponseInlineEdit.js
Для этого инструмента, все что ему нужно это встроенный редактор, которым вы можете просто дополнять строку, без необходимости бэк-файла и документа. То, что в конечном итоге делает автор, это создать супер легкую обертку вокруг InlineTextEditor, используя MultiRangeInlineEditor в качестве руководства.

ResponseUtils.js
Этот модуль содержит несколько вспомогательных функций для CSS анализа и некоторых функций DOM.

respond.css
Весь CSS для широких режимов живет здесь.

TweenMax.min.js
Это библиотека анимация которую использует автор, чтобы оживить элементы IFRAME и строки кода в редакторе.

Как заставить его работать должным образом
То, что автор построил на самом деле работает очень хорошо, но это прототип, так что на самом деле не проверяет и происходит ошибка. Следуйте инструкциям ниже, чтобы иметь гладкую работу.
- Автор предполагает, что вы знаете, как сделать эти файлы и получить их из уже установленного в Brackets.
- Когда вы запускаете Brackets, вы должны увидеть значок на панели инструментов, который запускает вас в режим Responsive. Если вы этого не сделаете, то вы не поместите эти файлы в нужное место.
- Откройте меню Инструменты разработчика, для того чтобы было полезно знать, какие ошибки вы видите, если таковые имеются.
- Откройте файл index.html, а затем либо нажмите на иконку на панели инструментов или нажмите Cmd-2 (Ctrl-2 для Win), чтобы запустить в Responsive режим.
- Теперь вы должны увидеть вид разделения с превью выше и редактора ниже.
- Первое, что вы должны сделать, это создать медиа запрос. Перемещая линейку, нажмите на кнопку +.
- Нажмите кнопку режима проверки, чтобы попытаться подсветить DOM.
- Нажатие на DOM элемента, должно быть анимированным правильной линией кода в целях в редакторе.
- Нажмите на метку, в редакторе следует переместить элемент DOM на место.
- Вы можете выбрать DOM элемент и нажмать Cmd-E (Ctrl-E для Win), чтобы войти в режим быстрого редактирования.

На этом всё, всем спасибо за внимание!


Комментарии к материалу
Всего комментариев: 0

avatar