summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJake Strawn2012-10-25 12:46:33 (GMT)
committer Jake Strawn2012-10-25 12:46:33 (GMT)
commit3fff9b5c816656f9ccfb6c02a29d5884a6255a73 (patch)
treed021f2e5d78b960941fe68e58c01055d1b96d9ed
parent6386a39015b85c3d16a8a29994ccf62145f8a33d (diff)
making file management as good as it can be.
-rw-r--r--css/global.css138
-rw-r--r--includes/omega_nodemaker.theme.inc140
-rw-r--r--js/nodemaker.js32
-rw-r--r--scss/forms.scss25
-rw-r--r--scss/node.scss208
-rw-r--r--template.php3
6 files changed, 511 insertions, 35 deletions
diff --git a/css/global.css b/css/global.css
index 3f9c122..c61ef08 100644
--- a/css/global.css
+++ b/css/global.css
@@ -1447,6 +1447,24 @@ input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent; }
+#plup-list li {
+ width: 180px;
+ height: 265px;
+ position: relative; }
+ #plup-list li .plup-thumb-wrapper {
+ width: 180px;
+ height: 180px; }
+ #plup-list li input.form-text {
+ top: 0;
+ margin: 10px 5px 0 5px;
+ height: 28px !important;
+ width: 170px !important;
+ font-size: 14px; }
+ #plup-list li .plup-remove-item {
+ position: absolute;
+ top: 5px;
+ right: 5px; }
+
/**
* Project: Omega NodeMaker
* Company: ThemeGeeks
@@ -2453,9 +2471,7 @@ dl.node-type-list {
box-shadow: none; }
.node-form .image-widget {
- position: relative;
- width: 100%;
- max-width: 100%; }
+ position: relative; }
.node-form .image-widget .image-widget-data {
width: 100%;
display: block;
@@ -2795,6 +2811,122 @@ dl.node-type-list {
width: 100%; }
.node-form .vertical-tabs .vertical-tabs-panes .vertical-tabs-pane > legend {
display: none; }
+.node-form #edit-field-nm-attach-gallery .form-radios {
+ max-height: 200px;
+ overflow-y: auto; }
+.node-form .filefield-sources-list {
+ font-size: 12px; }
+.node-form .tabledrag-toggle-weight-wrapper {
+ position: relative;
+ font-size: 12px;
+ float: right;
+ top: -24px; }
+.node-form .field-type-image .description {
+ margin-top: 5px;
+ margin-bottom: 0; }
+.node-form .field-type-image .form-item {
+ position: relative; }
+.node-form .field-type-image .image-preview {
+ position: absolute;
+ top: 0;
+ left: 0px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #CCC; }
+.node-form .field-type-image .image-details {
+ display: block; }
+ .node-form .field-type-image .image-details.with-image {
+ display: none; }
+.node-form .field-type-image .image-widget {
+ padding-left: 55px; }
+ .node-form .field-type-image .image-widget.has-no-image {
+ padding-left: 0; }
+.node-form .field-type-image .image-widget-data {
+ position: relative;
+ width: auto; }
+ .node-form .field-type-image .image-widget-data .image-data,
+ .node-form .field-type-image .image-widget-data .file-size,
+ .node-form .field-type-image .image-widget-data .file-name,
+ .node-form .field-type-image .image-widget-data .file-dimensions,
+ .node-form .field-type-image .image-widget-data .file {
+ font-size: 11px; }
+ .node-form .field-type-image .image-widget-data .image-data a,
+ .node-form .field-type-image .image-widget-data .file-size a,
+ .node-form .field-type-image .image-widget-data .file-name a,
+ .node-form .field-type-image .image-widget-data .file-dimensions a,
+ .node-form .field-type-image .image-widget-data .file a {
+ font-weight: bold; }
+ .node-form .field-type-image .image-widget-data .image-data {
+ margin-bottom: 5px;
+ padding: 10px;
+ height: 28px;
+ line-height: 28px;
+ border: 1px solid #CCC;
+ background: #FFF; }
+ .node-form .field-type-image .image-widget-data .image-data .more-details {
+ float: right; }
+ .node-form .field-type-image .image-widget-data .form-type-textfield {
+ margin: 0px 0px 5px 0px;
+ padding: 5px;
+ box-shadow: none;
+ border: 0;
+ padding: 0;
+ background: none; }
+ .node-form .field-type-image .image-widget-data .form-type-textfield input.form-text {
+ margin-bottom: 0; }
+ .node-form .field-type-image .image-widget-data .form-type-textfield .description {
+ margin-top: 2px; }
+ .node-form .field-type-image .image-widget-data .form-type-textfield label {
+ display: none; }
+.node-form .field-type-image .file-icon {
+ display: none; }
+.node-form .field-type-image .draggable .image-preview {
+ position: absolute;
+ top: 0;
+ left: 25px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #CCC; }
+.node-form table.tabledrag-processed {
+ border-width: 0; }
+.node-form table .draggable {
+ position: relative;
+ padding: 0;
+ border-width: 0;
+ border: none; }
+ .node-form table .draggable.row-changed {
+ background-color: #FCF8E3; }
+ .node-form table .draggable.row-changed .image-data {
+ border-color: #FBEED5; }
+ .node-form table .draggable .table-cell-wrapper {
+ position: relative;
+ z-index: 1; }
+ .node-form table .draggable td {
+ border: none; }
+ .node-form table .draggable .tabledrag-hide {
+ width: 60px !important;
+ vertical-align: top; }
+ .node-form table .draggable .tabledrag-hide .form-item {
+ margin: 0;
+ padding: 5px;
+ box-shadow: none;
+ border: 0;
+ padding: 0;
+ background: none; }
+ .node-form table .draggable .tabledrag-hide .form-item select {
+ width: 100%;
+ margin: 0; }
+ .node-form table .draggable .image-widget {
+ padding-left: 80px; }
+ .node-form table .draggable .image-widget.has-no-image {
+ padding-left: 0; }
+.node-form table a.tabledrag-handle {
+ z-index: 499;
+ position: relative;
+ float: left;
+ margin-left: -10px; }
+.node-form table .tabledrag-changed {
+ display: none; }
body.page-node-edit #region-content,
body.page-node-revisions #region-content {
diff --git a/includes/omega_nodemaker.theme.inc b/includes/omega_nodemaker.theme.inc
index efef0f6..f1d4171 100644
--- a/includes/omega_nodemaker.theme.inc
+++ b/includes/omega_nodemaker.theme.inc
@@ -197,6 +197,67 @@ function omega_nodemaker_pager($variables) {
}
}
+function omega_nodemaker_image_widget($variables) {
+ $element = $variables['element'];
+ //dsm($element);
+
+ if (isset($element['remove_button'])) {
+ $element['remove_button']['#attributes'] = array(
+ 'class' => array('file-remove-button'),
+ );
+ }
+ if (isset($element['alt'])) {
+ $element['alt']['#attributes']['placeholder'] = $element['alt']['#title'];
+ }
+
+ if (isset($element['title'])) {
+ $element['title']['#attributes']['placeholder'] = $element['title']['#title'];
+ }
+
+
+
+ $extra = isset($element['filename']) ? ' has-image' : ' has-no-image';
+
+ $output = '';
+ $output .= '<div class="image-widget' . $extra . ' form-managed-file clearfix">';
+
+ if (isset($element['preview'])) {
+ $element['preview']['#prefix'] = '<div class="thumbnail">';
+ $element['preview']['#suffix'] = '</div>';
+ $output .= '<div class="image-preview clearfix">';
+ $output .= drupal_render($element['preview']);
+ $output .= '</div>';
+ }
+
+ $output .= '<div class="image-widget-data clearfix">';
+ // make sure there IS an image before rendering the "data" section of the image widget
+ if (isset($element['filename'])) {
+ $output .= '<div class="image-data">';
+ $output .= '<span class="file-name">' . drupal_render($element['filename']) . '</span>';
+
+ if ($element['fid']['#value'] != 0) {
+ $output .= '<span class="file-size">(' . format_size($element['#file']->filesize) . ')</span> ';
+ }
+
+ if (isset($element['width']['#value']) && isset($element['height']['#value'])) {
+ $output .= '<span class="file-dimensions">' . $element['width']['#value'] . ' x ' . $element['height']['#value'] . '</span>';
+ }
+ $output .= '<span class="more-details"><a href="#" class="image-widget-toggle show-more">show more</a></div>';
+ $output .= '<div class="image-details with-image clearfix">';
+ $output .= '<div class="image-meta clearfix">' . drupal_render($element['title']) . drupal_render($element['alt']) . '</div>';
+ }
+ else {
+ $output .= '<div class="image-details without-image clearfix">';
+ }
+ $output .= '<div class="image-actions clearfix">';
+ $output .= drupal_render_children($element);
+ $output .= '</div>';
+ $output .= '</div>';
+ $output .= '</div>';
+ $output .= '</div>';
+
+ return $output;
+}
/**
* Returns HTML for a group of file upload widgets.
@@ -208,6 +269,7 @@ function omega_nodemaker_pager($variables) {
* @ingroup themeable
*/
function omega_nodemaker_file_widget_multiple($variables) {
+
$element = $variables['element'];
// Special ID and classes for draggable tables.
$weight_class = $element['#id'] . '-weight';
@@ -245,12 +307,6 @@ function omega_nodemaker_file_widget_multiple($variables) {
// Delay rendering of the buttons, so that they can be rendered later in the
// "operations" column.
$operations_elements = array();
- foreach (element_children($widget) as $sub_key) {
- if (isset($widget[$sub_key]['#type']) && $widget[$sub_key]['#type'] == 'submit') {
- hide($widget[$sub_key]);
- $operations_elements[] = &$widget[$sub_key];
- }
- }
// Delay rendering of the "Display" option and the weight selector, so that
// each can be rendered later in its own column.
@@ -261,22 +317,23 @@ function omega_nodemaker_file_widget_multiple($variables) {
// Render everything else together in a column, without the normal wrappers.
$widget['#theme_wrappers'] = array();
- $information = drupal_render($widget);
- //dsm($operations_elements);
- // Render the previously hidden elements, using render() instead of
- // drupal_render(), to undo the earlier hide().
- $operations = '';
- foreach ($operations_elements as $operation_element) {
- //dsm($operation_element);
-
- if ($operation_element['#value'] == 'Remove') {
- $operation_element['#attributes'] = array(
- 'class' => array('file-remove-button'),
- );
+
+ foreach (element_children($widget) as $sub_key) {
+ if (isset($widget[$sub_key]['#type']) && $widget[$sub_key]['#type'] == 'submit') {
+ if ($widget[$sub_key]['#value'] == 'Remove') {
+ $widget[$sub_key]['#attributes'] = array(
+ 'class' => array('file-remove-button'),
+ );
+ }
}
- $operations .= render($operation_element);
}
+
$display = '';
+
+
+ $information = drupal_render($widget);
+
+
if ($element['#display_field']) {
unset($widget['display']['#title']);
$display = array(
@@ -289,12 +346,13 @@ function omega_nodemaker_file_widget_multiple($variables) {
// Arrange the row with all of the rendered columns.
$row = array();
- $row[] = $information . $operations;
+ $row[] = '<div class="table-cell-wrapper">' . $information . '</div>';
if ($element['#display_field']) {
$row[] = $display;
}
$row[] = $weight;
//$row[] = $operations;
+ //dsm($row);
$rows[] = array(
'data' => $row,
'class' => isset($widget['#attributes']['class']) ? array_merge($widget['#attributes']['class'], array('draggable')) : array('draggable'),
@@ -302,9 +360,49 @@ function omega_nodemaker_file_widget_multiple($variables) {
}
drupal_add_tabledrag($table_id, 'order', 'sibling', $weight_class);
-
+ //dsm($rows);
$output = '';
$output = empty($rows) ? '' : theme('table', array('header' => $headers, 'rows' => $rows, 'attributes' => array('id' => $table_id)));
+
+
$output .= drupal_render_children($element);
+
+ return $output;
+}
+
+/**
+ * Theme Plupload items within widget.
+ */
+function omega_nodemaker_plup_items($vars) {
+ //dsm($vars);
+ $element = &$vars['element'];
+ if (isset($element['#default_value']) && !empty($element['#default_value'])) {
+ $items = &$element['#default_value'];
+ } else {
+ return '';
+ }
+
+ $output = '';
+ foreach ($items AS $delta => $item) {
+ // If user deleted all items I'll get array('fid' => 0)
+ if ($item['fid'] > 0) {
+ $name = $element['#name'] .'['. $delta .']';
+ $output .= '<li class="ui-state-default">';
+ $output .= '<div class="plup-thumb-wrapper">'. theme('image_style', array('style_name' => $element['#plup']['image_style'], 'path' => $item['uri'])) .'</div>';
+ $output .= '<a class="plup-remove-item"></a>';
+ if (isset($element['#plup_override']['title_field']) && $element['#plup_override']['title_field'] == 1) {
+ $output .= '<input title="'. t('Title') .'" type="text" class="form-text" name="'. $name .'[title]" value="'. $item['title'] .'" />';
+ }
+ if (isset($element['#plup_override']['alt_field']) && $element['#plup_override']['alt_field'] == 1) {
+ $output .= '<input title="'. t('Alternative text') .'" type="text" class="form-text" name="'. $name .'[alt]" value="'. $item['alt'] .'" />';
+ }
+ $output .= '<input type="hidden" name="'. $name .'[fid]" value="'. $item['fid'] .'" />';
+ $output .= '<input type="hidden" name="'. $name .'[weight]" value="'. $delta .'" />';
+ if (isset($item['rename'])) {
+ $output .= '<input type="hidden" name="'. $name .'[rename]" value="'. $item['rename'] .'" />';
+ }
+ $output .= '</li>';
+ }
+ }
return $output;
} \ No newline at end of file
diff --git a/js/nodemaker.js b/js/nodemaker.js
index c035a46..4e99832 100644
--- a/js/nodemaker.js
+++ b/js/nodemaker.js
@@ -1,13 +1,25 @@
Drupal.nodemaker = Drupal.nodemaker || {};
+
+
(function($) {
-
+
var toolbar;
var toolbarHeight;
var menuHeight;
var combinedHeight;
var menuOffset;
+ // replacement function for tabledrag dropped row manipulation
+
+ if (Drupal.tableDrag) {
+ Drupal.tableDrag.prototype.onDrop = function () {
+ // add a class to the row that was dragged around
+ $(this.oldRowElement).addClass('row-changed');
+ };
+ }
+
+
Drupal.nodemaker.menuInitHeight = function () {
//console.log('Running: Drupal.nodemaker.menuInitHeight');
@@ -69,7 +81,23 @@ Drupal.nodemaker = Drupal.nodemaker || {};
})(jQuery);
(function ($) {
-
+ // function to make image widgets much nicer.
+ Drupal.behaviors.nodemakerBetterFileMgmt = {
+ attach: function(context, settings) {
+ $('.image-widget-toggle').click(function(event){
+ event.stopImmediatePropagation();
+ if ($(this).hasClass('show-more')) {
+ $(this).removeClass('show-more').text('show less');
+ $(this).parents('.image-widget-data').children('.image-details').slideDown('fast');
+ }
+ else {
+ $(this).addClass('show-more').text('show more');
+ $(this).parents('.image-widget-data').children('.image-details').slideUp('fast');
+ }
+ return false;
+ });
+ }
+ };
// add a mobile friendly menu
Drupal.behaviors.nodemakerMobileMenu = {
diff --git a/scss/forms.scss b/scss/forms.scss
index 2448e6f..5f4619c 100644
--- a/scss/forms.scss
+++ b/scss/forms.scss
@@ -289,3 +289,28 @@ input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent;
}
+
+#plup-list li {
+ width: 180px;
+ height: 265px;
+ position: relative;
+
+ .plup-thumb-wrapper {
+ width: 180px;
+ height: 180px;
+ }
+
+ input.form-text {
+ top: 0;
+ margin: 10px 5px 0 5px;
+ height: 28px !important;
+ width: 170px !important;
+ font-size: 14px;
+ }
+
+ .plup-remove-item {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ }
+} \ No newline at end of file
diff --git a/scss/node.scss b/scss/node.scss
index b3d9cf3..58c726a 100644
--- a/scss/node.scss
+++ b/scss/node.scss
@@ -181,8 +181,6 @@ dl.node-type-list {
.node-form {
.image-widget {
position: relative;
- width: 100%;
- max-width: 100%;
.image-widget-data {
width: 100%;
@@ -192,7 +190,6 @@ dl.node-type-list {
.form-submit {
display: block;
float: right;
-
}
.file,
@@ -200,6 +197,7 @@ dl.node-type-list {
.colorbox-load {
font-size: 12px;
}
+
.colorbox-load {
@include button();
display: block;
@@ -241,7 +239,6 @@ dl.node-type-list {
margin-bottom: 10px;
img {
- //width: 100%;
max-width: 100%;
height: auto;
}
@@ -292,9 +289,7 @@ dl.node-type-list {
height: 32px;
@include boxsizing();
}
-
-
-
+
.filter-wrapper {
margin-top: 20px;
@include element-background();
@@ -311,6 +306,7 @@ dl.node-type-list {
display: block;
}
}
+
.filter-guidelines {
padding: 0;
font-size: 11px;
@@ -320,6 +316,7 @@ dl.node-type-list {
}
}
+
.filter-help {
position: absolute;
top: 10px;
@@ -409,7 +406,202 @@ dl.node-type-list {
}
}
}
- }
+ }
+
+ #edit-field-nm-attach-gallery {
+ .form-radios {
+ max-height: 200px;
+ overflow-y: auto;
+ }
+ }
+
+ .filefield-sources-list {
+ font-size: 12px;
+ }
+
+ .tabledrag-toggle-weight-wrapper {
+ position: relative;
+ font-size: 12px;
+ float: right;
+ top: -24px;
+ }
+
+ .field-type-image {
+
+ .description {
+ margin-top: 5px;
+ margin-bottom: 0;
+ }
+
+ .form-item {
+ position: relative;
+ }
+
+ .image-preview {
+ position: absolute;
+ top: 0;
+ left: 0px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #CCC;
+ }
+
+ .image-details {
+ display: block;
+
+
+ &.with-image {
+ display: none;
+ }
+ &.without-image {
+
+ }
+ }
+
+ .image-widget {
+ padding-left: 55px;
+
+ &.has-no-image {
+ padding-left: 0;
+ }
+ }
+
+ .image-widget-data {
+ position: relative;
+ width: auto;
+
+ .image-data,
+ .file-size,
+ .file-name,
+ .file-dimensions,
+ .file {
+ font-size: 11px;
+
+ a {
+ font-weight: bold;
+ }
+ }
+ .image-data {
+ margin-bottom: 5px;
+ padding: 10px;
+ height: 28px;
+ line-height: 28px;
+ border: 1px solid #CCC;
+ background: #FFF;
+
+ .more-details {
+ float: right;
+ }
+ }
+
+ .form-type-textfield {
+ margin: 0px 0px 5px 0px;
+ padding: 5px;
+ box-shadow: none;
+ border: 0;
+ padding: 0;
+ background: none;
+
+ input.form-text {
+ margin-bottom: 0;
+ }
+ .description {
+ margin-top: 2px;
+ }
+
+ label {
+ display: none;
+ }
+ }
+ }
+ .file-icon {
+ display: none;
+ }
+ }
+
+
+
+ // for tabledrag/multiple file inputs
+
+ .field-type-image {
+ .draggable{
+ .image-preview {
+ position: absolute;
+ top: 0;
+ left: 25px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #CCC;
+ }
+ }
+ }
+ table {
+
+ &.tabledrag-processed {
+ border-width: 0;
+
+
+ }
+
+ .draggable {
+ position: relative;
+ padding: 0;
+ border-width: 0;
+ border: none;
+
+ &.row-changed {
+ background-color: #FCF8E3;
+
+ .image-data {
+ border-color: #FBEED5;
+ }
+ }
+
+ .table-cell-wrapper {
+ position: relative;
+ z-index: 1;
+ }
+ td {
+ border: none;
+ }
+ .tabledrag-hide {
+ width: 60px !important;
+ vertical-align: top;
+
+ .form-item {
+ margin: 0;
+ padding: 5px;
+ box-shadow: none;
+ border: 0;
+ padding: 0;
+ background: none;
+
+ select {
+ width: 100%;
+ margin: 0;
+ }
+ }
+ }
+ .image-widget {
+ padding-left: 80px;
+
+ &.has-no-image {
+ padding-left: 0;
+ }
+ }
+ }
+
+ a.tabledrag-handle {
+ z-index: 499;
+ position: relative;
+ float: left;
+ margin-left: -10px;
+
+ }
+ .tabledrag-changed {
+ display: none;
+ }
+ }
}
body.page-node-edit,
diff --git a/template.php b/template.php
index eb4770d..ef5ef7e 100644
--- a/template.php
+++ b/template.php
@@ -471,12 +471,13 @@ function omega_nodemaker_form_alter(&$form, &$form_state, $form_id) {
$form['search_block_form']['#attributes']['placeholder'] = t('Search ') . $site_name . '...';
//$form['advanced']['#access'] = FALSE;
break;
+
}
$node_form = substr($form_id, -10, 10);
//dsm($node_form);
if ($node_form == '_node_form') {
- //dsm($form);
+ //dsm($form['field_nm_gallery_images']);
}
}