Permalink
Browse files

Store preferences in a cookie, code cleanup

- Add jquery.cookie.js to store a preference cookie for 30 days (a .niderc
  maybe a proper solution to store user preferences);
- Create a dialog.html file to avoid html within javascript
- Update styles with dialog related properties
- Update CodeEditor.js to use our stored value when creating new editors
  • Loading branch information...
1 parent 55631e8 commit 2114483c98c3a12c04ec6560159b675ceff31e83 @aegypius aegypius committed Feb 25, 2012
@@ -43,35 +43,60 @@ html * {
background-color: @rebase03;
color: @rebase0;
+ .emphasis { font-weight:bold;}
+ .dotted { border-bottom: 1px dotted @orange; }
+
.CodeMirror-gutter {
background-color: @rebase02;
border-right: 3px solid @rebase02;
+ .CodeMirror-gutter-text {
+ color: @rebase01;
+ }
+ }
+ .CodeMirror-cursor {
+ border-left-color: @rebase3 !important;
}
- span {
- .cm-keyword { color: @rebase1; }
- .cm-atom { .cm-keyword; }
- .cm-number { .cm-keyword; }
- .cm-def { .cm-keyword; }
- .cm-variable{ .cm-keyword; }
- .cm-variable-2{ .cm-keyword; }
- .cm-variable-3{ .cm-keyword; }
- .cm-property { .cm-keyword; }
- .cm-operator { .cm-keyword; }
- .cm-comment { .cm-keyword; }
- .cm-string { .cm-keyword; }
- .cm-meta { .cm-keyword; }
- .cm-error{ .cm-keyword; }
- .cm-qualifier{ .cm-keyword; }
- .cm-builtin { .cm-keyword; }
- .cm-bracket { .cm-keyword; }
- .cm-tag { .cm-keyword; }
- .cm-attribute { .cm-keyword; }
+ .CodeMirror-matchingbracket {
+ color: @rebase3;
+ background-color: @rebase02;
+ box-shadow: 0 0 10px @rebase02;
+ .emphasis;
}
-}
+ .CodeMirror-nonmatchingbracket {
+ .CodeMirror-matchingbracket;
+ color: @red;
+ .dotted;
+ }
+
+ span {
+ &.cm-keyword { color: @rebase0; .emphasis; }
+ &.cm-atom { color: @cyan; }
+ &.cm-number { color: @rebase1; }
+ &.cm-def { color: @blue; }
+
+ &.cm-variable{ color: @orange; }
+ &.cm-variable-2{ .cm-variable; }
+ &.cm-variable-3{ .cm-variable; }
+
+ &.cm-comment { color: @rebase01; }
+
+ &.cm-property { color: @yellow; }
+ &.cm-operator { color: @rebase0; }
+ &.cm-string { color: @violet; }
+ &.cm-error{ .emphasis; .dotted; }
+ &.cm-bracket { color: @orange; }
+
+ &.cm-tag { color: @rebase0; }
+ &.cm-attribute { color: @rebase1; .emphasis; }
+ &.cm-meta { color: @blue; }
-.accentize(@accent) {
- color: @accent;
+ // Unstyled
+ &.cm-qualifier{ }
+ &.cm-builtin { }
+ &.cm-null {}
+ &.cm-undefined {}
+ }
}
.cm-s-solarized-light {
View
@@ -498,4 +498,44 @@ body {
float: right;
position: relative;
left: 1px;
+}
+
+#dialog-overlay {
+ position: absolute;
+ overflow: hidden;
+ left: 0; top: 0; right: 0; bottom: 0;
+ background: #000;
+ opacity: .3;
+ z-index: 900
+}
+
+.dialog {
+ position: fixed;
+ max-width: 600px;
+ min-width: 250px;
+ padding: 15px;
+ border: 1px solid #eee;
+ background: white;
+ z-index: 1000;
+ box-shadow: 0 1px 8px 0 black
+}
+
+.dialog h1 {
+ margin: 0 0 5px 0;
+ font-size: 16px;
+ font-weight: normal
+}
+
+.dialog .dialog-close {
+ position: absolute;
+ top: 3px;
+ right: 10px;
+ text-decoration: none;
+ color: #888;
+ font-size: 16px;
+ font-weight: bold
+}
+
+.dialog .dialog-content {
+ padding : 40px 20px
}
View
@@ -0,0 +1,7 @@
+<div id="dialog-overlay"></div>
+<div class="dialog">
+ <h1 class="dialog-title"></h1>
+ <a class="dialog-close" href="#close">&times;</a>
+ <div class="dialog-content">
+ </div>
+</div>
View
@@ -17,6 +17,7 @@
<script src="js/external/codemirror.js"></script>
<script src="js/external/jquery.easydate-0.2.4.js"></script>
<script src="js/external/less-1.2.1.min.js"></script>
+ <script src="js/external/jquery.cookie.js"></script>
<!-- CodeMirror syntax highlighting modes -->
<script src="js/external/mode/javascript/javascript.js"></script>
@@ -73,7 +74,7 @@
<li><span id="project-refresh"><img src="img/refresh.png"> Refresh</span>
<li class="checkbox"><input type="checkbox" id="show-hidden"><label for="show-hidden">Show Hidden Files</label>
<li class="separator"><hr>
- <li><span id="project-settings">Project Settings</span>
+ <li><span id="preference-settings">Preferences</span>
</ul>
<div id="lightbox">
<div class="setup">
@@ -29,6 +29,7 @@
var createCodeMirror = function(parentNode, contents, path, options) {
var mode = inferCodeMirrorModeFromPath(path);
var options = {
+ theme: $.cookie('editor-theme') || 'default',
value: contents,
mode: mode,
lineNumbers: true,
@@ -6,6 +6,20 @@ var UserInterfaceController = function() {
var fileHtmlElementByPath
var stateByPath = {}
var fileEntries = []
+ var editorThemes = (function() {
+ // Getting available themes
+ var themes = [];
+ $('link[rel^="stylesheet"][name]').each(function() {
+ var $link = $(this);
+ $.each($link.attr('name').split(','), function(id, item) {
+ var theme = {};
+ theme.name = item.replace(/(^\s*|\s*$)/, '');
+ theme.value = theme.name.toLowerCase().replace(/[^a-z0-9]/g, '-');
+ themes.push(theme);
+ });
+ });
+ return themes;
+ })();
var ignore = ['.git', '.nide', '.DS_Store']
var limitRecursion = ['node_modules']
@@ -176,81 +190,45 @@ var UserInterfaceController = function() {
connection.list()
})
- $('#project-settings').click(function(e) {
+ $('#preference-settings').click(function(e) {
e.preventDefault();
- // Getting available themes
- var themes = [];
- $('link[rel^="stylesheet"][name]').each(function() {
- var $link = $(this);
- $.each($link.attr('name').split(','), function(id, item) {
- var theme = {};
- theme.name = item.replace(/(^\s*|\s*$)/, '')
- theme.value = 'cm-s-' + theme.name.toLowerCase().replace(/[^a-z0-9]/g, '-')
- themes.push(theme);
- });
- });
-
// Create Overlay
- var overlay = $('<div></div>')
- .css({
- 'position': 'absolute', 'background-color': '#000', 'z-index': 900, 'top' : 0, 'left' : 0,
- 'right' : 0, 'bottom' : 0, 'opacity' : .3
- })
- .appendTo('body');
-
- var dialog = $('<div class="dialog">'
- +'<h1>Project Settings</h1><a href="#" class="close">&times;</a>'
- +'<div class="content"></div></div>'
- ).appendTo('body');
+ $.get('dialog.html', function(response) {
+ $('body').append(response);
+ $('.dialog-title').html('Preferences');
+ $('.dialog-content').html(
+ '<label for="theme-selection">Editor Theme : <select id="theme-selection"></select></label>'
+ );
- $(dialog).css({
- 'position': 'fixed',
- 'left': '50%',
- 'top': 150,
- 'max-width': 600,
- 'min-width': 250,
- 'padding': 15,
- 'border': '1px solid #eee',
- 'background': 'white',
- 'z-index': 1000,
- 'box-shadow': '0 1px 8px 0 black'
- });
-
- $('h1', dialog).css({
- 'margin': '0 0 5px 0',
- 'font-size': '16px',
- 'font-weight': 'normal'
- });
-
- $('.close', dialog).css({
- 'position': 'absolute',
- 'top': 3,
- 'right': 10,
- 'text-decoration': 'none',
- 'color': '#888',
- 'font-size': 16,
- 'font-weight': 'bold'
- }).click(function() {
- dialog.remove();
- overlay.remove();
- });
-
- var content = $('.content', dialog).css({
- 'padding' : '40px 20px'
- });
+ // Center Dialog
+ $(window).resize(function() {
+ $('.dialog').css({
+ 'top' : ($(window).height() - $('.dialog').outerHeight()) / 2,
+ 'left' : ($(window).width() - $('.dialog').outerWidth()) / 2
+ });
+ }).resize();
- // Theme Selection
- var select = $('<label for="theme-selection">Theme : </label><select id="theme-selection"></select>').appendTo(content);
- $.each(themes, function() {
- $('<option value=' + this.value + '>' + this.name + '</option>').appendTo(select);
- });
-
- select.change(function() {
+ var $theme_selection = $('#theme-selection');
+ $.each(editorThemes || [], function() {
+ $('<option value=' + this.value + '>' + this.name + '</option>')
+ .attr('selected', ($.cookie('editor-theme') == this.value))
+ .appendTo($theme_selection);
+ });
+ $theme_selection.change(function() {
$('.CodeMirror-scroll')
- .removeClass(themes.map(function(it) {return it.value;}).join(' '))
- .addClass($(this).val());
- });
+ .removeClass(editorThemes.map(function(it) {return 'cm-s-' + it.value;}).join(' '))
+ .addClass('cm-s-' + $(this).val());
+ // Store current value to a cookie
+ $.cookie('editor-theme', $(this).val(), {expires: 30});
+ });
+ $('.dialog-close').click(function(e) {
+ e.preventDefault();
+ $('#dialog-overlay, .dialog').fadeOut(200, function() {
+ $(this).remove();
+ });
+ });
+ });
});
var shouldDismissGearMenuOnMouseUp = false;
@@ -0,0 +1,47 @@
+/*!
+ * jQuery Cookie Plugin
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2011, Klaus Hartl
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.opensource.org/licenses/GPL-2.0
+ */
+(function($) {
+ $.cookie = function(key, value, options) {
+
+ // key and at least value given, set cookie...
+ if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
+ options = $.extend({}, options);
+
+ if (value === null || value === undefined) {
+ options.expires = -1;
+ }
+
+ if (typeof options.expires === 'number') {
+ var days = options.expires, t = options.expires = new Date();
+ t.setDate(t.getDate() + days);
+ }
+
+ value = String(value);
+
+ return (document.cookie = [
+ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
+ options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+ options.path ? '; path=' + options.path : '',
+ options.domain ? '; domain=' + options.domain : '',
+ options.secure ? '; secure' : ''
+ ].join(''));
+ }
+
+ // key and possibly options given, get cookie...
+ options = value || {};
+ var decode = options.raw ? function(s) { return s; } : decodeURIComponent;
+
+ var pairs = document.cookie.split('; ');
+ for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
+ if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
+ }
+ return null;
+ };
+})(jQuery);

0 comments on commit 2114483

Please sign in to comment.