Issue #9 initial concept commit

application/modules/content/content_fields/models/grid_field.php

@@ -0,0 +1,28 @@
+<?php (defined('BASEPATH')) OR exit('No direct script access allowed');
+
+class Grid_field extends Field_type
+{
+    function settings()
+    {
+        $data = get_object_vars($this);
+
+        return $this->load->view('settings/grid', $data, TRUE);
+    }
+
+    function display_field()
+    {
+        $data = get_object_vars($this);
+
+        // Build options array
+        $option_array = array();
+        foreach (explode("\n", $this->Field->options) as $option)
+        {
+            $option = explode("=", $option, 2);
+            $option_array[$option[0]] = (count($option) == 2) ? $option[1] : $option[0];
+        }
+
+        $data['Field']->options = $option_array;
+
+        return $this->load->view('grid', $data, TRUE);
+    }
+}

application/modules/content/content_fields/views/grid.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Call global helper function to build html fields based on settings set in 
+ * grid_fields database table settings.
+ *
+ * Save to table field in a json format.
+ */
+// echo form_input(array(
+    // 'name'  =>'field_id_' . $Field->id, 
+    // 'value' =>set_value('field_id_' . $Field->id, $content)
+// )); 
+
+// To do: Build form via php and database fields 
+// To do: submit changes to database
+?>
+<div id="sub_hold_field_30">
+	<fieldset class="holder">
+        <div id="field_id_30" class="matrix matrix-ee2">
+            <table id="myTable" class="matrix order-list" border="0" cellpadding="0" cellspacing="0">
+                <thead class="matrix">
+                    <tr class="matrix matrix-first matrix-last odd">
+                        <th class="matrix matrix-first matrix-tr-header"></th>
+                        <th class="matrix" scope="col" width="33%">Icon</th>
+                        <th class="matrix" scope="col" width="">Type</th>
+                        <th class="matrix matrix-last" scope="col" width="">Definition </th>
+                    </tr>
+                </thead>
+                <tbody class="matrix">
+                    <!--
+                    <tr style="display: none;" class="matrix matrix-first matrix-last matrix-norows even">
+                        <td colspan="4" class="matrix matrix-first matrix-firstcell matrix-last">No rows exist yet. <a>Create the first one.</a></td>
+                    </tr>
+                    -->
+                    <tr class="matrix matrix-first" id="tbl_row_1">
+                        <th class="matrix matrix-first matrix-tr-header">
+                            <div>
+                                <span>1</span><a style="opacity: 1; display: none;" title="Options"></a>
+                            </div>
+                        </th>
+                        <td style="width: auto;" class="matrix matrix-firstcell">
+                            <select name="field_id_30[row_new_1][col_id_33]">
+                                <option value="icon-location-1">Location</option>
+                            </select>
+                        </td>
+                        <td style="width: auto;" class="matrix matrix-text">
+                            <textarea style="overflow: hidden; height: 14px;" class="matrix-textarea" name="field_id_30[row_new_1][col_id_34]" rows="1" dir="ltr"></textarea>
+                            <div class="matrix-charsleft-container"><div class="matrix-charsleft">140</div></div>
+                        </td>
+                        <td style="width: auto;" class="matrix matrix-last matrix-text">
+                            <textarea style="overflow: hidden; height: 14px;" class="matrix-textarea" name="field_id_30[row_new_1][col_id_35]" rows="1" dir="ltr"></textarea>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <a class="matrix-btn matrix-add" id="addrow" title="Add row"></a>
+        </div>
+    </fieldset>
+</div>

application/modules/content/content_fields/views/settings/grid.php

@@ -0,0 +1,7 @@
+<div>
+    <label for="type">Allow Inline Editing:</label>
+    <span>
+        <label><?php echo form_radio(array('name'  => 'settings[inline_editing]', 'value' => '1', 'checked' => set_radio('settings[inline_editing]', '1', ( ! isset($Field->settings['inline_editing']) || $Field->settings['inline_editing']) ? TRUE : FALSE))); ?>Yes</label>
+        <label><?php echo form_radio(array('name'  => 'settings[inline_editing]', 'value' => '0', 'checked' => set_radio('settings[inline_editing]', '0', (isset($Field->settings['inline_editing']) && ! $Field->settings['inline_editing']) ? TRUE : FALSE))); ?>No</label>
+    </span>
+</div>

