From 7808a71e714ba277c6764d43176fe02ab09606b8 Mon Sep 17 00:00:00 2001 From: haselkern Date: Sat, 7 Jan 2017 18:03:57 +0100 Subject: [PATCH] working telegraph manager --- g/ic_account.png | Bin 0 -> 15171 bytes g/ic_add.png | Bin 0 -> 97 bytes g/ic_edit.png | Bin 0 -> 222 bytes g/ic_edit_white.png | Bin 0 -> 14980 bytes index.htm | 109 ++++++++++++++++++ main.js | 272 ++++++++++++++++++++++++++++++++++++++++++++ style.css | 156 +++++++++++++++++++++++++ 7 files changed, 537 insertions(+) create mode 100644 g/ic_account.png create mode 100644 g/ic_add.png create mode 100644 g/ic_edit.png create mode 100644 g/ic_edit_white.png create mode 100644 index.htm create mode 100644 main.js create mode 100644 style.css diff --git a/g/ic_account.png b/g/ic_account.png new file mode 100644 index 0000000000000000000000000000000000000000..8b223e3c2d1a83433f8791a429278206682d24e9 GIT binary patch literal 15171 zcmeI3eNYo;9>-Tjk$9p#6k7G}Levuulif{72up~?07B1zMXtc1mCf#k?2%-{W8b6^`F2)&w$-Cr?29n!^mdaF9s>BZ zH~sU;kmSene80cnv!CZB`_FD%QMPQlYK{uSu<4~Gg%$EQp}eOi$e;J7k>8WQl6)mK zehizIqP!Y$>Z`S{j&KRE=u2Z&$&p25om53(akQNLU%tjANj?h4gTbIKXwV5_y=>3T#R)yG*K1{k*5B-v z=#bXypC3swl&6sMGa~Pkc)_by^3o0=AmwW`N}<>*dR-o0tdQ3qWhYa_L$nVkbp$?^ ziDhCQUqEz+hsH8E=jJ?|SMtj~a!jAkB}jtbC5%%t);(@vc~0#1SnV;#>+y_P+AkF~ z$q1rI$8`EDn|&N!!TE)N$Z$nX@}*^)mIXpQdGATXdj-3nf zua&Zi94!fAr69PikyW;02%*|$Q&yExXH;iY@m^L4`ZFzfylHsGhx2iTw8UAJ6{#ik zTEbjO>M7Dhk=a=UNf88)B%+MVVHa55**ugZM@x`e!ldNL&ZZ0`m;+G8=a6?0OH1@O z$^vSEJS;;w1<^xGR^CI`bGXl2Z^4Hf0cC7mQ8vLXi1M&FD`~;UY6e{4wMLbC{SxhE zxY9za+@RxmmSQ-Dbr=a&OPUR4t=^RF)S5{mN1Nj`J87fQV8}5$!Vv9t&^{`4p}+)` z{Sr;he#_K=eN^glk(bXp+6`!w(SO?#W26~Xs)YB;E3_F{x$^oApJpq$#*wW<9d15+ zD*0&9&nbH@Uo*7nV#iqQlu|t5y-U%Ia-LZkWlM0Z1s~BmJgk^AYUBUk35?_i?Bmx6 zx;XFsHdG{4ST%kUzu=UDw8$0I%WLAB?e<9Ck;eD}7F_uSaPuRlBGNi?hKAPc=oz&r z2OA}?26<$3coyXCGpcR4aztOP%&I#O*5~L6`Gu3pXVeOI$6IUeZw0&Kt;5crd3njI zk5-Fo23*SN8#x$O$~Ov})g*6WqXmy|j(4o!L!7(1ke7F`Us;#g=BOvWV@zYsct)Tj zYK%-3@RJ^%$w;ew!yw*Af{=SA`0r`o;>vb4Lbz)eW@a&qu7Gv1N=Sm9;DnsY` zI^Qi%DVX*5p1jo=m0QwhCO_P2D8^qTu6lQq$3o<5iEpk`pC~$-r%Bt=@$*-9Y$3l| z+7)_#!|}EZ$Gu6!m+M#eFFWn7+P*(=ecv-LTs-^qmD>@bgQN%&#T_Mdo$0bzqd)6@KEoE2gO!nZ~8@QXWByZHmhs*uXj9#br0<>DJE7yPlSkWTyteC+*AMqEp1Sv!Rb2}f{qb*8=B~OL8n}_1WQYx>CNcFY!m8 zbu@LB-B}d4WnE`Dxwik+zMp!hOsKip@!=Ep)wP$&C3Pi__5I>T=BCZe?L)U}fA2`V z&{%$M^Z?UCk&3NaN_dJ*EJ>A*GYuDXwnXz@=^>bIw zw=SD|GwJ;;6T7xuF{L(5I{3!25866YjK3X7b)LE{>|c(}eCh00wa&A5GZw!^&g<6g q+xW3VWg{FG=9#q%=gs-xUF@2(ul4eY{x6irTuY0}3SV7XxBh?j;n}qS literal 0 HcmV?d00001 diff --git a/g/ic_add.png b/g/ic_add.png new file mode 100644 index 0000000000000000000000000000000000000000..67bb598e52a36b6caba846efe733501479965a41 GIT binary patch literal 97 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZA`BpB)|k7xlYrjj7PU64_{qyg@{QSjgwU#qa z4m4P{;Lhvwjx;vjkO;gju?@H-u^UM2HOE<{iHGL)J?kWK5`Arw=$J_OB+)UI@Pi2f z-xB$l*f{u@(DEU%bn=GVhgbaVcl>4C{Ji+@`PrCx+&peR4_q}oZXP#}o5#%~;0>$Q Y-lS`>2u|CQasU7T07*qoM6N<$f(W@`r~m)} literal 0 HcmV?d00001 diff --git a/g/ic_edit_white.png b/g/ic_edit_white.png new file mode 100644 index 0000000000000000000000000000000000000000..0ac873d4151bb00925193857b9173f2ce1d0b85e GIT binary patch literal 14980 zcmeI3ZEO@p7{>=tTM8&dh(w9G91&32+ueKX-f}%?dq9g^X-b7Q@rAwJxpw95_T1fa z*P?{f_(2FNCL$CPG#ZH?fCQ{>4N8m(F&fej7O4hNA%LQUgb<8@I(x6%>2(5zkF)9B z-ZRhqpJ(Rx%uM&ozS7*Zd|K6mRRDl#jSb-zbmy#3O0Sx!?Ls z0DXIA10Y;cTieXG$VySx5-v&6qR^E|q)=}Ff{QaLNnQ_4M-+Cb$r|V7fiIj6RjF~V z^+mWysvdT#4Lv$s-P6=6_pFx#igR(ODwq*bfCMxpMua2~RzgQxq}frg>CoYG`5Bq_xE<927w-$W1@A(Ko8$c~=Vkc-!+S*Z=j9yv%NeRd zzk<3F6I;T|^68LO3$pZnFbF*$YgL*JVchZzHOwyQ}3sQ&^ zhK8)GDO1&w4lAw{)w;|Yr_)MQyz=u(q>71>MxGs_$Y!Jz%ey$XoJf(2npBq_&kjwI zSr~^2m^2Nf`gURD$b}#mS^0t!;CtP%<|-9*`<)HP!P>ktk`t#Y4GO z)?7g7sIRwHmCxmKELf{16)kN%8f0-%sp6%0Ff5rcWUWYsb2FUK%DYA0FLJ`;94~U5 zEl92>79*l5YOK2uqnhD(hVxr7yw#%HZ;xT?iN`=YNRdqGmZI4E+Ttj(7}NBGWQNp) z)B)L4vLncr8f`s`>q@NG;+l?z1w(w0E!SLD71rb~Yhl+WWoV#s7`8H@Vr92(ozyY9 zwcv=WAygEXqAH>cWhLt46owZ(0^|03V~oIa)l79vh)F)5$5SmtgRHe-k*G8hD^j*~ zbPoFjNF%fgABl*KNyC)T1RBHH@u+A#f?whTJ}+cApND5+vR7sTUOCFdIJd_W<9var zjK(uYUK&|GbRl~_v^CY+32l>)3B5{J(V;EHZG8$fZzn~WFk@0Rs8(&eG4NJ3R>S8< zx0Y&~Jzi6iZb0kssBsofkK%cZx)!fs_7D;!**cg*vbDFN5@biUmWGAP)c;$+Tzs2+ z{2b{{m?WJHxlq|&;|DRcn3db zN!co(b6`wcDRZuWn^o0#SGIq(n?o1NTiE zNbZDNjh=X5$d8T`Uy#L{aYeJ5f$_GmicUDgT9;lSufZKJkWGq<%m?#QTo@3t zNpX?+U|xy~141?_E;1j?OL1X9$R@=_=7V`DE({3Sq`1g@FfYZ00U?_d7nu*{rMNI4 zWRv0|^TE6n7Y2lEQe0#{n3v+hfRIg!i_8b}Qd}4ivPp4~`Cwj(3j;znDK0V}%u8`$ zK*%P=MdpKfDJ~2M*`&D0d@wJ?g#jU(L|j#+_ZVRky}X!4Zz+cNFWQXWaCFEGEfD~E z9sywUO91>cg6`KaVG!|Xm33G^)dh^Olu6+wq}Me4V`%I%O%r~T{&_g z^1{U0y-Nw8ySPsHX| z{c!2sIcGqHaOSm1efRCS+BdOI2SZnPgU>DrCl^gp-`@7y%ZHph4lOypW&X^qTYg+I zv2Ui}uD`N!@>f&OfxTzX?>FjZ9*kF>y|??@?N7YOFCX0g@5-9!rjrjbpVsbveQ0>! zcW39FI)8ZRX6nz*%Xfb`qv_Qh16$u$`mgby{|xtSySDvlVZ+g#$19J$HE>}5H-pPQ zI`tEH#@By-#q37co+C4w90P+*{i)!^H`|};Kk@hXr|(&CaJV9}@W!6r-rm3DUq2af hRtQHYj8tBK7{m_j0_R2!{*EAm#-&Z+19j_q{{t1AUg!V- literal 0 HcmV?d00001 diff --git a/index.htm b/index.htm new file mode 100644 index 0000000..bee06e9 --- /dev/null +++ b/index.htm @@ -0,0 +1,109 @@ + + + + Telegraph Manager + + + + + + + + + + + + + + +
+
+

