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

Create some small icons for selecting variants #1

Open
wants to merge 1 commit into
base: sofa-1.0
Choose a base branch
from
Open

Create some small icons for selecting variants #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,4 @@ sdk/test/unit/index.html
node_modules
src/**/*.templates.js
src/**/*.tpl.js
angular-sofa-variant-selector.iml
43 changes: 42 additions & 1 deletion src/sofa-variant-selector.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,52 @@
<ul class="sofa-variant-selector" ng-if="variants.length">
<li class="sofa-variant-selector__item" ng-repeat="property in properties">
<label class="sofa-variant-selector__label" ng-bind="property.label"></label>
<cc-select-box

<!-- selection using a normal drop down -->
<!--

<cc-select-box ng-if="property.name !== 'color'"
model="selectedProperties[property.name]"
data="data[property.name]"
choose-text="property.label"
property-name="variant_{{property.name}}">
</cc-select-box>
-->

<!-- selection using a list of span item -->
<ul ng-if="property.name === 'shirt_size'" class="sofa-variant-selector__list-textes">
<li ng-repeat="size in data[property.name]" class="sofa-variant-selector__list-item">
<span
title="{{size.value}}"
class="sofa-variant-selector__list-text"
ng-class="{'sofa-variant-selector__list-text--enabled': size.available, 'sofa-variant-selector__list-text--disabled': !size.available, 'sofa-variant-selector__list-text--selected': size.selected}"
ng-click="selectProperty(property.name, size)">{{size.value}}</span>
</li>
</ul>


<!-- selection using small icons with background color -->
<ul ng-if="property.name === 'color' && !images[property.name]" class="sofa-variant-selector__list--swatches">
<li ng-repeat="color in data[property.name]" class="sofa-variant-selector__list-item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D%0A"
title="{{color.value}}"
style="background-color:{{color.value}}"
ng-class="{'sofa-variant-selector__list-text--enabled': color.available, 'sofa-variant-selector__list-text--disabled': !color.available, 'sofa-variant-selector__list-text--selected': color.selected}"
class="sofa-variant-selector__list-swatch"
ng-click="selectProperty(property.name, color)"/>
</li>
</ul>

<!-- selection using thumbnails if attribute are available for all variants -->
<ul ng-if="property.name === 'color' && images[property.name]" class="sofa-variant-selector__list-images">
<li ng-repeat="color in data[property.name]" class="sofa-variant-selector__list-item">
<img ng-src="{{images[property.name][color.value].url}}"
title="{{color.value}}"
ng-class="{'sofa-variant-selector__list-text--enabled': color.available, 'sofa-variant-selector__list-text--disabled': !color.available, 'sofa-variant-selector__list-text--selected': color.selected}"
class="sofa-variant-selector__list-image"
ng-click="selectProperty(property.name, color)"/>

</li>
</ul>
</li>
</ul>
92 changes: 88 additions & 4 deletions src/sofaVariantSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,25 @@ angular.module('sofa.variantSelector')
}
};

var contains = function (data,key) {
for (var i=0;i<data.length;i++) {
if (data[i].value===key) {
return true;
}
}
return false;
}

// extract available variants
var variants = applyFilters ? $filter('filter')(values, selected, comparator) : values;

// extract flat values for the curent property
var result = [];
variants.forEach(function (variant) {
if (result.indexOf(variant.properties[key].value) === -1 && variant.stock > 0) {
result.push(variant.properties[key].value);
if (!contains(result,variant.properties[key].value) && variant.stock > 0) {
result.push({value:variant.properties[key].value,
selected:false,
available: true});
}
});

Expand Down Expand Up @@ -68,13 +79,45 @@ angular.module('sofa.variantSelector')
scope.selectedProperties = scope.selectedProperties || {};
scope.data = {};

scope.images = {};

scope.selectProperty = function(property, variant) {
console.log('Selected '+property+':'+variant);
if (!variant.available) {
scope.selectedProperties = {};
}
scope.selectedProperties[property]=variant.value;
};

var getDataByProperty = function (property) {
return $filter('sofaVariantFilter')(scope.variants, scope.selectedProperties, property);
console.debug('Filtering for '+JSON.stringify(property));
var rawResult = $filter('sofaVariantFilter')(scope.variants, {}, property);
var filteredResult = $filter('sofaVariantFilter')(scope.variants, scope.selectedProperties, property);

// Apply selection
var selection = scope.selectedProperties[property];
for (var i=0;i<rawResult.length;i++) {
if (rawResult[i].value===selection) {
rawResult[i].selected=true;
}
rawResult[i].available=false;
for (var j=0;j<filteredResult.length;j++) {
if (rawResult[i].value===filteredResult[j].value) {
rawResult[i].available=true;
}
}
}


console.debug('data '+JSON.stringify(rawResult));

return rawResult;
};

var setData = function () {
angular.forEach(scope.properties, function (property) {
scope.data[property.name] = getDataByProperty(property.name);
var dataByProperty = getDataByProperty(property.name);
scope.data[property.name] = dataByProperty;
});
};

Expand All @@ -92,6 +135,25 @@ angular.module('sofa.variantSelector')
return filteredVariants.length ? filteredVariants[0] : null;
};

var findImage = function(propertyGroup,property) {
for (var i=0; i<scope.variants.length;i++) {
var variant = scope.variants[i];
variant.selectable=true;

if (variant.images &&
variant.images.length &&
variant.properties[propertyGroup].value===property) {
for (var j=0;j<variant.images.length;j++) {
if (variant.images[j].main) {
console.log('Found image for '+propertyGroup+' with '+property+' in '+JSON.stringify(variant));
return variant.images[j];
}
}
}
}
return null;
};

scope.variants.forEach(function (variant) {
for (var property in variant.properties) {
//create a placeholder value on the selectedProperties hash
Expand All @@ -102,11 +164,33 @@ angular.module('sofa.variantSelector')
scope.properties[property] = {
name: property,
label: localeService.getTranslation('variantSelector.' + property) || variant.properties[property].label

};
}
}
});


// Read images for all properties
setData();


// Check if an image is available for each property in each group
for (var propertyGroup in scope.properties) {
scope.images[propertyGroup] = {};
for (var i=0;i<scope.data[propertyGroup].length;i++) {
var prop = scope.data[propertyGroup][i];
var img = findImage(propertyGroup,prop);
if (img === null) {
// At least one image is missing for this property
// we'll remove all images to indicating no proper data
scope.images[propertyGroup] = null;
break;
}
scope.images[propertyGroup][prop] = img;
}
}

scope.$watch('selectedProperties', function (newVal) {
scope.variant = findVariant(scope.variants, newVal);
setData();
Expand Down