forked from AlchemyCMS/alchemy_cms
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a quick Node select (AlchemyCMS#1821)
* Add a quick Node select This faster select also shows the ancestors of each node, such that one is not confused between nodes that have similar names. * Fix Copy-Paste error that tries assigning Pages to EssenceNodes Prior to this commit, saving an EssenceNode by ID would never work... * Serialize Node with Ancestors for initial selection * Center initial selection in Alchemy::EssenceNode select Maybe we should look at using Flexbox for this so we can center things more easily. * Add specs for NodesController Index Action It's always good to have specs.
- Loading branch information
Showing
18 changed files
with
256 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
$.fn.alchemyNodeSelect = function(options) { | ||
var renderNodeTemplate = (node) => HandlebarsTemplates.node({ node: node }) | ||
var queryParamsFromTerm = (term) => { | ||
return {filter: Object.assign({ name_or_page_name_cont: term }, options.query_params)} | ||
} | ||
var resultsFromResponse = (response) => { | ||
var { meta, data } = response | ||
var more = meta.page * meta.per_page < meta.total_count | ||
return { results: data, more: more } | ||
} | ||
|
||
return this.select2({ | ||
placeholder: options.placeholder, | ||
allowClear: true, | ||
minimumInputLength: 3, | ||
initSelection: function (_$el, callback) { | ||
if (options.initialSelection) { | ||
callback(options.initialSelection) | ||
} | ||
}, | ||
ajax: { | ||
url: options.url, | ||
datatype: 'json', | ||
quietMillis: 300, | ||
data: queryParamsFromTerm, | ||
results: resultsFromResponse | ||
}, | ||
formatSelection: renderNodeTemplate, | ||
formatResult: renderNodeTemplate | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
//= require alchemy/templates/spinner | ||
//= require alchemy/templates/page | ||
//= require alchemy/templates/node_folder | ||
//= require alchemy/templates/node |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<div class="node-select--node"> | ||
<i class="icon fas fa-list fa-lg"></i> | ||
<div class="node-select--node-display_name"> | ||
<span class="node-select--node-ancestors"> | ||
{{#each node.ancestors}} | ||
{{ this.name }} / | ||
{{/each}} | ||
</span> | ||
<span class="node-select--node-name"> | ||
{{ node.name }} | ||
</span> | ||
</div> | ||
<div class="node-select--node-url"> | ||
{{ node.url }} | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
.node-select--node, | ||
.node-select--node-url { | ||
text-overflow: ellipsis; | ||
overflow: hidden; | ||
white-space: nowrap; | ||
} | ||
|
||
.node-select--node { | ||
display: flex; | ||
align-items: center; | ||
|
||
.icon { | ||
margin: 0 8px 0 4px; | ||
|
||
.select2-highlighted & { | ||
color: $white | ||
} | ||
} | ||
} | ||
|
||
.node-select--node-name { | ||
font-weight: bold; | ||
} | ||
|
||
.node-select--node-url { | ||
margin-left: auto; | ||
padding: $default-padding 2*$default-padding; | ||
color: $dark-gray; | ||
font-size: $small-font-size; | ||
|
||
.select2-highlighted & { | ||
color: $white | ||
} | ||
} | ||
|
||
// The container of the rendered node is slightly larger than other a line of | ||
// text, as it would be for the Alchemy::EssencePage. Reducing the padding here from 0.6em | ||
// to 0.4em centers the content nicely. | ||
.essence_node { | ||
.select2-container.alchemy_selectbox .select2-choice { | ||
padding: 0.4em 0.75em; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,21 +1,27 @@ | ||
<%# | ||
Available locals: | ||
* content (The object the essence is linked to the element) | ||
* html_options | ||
Please consult Alchemy::Content.rb docs for further methods on the content object | ||
%> | ||
<div class="content_editor essence_node" id="<%= content.dom_id %>" data-content-id="<%= content.id %>"> | ||
<%= content_label(content) %> | ||
<%= select_tag( | ||
content.form_field_name, | ||
options_from_collection_for_select( | ||
local_assigns.fetch(:options, {})[:nodes] || Alchemy::Node.where(site: Alchemy::Site.current), | ||
:id, | ||
:name, | ||
content.essence.node_id | ||
), | ||
include_blank: t(".none"), | ||
class: "alchemy_selectbox essence_editor_select full_width" | ||
<%= content_tag :div, | ||
id: essence_node_editor.dom_id, | ||
class: essence_node_editor.css_classes, | ||
data: essence_node_editor.data_attributes do %> | ||
<%= content_label(essence_node_editor) %> | ||
<%= text_field_tag( | ||
essence_node_editor.form_field_name, | ||
essence_node_editor.essence.node_id, | ||
id: essence_node_editor.form_field_id, | ||
class: 'alchemy_selectbox full_width' | ||
) %> | ||
</div> | ||
<% end %> | ||
|
||
<script> | ||
<% query_params = essence_node_editor.settings.fetch(:query_params, {}).merge({ | ||
include: :ancestors | ||
}) %> | ||
$('#<%= essence_node_editor.form_field_id %>').alchemyNodeSelect({ | ||
placeholder: "<%= Alchemy.t(:search_node) %>", | ||
url: "<%= alchemy.api_nodes_path %>", | ||
query_params: <%== query_params.to_json %>, | ||
<% if essence_node_editor.essence.node %> | ||
<% serialized_node = ActiveModelSerializers::SerializableResource.new(essence_node_editor.essence.node, include: :ancestors) %> | ||
initialSelection: <%== serialized_node.to_json %> | ||
<% end %> | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -160,3 +160,8 @@ | |
fixed: true | ||
unique: true | ||
nestable_elements: [text] | ||
|
||
- name: menu | ||
contents: | ||
- name: Menu | ||
type: EssenceNode |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.