Permalink
Browse files

Using new description style in MemberDateTimeOptionSetField

  • Loading branch information...
chillu committed Nov 30, 2012
1 parent 1ca3883 commit 963f02e7a342219cb5a6471d6649857097dd0ff3
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -928,25 +928,6 @@ jQuery.noConflict();
});
- /**
- * Simple toggle link, which points to a DOm element by its ID selector
- * in the href attribute (which doubles as an anchor link to that element).
- */
- $('.cms .cms-help-toggle').entwine({
- onmatch: function() {
- this._super();
-
- $(this.attr('href')).hide();
- },
- onunmatch: function() {
- this._super();
- },
- onclick: function(e) {
- $(this.attr('href')).toggle();
- e.preventDefault();
- }
- });
-
/**
* Allows to lazy load a panel, by leaving it empty
* and declaring a URL to load its content via a 'url' HTML5 data attribute.
@@ -0,0 +1,20 @@
+(function($) {
+ $.entwine('ss', function($){
+
+ $('.memberdatetimeoptionset').entwine({
+ onmatch: function() {
+ this.find('.description .toggle-content').hide();
+ this._super();
+ }
+ });
+
+ $('.memberdatetimeoptionset .toggle').entwine({
+ onclick: function(e) {
+ jQuery(this).closest('.description').find('.toggle-content').toggle();
+ return false;
+ }
+ });
+
+ });
+
+}(jQuery));
View
@@ -998,6 +998,15 @@ form.member-profile-form {
}
}
+.memberdatetimeoptionset {
+ .description {
+ font-style: normal;
+ }
+ .toggle {
+ font-size: $font-base-size - 1;
+ }
+}
+
.cms {
.cms-content {
border-right: 1px solid #BBB;
@@ -6,6 +6,8 @@
class MemberDatetimeOptionsetField extends OptionsetField {
public function Field($properties = array()) {
+ Requirements::javascript(FRAMEWORK_ADMIN_DIR . '/javascript/MemberDatetimeOptionsetField.js');
+
$options = '';
$odd = 0;
$source = $this->getSource();
@@ -39,23 +41,18 @@ public function Field($properties = array()) {
$itemID, $this->name, $checked)
. sprintf('<label for="%s_custom">%s:</label>',
$itemID, _t('MemberDatetimeOptionsetField.Custom', 'Custom'))
- . sprintf("<input class=\"customFormat\" name=\"%s_custom\" value=\"%s\" />\n", $this->name, $value)
+ . sprintf(
+ "<input class=\"customFormat cms-help cms-help-tooltip\" name=\"%s_custom\" value=\"%s\" />\n",
+ $this->name,
+ $value
+ )
. sprintf("<input type=\"hidden\" class=\"formatValidationURL\" value=\"%s\" />",
$this->Link() . '/validate');
$options .= ($value) ? sprintf(
'<span class="preview">(%s: "%s")</span>',
_t('MemberDatetimeOptionsetField.Preview', 'Preview'),
Zend_Date::now()->toString($value)
) : '';
- $options .= sprintf(
- '<a class="cms-help-toggle" href="#%s">%s</a>',
- $this->id() . '_Help',
- _t('MemberDatetimeOptionsetField.TOGGLEHELP', 'Toggle formatting help')
- );
- $options .= "<div id=\"" . $this->id() . "_Help\">";
- $options .= $this->getFormattingHelpText();
- $options .= "</div>";
- $options .= "</li>\n";
$id = $this->id();
return "<ul id=\"$id\" class=\"optionset {$this->extraClass()}\">\n$options</ul>\n";
@@ -64,42 +61,46 @@ public function Field($properties = array()) {
/**
* @todo Put this text into a template?
*/
- public function getFormattingHelpText() {
- $output = '<ul>';
- $output .= '<li>YYYY = ' . _t('MemberDatetimeOptionsetField.FOURDIGITYEAR', 'Four-digit year',
- 40, 'Help text describing what "YYYY" means in ISO date formatting') . '</li>';
- $output .= '<li>YY = ' . _t('MemberDatetimeOptionsetField.TWODIGITYEAR', 'Two-digit year',
- 40, 'Help text describing what "YY" means in ISO date formatting') . '</li>';
- $output .= '<li>MMMM = ' . _t('MemberDatetimeOptionsetField.FULLNAMEMONTH', 'Full name of month (e.g. June)',
- 40, 'Help text describing what "MMMM" means in ISO date formatting') . '</li>';
- $output .= '<li>MMM = ' . _t('MemberDatetimeOptionsetField.SHORTMONTH', 'Short name of month (e.g. Jun)',
- 40, 'Help text letting describing what "MMM" means in ISO date formatting') . '</li>';
- $output .= '<li>MM = ' . _t('MemberDatetimeOptionsetField.TWODIGITMONTH', 'Two-digit month (01=January, etc.)',
- 40, 'Help text describing what "MM" means in ISO date formatting') . '</li>';
- $output .= '<li>M = ' . _t('MemberDatetimeOptionsetField.MONTHNOLEADING', 'Month digit without leading zero',
- 40, 'Help text describing what "M" means in ISO date formatting') . '</li>';
- $output .= '<li>dd = ' . _t('MemberDatetimeOptionsetField.TWODIGITDAY', 'Two-digit day of month',
- 40, 'Help text describing what "dd" means in ISO date formatting') . '</li>';
- $output .= '<li>d = ' . _t('MemberDatetimeOptionsetField.DAYNOLEADING', 'Day of month without leading zero',
- 40, 'Help text describing what "d" means in ISO date formatting') . '</li>';
- $output .= '<li>hh = ' . _t('MemberDatetimeOptionsetField.TWODIGITHOUR', 'Two digits of hour (00 through 23)',
- 40, 'Help text describing what "hh" means in ISO date formatting') . '</li>';
- $output .= '<li>h = ' . _t('MemberDatetimeOptionsetField.HOURNOLEADING', 'Hour without leading zero',
- 40, 'Help text describing what "h" means in ISO date formatting') . '</li>';
- $output .= '<li>mm = ' . _t('MemberDatetimeOptionsetField.TWODIGITMINUTE',
+ public function getDescription() {
+ $output =
+ '<a href="#" class="toggle">'
+ . _t('MemberDatetimeOptionsetField.Toggle', 'Show formatting help')
+ . '</a>'
+ . '<ul class="toggle-content">'
+ . '<li>YYYY = ' . _t('MemberDatetimeOptionsetField.FOURDIGITYEAR', 'Four-digit year',
+ 40, 'Help text describing what "YYYY" means in ISO date formatting') . '</li>'
+ . '<li>YY = ' . _t('MemberDatetimeOptionsetField.TWODIGITYEAR', 'Two-digit year',
+ 40, 'Help text describing what "YY" means in ISO date formatting') . '</li>'
+ . '<li>MMMM = ' . _t('MemberDatetimeOptionsetField.FULLNAMEMONTH', 'Full name of month (e.g. June)',
+ 40, 'Help text describing what "MMMM" means in ISO date formatting') . '</li>'
+ . '<li>MMM = ' . _t('MemberDatetimeOptionsetField.SHORTMONTH', 'Short name of month (e.g. Jun)',
+ 40, 'Help text letting describing what "MMM" means in ISO date formatting') . '</li>'
+ . '<li>MM = ' . _t('MemberDatetimeOptionsetField.TWODIGITMONTH', 'Two-digit month (01=January, etc.)',
+ 40, 'Help text describing what "MM" means in ISO date formatting') . '</li>'
+ . '<li>M = ' . _t('MemberDatetimeOptionsetField.MONTHNOLEADING', 'Month digit without leading zero',
+ 40, 'Help text describing what "M" means in ISO date formatting') . '</li>'
+ . '<li>dd = ' . _t('MemberDatetimeOptionsetField.TWODIGITDAY', 'Two-digit day of month',
+ 40, 'Help text describing what "dd" means in ISO date formatting') . '</li>'
+ . '<li>d = ' . _t('MemberDatetimeOptionsetField.DAYNOLEADING', 'Day of month without leading zero',
+ 40, 'Help text describing what "d" means in ISO date formatting') . '</li>'
+ . '<li>hh = ' . _t('MemberDatetimeOptionsetField.TWODIGITHOUR', 'Two digits of hour (00 through 23)',
+ 40, 'Help text describing what "hh" means in ISO date formatting') . '</li>'
+ . '<li>h = ' . _t('MemberDatetimeOptionsetField.HOURNOLEADING', 'Hour without leading zero',
+ 40, 'Help text describing what "h" means in ISO date formatting') . '</li>'
+ . '<li>mm = ' . _t('MemberDatetimeOptionsetField.TWODIGITMINUTE',
'Two digits of minute (00 through 59)',
- 40, 'Help text describing what "mm" means in ISO date formatting') . '</li>';
- $output .= '<li>m = ' . _t('MemberDatetimeOptionsetField.MINUTENOLEADING', 'Minute without leading zero',
- 40, 'Help text describing what "m" means in ISO date formatting') . '</li>';
- $output .= '<li>ss = ' . _t('MemberDatetimeOptionsetField.TWODIGITSECOND',
+ 40, 'Help text describing what "mm" means in ISO date formatting') . '</li>'
+ . '<li>m = ' . _t('MemberDatetimeOptionsetField.MINUTENOLEADING', 'Minute without leading zero',
+ 40, 'Help text describing what "m" means in ISO date formatting') . '</li>'
+ . '<li>ss = ' . _t('MemberDatetimeOptionsetField.TWODIGITSECOND',
'Two digits of second (00 through 59)',
- 40, 'Help text describing what "ss" means in ISO date formatting') . '</li>';
- $output .= '<li>s = ' . _t('MemberDatetimeOptionsetField.DIGITSDECFRACTIONSECOND',
+ 40, 'Help text describing what "ss" means in ISO date formatting') . '</li>'
+ . '<li>s = ' . _t('MemberDatetimeOptionsetField.DIGITSDECFRACTIONSECOND',
'One or more digits representing a decimal fraction of a second',
- 40, 'Help text describing what "s" means in ISO date formatting') . '</li>';
- $output .= '<li>a = ' . _t('MemberDatetimeOptionsetField.AMORPM', 'AM (Ante meridiem) or PM (Post meridiem)',
- 40, 'Help text describing what "a" means in ISO date formatting') . '</li>';
- $output .= '</ul>';
+ 40, 'Help text describing what "s" means in ISO date formatting') . '</li>'
+ . '<li>a = ' . _t('MemberDatetimeOptionsetField.AMORPM', 'AM (Ante meridiem) or PM (Post meridiem)',
+ 40, 'Help text describing what "a" means in ISO date formatting') . '</li>'
+ . '</ul>';
return $output;
}
@@ -0,0 +1,13 @@
+@database-defaults
+Feature: My Profile
+ As a CMS user
+ I want to be able to change personal settings
+ In order to streamline my CMS experience
+
+ @javascript
+ Scenario: I can see date formatting help
+ Given I am logged in with "ADMIN" permissions
+ # Only tests this specific field and admin UI because its got built-in tooltips
+ When I go to "/admin/myprofile"
+ And I follow "Show formatting help"
+ Then I should see "Four-digit year"

0 comments on commit 963f02e

Please sign in to comment.