Permalink
Browse files

Background picker additions.

TODO: need to wait for CSS loading to complete...
also need to fix the compilation script to compile all the CSS
together...
  • Loading branch information...
1 parent 5b6acd6 commit 9a956eb5c610ce4392335d548ec3e407343f52dc @tantaman committed May 26, 2012
@@ -9,10 +9,11 @@ define(["vendor/backbone",
"ui/widgets/RawTextImporter",
"ui/widgets/OpenDialog",
"ui/widgets/SaveAsDialog",
- "storage/FileStorage"
+ "storage/FileStorage",
+ "ui/widgets/BackgroundPicker",
"css!./res/css/Editor.css"],
(Backbone, SlideEditor, TransitionEditor, Templates, ImpressRenderer, RawTextModal, OpenDialog, SaveAsDialog, \
-FileStorage, empty) ->
+FileStorage, BackgroundPicker, empty) ->
editorId = 0
menuOptions =
@@ -75,6 +76,11 @@ FileStorage, empty) ->
@model.import(JSON.parse(json))
)
+ changeBackground: () ->
+ @backgroundPickerModal.show((controlPoints, styles) =>
+ # set the bg on the model
+ )
+
Backbone.View.extend(
className: "editor"
events:
@@ -90,6 +96,7 @@ FileStorage, empty) ->
@activePerspective = "slideEditor"
@model.undoHistory.on("updated", @undoHistoryChanged, @)
+ @model.on("change:background", @_backgroundChanged, @)
undoHistoryChanged: () ->
undoName = @model.undoHistory.undoName()
@@ -122,6 +129,11 @@ FileStorage, empty) ->
perspective.hide()
)
+ _backgroundChanged: (model, value) ->
+ # tell our perspectives about the bg update...
+ for key,persp of @perspectives
+ persp.backgroundChanged(value)
+
menuItemSelected: (e) ->
$target = $(e.currentTarget)
option = $target.attr("data-option")
@@ -159,6 +171,9 @@ FileStorage, empty) ->
@$el.append(@openDialog.render())
@$el.append(@saveAsDialog.render())
+ @backgroundPickerModal = new BackgroundPicker()
+ @$el.append(@backgroundPickerModal.render())
+
@$el
)
)
@@ -45,6 +45,8 @@
<ul class="dropdown-menu">
<li data-option="exportJSON"><a href="#">Export to JSON</a></li>
<li data-option="importJSON"><a href="#">Import from JSON</a></li>
+ <li class="divider"></li>
+ <li data-option="changeBackground"><a href="#">Change Background</a></li>
</ul>
</li>
</ul>
@@ -0,0 +1,51 @@
+define(["vendor/backbone",
+ "./Templates",
+ "css!./res/css/BackgroundPicker.css"]
+(Backbone, Templates, empty) ->
+ Backbone.View.extend(
+ className: "backgroundPicker modal"
+ events:
+ "click .ok": "okClicked"
+ "click [data-option]": "optionChosen"
+
+ initialize: () ->
+
+ show: (cb, bgOpts) ->
+ @$el.modal("show")
+
+ if bgOpts?
+ @_updatePicker(bgOpts);
+
+ @cb = cb
+
+ _updatePicker: (bgOpts) ->
+ @$gradientPicker.gradientPicker("update", bgOpts)
+
+ _updateGradientPreview: (styles) ->
+ @$gradientPreview.css("background-image", styles[0]);
+ @$gradientPreview.css("background-image", styles[1]);
+
+
+ okClicked: () ->
+ @cb(@$gradientPicker.gradientPicker("currentState"))
+
+ optionChosen: () ->
+
+ render: () ->
+ @$el.html(Templates.BackgroundPicker())
+ @$el.modal()
+
+ @$gradientPicker = @$el.find(".gradientPicker")
+ @$gradientPreview = @$el.find(".gradientPreview")
+
+ bgOpts = @options.bgOpts or {}
+ bgOpts.change = (points, styles) =>
+ @_updateGradientPreview(styles)
+
+ @$gradientPicker.gradientPicker(bgOpts)
+
+ @$el.modal("hide")
+
+ @$el
+ )
+)
@@ -0,0 +1,15 @@
+<div class="modal-header">
+ <button class="close" data-dismiss="modal">×</button>
+ <h3>Change Background</h3>
+</div>
+<div class="modal-body">
+ <div class="gradientPicker">
+ </div>
+ <div class="gradientPreview">
+ </div>
+ <div style="clear: both"></div>
+</div>
+<div class="modal-footer">
+ <a href="#" class="btn btn-inverse ok">OK</a>
+ <a href="#" class="btn" data-dismiss="modal">Cancel</a>
+</div>
View
@@ -20,6 +20,7 @@
<script type="text/javascript" src="scripts/vendor/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="res/jqplugins/smartspin/smartspinner.js"></script>
<script type="text/javascript" src="res/jqplugins/colorpicker/js/colorpicker.js"></script>
+ <script type="text/javascript" src="res/jqplugins/gradient_picker/jquery.gradientPicker.js"></script>
<script>
jQuery.fn.selectText = function(){
var doc = document;
@@ -1,6 +1,7 @@
.gradientPicker-preview {
width: 100%;
height: 100%;
+ border: 1px solid rgba(0,0,0,0.2);
/*box-sizing: border-box;
-moz-box-sizing: border-box;*/
}
Oops, something went wrong.

0 comments on commit 9a956eb

Please sign in to comment.