Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#12 add element dialog description segments #37

Merged
merged 2 commits into from
Jun 1, 2017
Merged

#12 add element dialog description segments #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d4c874
initial: added support for showing segments in element dialog
CSchmitz81 May 8, 2017
1fcaa13
finished changes for issue #23
CSchmitz81 Jun 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions src/ctree-dialogs/ctree-dialogs.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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