Skip to content

Commit

Permalink
Merge pull request #37 from F4IF/#23-add-element-dialog-description-s…
Browse files Browse the repository at this point in the history 
…egments

#12 add element dialog description segments (not #23 like last commit comment and branch name incorrectly state)
  • Loading branch information
@CSchmitz81
CSchmitz81 committed Jun 1, 2017
2 parents d4d0ba1 + 1fcaa13 commit fc6b94b
Show file tree
Hide file tree
Showing 15 changed files with 1,277 additions and 237 deletions.
34 changes: 17 additions & 17 deletions src/ctree-dialogs/ctree-dialogs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
<iron-query-params id="params" params-string="{{query}}" params-object="{{queryParams}}"></iron-query-params>

<paper-dialog id="elementDialog" on-iron-overlay-closed="_elementDialogClosed" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
<ctree-element-screen ctree-key="[[ctreeKey]]" page="{{_elementPage}}" on-close-tapped="_elementDialogClosed" element="[[element]]" element-id="{{queryParams.e}}" description-config-id="{{queryParams.c}}" description-segment-variation-ids="{{descriptionSegmentVariationIds}}"></ctree-element-screen>
<ctree-element-screen ctree-key="[[ctreeKey]]" page="{{_elementPage}}" on-close-tapped="_elementDialogClosed" element="[[element]]" element-id="{{queryParams.e}}" description-config="{{queryParams.c}}" description-segments="{{descriptionSegmentIds}}"></ctree-element-screen>
</paper-dialog>

<paper-dialog id="userDialog" on-iron-overlay-closed="_userDialogClosed" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
Expand Down Expand Up @@ -122,9 +122,9 @@
observer: '_descriptionConfigIdChanged',
},

descriptionSegmentVariationIds: {
descriptionSegmentIds: {
type: Array,
observer: '_descriptionSegmentVariationIdsChanged',
observer: '_descriptionSegmentIdsChanged',
},

feedbackSegment: Number,
Expand Down Expand Up @@ -206,10 +206,10 @@
} else if (this.queryParams.hasOwnProperty('c')) {
delete this.queryParams.c;
}
if (isElement && this.descriptionSegmentVariationIds && this.descriptionSegmentVariationIds.length > 0) {
if (isElement && this.descriptionSegmentIds && this.descriptionSegmentIds.length > 0) {
// TODO: use this for Polymer 2.0
//this.queryParams.s = this.descriptionSegmentVariationIds.join(',');
this.set('queryParams.s', this.descriptionSegmentVariationIds.join(','));
//this.queryParams.s = this.descriptionSegmentIds.join(',');
this.set('queryParams.s', this.descriptionSegmentIds.join(','));
} else if (this.queryParams.hasOwnProperty('s')) {
delete this.queryParams.s;
}
Expand Down Expand Up @@ -283,19 +283,19 @@
}
},