Telegraph Manager

+

+ An easy way to manage your articles, profile and views for telegra.ph. +

+
+
+ +
+
+ Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript. +
+
+ +
+
+

create an account

+ + + + +
+
+

login with token

+ + +
+
+ +
+
+

+ click to login to telegra.ph +

+

+ You have to do this in order to publish articles. After you've clicked the link, come back to this website. +

+
+
+ +
+ + +
+ +
+
+ +
+
+ +
+
+ + + + +
+ — — +
+ +
+ +
+ +
+ +
+
+ back +
+
+

change account information

+ + + + +
+
+

logout

+

+ Warning! To be able log into this account again you will need this token: +

+

+ +
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..91143fa --- /dev/null +++ b/main.js @@ -0,0 +1,272 @@ +// Prevent multiple load events when scrolling +var canLoadMore = false; + +// Load batches of pages of this size +var numberOfPagesToLoad = 10; + +// How many pixels should there be space around the FAB +var fabSpace = 30; + +$(document).ready(function(){ + + // Check for localStorage + if (typeof(Storage) !== "undefined") { + // Storage support present, login + login(); + } + + // Window scroll for loading more pages + window.onscroll = function(){ + // Trigger loading of more pages when there are still cards to scroll + var triggerElement = $(".card:nth-last-child("+numberOfPagesToLoad+")"); + + if(isScrolledIntoView(triggerElement)){ + if(canLoadMore){ + canLoadMore = false; + loadPages(); + } + } + } + + // Window resize for positioning FAB + window.onresize = resize; + resize(); + +}); + +function resize(){ + var fab = $("#fab"); + var screenWidth = $(".screen:visible").width(); + + var left = ($(window).width() - screenWidth)/2 + screenWidth - fab.width() - fabSpace; + + fab.css("bottom", fabSpace); + fab.css("left", left); +} + +// http://stackoverflow.com/a/488073/1456971 +function isScrolledIntoView(elem) { + var docViewTop = $(window).scrollTop(); + var docViewBottom = docViewTop + $(window).height(); + + var elemTop = $(elem).offset().top; + var elemBottom = elemTop + $(elem).height(); + + return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); +} + +function showScreen(name){ + // Hide all other screens + $("[id^=screen-]").hide(); + // Show desired screen + $("#screen-"+name).show(); + + // Show/hide hero for certain screen names + var heroVisible = name == "login" || name == "nosupport"; + if(heroVisible){ + $("#hero").show(); + } + else{ + $("#hero").hide(); + } +} + +// Check for existing access token and login or show login screen +function login(){ + if(localStorage.token){ + main(); + } + else{ + // Show login screen + showScreen("login"); + } +} + +function createAccount(){ + // Attributes + var author_name = $("input[name='author_name']").val(); + var short_name = $("input[name='short_name']").val(); + var author_url = $("input[name='author_url']").val(); + + // Request token + $.getJSON("https://api.telegra.ph/createAccount", { + "author_name": author_name, + "short_name": short_name, + "author_url": author_url + }, function(data){ + + // Check for valid data + if(!data.ok){ + alert(data.error); + return; + } + + // Store token + localStorage.token = data.result.access_token; + + // handle login link + $("#screen-login-telegraph a").attr("href", data.result.auth_url); + showScreen("login-telegraph"); + + }); +} + +// Login with provided token, this requires generating a new one +function tokenLogin(){ + var token = $("input[name='token']").val(); + + $.getJSON("https://api.telegra.ph/revokeAccessToken", { + "access_token": token + }, function(data){ + + // Check for valid data + if(!data.ok){ + alert(data.error); + return; + } + + // Store new token + localStorage.token = data.result.access_token; + + // handle login link + $("#screen-login-telegraph a").attr("href", data.result.auth_url); + showScreen("login-telegraph"); + + }); + +} + +// User has clicked the telegraph authorization link +function doneAuthorized(){ + main(); +} + +// Shows the main screen +function main(){ + showScreen("main"); + + // Load user info + $.getJSON("https://api.telegra.ph/getAccountInfo", { + "access_token": localStorage.token + }, function(data){ + + // Show login screen for errors + if(!data.ok){ + showScreen("login"); + } + + // Username might be empty + var username = data.result.author_name; + if(username == "") username = ""; + + $("#user-name").text(username); + $("#user-short").text(data.result.short_name); + + // Hide user url if it is not provided + $("#user-url").toggle(data.result.author_url != ""); + $("#user-url").text(data.result.author_url); + $("#user-url").attr("href", data.result.author_url); + + }); + + // Clear old pages + $("#page-list").empty(); + + // Load pages + loadPages(); + +} + +// Loads more pages +function loadPages(){ + + var pageList = $("#page-list"); + + $.getJSON("https://api.telegra.ph/getPageList", { + "access_token": localStorage.token, + "offset" : pageList.children().length, + "limit" : numberOfPagesToLoad + }, function(data){ + + // Set page text + var s = data.result.total_count == 1 ? "" : "s"; + $("#user-page-count").text(data.result.total_count + " page" + s); + + // Check for valid data + if(!data.ok){ + alert(data.error); + return; + } + + // Append new pages + $.each(data.result.pages, function(){ + + // Should the text read 'view' or 'views' + var s = this.views == 1 ? "" : "s"; + + pageList.append("

