Skip to content

Instantly share code, notes, and snippets.

@reykozz
Created September 1, 2015 22:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save reykozz/32bfe5f8da6bd6e9c993 to your computer and use it in GitHub Desktop.
Save reykozz/32bfe5f8da6bd6e9c993 to your computer and use it in GitHub Desktop.
material-design-lite-snippets

A collection of MDL snippets for Brackets editor.

Install

Git Clone

  1. Under main menu select Help > Show Extensions Folder
  2. Git clone this repository inside the folder user.

Extension Manager

  1. Under main menu select File > Extension Manager...
  2. Search for "Material Design Lite Snippets"
  3. Click "Install"

How to use

  1. Enable Material Design Lite Snippets
    Under main menu select Edit > Enable Material Design Lite Snippets
  2. Starting typing "mdl" you'll see the snippets list (code hint provider), just pick a snippet and press ENTER, or
  3. Enter a snippet and hit the Tab key (Alternatively you can also hit the key DOWN).

Snippets list

Material Design Lite - Base

mdl - Basic MDL Page
mdlbase - Same command as mdl

Navigation

mdlfixedheader

Buttons

mdlsearch
mdlcoloredbuttonripple

Inputs

mdlfloatinput

Dropdown

mdldropdownleft
mdldropdownright

Credits


License


MIT for this project.

Copyright (c) 2015 KVM Studio Released under the MIT license

