Skip to content

Commit 54dfce3

Browse files
PeachScriptPeachScript
committed
Merge branch 'release/0.0.1'
2 parents 86a4440 + e73af37 commit 54dfce3

File tree

11 files changed

+452
-0
lines changed

11 files changed

+452
-0
lines changed

‎.bowerrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"directory": "app/bower_components"
3+
}

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
/node_modules/*
3+
/app/bower_components/*
4+
5+
/app/styles/main.min.css
6+
/app/styles/main.css

‎app/images/logo.png‎

3.13 KB
Loading

‎app/images/logo@2x.png‎

19.2 KB
Loading

‎app/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Variables Library - Abstack Tech</title>
6+
<link rel="stylesheet" href="styles/main.min.css">
7+
<script src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
8+
<script src="bower_components/angularjs/angular.min.js"></script>
9+
<script src="bower_components/angular-zeroclipboard/src/angular-zeroclipboard.js"></script>
10+
<script src="scripts/app.js"></script>
11+
</head>
12+
<body ng-app="abstackVarLib" ng-controller="mainCtrl" backspace-focus="search">
13+
<header>
14+
Abstack Tech Variables Library
15+
<input type="text" id="search" class="search-box" placeholder="Type some keywords..." ng-model="keywords" ready-focus>
16+
</header>
17+
<ul class="word-list ng-hide" ng-show="wordsList">
18+
<li ng-repeat="word in wordsList | keywords: keywords">
19+
<h3>
20+
<button class="btn-copy" ui-zeroclip zeroclip-model="word.word" zeroclip-copied="copiedWord(word)" ng-bind="word.copyTip || 'COPY'">COPY</button>
21+
<a target="_blank" ng-href="{{ word.url?word.url: 'http://www.dict.cn/' + word.word }}" ng-bind="word.word"></a>
22+
</h3>
23+
<span class="tag-box">
24+
<a href="javascript:;" ng-repeat="tag in word.tags track by $index" ng-bind="tag" ng-click="setKeywords(tag)"></a>
25+
</span>
26+
</li>
27+
</ul>
28+
</body>
29+
</html>

‎app/json/words.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
[
2+
{
3+
"word": "settings",
4+
"url": "http://www.dict.cn/settings",
5+
"tags": ["设置", "设定", "偏好"]
6+
},
7+
{
8+
"word": "feedback",
9+
"tags": ["建议", "反馈", "投诉", "意见", "改进"]
10+
},
11+
{
12+
"word": "project",
13+
"tags": ["项目", "标", "工程"]
14+
},
15+
{
16+
"word": "dashboard",
17+
"tags": ["仪表盘", "概览", "主页", "监控"]
18+
},
19+
{
20+
"word": "redirect",
21+
"tags": ["跳转", "转到"]
22+
},
23+
{
24+
"word": "following",
25+
"tags": ["关注", "正在关注", "关心"]
26+
}
27+
]

‎app/scripts/app.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* abstackVarLib Module
3+
*
4+
* Description: main
5+
*/
6+
angular.module('abstackVarLib', ['zeroclipboard'])
7+
.config(['uiZeroclipConfigProvider', function(uiZeroclipConfigProvider) {
8+
// config ZeroClipboard
9+
uiZeroclipConfigProvider.setZcConf({
10+
swfPath: '../bower_components/zeroclipboard/dist/ZeroClipboard.swf'
11+
});
12+
}])
13+
.directive('readyFocus', ['$document', function($document){
14+
return {
15+
restrict: 'A',
16+
link: function($scope, iElm, iAttrs, controller) {
17+
$document.ready(function(){
18+
iElm[0].focus();
19+
});
20+
}
21+
};
22+
}])
23+
.directive('backspaceFocus', function(){
24+
return {
25+
restrict: 'A',
26+
link: function($scope, iElm, iAttrs, controller) {
27+
var targetObj = document.getElementById(iAttrs['backspaceFocus']);
28+
29+
iElm[0].onkeydown = function(ev){
30+
var event = ev || event,
31+
keyCode = event.keyCode;
32+
if(keyCode == 8 && targetObj){
33+
targetObj.focus();
34+
}
35+
};
36+
}
37+
};
38+
})
39+
.filter('keywords', function(){
40+
function compare(origin, target){
41+
origin = origin.join('');
42+
for(var i = 0;i<target.length;i++){
43+
if(origin.indexOf(target[i]) != -1)
44+
return true;
45+
}
46+
return false;
47+
}
48+
49+
return function(input, type){
50+
if(!type)
51+
return input;
52+
53+
var temp = [];
54+
for(var i = 0;i<input.length;i++){
55+
if(compare(input[i].tags, type.split(' ')))
56+
temp.push(input[i]);
57+
}
58+
59+
return temp;
60+
}
61+
})
62+
.controller('mainCtrl', ['$timeout', '$http', '$scope', function($timeout, $http, $scope){
63+
64+
$http.get('/json/words.json')
65+
.success(function(data){
66+
$scope.wordsList = data;
67+
});
68+
69+
$scope.setKeywords = function(tag){
70+
$scope.keywords = tag;
71+
}
72+
73+
$scope.copiedWord = function(word){
74+
word.copyTip = 'COPIED !';
75+
$timeout(function(){
76+
delete word.copyTip;
77+
}, 1500);
78+
}
79+
}]);

