add to customize list height

MeilCli · MeilCli · commit e8a04ff9cf4c · 2017-01-10T17:13:46.000+09:00
diff --git a/ProgrammerWidget/Constant.ts b/ProgrammerWidget/Constant.ts
@@ -1,5 +1,6 @@
 ﻿namespace ProgrammerWidget {
     export const userNameAttribute = "target-user";
+    export const listHeightAttribute = "target-list-height";
     export const qiitaClass = "programmer-widget-qiita";
     export const qiitaWithItemsClass = "programmer-widget-qiita-with-items";
     export const teratailClass = "programmer-widget-teratail";
diff --git a/ProgrammerWidget/GithubWidget.ts b/ProgrammerWidget/GithubWidget.ts
@@ -174,6 +174,7 @@ namespace ProgrammerWidget {
 
         private async set(element: Element, containsActivity: boolean) {
             var user = element.getAttribute(userNameAttribute);
+            var listHeight = element.getAttribute(listHeightAttribute);
             if (user == null || user == undefined) {
                 return;
             }
@@ -196,7 +197,7 @@ namespace ProgrammerWidget {
                 var activityUrl = `https://api.github.com/users/${githubUser.login}/events/public`;
                 var activityItems: Array<GithubEvent<any>> = await this.getAsyncWithStorage(this.httpClient, activityUrl);
                 if (activityItems != null && activityItems != undefined) {
-                    this.setItems(element, activityItems);
+                    this.setItems(element, listHeight, activityItems);
                 }
             }
 
@@ -326,9 +327,12 @@ namespace ProgrammerWidget {
             });
         }
 
-        private setItems(element: Element, items: Array<GithubEvent<any>>) {
+        private setItems(element: Element, listHeight: string, items: Array<GithubEvent<any>>) {
             element.addDiv(container => {
                 container.className = "programmer-widget-github-items-container";
+                if (listHeight != null && listHeight != undefined) {
+                    container.style.height = listHeight;
+                }
                 var addHr = i => {
                     if (i != 0) {
                         container.appendChild(document.createElement("hr"));
diff --git a/ProgrammerWidget/ProgrammerWidget.js b/ProgrammerWidget/ProgrammerWidget.js
diff --git a/ProgrammerWidget/ProgrammerWidget.js.map b/ProgrammerWidget/ProgrammerWidget.js.map
diff --git a/ProgrammerWidget/QiitaWidget.ts b/ProgrammerWidget/QiitaWidget.ts
@@ -52,6 +52,7 @@ namespace ProgrammerWidget {
 
         private async set(element: Element, containsItems: boolean) {
             var user = element.getAttribute(userNameAttribute);
+            var listHeight = element.getAttribute(listHeightAttribute);
             if (user == null || user == undefined) {
                 return;
             }
@@ -98,7 +99,7 @@ namespace ProgrammerWidget {
 
             this.setTags(element, tagsCountArray);
             if (containsItems) {
-                this.setItems(element, qiitaItems);
+                this.setItems(element, listHeight, qiitaItems);
             }
         }
 
@@ -196,9 +197,12 @@ namespace ProgrammerWidget {
             });
         }
 
-        private setItems(element: Element, items: Array<QiitaItem>) {
+        private setItems(element: Element, listHeight: string, items: Array<QiitaItem>) {
             element.addDiv(container => {
                 container.className = "programmer-widget-qiita-items-container";
+                if (listHeight != null && listHeight != undefined) {
+                    container.style.height = listHeight;
+                }
                 for (var i = 0; i < items.length; i++) {
                     var item = items[i];
                     if (i != 0) {
diff --git a/ProgrammerWidget/TeratailWidget.ts b/ProgrammerWidget/TeratailWidget.ts
@@ -69,6 +69,7 @@ namespace ProgrammerWidget {
 
         private async set(element: Element, containsAnswer: boolean) {
             var user = element.getAttribute(userNameAttribute);
+            var listHeight = element.getAttribute(listHeightAttribute);
             if (user == null || user == undefined) {
                 return;
             }
@@ -111,7 +112,7 @@ namespace ProgrammerWidget {
                     }
                     questionItems[i] = questionItem;
                 }
-                this.setItems(element, teratailUserResponse, answerItems, questionItems);
+                this.setItems(element, listHeight, teratailUserResponse, answerItems, questionItems);
             }
         }
 
@@ -216,9 +217,12 @@ namespace ProgrammerWidget {
             });
         }
 
-        private setItems(element: Element, userItem: TeratailUserResponse, answerItems: TeratailAnswerResponse, questionItems: Array<TeratailQuestionResponse>) {
+        private setItems(element: Element,listHeight:string, userItem: TeratailUserResponse, answerItems: TeratailAnswerResponse, questionItems: Array<TeratailQuestionResponse>) {
             element.addDiv(container => {
                 container.className = "programmer-widget-teratail-items-container";
+                if (listHeight != null && listHeight != undefined) {
+                    container.style.height = listHeight;
+                }
                 for (var i = 0; i < answerItems.replies.length && i < questionItems.length; i++) {
                     var answerItem = answerItems.replies[i];
                     var questionItem = questionItems[i];
diff --git a/ProgrammerWidget/index.html b/ProgrammerWidget/index.html
@@ -151,6 +151,30 @@ <h2>
             </div>
         </div>
 
+        <br/>
+
+        <div class="row">
+            <div class="col-md-8 col-xs-12">
+                <h2>
+                    Customize List Height (to 300px)
+                </h2>
+                <p>
+                    In head:
+                </p>
+                <pre><code>// Replace Your Font Awesome CDN Code!
+&lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.fontawesome.com/6c0013e839.css&quot; /&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.css&quot; /&gt;
+&lt;script src=&quot;https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.js&quot; async defer&gt;&lt;/script&gt;</code></pre>
+                <p>
+                    In body:
+                </p>
+                <pre><code>&lt;div class=&quot;programmer-widget-qiita-with-items&quot; target-user=&quot;meilcli&quot; target-list-height=&quot;300px&quot;&gt;&lt;/div&gt;</code></pre>
+            </div>
+            <div class="col-md-4 col-xs-12">
+                <div class="programmer-widget-qiita-with-items" target-user="meilcli" target-list-height="300px"></div>
+            </div>
+        </div>
+
         <h2>
             Viiw Source Code On <a href="https://github.com/MeilCli/ProgrammerWidget">Github</a>
         </h2>

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,7 @@ namespace ProgrammerWidget {`
`69`	`69`
`70`	`70`	`private async set(element: Element, containsAnswer: boolean) {`
`71`	`71`	`var user = element.getAttribute(userNameAttribute);`
	`72`	`+ var listHeight = element.getAttribute(listHeightAttribute);`
`72`	`73`	`if (user == null \|\| user == undefined) {`
`73`	`74`	`return;`
`74`	`75`	`}`
`@@ -111,7 +112,7 @@ namespace ProgrammerWidget {`
`111`	`112`	`}`
`112`	`113`	`questionItems[i] = questionItem;`
`113`	`114`	`}`
`114`		`- this.setItems(element, teratailUserResponse, answerItems, questionItems);`
	`115`	`+ this.setItems(element, listHeight, teratailUserResponse, answerItems, questionItems);`
`115`	`116`	`}`
`116`	`117`	`}`
`117`	`118`
`@@ -216,9 +217,12 @@ namespace ProgrammerWidget {`
`216`	`217`	`});`
`217`	`218`	`}`
`218`	`219`
`219`		`- private setItems(element: Element, userItem: TeratailUserResponse, answerItems: TeratailAnswerResponse, questionItems: Array<TeratailQuestionResponse>) {`
	`220`	`+ private setItems(element: Element,listHeight:string, userItem: TeratailUserResponse, answerItems: TeratailAnswerResponse, questionItems: Array<TeratailQuestionResponse>) {`
`220`	`221`	`element.addDiv(container => {`
`221`	`222`	`container.className = "programmer-widget-teratail-items-container";`
	`223`	`+ if (listHeight != null && listHeight != undefined) {`
	`224`	`+ container.style.height = listHeight;`
	`225`	`+ }`
`222`	`226`	`for (var i = 0; i < answerItems.replies.length && i < questionItems.length; i++) {`
`223`	`227`	`var answerItem = answerItems.replies[i];`
`224`	`228`	`var questionItem = questionItems[i];`