The MIT License (MIT)
Copyright (c) 2015 KVM Studio
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
define(function (require, exports, module) {
'use strict';
var AppInit = brackets.getModule('utils/AppInit'),
EditorManager = brackets.getModule('editor/EditorManager'),
CodeHintManager = brackets.getModule("editor/CodeHintManager"),
LanguageManager = brackets.getModule("language/LanguageManager"),
PreferencesManager = brackets.getModule('preferences/PreferencesManager'),
Menus = brackets.getModule('command/Menus'),
CommandManager = brackets.getModule('command/CommandManager'),
KeyEvent = brackets.getModule('utils/KeyEvent'),
snippets = require('snippet'),
mdlfuncHint = require('text!mdl-func.txt'),
enabled = false,
prefs = PreferencesManager.getExtensionPrefs('material-design-lite-snippets'),
COMMAND_NAME = 'Enable Material Design Lite Snippets',
COMMAND_ID = 'acbapbox.toggleMDLSnippets',
handleToggleSnippets = function () {
enabled = !enabled;
prefs.set('enabled', enabled);
prefs.save();
CommandManager.get(COMMAND_ID).setChecked(enabled);
},
applyPreferences = function () {
enabled = prefs.get('enabled');
CommandManager.get(COMMAND_ID).setChecked(enabled);
},
parseLine = function (line, cursorPosition) {
var words;
line = line.substring(0, cursorPosition);
words = line.split(/\W/);
return words[words.length - 1];
},
keyEventHandler = function ($event, editor, event) {
enabled = prefs.get('enabled');
var cursorPosition, line, snippetKey, start;
if (enabled) {
if ((event.type === 'keydown') && (event.keyCode === KeyEvent.DOM_VK_TAB || event.keyCode === KeyEvent.DOM_VK_DOWN)) {
cursorPosition = editor.getCursorPos();
line = editor.document.getLine(cursorPosition.line);
snippetKey = parseLine(line, cursorPosition.ch);
if (snippets[snippetKey]) {
start = {
line: cursorPosition.line,
ch: cursorPosition.ch - snippetKey.length
};
editor.document.replaceRange(snippets[snippetKey], start, cursorPosition);
event.preventDefault();
}
}
}
},
activeEditorChangeHandler = function ($event, focusedEditor, lostEditor) {
enabled = prefs.get('enabled');
if (lostEditor) {
$(lostEditor).off('keyEvent', keyEventHandler);
}
if (focusedEditor) {
$(focusedEditor).on('keyEvent', keyEventHandler);
}
};
var lastLine,
lastFileName,
cachedMatches,
cachedWordList,
tokenDefinition,
currentTokenDefinition;
function MDLhints() {
this.lastLine = 0;
this.lastFileName = "";
this.cachedMatches = [];
this.cachedWordList = [];
this.tokenDefinition = /[a-zA-Z][(_a-zA-Z0-9$,.';_ )].{2,}/g;
this.currentTokenDefinition = /[a-zA-Z][a-zA-Z0-9_]+$/g;
}
MDLhints.prototype.hasHints = function (editor, implicitChar) {
this.editor = editor;
var cursor = this.editor.getCursorPos();
if (cursor.line !== this.lastLine) {
var rawWordList = mdlfuncHint.match(this.tokenDefinition);
this.cachedWordList = [];
var i;
for (i = 0; i < rawWordList.length; i++) {
var word = rawWordList[i];
if (this.cachedWordList.indexOf(word) === -1) {
this.cachedWordList.push(word);
}
}
}
this.lastLine = cursor.line;
var lineBeginning = {
line: cursor.line,
ch: 0
};
var textBeforeCursor = this.editor.document.getRange(lineBeginning, cursor);
var symbolBeforeCursorArray = textBeforeCursor.match(this.currentTokenDefinition);
if (symbolBeforeCursorArray) {
var n;
for (n = 0; n < this.cachedWordList.length; n++) {
if (this.cachedWordList[n].indexOf(symbolBeforeCursorArray[0]) === 0) {
return true;
}
}
}
return false;
};
MDLhints.prototype.getHints = function (implicitChar) {
var cursor = this.editor.getCursorPos();
var lineBeginning = {
line: cursor.line,
ch: 0
};
var textBeforeCursor = this.editor.document.getRange(lineBeginning, cursor);
var symbolBeforeCursorArray = textBeforeCursor.match(this.currentTokenDefinition);
var hintList = [];
var j;
for (j = 0; j < this.cachedWordList.length; j++) {
if (this.cachedWordList[j].indexOf(symbolBeforeCursorArray[0]) === 0) {
hintList.push(this.cachedWordList[j]);
}
}
return {
hints: hintList,
match: symbolBeforeCursorArray[0],
selectInitial: true,
handleWideResults: false
};
};
/**
* Complete the word
*
* @param {String} hint
* The hint to be inserted into the editor context.
*
* @return {Boolean}
* Indicates whether the manager should follow hint insertion with an
* additional explicit hint request.
*/
MDLhints.prototype.insertHint = function (hint) {
var cursor = this.editor.getCursorPos();
var lineBeginning = {
line: cursor.line,
ch: 0
};
var textBeforeCursor = this.editor.document.getRange(lineBeginning, cursor);
var indexOfTheSymbol = textBeforeCursor.search(this.currentTokenDefinition);
var replaceStart = {
line: cursor.line,
ch: indexOfTheSymbol
};
// hint = hint + '\t';
this.editor.document.replaceRange(hint, replaceStart, cursor);
var cursorPosition = this.editor.getCursorPos();
var line = this.editor.document.getLine(cursorPosition.line);
var snippetKey = parseLine(line, cursorPosition.ch);
if (snippets[snippetKey]) {
var start = {
line: cursorPosition.line,
ch: cursorPosition.ch - snippetKey.length
};
this.editor.document.replaceRange(snippets[snippetKey], start, cursorPosition);
event.preventDefault();
}
return false;
};
AppInit.appReady(function () {
enabled = prefs.get('enabled');
CommandManager.register(COMMAND_NAME, COMMAND_ID, handleToggleSnippets);
Menus.getMenu(Menus.AppMenuBar.EDIT_MENU).addMenuItem(COMMAND_ID);
var currentEditor = EditorManager.getCurrentFullEditor();
$(currentEditor).on('keyEvent', keyEventHandler);
$(EditorManager).on('activeEditorChange', activeEditorChangeHandler);
var mdlHints = new MDLhints();
CodeHintManager.registerHintProvider(mdlHints, ["all"], 0);
prefs.on('change', applyPreferences);
applyPreferences();
});
});
mdl
mdlbase
mdlfixedheader
mdlsearch
mdlcoloredbuttonripple
mdlfloatinput
mdldropdownleft
mdldropdownright
{
"name": "material-design-lite-snippets",
"title": "Material Design Lite Snippets",
"description": "A collection of Material Design Lite (MDL) snippets for Brackets.",
"homepage": "https://github.com/acbarbosa1964/acb-bootstrap-snippets",
"version": "0.0.10",
"author": "KVM Studio",
"license": "MIT",
"categories": "editing",
"keywords": [
"brackets",
"material",
"design",
"lite",
"google",
"snippets"
],
"files": [
"main.js",
"snippet.js",
"README.md"
],
"engines": {
"brackets": ">=0.31.3"
}
}
define(function (require, exports, module) {
'use strict';
var snippets = {};
// MDL - Base
snippets.mdl = '<!DOCTYPE html>\n' +
'<html lang="fr">\n' +
'\n' +
' <head>\n' +
' <meta charset="utf-8">\n' +
' <meta http-equiv="X-UA-Compatible" content="IE=edge">\n' +
' <meta name="viewport" content="width=device-width, initial-scale=1">\n' +
' <meta name="description" content="">\n' +
' <meta name="author" content="">\n' +
' <title>KVM Studio</title>\n' +
'\n' +
' <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">\n' +
' <script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>\n' +
' <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">\n' +
' <link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" type="text/css">\n' +
' <link rel="stylesheet" href="css/style.css">\n' +
'\n' +
' </head>\n' +
' <body>\n' +
' <header>\n' +
'\n' +
' </header>\n' +
' <main>\n' +
'\n' +
' </main>\n' +
' <footer>\n' +
'\n' +
' </footer>\n' +
' <script src="js/jquery.min.js"></script>\n' +
' </body>\n' +
'</html>\n';
snippets.mdlbase = snippets.mdl;
// Fixed Header
snippets.mdlfixedheader = '<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">\n' +
' <header class="mdl-layout__header">\n' +
' <div class="mdl-layout__header-row">\n' +
' <!-- Title -->\n' +
' <span class="mdl-layout-title">Title</span>\n' +
' <div class="mdl-layout-spacer"></div>\n' +
' <!-- Navigation. We hide it in small screens. -->\n' +
' <nav class="mdl-navigation mdl-layout--large-screen-only">\n' +
' <a class="mdl-navigation__link" href="">Link</a>\n' +
' <a class="mdl-navigation__link" href="">Link</a>\n' +
' <a class="mdl-navigation__link" href="">Link</a>\n' +
' <a class="mdl-navigation__link" href="">Link</a>\n' +
' </nav>\n' +
' </div>\n' +
' </header>\n' +
' <div class="mdl-layout__drawer">\n' +
' <span class="mdl-layout-title">Title</span>\n' +
' <nav class="mdl-navigation">\n' +
' <a class="mdl-navigation__link" href="">Link</a>\n' +
' <a class="mdl-navigation__link" href="">Link</a>\n' +
' <a class="mdl-navigation__link" href="">Link</a>\n' +
' <a class="mdl-navigation__link" href="">Link</a>\n' +
' </nav>\n' +
' </div>\n' +
' <main class="mdl-layout__content">\n' +
' <div class="page-content"><!-- Your content goes here --></div>\n' +
' </main>\n' +
'</div>\n';
snippets.mdlsearch =
'<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">\n' +
' <label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp">\n' +
' <i class="material-icons">search</i>\n' +
' </label>\n' +
' <div class="mdl-textfield__expandable-holder">\n' +
' <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp" />\n' +
' </div>\n' +
'</div>\n';
snippets.mdlcoloredbuttonripple =
'<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">\n' +
' <i class="material-icons">add</i>\n' +
'</button>\n';
snippets.mdlfloatinput =
'<form action="#">\n' +
' <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">\n' +
' <input class="mdl-textfield__input" type="text" id="sample3" />\n' +
' <label class="mdl-textfield__label" for="sample3">Text...</label>\n' +
' </div>\n' +
'</form>\n';
snippets.mdldropdownleft =
'<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">\n' +
' <i class="material-icons">more_vert</i>\n' +
'</button>\n' +
'<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left">\n' +
' <li class="mdl-menu__item">Some Action</li>\n' +
' <li class="mdl-menu__item">Another Action</li>\n' +
' <li disabled class="mdl-menu__item">Disabled Action</li>\n' +
' <li class="mdl-menu__item">Yet Another Action</li>\n' +
'</ul>\n';
snippets.mdldropdownright =
'<button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">\n' +
' <i class="material-icons">more_vert</i>\n' +
'</button>\n' +
'<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right">\n' +
' <li class="mdl-menu__item">Some Action</li>\n' +
' <li class="mdl-menu__item">Another Action</li>\n' +
' <li disabled class="mdl-menu__item">Disabled Action</li>\n' +
' <li class="mdl-menu__item">Yet Another Action</li>\n' +
'</ul>\n';
module.exports = snippets;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment