* a lot of duplicate code and unnecessary variables I need to clean up, need to change case from camel case to snake case
* need to create a function for setting the editor content because it is duplicated a few times
*/
-
jQuery(function ($) {
-
- Object.compare = function (obj1, obj2) {
- //Loop through properties in object 1
- for (var p in obj1) {
- //Check property exists on both objects
- if (obj1.hasOwnProperty(p) !== obj2.hasOwnProperty(p)) return false;
-
- switch (typeof (obj1[p])) {
- //Deep compare objects
- case 'object':
- if (!Object.compare(obj1[p], obj2[p])) return false;
- break;
- //Compare function code
- case 'function':
- if (typeof (obj2[p]) == 'undefined' || (p != 'compare' && obj1[p].toString() != obj2[p].toString())) return false;
- break;
- //Compare values
- default:
- if (obj1[p] != obj2[p]) return false;
+ function createShortcodeTile(state, elHook){
+ var tile = $("<div />", {
+ text : state.name,
+ id : state.type+"-"+state.id,
+ class : state.type+"-shortcode-tile shortcode-tile",
+ });
+ tile.attr("data-"+state.type, state.id);
+ tile.attr("data-type", state.type);
+ tile.append( $("<div />", {
+ class : "delete-shortcode-tile",
+ text : "X"
+ }));
+ tile.appendTo(elHook);
+ }
+
+ function generateShortcodeString(string){
+ console.log(string)
+ $("#shortcode-preview").text(shortcode_start + string + "]")
+ }
+
+ function checkDuplicates(object, list) {
+ var objString = JSON.stringify(object);
+ for( var i = 0; i < list.length; i++){
+ var listString = JSON.stringify(list[i]);
+ if(objString === listString){
+ return true
}
}
-
- //Check object 2 for any extra properties
- for (var p in obj2) {
- if (typeof (obj1[p]) == 'undefined') return false;
- }
- return true;
- };
+ return false;
+ }
+
+ function updateShortcode(shortcodeData){
+ $("#"+shortcodeData.type+"-container").empty();
+ var ids = [];
+ var itemString = '';
+ console.log(shortcodeData.list);
+ shortcodeData.list.map( function(item){
+ ids.push(item.id);
+ createShortcodeTile({id: item.id, name: item.name, type: item.type}, $("#"+item.type + "-container"))
+ itemString = item.type+"="+ids.join();
+
+ });
+ generateShortcodeString(itemString);
+ }
var shortcode_start = "[glm-members-list ";
+ var categories_start = "";
+ var regions_start = "";
+ var groups_start = "";
var shortcodeAttributes = {
categories : [],
regions : [],
groups : []
}
- // build substrings that will be constructed with the main shortcode text
+ generateShortcodeString("");
+ // CATEGORIES
$("#shortcode-categories").on("change", function(){
- var categoryID = $(this).val();
- var categoryName = $(this).find("option:selected").text();
- let categoryRecord = {};
- categoryRecord[categoryID] = categoryName;
+ var categoryID = $(this).val();
+ var categoryName = $(this).find("option:selected").text();
+ var type = $(this).find("option:selected").data("type");
+ let categoryRecord = {id: categoryID, name: categoryName, type: type};
+
+ if(shortcodeAttributes.categories.length == 0){
+ shortcodeAttributes.categories.push(categoryRecord);
+ } else if(!checkDuplicates(categoryRecord, shortcodeAttributes.categories)){
+ shortcodeAttributes.categories.push(categoryRecord);
+ }
+
+ // $("#categories-container").empty();
+ updateShortcode({list: shortcodeAttributes.categories, type: type});
+ });
+
+ $("#copy-to-clipboard").on("click", function(){
+ console.log("copy")
+ });
+
+ $(document).on("click",".delete-shortcode-tile", shortcodeAttributes,function(){
+ var tile = $(this).parent();
+ var type = tile.data("type")
+ var id = tile.data( type );
+ var updated = shortcodeAttributes[type].filter( function(item) {
+ return item.id != id;
+ });
+ shortcodeAttributes[type] = updated;
+ tile.remove();
+ updateShortcode({list: shortcodeAttributes[type], type: type});
});
-});
+});
\ No newline at end of file
<select id="shortcode-categories">
<option disabled selected> Select Category </option>
{foreach $categories as $key => $value}
- <option value="{$key}">{$value.name}</option>
+ <option data-type="categories" value="{$key}">{$value.name}</option>
{/foreach}
</select>
<select id="shortcode-blankstart">
<select id="shortcode-groups">
<option disabled selected> Select Groups </option>
{foreach $amenGroups as $group}
- <option value="{$group.id}"> {$group.name}</option>
+ <option data-type="groups" value="{$group.id}"> {$group.name}</option>
{/foreach}
</select>
<select id="shortcode-regions">
<option disabled selected> Select Region </option>
{foreach $regions as $region}
- <option value="{$region.id}"> {$region.name}</option>
+ <option data-type="regions" value="{$region.id}"> {$region.name}</option>
{/foreach}
</select>
- <button id="copyToClipboard" class="right button" type="button"> Copy To Clipboard </button>
+ <button id="copy-to-clipboard" class="right button" type="button"> Copy To Clipboard </button>
</div>
- <div id="activeCategories" class="glm-dynSelect-box scCategories" style="height: auto; overflow: auto;"><div id="categoryTitle">Categories</div></div>
- <div id="activeGroups" class="glm-group-dynSelect-box scGroups" style="height: auto; overflow: auto;"><div id="groupsTitle">Amenity Groups</div></div>
- <div id="activeRegions" class="glm-regions-dynSelect-box scRegions" style="height: auto; overflow: auto;"><div id="regionsTitle">Regions</div></div>
+ <div id="activeCategories" class="glm-dynSelect-box scCategories" style="height: auto; overflow: auto;">
+ <div id="categoryTitle" class="shortcode-tile-title">Categories</div>
+ <div id="categories-container" class="shortcode-tile-container"></div>
+ </div>
+ <div id="activeGroups" class="glm-group-dynSelect-box scGroups" style="height: auto; overflow: auto;">
+ <div id="groupsTitle" class="shortcode-tile-title">Amenity Groups</div>
+ <div id="groups-container" class="shortcode-tile-container"></div>
+ </div>
+ <div id="activeRegions" class="glm-regions-dynSelect-box scRegions" style="height: auto; overflow: auto;">
+ <div id="regionsTitle" class="shortcode-tile-title">Regions</div>
+ <div id="regions-container" class="shortcode-tile-container"></div>
+ </div>
</div>