application/themes/admin/assets/css/matrix.css

@@ -0,0 +1,71 @@
+div.publish_field.publish_matrix { overflow-x: auto; }
+
+div.matrix { position: relative;}
+*:first-child+html div.matrix { position: static; }
+
+table.matrix { position: relative; margin: 0 !important; min-width: 100%; border: 1px solid #b6c0c2;
+	border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 4px;
+	-webkit-user-select: none; }
+*:first-child+html table.matrix { position: static; }
+
+table.matrix th.matrix,
+table.matrix td.matrix { vertical-align: top; text-align: left; }
+
+table.matrix .matrix-tr-header { padding: 7px !important; width: 0.01% !important; }
+
+/* buttons */
+a.matrix-btn { display: block; margin: 3px 0 0 2px; width: 20px; height: 20px; background: no-repeat 0 -20px; cursor: pointer; }
+a.matrix-btn:active { background-position: 0 -40px; }
+a.matrix-btn-disabled { background-position: 0 0 !important; cursor: default; }
+
+a.matrix-add { background-image: url(../images/grid/add_btn.png); }
+a.matrix-remove { background-image: url(../images/grid/remove_btn.png); }
+
+/*-- table head --*/
+table.matrix thead.matrix { background: none; }
+table.matrix thead.matrix th.matrix,
+table.matrix thead.matrix td.matrix { padding: 1px 10px; border: none !important; border-right: 1px solid #ccc !important; border-right-color: rgba(0,0,0,0.1) !important; text-shadow: 0 1px #fff;}
+
+table.matrix thead.matrix th.matrix { color: inherit; line-height: 13px; background: #fff url(../images/grid/thead_bg.png) repeat-x 0 1px;
+	background: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(rgba(0,0,0,0.06)));
+	background: -moz-linear-gradient(top, transparent, rgba(0,0,0,0.06)); }
+table.matrix thead.matrix td.matrix { font-size: 0.9em; background: #e5e5e5; background: rgba(0,0,0,0.06); }
+
+table.matrix thead.matrix tr.matrix-first th.matrix { border-top: 1px solid #fff !important; padding-top: 5px; font-weight: bold; }
+table.matrix thead.matrix tr.matrix-last .matrix { padding-bottom: 6px; border-bottom: 1px solid #bbb !important; }
+
+/*-- table body --*/
+table.matrix tbody.matrix th.matrix,
+table.matrix tbody.matrix td.matrix { border: solid #e3e3e3; border-width: 1px 1px 0 0; }
+
+table.matrix tbody.matrix th.matrix { border-color: #c8cbce; text-align: center; vertical-align: middle; color: #5f6c74; text-shadow: 0 1px #fff; background: #e2e2e2; background: rgba(0,0,0,0.06);
+	cursor: move; cursor: -webkit-grab; cursor: -moz-grab; }
+table.matrix tbody.matrix td.matrix { padding: 7px 10px; background: #fff; }
+table.matrix tbody.matrix td.matrix-disabled { background: #eee; -webkit-user-select: none; -moz-user-select: none; }
+
+table.matrix tbody.matrix td.matrix label { font-size: 1em; line-height: 160%; }
+
+table.matrix tbody.matrix tr.matrix-norows td { padding: 8px 10px; text-align: center; cursor: pointer; }
+.matrix-ee2 table.matrix tbody.matrix tr.matrix-norows td a { color: #e11842; }
+table.matrix tbody.matrix tr.matrix-norows td:hover a { text-decoration: underline; }
+
+/* validation errors */
+table.matrix tbody.matrix td.matrix-error { background: #fff4f2; }
+
+/* menu button */
+table.matrix tbody.matrix th.matrix div { position: relative; z-index: 100 !important; height: 13px; line-height: 13px; }
+table.matrix tbody.matrix th.matrix div a { display: none; position: absolute; z-index: 100 !important; top: -1px; right: -15px; width: 15px; height: 15px; background: url(../images/grid/remove_file_btn.png) no-repeat; cursor: pointer; }
+
+/* menu */
+#matrix-menu { position: absolute; z-index: 100 !important; /*top: 11px;*/ margin: 0; border: 1px solid rgba(0,0,0,0.3); padding: 4px 0; list-style-type: none; white-space: nowrap; background: #fff; background: rgba(255,255,255,0.95);
+	font-weight: normal; text-align: left; cursor: default;
+	border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
+	-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.2); -moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
+	*border: 1px solid #b6c0c2; }
+#matrix-menu li { padding: 2px 10px; color: #333; text-shadow: none; }
+#matrix-menu li:hover { color: #fff; background: #f81a53;
+	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f72a58), to(#cd0649));
+	background: -moz-linear-gradient(top, #f72a58, #cd0649); }
+#matrix-menu li.disabled { color: #aaa; }
+#matrix-menu li.disabled:hover { background: none; }
+#matrix-menu li.br { margin: 4px 0; padding: 0; height: 0; border-top: 1px solid #e5e5e5; background: transparent; }

application/themes/admin/assets/js/grid/grid.js

@@ -0,0 +1,71 @@
+/**
+ * Builds additional rows rynamically
+ *
+ * @source      http://stackoverflow.com/questions/16200104/jquery-add-and-remove-table-rows
+ * @author      Cosmo Mathieu <[email protected]>
+ */
+$(document).ready(function(){
+    var counter = 2;
+
+    $('#field_id_30 table.matrix tbody').sortable({
+        axis: 'y',
+        placeholder: "ui-state-highlight",
+        update: function (event, ui) {
+            var data = $(this).sortable('serialize');
+            // POST to server using $.post or $.ajax
+            // $.ajax({
+                // data: data,
+                // type: 'POST',
+                // url: '/your/url/here'
+            // });
+        }
+    });
+
+    $("#addrow").on("click", function(){
+
+        // counter    = $('#field_id_30 table.matrix tr').length - 2;
+        var newRow = $("<tr class=\"matrix\" id=\"tbl_row_"+ counter +"\">");
+        var cols   = "";
+
+        cols += 
+        '<th class="matrix matrix-first matrix-tr-header">' +
+        '    <div>' +
+        '        <span>'+ counter +'</span><a class="delRow" style="display: inline; opacity: 1;" title="Options"></a>' +
+        '    </div>' +
+        '    <input name="field_id_30[row_order][]" value="row_new_1" type="hidden">' +
+        '</th>' +
+        '<td style="width: auto;" class="matrix matrix-firstcell">' +
+        '    <select name="field_id_30[row_new_1][col_id_33]">' +
+        '        <option value="icon-location-1">Location</option>' +
+        '    </select>' +
+        '</td>' +
+        '<td style="width: auto;" class="matrix matrix-text">' +
+        '    <textarea style="overflow: hidden; height: 14px;" class="matrix-textarea" name="field_id_30[row_new_1][col_id_34]" rows="1" dir="ltr"></textarea>' +
+        '    <div class="matrix-charsleft-container"><div class="matrix-charsleft">140</div></div>' +
+        '</td>' +
+        '<td style="width: auto;" class="matrix matrix-last matrix-text">' +
+        '    <textarea style="overflow: hidden; height: 14px;" class="matrix-textarea" name="field_id_30[row_new_1][col_id_35]" rows="1" dir="ltr"></textarea>' +
+        '</td>';
+        newRow.append(cols);
+
+        if (counter === 4) {
+            $('#addrow').click(function(e){
+                e.preventDefault();
+            });
+            $('#addrow').removeAttr('href');
+            $('#addrow').hide();
+        }
+        $("table.order-list").append(newRow);
+
+        counter++;
+    });
+
+    $("table.order-list").on("click", ".delRow", function(event){
+        if (confirm('Are you sure you want to delete this?')) {
+            $(this).closest("tr").remove();
+            counter -= 1
+            $('#addrow').attr('disabled', false).prop('value', "Add Row");
+        }
+    });
+
+});

application/themes/admin/views/partials/header.php

@@ -24,6 +24,7 @@
     <script type="text/javascript" src="<?php echo theme_url('assets/js/app.js'); ?>"></script>
     <script type="text/javascript" src="<?php echo theme_url('assets/js/helpers.js'); ?>"></script>
     <script type="text/javascript" src="<?php echo theme_url('assets/js/superfish.js'); ?>"></script>
+    <script type="text/javascript" src="<?php echo theme_url('assets/js/grid/grid.js'); ?>"></script>
 
     <!-- Google Analytics -->
     <?php echo $this->template->analytics() ?>