"+this.title+"

"+this.views+" view"+s+"

"+this.description+"

"); + + }); + + // If we got many pages, we can load more + if(data.result.pages.length == numberOfPagesToLoad){ + // We can now receive another load event + canLoadMore = true; + } + + }); +} + +// Show edit screen for user profile +function edit(){ + + // Populate edit fields + $("#logout-token").text(localStorage.token); + + $.getJSON("https://api.telegra.ph/getAccountInfo", { + "access_token": localStorage.token + }, function(data){ + + // Check for valid data + if(!data.ok){ + alert(data.error); + return; + } + + $("input[name='author_name_edit']").val(data.result.author_name); + $("input[name='short_name_edit']").val(data.result.short_name); + $("input[name='author_url_edit']").val(data.result.author_url); + + showScreen("edit"); + + }); + +} + +// Save edited profile +function saveEdit(){ + + $.getJSON("https://api.telegra.ph/editAccountInfo", { + "access_token": localStorage.token, + "author_name": $("input[name='author_name_edit']").val(), + "short_name": $("input[name='short_name_edit']").val(), + "author_url": $("input[name='author_url_edit']").val(), + }, function(data){ + + // Check for valid data + if(!data.ok){ + alert(data.error); + return; + } + + main(); + + }); + +} + +// logout +function logout(){ + localStorage.removeItem("token"); + window.location.reload(true); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..dc4d01b --- /dev/null +++ b/style.css @@ -0,0 +1,156 @@ +* { + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +a, a:visited{ + color: #000; +} + +body{ + background-color: #eee; +} + +p{ + margin: 1em; +} + +/* Initially hide all screens, except for screen-nosupport */ +#screen-login, #screen-login-telegraph, #screen-main, #screen-edit { + display: none; +} + +.card{ + display: block; + background-color: #fff; + border-radius: 3px; + box-shadow: 0px 2px 4px #777; + padding: 1em; + margin-top: 1em; + margin-left: 1em; + margin-right: 1em; +} +a.card{ + cursor: pointer; +} +.screen{ + max-width: 600px; + margin: 1em auto; +} +.card.blank{ + background: none; + box-shadow: none; +} + +/* Main Screen */ + +#user-info{ + text-align: center; + margin: 3em; +} +#user-info > *{ + display: block; +} + +#user-name{ + font-size: 2em; +} + +#user-short{ + color: #555; + font-size: 0.8em; +} +#user-short:before{ + content: "("; +} +#user-short:after{ + content: ")"; +} + +#page-list a{ + display: block; + text-decoration: none; + transition: 300ms; +} +#page-list a:hover{ + box-shadow: 0px 4px 8px #777; + transform: translateY(-2px); +} +#page-list h1{ + margin-bottom: 0.4em; + font-size: 1.5em; +} +#page-list p{ + margin-bottom: 0.5em; +} + +#fab{ + display: block; + position: fixed; + background-color: #000; + border-radius: 48px; + width: 48px; + height: 48px; + box-shadow: 0 4px 8px #777; + z-index: 1; + cursor: pointer; + transition: 200ms; +} +#fab:hover{ + box-shadow: 0 8px 16px #777; + transform: translateY(-4px); +} + +/* Animating picture from silhouette to pencil */ +#user-image-animator{ + width: 48px; + height: 48px; + display: inline-block; + background-color: black; + border-radius: 48px; + box-shadow: 0 2px 4px #777; + cursor: pointer; + transition: 200ms; + margin-bottom: 1em; +} +#user-edit{ + position: absolute; + height: 0; + overflow: visible; + transform: translateY(-52px); + opacity: 0; + transition: 200ms; +} +#user-image{ + transition: 200ms; +} +#user-image-animator:hover{ + box-shadow: 0px 4px 8px #777; + transform: translateY(-4px); +} +#user-image-animator:hover #user-edit{ + opacity: 1; +} +#user-image-animator:hover #user-image{ + opacity: 0; +} + +/* Login screen */ +input, button{ + display: block; + width: 50%; + margin-left: 25%; + margin-top: 1em; + border-radius: 3px; + padding: 3px; + border: 1px solid #bbb; +} +button{ + width: calc(50% + 0.6em); +} + +/* Edit account screen */ +#logout-token{ + word-wrap: break-word; +} \ No newline at end of file