Syinpo/picsScroller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

locale: zh-CN

Browse Source
This commit is contained in:
沐见南 2020-09-06 14:14:15 +08:00
parent 4c7e9c67f4
commit 932657df6d
8 changed files with 96 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
assets/icon.pptx Normal file
View File

Binary file not shown.

48
capabilities.json
View File

@ -1,64 +1,84 @@
{
"dataRoles": [{
"displayName": "urls",
"displayNameKey": "roles-urls-displayName",
"name": "urls",
"kind": "Grouping",
"description": "Urls of pictures, example: 'http://www.example.com/xx.png'"
"description": "Urls of pictures, example: 'http://www.example.com/xx.png'",
"descriptionKey": "roles-urls-description"
}],
"objects": {
"layout": {
"displayName": "layout",
"displayNameKey": "objects-layout-displayName",
"properties": {
"rowsCount": {
"type": {
"numeric": true
},
"displayName": "rowsCount",
"description": "How many rows?"
"displayNameKey": "objects-layout-rowsCount-displayName",
"description": "How many rows?",
"descriptionKey": "objects-layout-rowsCount-descriptionKey"
},
"rowGap": {
"type": {
"numeric": true
},
"placeHolderText": "{value}%",
"displayName": "rowGap",
"description": "The distance moved during each cycle.(%)"
"displayName": "rowGap(%)",
"displayNameKey": "objects-layout-rowGap-displayName",
"description": "The distance moved during each cycle.(%)",
"descriptionKey": "objects-layout-rowGap-descriptionKey"
},
"columnGap": {
"type": {
"numeric": true
},
"placeHolderText": "msec",
"displayName": "columnGap",
"description": "How long a cycle takes? (msec)"
"displayName": "columnGap(%)",
"displayNameKey": "objects-layout-columnGap-displayName",
"description": "How long a cycle takes? (msec)",
"descriptionKey": "objects-layout-columnGap-descriptionKey"
}
}
},
"animation": {
"displayName": "animation",
"displayNameKey": "objects-animation-displayName",
"properties": {
"feet": {
"stepLength": {
"type": {
"numeric": true
},
"placeHolderText": "{value}%",
"displayName": "feet",
"description": "The distance moved during each cycle.(%)"
"displayName": "stepLength(%)",
"displayNameKey": "objects-animation-stepLength-displayName",
"description": "The distance moved during each cycle.(%)",
"descriptionKey": "objects-animation-stepLength-descriptionKey"
},
"interval": {
"type": {
"numeric": true
},
"placeHolderText": "numeric",
"displayName": "interval",
"description": "How long a cycle takes? (msec)"
}
"displayName": "interval(msec)",
"displayNameKey": "objects-animation-interval-displayName",
"description": "How long a cycle takes? (msec)",
"descriptionKey": "objects-animation-interval-descriptionKey"
}
}
}
},
"dataViewMappings": [{
"conditions": [{
"urls": {
"min": 1,
"max": 1
}
}],
"categorical": {
"categories": {
"for": {

4
src/css/picsScroller.css
View File

@ -5,12 +5,12 @@ div.pics-sroller-inner-container {
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0px;
}
div.pics-scroller-row-container {
width: 100%;
overflow-x: hidden;
overflow-y: nowrap;
overflow: hidden;
white-space: nowrap;
display: flex;
flex-direction: row;

2
src/settings.ts
View File

@ -35,7 +35,7 @@ export class VisualSettings extends DataViewObjectsParser {
}
export class AnimationSettings {
public feet:number=1;//n% * width
public stepLength:number=1;//n% * width
public interval:number=20;//ms
}
export class LayoutSettings{

44
src/visual.ts
View File

@ -38,7 +38,7 @@ import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import { VisualSettings } from "./settings";
import { timeout } from "d3";
import * as d3 from "d3";
export interface IPicsScrollerData {
@ -47,10 +47,22 @@ export interface IPicsScrollerData {
export class Visual implements IVisual {
private container: HTMLElement;
private settings: VisualSettings;
private host:powerbi.extensibility.visual.IVisualHost;
private selectionManager: powerbi.extensibility.ISelectionManager;
private innerContainer!: HTMLDivElement;
private animationPlaying: boolean = true;//控制动画暂停
constructor(options: VisualConstructorOptions) {
this.container = options.element;
this.host=options.host;
this.selectionManager=this.host.createSelectionManager();
d3.select(this.container).on("contextmenu", () => {
const mouseEvent: MouseEvent = <MouseEvent>d3.event;
this.selectionManager.showContextMenu({}, {
x: mouseEvent.clientX,
y: mouseEvent.clientY
});
mouseEvent.preventDefault();
});
}
private initial() {
if (this.innerContainer) {
@ -61,16 +73,29 @@ export class Visual implements IVisual {
this.container.appendChild(this.innerContainer);
}
public update(options: VisualUpdateOptions) {
this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
let settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
this.settings=settings;
this.initial();
//处理输入
let data: IPicsScrollerData = { urls: <string[]>options.dataViews[0].categorical.categories[0].values };
let feet = options.viewport.width / 100 * this.settings.animation.feet;
//feet
settings.animation.stepLength=(settings.animation.stepLength>=0&&settings.animation.stepLength<=100)?settings.animation.stepLength:1;
let feet = options.viewport.width / 100 * settings.animation.stepLength;
//interval
settings.animation.interval=settings.animation.interval>0?settings.animation.interval:100;
let interval = this.settings.animation.interval;
let rowGap = options.viewport.height / 100 * this.settings.layout.rowGap;
//rowGap
settings.layout.rowGap=(settings.layout.rowGap>=0&&settings.layout.rowGap<=100)?settings.layout.rowGap:0;
let rowGap = options.viewport.height / 100 * settings.layout.rowGap;
//columnGap
settings.layout.columnGap=(settings.layout.columnGap>=0&&settings.layout.columnGap<=100)?settings.layout.columnGap:0;
let columnGap = options.viewport.width / 100 * this.settings.layout.columnGap;
//rowsCount
settings.layout.rowsCount=settings.layout.rowsCount>=1?Math.floor(settings.layout.rowsCount):1;
let rowsCount=this.settings.layout.rowsCount;
//处理输入
if (!(data.urls.length > 0) || !(rowsCount! > 0)) {
console.info("picsScroller error: (source_url.length,rowsCount) ", data.urls.length + "_" + rowsCount);
return;
@ -91,14 +116,15 @@ export class Visual implements IVisual {
let rowContainer = document.createElement('div');
this.innerContainer.appendChild(rowContainer);
rowContainer.classList.add('pics-scroller-row-container');
if (rowNum > 0) {
rowContainer.style.marginTop = rowGap + "px";
};
rowContainer.setAttribute('id', 'pics-scroller-row-container' + rowNum);
rowContainer.setAttribute("style", "height:" + 100 / rowsCount + "%;");
rowContainer.setAttribute("data-animation-playing", 'false');
rowContainer.setAttribute("data-display-placehold", "false");
//Add rowGap
if (rowNum > 0) {
rowContainer.style.marginTop = rowGap + "px";
};
//双倍图片容器，第一组用来显示，第二组放上去暂时隐藏
//如果第一组发生了溢出，就显示出第二组并应用滚动动画
for (let i = 0; i < 2; i++) {

7
stringResources/zh-CN.json Normal file
View File

@ -0,0 +1,7 @@
{
"locale": "zh-CN",
"values": {
"roles-urls-displayName": "图片url",
"roles-urls-description": "图片的url，例如：'http://www.example.com/xx.png'"
}
}

17
stringResources/zh-CN/resources.resjson Normal file
View File

@ -0,0 +1,17 @@
{
"roles-urls-displayName": "图片url",
"roles-urls-description": "图片的url，例如：'http://www.example.com/xx.png'",
"objects-layout-displayName": "布局",
"objects-layout-rowsCount-displayName": "行数",
"objects-layout-rowsCount-descriptionKey": "需要排列为几行？",
"objects-layout-rowGap-displayName": "行间距",
"objects-layout-rowGap-descriptionKey": "按视觉对象高度的百分比（%）",
"objects-layout-columnGap-displayName": "列间距",
"objects-layout-columnGap-descriptionKey": "按视觉对象宽度的百分比（%）",
"objects-animation-displayName": "动画",
"objects-animation-stepLength-displayName": "步长（%）",
"objects-animation-stepLength-descriptionKey": "每个周期内滚动的长度占视觉对象宽度的百分比（%）",
"objects-animation-interval-displayName": "周期（毫秒）",
"objects-animation-interval-descriptionKey": "滚动的间隔，单位（毫秒）"
}