Permalink
Browse files

improve button usability. refs #10

  • Loading branch information...
1 parent ffd871b commit 59363cd17ef20274108aca54ddb145f2d39df1c8 @petschki petschki committed with Apr 12, 2013
@@ -19,7 +19,7 @@
current_scale view/current_scale">
<div class="cell width-1:4 position-0"
tal:condition="multiple_flds">
- <h2 i18n:translate="">Available Image Fields</h2>
+ <h3 i18n:translate="">Available Image Fields</h3>
<ul class="fields visualNoMarker">
<li tal:repeat="fieldname image_field_names">
<a tal:define="image_url python:view.image_url(fieldname)"
@@ -42,7 +42,7 @@
<div class="cell width-1:4"
tal:attributes="class python:'cell width-1:4 position-%s' % (multiple_flds and '1:4' or '0')">
- <h2 i18n:translate="">Available Image Scales for Field <span i18n:name="field_name" tal:content="view/fieldname" tal:omit-tag="">"Field Name"</span></h2>
+ <h3 i18n:translate="">Available Image Scales for Field <span i18n:name="field_name" tal:content="view/fieldname" tal:omit-tag="">"Field Name"</span></h3>
<ul class="scales visualNoMarker">
<li tal:repeat="scale scales"
tal:attributes="data-jcrop_config scale/config;
@@ -85,20 +85,28 @@
</div>
<input type="submit"
class="context"
- value="Save"
+ value="Save cropping information"
i18n:attributes="value"
name="form.button.Save"
/>
+ <div class="discreet tooltip"
+ i18n:translate="">
+ Save the selected cropping area. The original image remains untouched.
+ </div>
<input type="submit"
class="context"
- value="Delete"
+ value="Remove cropping information"
i18n:attributes="value"
name="form.button.Delete"
/>
- <br />
+ <div class="discreet tooltip"
+ i18n:translate="">
+ The scale gets reverted to its default.
+ </div>
<input type="submit"
class="standalone"
- value="Cancel"
+ value="Close"
+ tal:condition="ajax_load"
i18n:attributes="value"
name="form.button.Cancel"
/>
@@ -115,6 +123,7 @@
<script type="text/javascript" tal:attributes="src string:${portal_url}/++resource++plone.app.imagecropping.static/jquery.Jcrop.min.js"></script>
<script type="text/javascript" tal:attributes="src string:${portal_url}/++resource++plone.app.imagecropping.static/cropping.js"></script>
+ <script type="text/javascript" tal:content="view/js_messages"></script>
<script type="text/javascript">
imagecropping.init_editor();
</script>
@@ -13,6 +13,14 @@
import json
+JS_MESSAGES = """\
+if(typeof(imagecropping) != "undefined") {
+ imagecropping.i18n_message_ids = {
+ confirm_discard_changes: "%(discard_changes)s"
+ };
+}"""
+
+
class CroppingEditor(BrowserView):
""" Cropping Editor View """
@@ -139,9 +147,6 @@ def __call__(self):
form = self.request.form
cropping_util = self.context.restrictedTraverse('@@crop-image')
- if form.get('form.button.Cancel', None) is not None:
- return self.request.response.redirect(
- self.context.absolute_url() + '/view')
if form.get('form.button.Delete', None) is not None:
cropping_util._remove(self.fieldname,
self.request.form.get('scalename'))
@@ -184,3 +189,8 @@ def _editor_settings(self):
registry = getUtility(IRegistry)
settings = registry.forInterface(ISettings)
return settings
+
+ def js_messages(self):
+ return JS_MESSAGES % dict(
+ discard_changes=_("Your changes will be lost. Continue?")
+ )
@@ -20,3 +20,7 @@
max-width:100%;
height:auto;
}
+
+#coords .jcrop-holder {
+ margin-bottom:1em;
+}
@@ -1,4 +1,13 @@
-var imagecropping = {};
+/* set default values */
+var imagecropping = {
+ x1: 0,
+ y1: 0,
+ x2: 0,
+ y2: 0,
+ i18n_message_ids: {
+ confirm_discard_changes: "Your changes will be lost. Continue?"
+ }
+};
if (jQuery) {
@@ -11,6 +20,13 @@ if (jQuery) {
},500);
};
+ imagecropping.saveCoords = function() {
+ this.x1 = $("#x1").val();
+ this.y1 = $("#y1").val();
+ this.x2 = $("#x2").val();
+ this.y2 = $("#y2").val();
+ };
+
imagecropping.doChange = function(c) {
// show coords
$('#x1').val(c.x);
@@ -23,7 +39,6 @@ if (jQuery) {
rx = c.w / 100;
ry = c.h / 100;
prev_node = $('#preview-' + $("#scalename").val());
- console.log(prev_node);
cropbox_img = $('img.cropbox');
thumb_img = $('<img />');
thumb_img.attr('src', cropbox_img.attr('src'));
@@ -37,6 +52,15 @@ if (jQuery) {
*/
};
+ imagecropping.unsaved_changes = function() {
+ /* actual coords */
+ if(this.x1 != $("#x1").val() || this.y1 != $("#y1").val() ||
+ this.x2 != $("#x2").val() || this.y2 != $("#y2").val()) {
+ return !confirm(this.i18n_message_ids.confirm_discard_changes);
+ }
+ return false;
+ };
+
imagecropping.option_change = function(option) {
var config = jQuery.parseJSON(option.attr('data-jcrop_config')),
@@ -59,21 +83,27 @@ if (jQuery) {
}
$('#coords img.cropbox').Jcrop(jcrop_config);
+
+ option.addClass('selected').siblings().removeClass('selected');
}
imagecropping.init_editor = function() {
var scales = $('ul.scales li');
if(scales.length) {
scales.click(function(e) {
+ if(imagecropping.unsaved_changes()) {
+ return false;
+ }
imagecropping.option_change($(this));
- $(this).addClass('selected').siblings().removeClass('selected');
+ imagecropping.saveCoords();
});
- // TODO: preview of actual scale
- //$('ul.scales a').prepOverlay({subtype: 'image'});
imagecropping.option_change($('ul.scales li.selected'));
scales.scrollTop($('ul.scales li.selected').scrollTop());
}
+
+ /* save initial coords to track changes */
+ this.saveCoords()
}
})(jQuery);
}
@@ -1,8 +1,8 @@
msgid ""
msgstr ""
"Project-Id-Version: plone.app.imagecropping\n"
-"POT-Creation-Date: 2013-03-14 16:50+0000\n"
-"PO-Revision-Date: 2013-03-14 17:51+0100\n"
+"POT-Creation-Date: 2013-04-12 09:44+0000\n"
+"PO-Revision-Date: 2013-04-12 11:53+0100\n"
"Last-Translator: Peter Mathis <peter.mathis@kombinat.at>\n"
"Language-Team: frisi, petschki <office@kombinat.at>\n"
"MIME-Version: 1.0\n"
@@ -24,54 +24,90 @@ msgstr "Vorhandene Bilder"
msgid "Available Image Scales for Field ${field_name}"
msgstr "Bildgrößen für \"${field_name}\""
-#: plone/app/imagecropping/browser/editor.pt:99
-msgid "Cancel"
-msgstr "Abbrechen"
+#: plone/app/imagecropping/browser/editor.pt:106
+msgid "Close"
+msgstr "Schließen"
-#: plone/app/imagecropping/browser/settings.py:13
+#: plone/app/imagecropping/browser/settings.py:36
msgid "Crop Editor Large Size"
msgstr "Bildgröße für Vorschau im Jcrop Editor (Jcrop: boxWidth: boxHeight)"
#: plone/app/imagecropping/profiles/default/actions.xml
msgid "Cropping"
msgstr "Zuschneiden"
-#: plone/app/imagecropping/browser/editor.py:144
+#: plone/app/imagecropping/browser/editor.py:153
msgid "Cropping area deleted"
msgstr "Zuschnitt gelöscht"
-#: plone/app/imagecropping/browser/editor.pt:92
-msgid "Delete"
-msgstr "Entfernen"
+#: plone/app/imagecropping/browser/settings.py:50
+msgid "Enable to constrain cropable scales"
+msgstr "Zuschneidbare Bildgrößen einschränken?"
+
+#: plone/app/imagecropping/browser/settings.py:51
+msgid ""
+"Enable to reduce the scales shown for cropping in the list of scales with "
+"crop support."
+msgstr ""
+"Aktivieren, wenn nicht alle Bildgrößen zuschneidbar sein sollen. Die Auswahl "
+"der eingeschränkten Bildgrößen folgt weiter unten."
#: plone/app/imagecropping/browser/editor.pt:10
msgid "Image Cropping Editor"
msgstr "Zuschnitts Editor"
-#: plone/app/imagecropping/browser/settings.py:32
+#: plone/app/imagecropping/browser/settings.py:85
msgid "Image Cropping Settings"
-msgstr "Bild Cropping Einstellungen"
+msgstr "Cropping-Editor Einstellungen"
-#: plone/app/imagecropping/browser/settings.py:20
+#: plone/app/imagecropping/browser/settings.py:58
+msgid "List of scales with crop support"
+msgstr "Bildgrößen für Cropping Editor"
+
+#: plone/app/imagecropping/browser/settings.py:43
msgid "Minimum Crop Area Size"
msgstr "minimal erlaubter Ausschnitt (Jcrop: minSize)"
+#: plone/app/imagecropping/browser/editor.pt:96
+msgid "Remove cropping information"
+msgstr "Cropping Informationen entfernen"
+
#: plone/app/imagecropping/browser/editor.pt:86
-msgid "Save"
-msgstr "Speichern"
+msgid "Save cropping information"
+msgstr "Bildzuschnitt speichern"
-#: plone/app/imagecropping/browser/editor.py:156
+#: plone/app/imagecropping/browser/editor.pt:92
+msgid "Save the selected cropping area. The original image remains untouched."
+msgstr "Speichert die aktuelle Auswahl. Das Originalbild bleibt bestehen."
+
+#: plone/app/imagecropping/browser/settings.py:59
+msgid ""
+"Select the scales with cropping support enabled. Only active if enabled with "
+"checkbox."
+msgstr ""
+"Wählen Sie die Bildgrößen, welche zuschneidbar sein sollen. Nur aktiv, wenn "
+"die Einschränkung aktiviert ist."
+
+#: plone/app/imagecropping/browser/editor.py:165
msgid "Successfully saved cropped area"
msgstr "Zuschnitt erfolgreich gespeichert"
+#: plone/app/imagecropping/browser/editor.pt:102
+msgid "The scale gets reverted to its default."
+msgstr "Die Bildgröße wird auf den Standardwert zurückgesetzt"
+
#: plone/app/imagecropping/profiles/default/actions.xml
msgid "View the image cropping editor for this object"
msgstr "zeige den Zuschnitts Editor für dieses Bild"
+#: plone/app/imagecropping/browser/editor.py:195
+msgid "Your changes will be lost. Continue?"
+msgstr "Die Änderungen gehen verloren. Fortfahren?"
+
#: plone/app/imagecropping/browser/editor.pt:32
msgid "no image available"
msgstr "kein Bild vorhanden"
-#: plone/app/imagecropping/browser/settings.py:14
+#: plone/app/imagecropping/browser/settings.py:37
msgid "width:height"
msgstr "breite (in px):höhe (in px)"
Oops, something went wrong.

0 comments on commit 59363cd

Please sign in to comment.