Browse Source

Fixes regex matching on css variables

pull/636/head
jlukic 11 years ago
parent
commit
1357ccf882
4 changed files with 35 additions and 29 deletions
  1. 2
      server/documents/elements/button.html.eco
  2. 8
      server/documents/modules/dropdown.html.eco
  3. 44
      server/files/javascript/semantic.js
  4. 10
      server/partials/header.html.eco

2
server/documents/elements/button.html.eco

@ -8,7 +8,7 @@ title : 'Button'
description : 'Buttons indicate a possible user action.'
type : 'UI Element'
themes : ['default', 'basic', 'github']
themes : ['default', 'basic', 'chubby', 'github']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/elements/button.less" />
<script src="/javascript/button.js"></script>

8
server/documents/modules/dropdown.html.eco

@ -607,6 +607,14 @@ type : 'UI Module'
<div class="header">activate</div>
<div class="description">Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm</div>
</div>
<div class="item">
<div class="header">combo</div>
<div class="description">changes text of previous element matching text selector</div>
</div>
<div class="item">
<div class="header">select</div>
<div class="description">activates menu item but does not change text</div>
</div>
<div class="item">
<div class="header">nothing</div>
<div class="description">no action occurs</div>

44
server/files/javascript/semantic.js

@ -105,45 +105,46 @@ semantic.ready = function() {
parseFile: function(content) {
var
variables = {},
lines = content.match(/(@.*;)/g),
lines = content.match(/^(@[\s|\S]+?;)/gm),
name,
value
;
console.log(lines);
$.each(lines, function(index, line) {
// clear whitespace
line = $.trim(line);
// match variables only
if(line[0] == '@') {
name = line.match(/^@(.+):/);
value = line.match(/:(\W)(.*);/);
if( ($.isArray(name) && name.length >= 2) && ($.isArray(value) && value.length >= 3) ) {
value = line.match(/:\s*([\s|\S]+?;)/);
if( ($.isArray(name) && name.length >= 2) && ($.isArray(value) && value.length >= 2) ) {
name = name[1];
value = value[2];
value = value[1];
variables[name] = value;
}
}
});
console.log(variables);
return variables;
},
parseLine: function() {
// clear
},
changeTheme: function(theme) {
$.api({
url : '/build/less/themes/{$theme}/{$type}s/{$element}.variables',
dataType : 'text',
urlData : {
theme : theme,
type : $themeDropdown.data('type'),
element : $themeDropdown.data('element')
},
success: function(content) {
less.modifyVars( handler.less.parseFile(content) );
}
})
if(theme === 'customize') {
// placeholder
}
else {
$.api({
url : '/build/less/themes/{$theme}/{$type}s/{$element}.variables',
dataType : 'text',
urlData : {
theme : theme,
type : $themeDropdown.data('type'),
element : $themeDropdown.data('element')
},
success: function(content) {
less.modifyVars( handler.less.parseFile(content) );
}
});
}
}
},
@ -736,6 +737,7 @@ semantic.ready = function() {
$themeDropdown
.dropdown({
action: 'select',
onChange: handler.less.changeTheme
})
;

10
server/partials/header.html.eco

@ -24,19 +24,15 @@
</a>
<% end %>
<% if @document.themes?: %>
<div class="ui basic floating dropdown theme button" data-element="<%= @document.element %>" data-type="<%= @document.elementType %>">
<span class="text">Theme</span>
<i class="dropdown icon"></i>
<div class="ui floating dropdown theme button" data-element="<%= @document.element %>" data-type="<%= @document.elementType %>">
<i class="settings icon"></i>
<span class="text">Choose Theme</span>
<div class="menu ui transition hidden">
<% for id, name of @document.themes: %>
<div class="item" data-value="<%= name %>"><%= (name.charAt(0).toUpperCase() + name.slice(1)) %></div>
<% end %>
</div>
</div>
<div class="ui button">
<i class="settings icon"></i>
Customize
</div>
<div class="ui primary button">
Download
<i class="download icon"></i>

Loading…
Cancel
Save