‎app/styles/main.less‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
@main-color: #56caf5;
2+
@deep-main-color: #46add3;
3+
@placeholder-color: #3a91b1;
4+
5+
6+
body{
7+
margin: 0;
8+
}
9+
header{
10+
padding-top: 140px;
11+
padding-bottom: 10px;
12+
font-family: "Georgia", "Tahoma", "Arial";
13+
font-size: 50px;
14+
text-align: center;
15+
color: #fff;
16+
background: url(../images/logo.png) center 30px no-repeat @main-color;
17+
text-shadow: 2px 3px 5px @deep-main-color;
18+
}
19+
/* for retina */
20+
@media only screen and (-webkit-min-device-pixel-ratio: 2),
21+
only screen and (min--moz-device-pixel-ratio: 2),
22+
only screen and (-o-min-device-pixel-ratio: 2/1),
23+
only screen and (min-device-pixel-ratio: 2){
24+
header{
25+
background-image: url(../images/logo@2x.png);
26+
background-size: 130px 80px;
27+
}
28+
}
29+
.search-box{
30+
display: block;
31+
margin: 32px auto;
32+
padding: 0 10px;
33+
width: 400px;
34+
height: 40px;
35+
font-size: 20px;
36+
color: #fff;
37+
*line-height: 40px;
38+
border: none;
39+
background-color: @deep-main-color;
40+
border-radius: 5px;
41+
outline: none;
42+
&::-webkit-input-placeholder{
43+
color: @placeholder-color;
44+
}
45+
&::-moz-placeholder{
46+
color: @placeholder-color;
47+
}
48+
}
49+
50+
.word-list{
51+
@gap: 20px;
52+
list-style: none;
53+
padding: 10px 40px;
54+
margin-left: -@gap;
55+
li{
56+
@height: 90px;
57+
float: left;
58+
margin-left: @gap;
59+
margin-bottom: 14px;
60+
width: 266px;
61+
padding: 6px 12px;
62+
height: @height;
63+
border: 1px solid @main-color;
64+
border-radius: 5px;
65+
overflow: hidden;
66+
&:hover{
67+
border-color: @deep-main-color;
68+
}
69+
h3{
70+
margin: -6px -12px 0;
71+
padding-left: 10px;
72+
font-family: "Georgia", "Tahoma", "Arial";
73+
font-size: 18px;
74+
letter-spacing: 2px;
75+
line-height: 36px;
76+
background-color: @main-color;
77+
text-shadow: 0 1px 3px @placeholder-color;
78+
a{
79+
position: relative;
80+
color: #fff;
81+
text-decoration: none;
82+
&:hover{
83+
text-decoration: underline;
84+
}
85+
&:hover:before{
86+
content: 'Click to go to dict.cn';
87+
position: absolute;
88+
z-index: 10;
89+
top: 24px;
90+
left: -5px;
91+
width: 140px;
92+
padding: 4px 10px;
93+
font-family: none;
94+
font-size: 13px;
95+
line-height: 20px;
96+
text-align: center;
97+
letter-spacing: 0;
98+
text-shadow: none;
99+
background-color: #000;
100+
opacity: 0.8;
101+
filter: alpha(opacity=80);
102+
border-radius: 5px;
103+
}
104+
}
105+
.btn-copy{
106+
float: right;
107+
padding: 0 8px;
108+
border: none;
109+
line-height: 36px;
110+
color: @placeholder-color;
111+
text-shadow: 0 1px 0 #68e4ff;
112+
background-color: #53c2eb;
113+
border-left: 1px solid #49b3d9;
114+
cursor: pointer;
115+
outline: none;
116+
&.zeroclipboard-is-hover{
117+
background-color: @main-color;
118+
}
119+
}
120+
}
121+
.tag-box{
122+
display: inline-block;
123+
margin-top: 10px;
124+
height: @height - 40;
125+
overflow: auto;
126+
&:before{
127+
content: 'Tags: ';
128+
font-size: 14px;
129+
margin-right: -2px;
130+
}
131+
a{
132+
@bgcolor: #eee;
133+
position: relative;
134+
display: inline-block;
135+
margin-left: 12px;
136+
margin-bottom: 6px;
137+
padding: 3px 6px;
138+
font-size: 13px;
139+
font-style: normal;
140+
text-decoration: none;
141+
color: #333;
142+
background-color: @bgcolor;
143+
border-top-right-radius: 3px;
144+
border-bottom-right-radius: 3px;
145+
cursor: pointer;
146+
&:hover{
147+
box-shadow: 0px 1px 3px #999;
148+
}
149+
&:before{
150+
content: '';
151+
position: absolute;
152+
top: 0;
153+
left: -20px;
154+
width: 0;
155+
height: 0;
156+
border: 10px solid transparent;
157+
border-right-color: @bgcolor;
158+
}
159+
&:after{
160+
@size: 4px;
161+
content: '';
162+
position: absolute;
163+
top: 50%;
164+
left: -2px;
165+
margin-top: -@size/2;
166+
width: @size;
167+
height: @size;
168+
background-color: #fff;
169+
border-radius: @size;
170+
box-shadow: 0 0 1px #aaa;
171+
}
172+
}
173+
}
174+
}
175+
}

‎bower.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "Abstack-variables-library",
3+
"version": "0.0.1",
4+
"homepage": "https://github.com/PeachScript/Abstack-variables-library",
5+
"authors": [
6+
"Peach <scdzwyxst@gmail.com>"
7+
],
8+
"description": "Variables library for Abstack Tech",
9+
"moduleType": [
10+
"node"
11+
],
12+
"keywords": [
13+
"Variables",
14+
"Library",
15+
"Abstack",
16+
"Tech"
17+
],
18+
"license": "MIT",
19+
"ignore": [
20+
"**/.*",
21+
"node_modules",
22+
"bower_components",
23+
"test",
24+
"tests"
25+
],
26+
"dependencies": {
27+
"angularjs": "1.2.27",
28+
"angular-zeroclipboard": "~0.3.2"
29+
}
30+
}

0 commit comments

Comments
 (0)