Skip to content

Commit

Permalink
New features added
Browse files Browse the repository at this point in the history 
Added features:
Sends component completion when Trickle is enabled in the block.
Calculate open height at component initialisation.
  • Loading branch information
@saralsharma
saralsharma committed Feb 24, 2021
1 parent 4d0fad2 commit 5d893ba
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 114 deletions.
5 changes: 3 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
{
"name": "adapt-img-text-reveal",
"version": "1.0.7",
"framework": ">=2.1.0",
"repository": {
"type": "git",
"url": "git://github.com/saralsharma/adapt-img-text-reveal.git"
},
"framework": ">=2.1.0",

"homepage": "https://github.com/saralsharma/adapt-img-text-reveal",
"version": "1.0.5",
"authors": [
"Saral Sharma <[email protected]>"
],
Expand Down
57 changes: 35 additions & 22 deletions js/adapt-img-text-reveal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,67 @@ define([
'core/js/adapt',
'core/js/views/componentView',
'core/js/models/componentModel'
], function(Adapt, ComponentView, ComponentModel) {
], function (Adapt, ComponentView, ComponentModel) {

var ImageTextRevealView = ComponentView.extend({

events:{
"click .graphic-widget img":"showHideText"
events: {
"click .graphic-widget img": "showHideText"
},
preRender: function() {
preRender: function () {
this.listenTo(Adapt, 'device:changed', this.resizeImage);
this.checkIfResetOnRevisit();
},

postRender: function() {
postRender: function () {
this.resizeImage(Adapt.device.screenSize);
this.setReadyStatus();

// Set height of text area before it appears.
var revealTxtSelector = $("#" + this.model.get("_id") + "-revealTxt");
var percentIncrease=revealTxtSelector.outerHeight()+(revealTxtSelector.outerHeight()*6/100);
$("#" + this.model.get("_id") + "-revealTxtContainer").innerHeight(percentIncrease);
},

checkIfResetOnRevisit: function() {
checkIfResetOnRevisit: function () {
var isResetOnRevisit = this.model.get('_isResetOnRevisit');
if (isResetOnRevisit) {
this.model.reset(isResetOnRevisit);
}
},
resizeImage: function(width) {
resizeImage: function (width) {
var imageWidth = width === 'medium' ? 'small' : width;
var imageSrc = (this.model.get('_graphic')) ? this.model.get('_graphic')[imageWidth] : '';
this.$('.graphic-widget img').attr('src', imageSrc);
this.$('.graphic-widget').imageready(function() {
this.$('.graphic-widget').imageready(function () {
this.setReadyStatus();

}.bind(this));
},

showHideText: function(event){
var duration=this.model.get('duration');
event.preventDefault();
// var revealTxtSelector=$(event.currentTarget).parent().siblings('.imageTextReveal-item-revealText');
var revealTxtSelector=$("#"+this.model.get("_id")+"-revealTxt");

if (revealTxtSelector.is(':visible')) revealTxtSelector.slideUp(duration); else {
revealTxtSelector.slideDown(duration);
if (this.model.get('_setCompletionOn') === 'inview') {
this.setupInviewCompletion('.component-widget');
}
// bringInView: function (revealTxtHook) {
// var elmnt = document.getElementById(revealTxtHook);
// elmnt.scrollIntoView({behavior: "smooth"});
// },
showHideText: function (event) {
var duration = this.model.get('duration');
event.preventDefault();
var revealTxtSelector = $("#" + this.model.get("_id") + "-revealTxt");

if (revealTxtSelector.is(':visible')) revealTxtSelector.slideUp(duration); else {
revealTxtSelector.slideDown(duration, "linear");
if (this.model.get('_setCompletionOn') === 'inview') {
this.setupInviewCompletion('.component-widget');
}
// if (!this.model.get('_isComplete')) {
// setTimeout(this.bringInView,(Number(duration)+500),(this.model.get("_id")+"-imageTextRevealContainer"));
// }

}
if (!this.model.get('_isComplete')) {
this.model.set('_isComplete', true);
this.model.set('_isInteractionComplete', true);
}

}
}

});
var ImageTextRevealModel = ComponentModel.extend({
Expand Down
177 changes: 92 additions & 85 deletions properties.schema
View file
Original file line number Diff line number Diff line change
@@ -1,98 +1,105 @@
{
"type":"object",
"type": "object",
"$schema": "http://json-schema.org/draft-04/schema",
"id": "http://jsonschema.net",
"$ref": "http://localhost/plugins/content/component/model.schema",
"globals": {
"ariaRegion": {
"type": "string",
"required": true,
"default": "",
"inputType": "Text",
"validators": [],
"translatable": true
}
},
"properties":{
"ariaRegion": {
"type": "string",
"required": true,
"default": "",
"inputType": "Text",
"validators": [],
"translatable": true
}
},
"properties": {
"_supportedLayout": {
"type": "string",
"required": true,
"enum": ["full-width", "half-width", "both"],
"enum": [
"full-width",
"half-width",
"both"
],
"default": "both",
"editorOnly": true
},
"instruction": {
"type": "string",
"required": false,
"default": "",
"inputType": "Text",
"validators": [],
"help": "Enter the instruction text for this component.",
"translatable": true
},
"type": "string",
"required": false,
"default": "",
"inputType": "Text",
"validators": [],
"help": "Enter the instruction text for this component.",
"translatable": true
},
"_graphic": {
"type": "object",
"title": "Image",
"properties":{
"large": {
"type": "string",
"required": true,
"default": "",
"title": "Select large image",
"inputType": "Asset:image",
"validators": ["required"],
"help": "Learner will click this image to reveal the text."
},
"small": {
"type": "string",
"required": false,
"default": "",
"title": "Select small image",
"inputType": "Asset:image",
"validators": ["required"],
"help": "This image will be shown on mobile devices if supplied. Learner will click this image to reveal the text."
},
"alt": {
"type": "string",
"required": false,
"default": "",
"title": "Alternative Text",
"inputType": "Text",
"validators": [],
"help": "Alternative text for this items image",
"translatable": true
},
"attribution": {
"type": "string",
"required": false,
"default": "",
"inputType": "Text",
"validators": [],
"help": "Text to be displayed as an attribution",
"translatable": true
}
}
},
"textToReveal": {
"type": "string",
"required": true,
"default": "Enter your text here.",
"title": "Text to reveal",
"inputType": "TextArea",
"validators": [],
"help": "Enter text here which will slide down under the image, once the image is clicked.",
"translatable": true
},
"duration": {
"type": "string",
"required": false,
"default": "",
"title": "Duration of slide down animation.",
"inputType": "Text",
"validators": [],
"help": "Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.",
"translatable": true
}

}
}
"type": "object",
"title": "Image",
"properties": {
"large": {
"type": "string",
"required": true,
"default": "",
"title": "Select large image",
"inputType": "Asset:image",
"validators": [
"required"
],
"help": "Learner will click this image to reveal the text."
},
"small": {
"type": "string",
"required": false,
"default": "",
"title": "Select small image",
"inputType": "Asset:image",
"validators": [
"required"
],
"help": "This image will be shown on mobile devices if supplied. Learner will click this image to reveal the text."
},
"alt": {
"type": "string",
"required": false,
"default": "",
"title": "Alternative Text",
"inputType": "Text",
"validators": [],
"help": "Alternative text for this items image",
"translatable": true
},
"attribution": {
"type": "string",
"required": false,
"default": "",
"inputType": "Text",
"validators": [],
"help": "Text to be displayed as an attribution",
"translatable": true
}
}
},
"textToReveal": {
"type": "string",
"required": true,
"default": "Enter your text here.",
"title": "Text to reveal",
"inputType": "TextArea",
"validators": [],
"help": "Enter text here which will slide down under the image, once the image is clicked.",
"translatable": true
},
"duration": {
"type": "string",
"required": false,
"default": "400",
"title": "Duration of slide down animation.",
"inputType": "Text",
"validators": [],
"help": "Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.",
"translatable": true
}
}
}
13 changes: 8 additions & 5 deletions templates/imageTextReveal.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<div class="imageTextReveal-inner component-inner">
<div class="imageTextReveal-inner component-inner" id="{{_id}}-imageTextRevealContainer">
{{> component this}}

<div class="graphic-widget component-widget{{#if _graphic.attribution}} graphic-widget-attribution{{/if}}">
<img src="{{_graphic.src}}" data-large="{{_graphic.large}}" data-small="{{_graphic.small}}" {{#if _graphic.alt}}aria-label="{{_graphic.alt}}"{{else}}aria-hidden="true"{{/if}} />
<img src="{{_graphic.src}}" data-large="{{_graphic.large}}" data-small="{{_graphic.small}}" {{#if
_graphic.alt}}aria-label="{{_graphic.alt}}" {{else}}aria-hidden="true" {{/if}} />
</div>
{{#if _graphic.attribution}}
<div class="graphic-attribution">{{{_graphic.attribution}}}</div>
<div class="graphic-attribution">{{{_graphic.attribution}}}</div>
{{/if}}
<div class="imageTextReveal-item-revealText" id="{{_id}}-revealTxt">{{{textToReveal}}}</div>
<div id="{{_id}}-revealTxtContainer">
<div class="imageTextReveal-item-revealText" id="{{_id}}-revealTxt">{{{textToReveal}}}</div>
</div>

</div>
</div>

0 comments on commit 5d893ba

Please sign in to comment.