Finished moving to backbone
parent
f788e54392
commit
84796f0ee4
|
@ -384,7 +384,7 @@ article.snipt {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 49;
|
z-index: 51;
|
||||||
|
|
||||||
div.highlight {
|
div.highlight {
|
||||||
pre {
|
pre {
|
||||||
|
@ -409,6 +409,9 @@ article.snipt {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.box-shadow(0, -25px, 25px, #FFF);
|
.box-shadow(0, -25px, 25px, #FFF);
|
||||||
|
|
||||||
|
span.collapse {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #3BAAF3;
|
color: #3BAAF3;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -455,19 +458,6 @@ article.snipt {
|
||||||
.box-shadow(0, -25px, 25px, #F8F8F8);
|
.box-shadow(0, -25px, 25px, #F8F8F8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
section.expanded {
|
|
||||||
div.highlight {
|
|
||||||
pre {
|
|
||||||
padding-bottom: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
a.expand {
|
|
||||||
background-image: url('/media/images/collapse.png');
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
-moz-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:after {
|
&:after {
|
||||||
bottom: 8px;
|
bottom: 8px;
|
||||||
content: "";
|
content: "";
|
||||||
|
@ -514,6 +504,32 @@ article.snipt {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.expanded {
|
||||||
|
div.container {
|
||||||
|
section.code {
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
div.highlight {
|
||||||
|
pre {
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a.expand {
|
||||||
|
background-image: url('/media/images/collapse.png');
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
-moz-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
span.expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
span.collapse {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Utils
|
// Utils
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
initialize: function(opts) {
|
initialize: function(opts) {
|
||||||
|
|
||||||
$search_query = $('input#search-query', this.el);
|
$search_query = $('input#search-query', this.el);
|
||||||
$snipts = $('section#snipts', this.el);
|
$snipts = $('section#snipts article.snipt', this.el);
|
||||||
|
|
||||||
this.keyboardShortcuts();
|
this.keyboardShortcuts();
|
||||||
this.inFieldLabels();
|
this.inFieldLabels();
|
||||||
|
|
|
@ -1,27 +1,32 @@
|
||||||
(function(Snipt) {
|
(function(Snipt) {
|
||||||
|
|
||||||
|
Snipt.SniptModel = Backbone.Model.extend({
|
||||||
|
});
|
||||||
|
|
||||||
|
SniptView = Backbone.View.extend({
|
||||||
|
initialize: function() {
|
||||||
|
this.model = new Snipt.SniptModel();
|
||||||
|
this.model.view = this;
|
||||||
|
this.$el = $(this.el);
|
||||||
|
this.$expand_button = $('a.expand', this.$el);
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
'click a.expand': 'expand'
|
||||||
|
},
|
||||||
|
expand: function() {
|
||||||
|
this.$el.toggleClass('expanded');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
SniptListView = Backbone.View.extend({
|
SniptListView = Backbone.View.extend({
|
||||||
el: 'section#snipts',
|
el: 'section#snipts',
|
||||||
|
|
||||||
initialize: function(opts) {
|
initialize: function(opts) {
|
||||||
|
opts.snipts.each(this.addSnipt);
|
||||||
$snipts = opts.snipts;
|
},
|
||||||
|
addSnipt: function() {
|
||||||
//$('input, select, textarea', this.el).each(this.addField);
|
model = new SniptView({ el: this });
|
||||||
|
|
||||||
//$('section.code a.expand').click ->
|
|
||||||
//el = $(this).parent()
|
|
||||||
//el.toggleClass('expanded')
|
|
||||||
|
|
||||||
//if el.hasClass('expanded')
|
|
||||||
//el.css('height', 'auto')
|
|
||||||
//$(this).text('Collapse')
|
|
||||||
//else
|
|
||||||
//el.css('height', '200px')
|
|
||||||
//$(this).text('Expand')
|
|
||||||
//false
|
|
||||||
//false
|
|
||||||
//
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,8 @@
|
||||||
{{ snipt.get_stylized|safe }}
|
{{ snipt.get_stylized|safe }}
|
||||||
{% if snipt.get_line_count > 9 %}
|
{% if snipt.get_line_count > 9 %}
|
||||||
<a href="#" class="expand">
|
<a href="#" class="expand">
|
||||||
Expand
|
<span class="expand">Expand</span>
|
||||||
|
<span class="collapse">Collapse</span>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
{% if debug %}
|
{% if debug %}
|
||||||
<link rel="stylesheet/less" href="{{ STATIC_URL }}css/style.less" />
|
<link rel="stylesheet/less" href="{{ STATIC_URL }}css/style.less" />
|
||||||
<link rel="stylesheet" href="{{ STATIC_URL }}css/reset.css" />
|
<link rel="stylesheet" href="{{ STATIC_URL }}css/reset.css" />
|
||||||
|
<link rel="stylesheet" href="{{ STATIC_URL }}css/themes.css" />
|
||||||
|
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/a_underscore.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/a_underscore.js"></script>
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/b_jquery.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/b_jquery.js"></script>
|
||||||
|
|
Loading…
Reference in New Issue