_descriptionSegmentVariationsParamChanged: function(descriptionSegmentVariationIdsStr) {
if (descriptionSegmentVariationIdsStr) {
var descriptionSegmentVariationIds = descriptionSegmentVariationIdsStr.split(',');
for (var i = 0; i < descriptionSegmentVariationIds.length; i++) {
var id = parseInt(descriptionSegmentVariationIds[i]);
_descriptionSegmentVariationsParamChanged: function(descriptionSegmentIdsStr) {
if (descriptionSegmentIdsStr) {
var descriptionSegmentIds = descriptionSegmentIdsStr.split(',');
for (var i = 0; i < descriptionSegmentIds.length; i++) {
var id = parseInt(descriptionSegmentIds[i]);
if (id != NaN) {
descriptionSegmentVariationIds[i] = id;
descriptionSegmentIds[i] = id;
} else {
descriptionSegmentVariationIds.splice(i, 1);
descriptionSegmentIds.splice(i, 1);
i--;
}
}
this.descriptionSegmentVariationIds = descriptionSegmentVariationIds;
this.descriptionSegmentIds = descriptionSegmentIds;

} else if (this.queryParams.d === 'element' && this.queryParams.hasOwnProperty('s')) {
delete this.queryParams.s;
Expand Down Expand Up @@ -367,10 +367,10 @@
// TODO:
},

_descriptionSegmentVariationIdsChanged: function(descriptionSegmentVariationIds) {
_descriptionSegmentIdsChanged: function(descriptionSegmentIds) {
if (this.queryParams.d === 'element') {
if (descriptionSegmentVariationIds.length > 0) {
this.set('queryParams.s', descriptionSegmentVariationIds.join(','));
if (descriptionSegmentIds.length > 0) {
this.set('queryParams.s', descriptionSegmentIds.join(','));
} else if (this.queryParams.hasOwnProperty('s')) {
delete this.queryParams.s;
// TODO: use this for Polymer 2.0
Expand Down
23 changes: 9 additions & 14 deletions src/ctree-dialogs/ctree-element-dialog-accessor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,10 @@
* segments: [{
* id: Number,
* type: SegmentType,
* variations: [], // data type depends on type
* variations: [{
* id: Number,
* data: dynamic, // data type depends on segment type
* }, ...],
* }, ...],
* }, ...],
* feedback: [{
Expand All @@ -71,19 +74,11 @@
* bookmarked: Boolean,
* }
*/
element: {
type: Object,
},

descriptionConfigId: {
type: Number,
observer: '_descriptionConfigIdChanged',
},

descriptionSegmentIds: {
type: Array,
observer: '_descriptionSegmentIdsChanged',
},
element: Object,

descriptionConfigId: Number,

descriptionSegmentIds: Array,

feedbackSegment: Number,

Expand Down
115 changes: 15 additions & 100 deletions src/ctree-element-preview/ctree-element-preview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
<link rel="import" href="../ctree-dialogs/ctree-element-dialog-accessor.html">
<link rel="import" href="../ctree-element/ctree-element.html">
<link rel="import" href="../ctree-element/ctree-element-header.html">
<link rel="import" href="../ctree-element/ctree-element-description-behavior.html">
<link rel="import" href="../ctree-icons/ctree-icons.html">
<link rel="import" href="../ctree-loader/ctree-element-loader-test.html">

Expand Down Expand Up @@ -117,7 +118,7 @@
</style>

<ctree-element-loader-test ctree-key="[[ctreeKey]]" list-item="[[listItem]]" element="[[element]]" description-config="{{descriptionConfig}}" description-segments="{{descriptionSegments}}" item-comment="{{comment}}" item-comment-icon="{{commentIcon}}"></ctree-element-loader-test>
<ctree-element-dialog-accessor id="dialog" ctree-key="[[ctreeKey]]" element="[[element]]" description-config="[[descriptionConfig]]" description-segments="[[descriptionSegments]]"></ctree-element-dialog-accessor>
<ctree-element-dialog-accessor id="dialog" ctree-key="[[ctreeKey]]" element="[[element]]" description-config-id="[[descriptionConfig]]" description-segment-ids="[[descriptionSegments]]"></ctree-element-dialog-accessor>
<ctree-element id="element" element="[[element]]" noclose>
<div id="content" on-tap="_clickContent">
<div id="segments"></div>
Expand All @@ -139,6 +140,10 @@
Polymer({
is: 'ctree-element-preview',

behaviors: [
Polymer.CTreeElementDescriptionBehavior,
],

properties: {
/**
* The unique key identifying a cTree. If the site only has one cTree
Expand Down Expand Up @@ -166,60 +171,6 @@
observer: '_listItemChanged',
},

/**
* Element data
*
* Structure:
* {
* id: Number,
* type: ElementType,
* title: String,
* parents: [Number],
* children: [Number],
* childrenSearchComplete: Boolean,
* designer: String, // TODO: should probably be an object (user ID or reference to public user object)
* description: [{
* id: Number,
* contributors: [String], // TODO: should probably be an object (user ID or reference to public user object)
* segments: [{
* id: Number,
* type: SegmentType,
* variations: [], // data type depends on type
* }, ...],
* }, ...],
* feedback: [{
* reviewer: String, // TODO: should probably be an object (user ID or reference to public user object)
* text: String,
* }, ...],
* bookmarked: Boolean,
* }
*/
element: {
type: Object,
observer: '_elementChanged',
},

/**
* ID of description config to show. If this ID isn't included in the
* element the first config from the element is used.
*/
descriptionConfig: {
type: Number,
observer: '_descriptionConfigChanged',
},

/**
* IDs of variation to show for each segment. For any segments where the
* ID isn't included in the description config the first variation is used.
*
* Structure:
* [Number, ...]
*/
descriptionSegments: {
type: Array,
observer: '_descriptionSegmentsChanged',
},

/**
* Comment to display at the bottom of the element preview.
*/
Expand All @@ -240,66 +191,28 @@
value: false,
observer: '_viewedChanged',
},

_bulkChange: Boolean,
},

_isEmpty: function(str) {
return !str || str.length == 0;
},

_listItemChanged: function(listItem) {
var descriptionChanged = false;

this._bulkChange = true;
if (typeof listItem.element !== 'undefined' && listItem.element !== this.element) {
this.element = listItem.element;
descriptionChanged = true;
}
if (typeof listItem.descriptionConfig !== 'undefined' && listItem.descriptionConfig !== this.descriptionConfig) {
this.descriptionConfig = listItem.descriptionConfig;
descriptionChanged = true;
}
if (typeof listItem.descriptionSegments !== 'undefined' && listItem.descriptionSegments !== this.descriptionSegments) {
this.descriptionSegments = listItem.descriptionSegments;
descriptionChanged = true;
}
this._bulkChange = false;

if (descriptionChanged) {
this._updateDescription(this.element, this.descriptionConfig, this.descriptionSegments);
}
this._bulkUpdateDescriptionProperties(listItem.element, listItem.descriptionConfig, listItem.descriptionSegments);

this.viewed = listItem.viewed;
},

_elementChanged: function(element) {
// TODO: remove this call once make _updateDescription an explicit observer after updating to Polymer 2.0
this._updateDescription(element, this.descriptionConfig, this.descriptionSegments);

this.viewed = element.viewed;
},

// TODO: remove these individual observers and make _updateDescription an explicit observer once update to Polymer 2.0
_descriptionConfigChanged: function(descriptionConfig) {
this._updateDescription(this.element, descriptionConfig, this.descriptionSegments);
},

_descriptionSegmentsChanged: function(descriptionSegments) {
this._updateDescription(this.element, this.descriptionConfig, descriptionSegments);
},

_getFromArrayWithId: Polymer.CTreeLoader.getFromArrayWithId,

_updateDescription: function(element, descriptionConfig, descriptionSegments) {
if (this._bulkChange || !this.element.description || this.element.description.length == 0) return;
var description = this._getFromArrayWithId(this.element.description, this.descriptionConfig);
if (!description || !description.segments || (descriptionSegments && description.segments.length != descriptionSegments.length)) return;

_descriptionChanged: function(description, descriptionSegments) {
// clear segments
var segmentsElement = this.$.segments;
while (segmentsElement.firstChild) {
segmentsElement.removeChild(segmentsElement.firstChild);
var child;
while (child = segmentsElement.firstChild) {
segmentsElement.removeChild(child);
}

// add thumbnail
Expand All @@ -311,7 +224,8 @@
if (type.canBeThumbnail) {
thumbnailIndex = i;
var component = document.createElement(type.componentName);
component.data = this._getFromArrayWithId(segment.variations, descriptionSegments ? descriptionSegments[i] : undefined);
var variation = this._getFromArrayWithId(segment.variations, descriptionSegments ? descriptionSegments[i] : undefined);
component.data = variation.data;
component.scale = '80%';
component.heightPercent = '56.25%';
segmentsElement.appendChild(component);
Expand All @@ -327,7 +241,8 @@
var segment = segments[i];
var type = segment.type;
var component = document.createElement(type.componentName);
component.data = this._getFromArrayWithId(segment.variations, descriptionSegments ? descriptionSegments[i] : undefined);
var variation = this._getFromArrayWithId(segment.variations, descriptionSegments ? descriptionSegments[i] : undefined);
component.data = variation.data;
component.scale = '80%';
segmentsElement.appendChild(component);
}
Expand Down
Loading

0 comments on commit fc6b94b

Please sign in to comment.